Открыть Электронные книги
Категории
Открыть Аудиокниги
Категории
Открыть Журналы
Категории
Открыть Документы
Категории
Пьюривал
Основы разработки веб-приложений
Серия «Бестселлеры 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
º Платформа........................................................................................ 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
Оглавление
º Интерактивность. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
Заучивание. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Плагины jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Селекторы jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Задача FizzBuzz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Упражнения в работе с массивами. . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Проект Эйлера (Project Euler). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Другие материалы по JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
º Мост . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Привет, объекты JavaScript!. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Оглавление
º Сервер. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
Оглавление
º Платформа . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Cloud Foundry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Регистрация . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Подготовка приложений к развертыванию в Сети . . . . . . . . . . . . . . . . . . . . . 235
Развертывание приложения. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .236
Получение информации о приложениях. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Обновление приложения. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Удаление приложений из Cloud Foundry. . . . . . . . . . . . . . . . . . . . . . . 240
Оглавление
º Приложение. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .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 вы найдете подробную информацию
о наших книгах.
В начале 2008 года, через шесть лет после окончания школы и работы учителем на
полставки, мне очень хотелось стать преподавателем компьютерных дисциплин на
полный день. Очень быстро выяснилось, что место преподавателя найти нелегко,
а получение хорошей работы зависит от удачи в большей степени, чем от чего-либо
еще. Ну что ж, я поступил так, как поступает любой уважающий себя академик,
столкнувшись с удручающим положением на академическом рынке труда, а имен-
но: решил повысить свою конкурентоспособность с помощью изучения разработки
веб-приложений.
Это, конечно, звучит странно. Кроме всего прочего, к тому моменту я уже около
девяти лет изучал компьютерные дисциплины и, более того, свыше шести лет учил
студентов разрабатывать программное обеспечение (ПО). Разве я не должен был
хорошо знать, как создавать веб-приложения? Похоже, что нет, так как существу-
ет определенный разрыв между практической ежедневной работой по разработке
ПО и программированием как учебной дисциплиной, изучаемой в колледжах и уни-
верситетах. Фактически мои знания по веб-разработке были ограничены HTML
и в некоторой степени CSS, который я в то время изучал самостоятельно.
Предисловие
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, однако в некоторых
случаях пришлось отклониться. Например, для текстовых строк я предпочитаю
двойные, а не одинарные кавычки в первую очередь потому, что предполагаю
Условные обозначения
ß#’
В книге применяются следующие условные обозначения.
Курсивный шрифт
Им обозначаются новые термины и понятия.
Шрифт для названий
Используется для обозначения 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
Выражения признательности
Œ#’$
Огромное спасибо ребятам из департамента информатики в Университете Се-
верной Каролины в Эшвилле за возможность провести этот курс дважды. И, ко-
нечно, спасибо студентам за терпение, поскольку материал постепенно эволюци-
онировал.
Спасибо редактору Мег Бланшетт за огромные усилия по удержанию меня
в нужном русле и, конечно, за бесконечное терпение из-за нарушения сроков. Я буду
скучать по нашей еженедельной электронной переписке!
Спасибо Саймону Сент-Лорену за множество советов в самом начале работы
и подсказки о том, что может подойти издательству O’Reilly.
Сильван Кавано и Марк Филипс внимательно прочитали каждую главу и вы-
сказывали множество очень полезных замечаний на протяжении всей работы.
Эмили Уотсон прочитала первые четыре главы и внесла очень много дельных
предложений. Майк Уилсон прочел последние четыре главы и дал бесценные тех-
нические советы. Я бесконечно благодарен всем вам и надеюсь когда-нибудь от-
платить вам тем же.
Боб Бенитс, Уилл Бласко, Дэвид Браун, Ребекка Дэвид, Андреа Фей, Эрик Хоуи,
Брюс Хауман, Джон Максвелл, Сюзан Рейсер, Бен Роузен и Вэл Скарлата прочи-
тали множество версий материала и дали много полезных рекомендаций. Я искрен-
не благодарен за потраченные вами время и усилия. Вы молодцы!
Несмотря на множество опытных рецензентов и друзей, которые просматрива-
ли материал, практически невозможно написать подобную книгу без каких-то
технических ошибок, опечаток и неверных решений. Я принимаю на себя полную
ответственность за все это.
ł
œ##
Инструмент, с которым вы будете сталкиваться чаще всего, — текстовый редактор.
Об этом необходимом элементе технологии порой незаслуженно забывают, но на
самом деле это самый важный инструмент в вашем рабочем чемоданчике, посколь-
ку это программа, с помощью которой вы взаимодействуете со своим кодом. По
скольку код формирует конкретные элементы конструкции приложения, очень
важно, чтобы было как можно проще его создавать и редактировать. К тому же вы,
как правило, будете редактировать несколько файлов одновременно, так что очень
важно, чтобы текстовый редактор предоставлял возможность быстро и просто
перемещаться по файловой системе.
В прошлом вы, вероятно, тратили много времени на написание документов
и редактирование текста в программах наподобие Microsoft Word или Google
Docs. Это не лучшие примеры редакторов, о которых мы говорим. Эти редакторы
концентрируются скорее на возможностях форматирования текста, чем на мак-
симальной простоте его редактирования. Редактор, который будем использовать
Текстовые редакторы
ß6XEOLPH7H[W
Sublime Text (или для краткости Sublime) — популярный многофункциональный
текстовый редактор, идеально подходящий для веб-разработки. Кроме этого, у него
есть преимущество кросс-платформенности, то есть он работает одинаково эффек-
тивно с Windows, Mac OS и Linux. Это платная программа, но вы можете скачать
бесплатную версию и использовать ее сколько захотите. Если этот редактор вам
понравится и вы будете пользоваться им постоянно, рекомендую оплатить лицен-
зию.
Чтобы установить Sublime, зайдите на http://www.sublimetext.com и щелкните на
ссылке Download вверху страницы. Там вы найдете программы установки для всех
основных платформ. Хотя (на момент написания книги) Sublime Text 3 находится
на бета-тестировании, я рекомендую попробовать именно его. Я использовал его
для всех примеров и скриншотов из этой книги.
#6XEOLPH7H[W
После установки и запуска Sublime Text вы увидите экран примерно такого вида,
как показано на рис. 1.3.
Текстовые редакторы
Вероятно, в первую очередь вы захотите создать новый файл. Это можно сделать
с помощью меню FileNew. Вы можете также нажать Ctrl+N в Windows и Linux либо
использовать Command+N в Mac OS. А сейчас наберите в редакторе Hello, World!
Редактор будет выглядеть так, как показано на рис. 1.4.
Вы можете изменить внешний вид окружения Sublime, зайдя в меню Preferences
Color Scheme. Попробуйте разные цветовые схемы и найдите ту, которая будет самой
подходящей для ваших глаз. На самом деле будет полезно потратить какое-то вре-
мя на исследование цветовых вариантов, поскольку вы будете проводить за работой
с редактором много часов. Можете также изменить размер шрифта через подменю
Font на вкладке Preferences, чтобы читать текст было еще удобнее.
Рис. 1.4. Sublime после открытия нового файла и введения Hello, world!
Глава 1. Рабочий процесс
Вы, наверное, заметили, что Sublime изменил название вкладки с untitled на Hello,
world!, как вы набрали. Когда будете сохранять файл, в качестве имени по умолча-
нию будет предложено название вкладки, но вы, возможно, захотите изменить его
так, чтобы он не содержал пробелов. После сохранения под другим именем назва-
ние вкладки изменится на действительное имя файла. Отмечу, что после того как
вы затем проделаете с содержимым файла что-то еще, вы увидите, что знак «×»
справа от названия вкладки изменился на кружочек — это значит, что здесь есть
несохраненные изменения.
После того как вы измените цветовую схему и сохраните файл под именем hello,
редактор будет выглядеть так, как показано на рис. 1.5.
Рис. 1.5. Sublime после изменения цветовой схемы на Solarized (light) и сохранения файла
под именем hello
$
Представьте, что вы написали с помощью текстового редактора большой фрагмент
художественной повести. Вы периодически сохраняете работу, чтобы случайно не
Контроль версий
ß*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. Рабочий процесс
## 81,;
Для Git есть графические интерфейсы, но гораздо более эффективно научиться
работать с ним с помощью командной строки. Перед тем как вы начнете учиться
Контроль версий
º’"
Очень важно помнить, что, работая в командной строке, вы всегда выполняете
команды из какой-либо папки. Первый вопрос, который вы должны задать себе,
попав в интерфейс командной строки: «В какой папке я нахожусь?» Получить
ответ можно двумя способами. Первый — использовать команду pwd, что означает
print working directory («вывести рабочую директорию» (то есть папку)). Вывод
будет выглядеть примерно так:
hostname $ pwd
/Users/semmy
hostname $ ls
Projects
ø
И наконец, вам может понадобиться создать новую папку для хранения своих
проектов, которые вы будете создавать с помощью этой книги. Для этого исполь-
зуйте команду mkdir, которая означает make directory («сделать директорию»):
hostname $ ls
Desktop Downloads Movies Pictures
Documents Library Music
hostname $ mkdir Projects
hostname $ ls
Desktop Downloads Movies Pictures
Documents Library Music Projects
hostname $ cd Projects
hostname $ ls
hostname $ pwd
/Users/semmy/Projects
## ##
Веб-разработка (и программирование в целом) — очень абстрактная форма твор-
чества. В целом это означает, что для эффективного и рационального труда вы
должны развивать абстрактное мышление. Во многом эта способность требуется
для быстрого создания ментальных моделей новых идей и структур. Одна из луч-
ших ментальных моделей, которая применяется во множестве разных ситуаций, —
древовидная диаграмма.
Древовидная диаграмма — это простой способ визуализации любого типа
иерархической структуры. Поскольку файловая система в UNIX является иерар-
хической структурой, будет естественно начать упражнения в ментальной визуа-
лизации с нее. Например, представьте себе, что папка Home (Домашняя) содержит
три другие папки: Documents (Мои документы), Pictures (Мои рисунки) и Music (Моя
музыка). Внутри папки Pictures находятся пять картинок. Внутри каталога Documents
содержится другой каталог — Projects (Проекты) (рис. 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 $ cd Projects
hostname $ pwd
/Users/semmy/Projects
Затем создадим каталог под названием Chapter1 (Глава 1)1 и просмотрим содер-
жимое, чтобы убедиться, что он тут. Затем перейдем в новую папку:
1
При работе с Git возможны трудности с выводом кириллических символов в именах
файлов и папок. Все сообщения, где есть русские символы, преобразуются в кодировку
UTF-8 по latin1. Решение проблемы описано на http://habrahabr.ru/post/74839/, но на
начальном этапе можно просто без крайней необходимости не использовать кириллические
и другие специальные символы в названиях файлов и папок. — Примеч. пер.
Глава 1. Рабочий процесс
ø!*LW
Сейчас мы можем установить контроль версий над папкой Chapter1, создав храни-
лище в Git с помощью команды git init. Git ответит нам, что создано новое пустое
хранилище:
hostname $ pwd
/Users/semmy/Projects/Chapter1
hostname $ git init
Initialized empty Git repository in /Users/semmy/Projects/Chapter1/.git/1
А сейчас снова введите команду ls, чтобы увидеть файлы, которые Git создал
в папке, и вы увидите, что там ничего нет! Это не совсем верно — здесь находится
папка .git, но мы не можем ее увидеть, так как файлы, помеченные впереди точкой
(.), считаются скрытыми. Чтобы решить эту проблему, можно использовать коман-
ду ls c включенным флагом –а (all — «все»), набрав следующее:
hostname $ ls -a
. .. .git
Нам не придется ничего делать в этой папке, так что сейчас мы можем смело ее
проигнорировать. Но со скрытыми файлами еще встретимся, так что постарайтесь
запомнить полезный флаг –a для команды ls.
!
Откроем Sublime Text (если он все еще открыт со времени чтения предыдущего
раздела, закройте его и откройте снова). Затем откройте папку, версии в которой
мы будем контролировать. Чтобы сделать это, просто выбираем папку в диалоговом
окне Open программы Sublime вместо конкретного файла. Когда вы открываете
1
Системное сообщение: «Создано пустое хранилище Git в /Users/semmy/Projects/Chap-
ter1/.git». — Примеч. пер.
Контроль версий
Чтобы создать новый файл в папке Chapter1, щелкните правой кнопкой (или
выполните Command-щелчок в Mac OS) на названии Chapter1 в файловой навига-
ционной панели, а затем выберите New File из контекстного меню. Как и ранее,
будет создан новый файл, но, когда вы сохраните его, по умолчанию будет исполь-
зована папка Chapter1. Назовем файл index.html.
После того как файл получил имя, сделайте на нем двойной щелчок и добавьте
строку Hello, World! в верхнюю часть файла (рис. 1.11).
Здесь довольно много информации! Больше всего нас интересует блок, поме-
ченный Untracked files (Неотслеживаемые файлы). Здесь перечислены файлы,
которые находятся в рабочей папке, но пока не включены в контроль версий.
Мы видим, что файл index.html здесь и он может быть зафиксирован (committed)
в хранилище Git.
ı ##
Мы заинтересованы в отслеживании изменений в файле index.html. Чтобы иметь
возможность делать это, последуем инструкциям, которые выдал Git, и добавим
файл в хранилище, используя команду git add:
hostname $ git add index.html
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
Легко забыть включить флаг –m и сообщение для коммита в процессе заливки измене-
ний в систему контроля версий. Если это произойдет, вы, скорее всего, обнаружите себя
внутри текстового редактора Vim (который обычно по умолчанию является системным
редактором). Если это так, вы можете покинуть его нажатием двоеточия (:), а затем
ввести q! и нажать Enter, чтобы выйти.
1
Системное сообщение: «От бранч-мастера. Начальный коммит. Изменения для коммита:
(используйте "git rm --cached <file>..." для отката). Новый файл: index.html». — Примеч. пер.
2
Системное сообщение: «[master (root-commit) 147deb5] Начальный коммит. 1 файл
изменен, 1 добавлен (+). Создан модуль 100644 index.html». — Примеч. пер.
3
Системное сообщение: «От бранч-мастера: нет изменений для коммита (рабочая
директория актуальна)». — Примеч. пер.
Глава 1. Рабочий процесс
$&!
Мы сделали целых два коммита проекта и можем откатить систему к их состояни-
ям в любое время. В разделе «Больше теории и практики» далее я привожу ссылку,
которая покажет вам, как откатить предыдущий коммит обратно и начать кодиро-
вание из этой точки. А сейчас изучим еще одну очень полезную команду. Мы можем
посмотреть историю коммитов, используя 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 добавление (+)». —
Примеч. пер.
Контроль версий
ø#
На всякий случай, чтобы избежать неясностей, я хотел бы подробно остановиться
на разнице между сохранением файла в текстовом редакторе и фиксированием
изменений в системе контроля версий. Когда вы сохраняете файл, по сути, вы пе-
реписываете его на диск компьютера. Это значит, что вы больше не получите до-
ступа к старой версии файла, если только редактор не предоставляет возможности
построения истории ревизий.
Фиксирование же в хранилище Git позволяет вам отслеживать все изменения,
которые вы сделали с последнего раза, когда добавляли новую версию файла. Это
значит, что вы всегда можете вернуться к предыдущей версии, если обнаружили,
что сделали трудноисправимую ошибку в текущей версии файла.
В данный момент у вас, вероятно, сложилось впечатление, что Git сохраняет код
как линейную последовательность коммитов. Сейчас это действительно так: мы
изучили ту часть Git, которая позволяет создать такое хранилище, где один коммит
следует строго за другим коммитом. Мы можем назвать первый коммит родитель-
ским, а второй — дочерним. Хранилище Git с четырьмя коммитами показано на
рис. 1.12.
Следует отметить, однако, что коммит, по сути, — это серия инструкций по
обновлению вашего проекта до следующей версии. Другими словами, Git на самом
деле вовсе не сохраняет каждый раз содержимое каталога полностью, как если бы
вы скопировали одну папку на компьютере в другую. Вместо этого он просто фик-
сирует, что именно должно быть изменено: например, коммит может хранить ин-
формацию вроде «добавь строку с текстом Goodbye, World!» вместо сохранения
всего файла. Так что лучше представлять себе хранилище Git как серию инструк-
ций. Вот почему мы пишем сообщения для коммитов в форме императива — вы
можете представлять себе коммит как последовательность указаний для перевода
проекта из одного состояния в другое.
Почему все это так важно? Дело в том, что хранилище Git может иметь гораздо
более сложную структуру. Коммит может иметь более одного «ребенка» и факти-
чески более одного «родителя». На рис. 1.13 показан пример более сложного
хранилища Git, где иллюстрируются оба этих случая.
Глава 1. Рабочий процесс
Хотя мы еще не изучили команд Git для создания структуры наподобие этой,
вам придется поближе познакомиться с ними, если вы захотите продолжить путе-
шествие по миру веб-разработки. Я уверен, вы сделали вывод о необходимости
составления визуальной схемы хранилища Git, чтобы не запутаться при возраста-
нии сложности.
Ø#
Последний инструмент, с которым мы будем регулярно сталкиваться, — браузер.
Прежде чем изучать создание веб-приложений, которые будут запускаться в браузере,
Подведем итоги
Ø$
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, понадобятся долгие
годы, но вы уже узнали достаточно, чтобы начать. По моему опыту, эффективным
Глава 1. Рабочий процесс
ß$ *LW
Git — невероятно мощный инструмент. Мы только слегка коснулись его возмож-
ностей. К счастью, Скотт Чейкон написал Pro Git (Apress, 2009) — прекрасную
книгу, где подробно рассматривается множество аспектов Git. В первых двух гла-
вах описывается несколько функций, которые помогут вам более эффективно
продвигаться в изучении материала этой книги, включая откат к версиям, предва-
рительно зафиксированным в хранилище.
В третьей главе книги Чейкона детально описана концепция бранчей. Бранчи
несколько выходят за рамки моей книги, но я упоминал о них ранее. Рекомендую
как следует изучить эту тему, так как возможность быстро и просто разветвить
хранилище — одна из лучших функций Git.
*LW+XE
GitHub — это онлайн-сервис, в котором находится ваше хранилище Git. Если вы
храните код открыто (open source), оно бесплатно. Если же хотите создать защи-
щенное хранилище Git, самый дешевый тарифный план — $7 в месяц. Я рекомен-
дую начать с бесплатного плана и исследовать хранилище Git на GitHub.
Страница помощи GitHub поможет вам настроить аккаунт GitHub и связать
его с вашим хранилищем Git. Там также находятся тонны полезной информации
и о Git, и о GitHub. Пользуйтесь ею, чтобы начать действовать.
ø
+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.
Очень полезно постараться выучить клавиатурные сокращения, так как это поможет
работать быстрее и рациональнее. Для открытия файла в Chrome вам нужна команда
Command+O, если вы работаете в Mac. В Windows эта же команда — Ctrl+O.
œS!D#
А сейчас внесем небольшие изменения, добавив абзац текста Lorem ipsum — это
простой текстовый наполнитель, который мы можем заменить нужным нам
Привет, HTML!
1
В Интернете много сервисов для генераторов текста lorem ipsum, в том числе на русском
языке. Используя кириллицу, при сохранении файла выставляйте кодировку UTF-8,
иначе символы могут отображаться некорректно. — Примеч. пер.
Глава 2. Структура
#
Мы познакомились с некоторыми примерами основных тегов и комментариев, что
же еще мы можем включить в разметку?
Сначала можем расширить тег <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>
<!--
Атрибут href указывает, куда идти при щелчке на ссылке
-->
<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>
<!doctype html>
<html>
<head>
<title>Примеры списков</title>
</head>
<body>
<h1>Примеры списков!</h1>
<!-- Мы заключаем ссылки внутри тегов ul -->
<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!
несколько раз. Для начала добавьте несколько абзацев текста 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>
<li>Элемент списка<span>2</span></li>
<li>Элемент списка<span>3</span></li>
</ul>
</body>
</html>
Использование валидации HTML для выявления проблем
$+70/
’#’’
Как я уже сказал в предыдущем разделе, текстовое содержание HTML-документа
обычно заключено в пару тегов. Открывающий тег выглядит как <html>, а закрыва-
ющий — как </html>. Точное имя тега означает тип элемента DOM, который он
собой представляет.
Если ваш документ становится слишком длинным, могут возникнуть некото-
рые проблемы. Например, представьте следующий HTML-документ, являющий-
ся определенным обобщением предыдущего примера, с несколькими новыми
тегами:
<!doctype html>
<html>
<head>
Рис. 2.5. Дерево, представляющее схему DOM
Глава 2. Структура
Использование валидации HTML для выявления проблем
Вы, наверное, заметили вкладку Validate by Direct Input. Щелкнув на ней, мы мо-
жем вырезать и вставить наш HTML-код в появившееся текстовое поле. После
вставки кода нужно нажать большую кнопку Check.
Начнем с примера с Lorem ipsum, приведенного ранее. Если он не содержит
никаких ошибок, мы увидим что-то похожее на рис. 2.7.
Рис. 2.7. Валидатор W3C HTML после проверки примера с Lorem ipsum
Использование валидации HTML для выявления проблем
Валидируя HTML, вы, скорее всего, получите три предупреждения, даже если ошибок
нет. Первое из них сообщает, что валидатор использует правила для проверки HTML5.
Несмотря на то что стандарт HTML5 относительно стабилен, в нем все же могут быть
изменения, о чем и уведомляет это сообщение.
Другие два относятся к кодировке символов и в данный момент могут быть проигнори-
рованы. Если вам интересно, одно из предупреждений содержит ссылку на обучающий
материал по кодировке символов, который научит вас изменять кодировку HTML-доку-
мента.
$PD]HULI¿F
В оставшейся части главы мы с вами создадим HTML для учебного веб-приложе-
ния. Таким образом мы убьем сразу двух зайцев: опробуем на настоящем проекте
рабочий процесс, изученный в предыдущей главе, а также рассмотрим еще несколь-
ко важных тегов HTML и отображаемых ими элементов.
#
Учебное приложение называется Amazeriffic, от слов amazing — «изумительный»
и terrific — «невероятный». Это название, конечно, немного глуповато, но не хуже
названия любой другой компании, размещающейся в наши дни в Кремниевой до-
лине. Предназначение продукта Amazeriffic состоит в отслеживании и категоризации
набора задач (по сути, это список необходимых дел). Далее в этой книге мы и в самом
деле поработаем над реализацией проекта, похожего на этот, но пока не освоимся
достаточно с HTML, сконцентрируемся на главной странице продукта. Страница,
которую мы создадим, будет похожа на рис. 2.10.
Помните, что HTML задает структуру документа. Это значит, что, даже если
мы видим здесь множество стилистических элементов (разные шрифты, цвета
и даже верстка элементов), по большей части их следует игнорировать, так как
к HTML они не имеют никакого отношения. Пока мы с вами концентрируемся
исключительно на структуре документа.
Amazeriffic
Рис. 2.10. Страница Amazeriffic, которую мы создадим в течение этой и последующих глав
Œ’#!$&
#
После идентификации всех структурных элементов нужно продумать, как они
будут сочетаться друг с другом. Чтобы сделать это, построим древовидную диа-
грамму для структуры, которая определит содержимое разных элементов. На рис. 2.12
показано древовидное представление возможной структуры.
Глава 2. Структура
ł’#
Теперь, когда у нас есть древовидное представление страницы (как в голове, так
и на бумаге), очень легко написать код HTML, если мы знаем теги, необходимые
для всех элементов на странице. Поскольку вы еще не видели некоторые теги,
которые здесь упомянуты, я буду объяснять их назначение по ходу дела.
Прежде чем что-либо делать, создадим каталог для хранения проекта. Если вы
следовали инструкциям, приведенным в главе 1, у вас уже есть папка Projects в до-
машней папке (если вы в Mac OS или Linux) либо в каталоге Documents (если ра-
ботаете в Windows). Перейдем в эту папку из командной строки Tеrminal application
в Mac OS или из Git Bash в Windows. Используем команду cd:
hostname $ cd Projects
hostname $ ls
Amazeriffic
hostname $ cd Amazeriffic
Таким образом, сейчас мы находимся в новой папке проекта (в чем можем убе-
диться с помощью команды pwd). Следующая очень важная задача — поместить эту
папку в систему контроля версий. Создадим проект Git с помощью команды git
init:
hostname $ git init
Initialized empty Git repository in /Users/semmy/Projects/Amazeriffic/.git/
Сохраните файл и еще раз откройте страницу в браузере. Сделав это, увидите
нечто похожее на рис. 2.13.
Проделав все это, можем выполнить наш первый коммит. Перейдите к команд
ной строке. Сначала проверьте статус рабочей папки, а затем добавьте и зафикси-
руйте в системе контроля версий файл index.html:
hostname $ git status
# On branch master
#
# Initial commit
#
# Untracked files:
# (use "git add <file>..." to include in what will be committed)
Amazeriffic
#
# index.html1
hostname $ git add index.html
hostname $ git status
# On branch master
#
# Initial commit
#
# Changes to be committed:
# (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». — Примеч. пер.
Глава 2. Структура
Ссылки в элементе 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. Он
содержит текстовое описание изображения. Это сделано для обеспечения доступ-
ности нашей страницы для слабовидящих пользователей, которые часто применя-
ют программы для чтения содержимого экрана при пользовании Интернетом.
На этом этапе неплохо будет прогнать код через валидатор и убедиться, что вы
ничего случайно не пропустили. Если все хорошо, сделайте еще один коммит в наше
хранилище 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>
Больше теории и практики
Ø$
В коде Amazeriffic я оставил несколько ошибок. Рекомендую вам исправить их
и заставить код работать настолько хорошо, насколько вы сможете. Помните: если
Глава 2. Структура
##
Нарисуйте древовидную диаграмму для следующего HTML-документа. Мы еще
раз используем этот документ в качестве практической задачи в конце глав 4 и 5:
<!doctype html>
<html>
<head>
</head>
<body>
<h1>Привет!</h1>
<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. Я рекомендую углубленно изучить документацию
и расширенные возможности.
ø$
&66
Чтобы сделать первые шаги, начнем с простого HTML-примера, похожего на на-
чальные упражнения в предыдущей главе. Откройте командную строку и создайте
каталог под названием Сhapter3 (Глава 3) в папке Projects.
А сейчас запустите Sublime Text и откройте папку Chapter3 так, как мы это де-
лали в предыдущей главе. Создайте следующий HTML-файл и сохраните его в этой
папке как index.html:
<!doctype html>
<html>
<head>
<title>Мое первое веб-приложение</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Всем привет!</h1>
<p>Это абзац.</p>
</body>
</html>
ı#
Файл CSS — это коллекция наборов правил, а набор правил — это просто ряд ука-
заний относительно стилевого оформления, которые применяются к какому-либо
виду элементов в DOM (как вы помните, это иерархическая система объектов
в HTML-документе). Набор правил состоит из селектора — это может быть, на-
пример, название тега, открывающей фигурной скобки, списка правил и закрыва-
ющей фигурной скобки. Каждое правило состоит из определенного свойства,
после которого следуют двоеточие, значение этого свойства (или список значений,
разделенных пробелами), после чего ставится точка с запятой, например:
body {
width: 800px;
background: lightcyan;
color: #ff0000;
}
входят три правила: первое определяет значение свойства 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; /* Устанавливаем красный цвет для элементов*/
}
##’
В большинстве своем элементы HTML отображаются двумя способами. Пер-
вый — внутристрочный, который применяется, например, к элементам span. Это
значит, кроме всего прочего, что содержимое тега будет появляться на той же стро-
ке, что и окружающие его элементы:
Глава 3. Стиль
<div>
Этот абзац и это <span>слово</span> отображаются внутри строки. Эта
<a href="http://www.example.com">ссылка</a> тоже отображается внутри строки.
</div>
Если мы добавим этот элемент в тег body в нашем index.html, то страница будет
отображаться, как показано на рис. 3.3.
Рис. 3.4. Пример блочного элемента, находящегося внутри другого блочного элемента
Привет, CSS!
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.
ø#
Самый важный аспект в CSS — эффективное использование селекторов. Мы уже
видели базовый тип селекторов, в качестве которых используется название тега —
для применения стиля выбираются все теги с таким именем. Например, рассмотрим
следующий HTML:
Селекторы
<body>
<h1>Привет!</h1>
<p>Это абзац.</p>
<p>Это второй абзац.</p>
</body>
Первый набор правил оформляет элемент h1, а второй — оба элемента p. Во мно-
гих случаях нам будет требоваться именно это. Однако в других мы можем захотеть
применить к первому и второму абзацам разные стили.
#
В главе 2 мы уже видели, что можно добавить атрибут class к тегам <div>, чтобы
отличать один от другого. На самом деле мы можем добавить класс к любому эле-
менту DOM. Например, можем переписать предыдущий HTML следующим обра-
зом:
<body>
<h1>Привет!</h1>
<p class="first">Это абзац.</p>
<p class="second">Это второй абзац.</p>
</body>
типа элементов (как обычно и происходит), то мы можем опустить имя тега и прос-
то использовать класс:
.first {
color: red;
margin: 10px;
padding: 20px;
}
Элементу а может быть присвоен стиль точно так же, как любому другому эле-
менту DOM, — с помощью CSS. Например, мы можем создать файл CSS, который
изменяет цвета всех ссылок:
a {
color: cornflowerblue;
}
В этом коде visited — пример псевдокласса CSS для элемента a. Он ведет себя
почти так же, как и обычный класс, и мы можем присвоить элементам стили с его
помощью, как будто он является обычным классом. Главное отличие состоит в том,
что браузер самостоятельно добавляет этот класс.
Основной случай использования псевдоклассов CSS — изменение способа
отображения ссылки после того, как пользователь наводит на нее указатель мыши.
Этого можно достичь с помощью псевдокласса hover для элемента a. В следующем
примере мы изменяем предыдущий пример так, чтобы ссылка становилась подчерк
нутой, только когда пользователь наводит на нее указатель мыши:
a {
color: cornflowerblue;
text-decoration: none; /* убираем подчеркивание по умолчанию */
}
Селекторы
a:visited {
color: tomato;
}
a:hover {
text-decoration: underline;
}
Ø##
По мере разрастания древовидной диаграммы DOM появляется необходимость
в более сложных селекторах. Рассмотрим, например, такой HTML:
<body>
<h1>Привет!</h1>
<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>
<li>Элемент списка <span class="number">2</span></li>
<li>Элемент списка <span class="number">3</span></li>
</ul>
</body>
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;
}
&!’
Мы познакомились с элементами, влияющими на базовый стиль элементов DOM.
Но существуют и другие, более общие свойства, которые влияют на всю компонов-
ку страницы относительно единичного элемента. Эти свойства значительно рас-
ширяют возможности разработчика в части управления расположением элементов
на странице. Одно из самых часто используемых свойств — float. Это свойство
может помочь нам создать более гибкие компоновки, чем статичная разметка, ко-
торую HTML создает автоматически.
Свойство элементов DOM под названием float может иметь значения left
и right. Оно устанавливает элемент вне рабочего потока (согласно которому, как
правило, элементы располагаются сверху вниз один за другим) и выравнивает его
по левой или правой стороне элемента-контейнера при условии, что есть достаточ-
но места, чтобы это сделать. Например, рассмотрим такой фрагмент HTML:
<body>
<main>
<nav>
<p><a href="link1">Ссылка 1</a></p>
<p><a href="link2">Ссылка 2</a></p>
<p><a href="link3">Ссылка 3</a></p>
<p><a href="link4">Ссылка 4</a></p>
</nav>
<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.
</p>
</main>
</body>
В этом примере элементы nav и p находятся внутри элемента main. Мы также со-
здали отдельный элемент p для каждой ссылки, потому что хотим, чтобы элементы
отображались как блочные (каждая на отдельной строке). Без присвоения им стилей
эти элементы будут располагаться друг за другом вертикально (рис. 3.7).
А сейчас попробуем применить к этому HTML следующий CSS:
main {
width: 500px;
margin: auto;
Селекторы
background: gray;
}
nav {
/* Уберите пометку комментария со следующей строки, если хотите иметь черную гра-
ницу */
/* border: 3px solid black; */
width: 200px;
float: right;
}
p {
margin: 0; /* Ноль от границы по умолчанию */
}
Результат будет похож на рис. 3.8.
Так произошло потому, что сумма пикселов в элементе main больше его ширины.
Мы можем исправить это, уменьшив ширину с учетом двойной величины отступа
(так как правый и левый отступы равны 10 пикселам). В результате CSS будет
выглядеть так:
Глава 3. Стиль
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>
<p><a href="link1">Ссылка 1</a></p>
<p><a href="link2">Ссылка 2</a></p>
<p><a href="link3">Ссылка 3</a></p>
<p><a href="link4">Ссылка 4</a></p>
</nav>
<main>
<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.
</p>
</main>
<footer>
<p>Это подвал</p>
</footer>
</body>
выбирает все элементы DOM. Он также устанавливает для фона элемента разные
оттенки серого цвета (рис. 3.11):
* {
margin: 0;
padding: 0;
}
nav {
float: left;
background:darkgray;
}
main {
background:lightgray;
}
footer {
background:gray;
}
Рис. 3.11. Обратите внимание: подвал находится под секцией main, вместо того чтобы
располагаться снизу всего содержимого страницы
ł
В прошлом работа с нестандартными шрифтами на сайтах была очень проблема-
тичной, потому что вы были ограничены теми из них, которые имелись на компью-
терах ваших пользователей. Веб-шрифты значительно упростили эту задачу, так
как вы можете запрашивать их прямо из Интернета, когда в них возникает необхо-
димость. В Google сейчас хранится множество нестандартных шрифтов, использо-
вать которые очень просто.
Вы можете начать с домашней страницы Google Fonts (рис. 3.13). Здесь мы
видим длинный список шрифтов и сразу можем просмотреть их отображение.
В этом примере мы используем шрифт, который называется Denk One. Когда
я зашел на домашнюю страницу Google Fonts, это был самый первый шрифт в спис-
ке. Чтобы использовать этот шрифт, нажмите кнопку Quick-use (Быстрое исполь-
зование) — это одна из кнопок, расположенных слева от большой синей кнопки
Add to Collection.
Нажав ее, мы увидим инструкции по использованию шрифта на нашей страни-
це. Нужно добавить тег <link> в секцию head HTML. Если мы используем более
ранний пример, то можем просто скопировать и вставить тег <link> со страницы
быстрого использования или самостоятельно написать следующее:
<head>
<title>Amazeriffic</title>
<!-- Вставим пустую строку для удобства логического разделения -->
<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>
Работа со шрифтами
HTML допускает применение как одинарных ('), так и двойных (") кавычек для ограни-
чения строк и значений. В примерах в этой книге я старался придерживаться использо-
вания двойных кавычек, но в скопированном и вставленном коде Google видим одинар-
ные. Поскольку они эквивалентны друг другу, можете исправить их на двойные или
оставить одинарными, значения это не имеет.
1
На рисунке показаны шрифты, выбранные с применением фильтра Script:Cyrillic
(находится на панели слева, значение по умолчанию — Latin). Большинство кириллических
шрифтов, разумеется, поддерживают латинский алфавит, но, к сожалению, не наоборот. —
Примеч. пер.
Глава 3. Стиль
ß
С одним спорным инструментом, который называется сбросом CSS, вы будете
сталкиваться довольно часто.
Вспомните «плавающий» пример, когда мы убирали поля по умолчанию и отсту-
пы в тегах абзацев? Оказывается, разные браузеры имеют разные базовые настройки
CSS, в результате чего отображение стиля в этих браузерах может несколько разли-
чаться. Сброс CSS (CSS reset) был разработан для удаления всех браузерных настро-
ек по умолчанию. Самый известный инструмент создал Эрик Мейер.
Почему я назвал сброс CSS спорным? По нескольким причинам. Одна из них —
веб-доступность. Сброс настроек может, к примеру, вызывать проблемы у людей,
которые управляют навигацией с помощью клавиатуры. Еще одна причина — про-
изводительность. Поскольку в инструментах часто используется универсальный
селектор (*), они могут серьезно перегружать сайт. И наконец, эти инструменты
означают огромное количество лишней работы, потому что на деле довольно часто
браузерные настройки полностью соответствуют вашим нуждам.
В то же время я думаю, что сброс — отличный инструмент с точки зрения педа-
гогики, вот почему я рассказываю о нем здесь. Он заставляет новичков в точности
указывать, какими они хотят видеть отдельные аспекты страницы, а не полагаться
на значения в браузере по умолчанию. Поскольку я предполагаю, что вы являетесь
новичком в CSS, так как читаете сейчас эту книгу, то рекомендую вам поупраж-
няться со сбросами.
Чтобы сделать объяснение более понятным, я включу инструмент сброса в от-
дельную таблицу стилей и добавлю дополнительный элемент link в мой HTML.
Мы можем скопировать сброс Эрика Мейера в отдельный файл reset.css и связать
его с нашим HTML:
Глава 3. Стиль
<head>
<title>Пример 8 — Использование сброса CSS</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<head>
<title>Пример 8 — Использование сброса CSS</title>
<link href="reset.css" rel="stylesheet" type="text/css">
</head>
Сейчас, перезагрузив страницу, мы увидим нечто похожее на рис. 3.16.
Рис. 3.16. Простая страница, где с помощью сброса удалены все стили по умолчанию
$&66/LQW’#’’
#
Как и в случае HTML, очень неплохо иметь инструмент, который поможет нам
выявлять потенциальные проблемы с CSS. Например, можете ли вы заметить
ошибку в этом примере?
body {
background: lightblue;
width: 855px;
margin: auto;
h1 {
background: black;
color: white;
}
p {
color: red;
margin: 10px
padding: 20px;
}
Глава 3. Стиль
Если вы нашли ее, получите тройку с плюсом, потому что в этом примере целых
две ошибки! Думаю, отсутствие закрывающей скобки после набора правил для body
бросается в глаза сразу. Но есть и еще одна.
Вы, наверное, нашли ее, посмотрев внимательно еще раз. Но если нет, обратите
внимание на набор правил для элемента p. После свойства margin пропущена точка
с запятой.
Как и HTML-валидатор, CSS Lint — это инструмент, который может помочь
выявить потенциальные проблемы с кодом. Как и онлайн-валидатор W3C HTML,
он не требует установки на компьютер какого-либо программного обеспечения.
Просто зайдите на страницу http://csslint.net (она показана на рис. 3.17), а затем
скопируйте и вставьте туда CSS.
CSS Lint дает несколько больше предупреждений, чем инструмент для HTML,
изученный нами в главе 2, но здесь есть опции, позволяющие настроить уровень
предупреждений. Вы можете увидеть эти опции, щелкнув на стрелке вниз справа
на большой кнопке LINT! на главной странице. Опции разбиты на категории соглас-
но причинам предупреждений. Например, опция Disallow universal selector (Запрещать
универсальные селекторы) находится в категории Performance (Производитель-
ность). Это значит, что если вы готовы допустить чуть более медленную загрузку
вашей страницы ради какой-то особенной функциональности CSS, то отключаете
эту опцию и предупреждаете Lint об этом.
Обычно я оставляю все опции в CSS Lint выбранными, но вы можете настроить
и свои варианты. Я бы рекомендовал не выключать ни одну из них, а, получив
предупреждение, уделить немного времени поиску в Google, чтобы разобраться
Взаимодействие и решение проблем с Chrome Developer Tools
Œ
&KURPH’HYHORSHU
7RROV
В абсолютно любом программном обеспечении очень часто наблюдается ситуация,
когда все идет совсем не так, как надо. При использовании CSS это чаще всего
означает, что страница выглядит в браузере совершенно иначе, чем вы ожидали,
а в чем проблема — непонятно. К счастью, браузер Chrome включает в себя отлич-
ный набор инструментов, которые помогут решить проблемы как с CSS, так
и с HTML.
Начнем с открытия файла margin_border_padding.html в Chrome. Затем откройте
меню View, выберите подменю Developer и щелкните на опции Developer Tools1. В ре-
зультате внизу страницы откроются Инструменты разработчика Chrome. Если вклад-
ка Elements вверху панели неактивна, щелкните на ней — таким образом вы увиди-
те нечто похожее на рис. 3.18.
1
На сегодняшний момент: кнопка панели Chrome в правом верхнем углуTools (Инст
рументы)Developer Tools (Инструменты разработчика) или сочетание клавиш
Ctrl+Shift+I. — Примеч. пер.
Глава 3. Стиль
Рис. 3.19. Главный элемент div выделен, и вы можете видеть соответствующий ему набор правил
каждого из правил. Вы можете снять их, отменив таким образом какое-либо пра-
вило. Если возникли какие-то проблемы с вашим CSS, очень часто полезно по
смотреть на эту вкладку, чтобы убедиться, что ожидаемые вами правила действи-
тельно применяются. Вы можете посмотреть, как правила отображаются на панели
разработчика Chrome, на рис. 3.19.
Но это еще не все! Вы можете напрямую манипулировать правилами, щелкнув
на каком-то из них и введя для него новое значение. Вы можете даже добавить
новые правила прямо здесь, но помните, что изменения не отразятся на вашем
CSS-файле. Так что, если вы найдете решение для применения стиля с помощью
этого окна, вам нужно вернуться в Sublime и включить этот стиль в CSS.
Вы, наверное, уже пробовали манипулировать с отступами, границами и поля-
ми, изменяя код. Попробуйте проделать аналогичные действия на вкладке Elements
на панели разработчика. Вы увидите, что намного проще попробовать что-то и тут
же наблюдать визуальный эффект. Но помните, что после обновления страницы
все изменения будут потеряны и Chrome снова будет отображать страницу, соот-
ветствующую вашим HTML- и CSS-файлам.
ø$PD]HULI¿F
А сейчас изучим все это на примере. В предыдущей главе мы составили структуру
для домашней страницы приложения, которое называлось Amazeriffic. Финальный
вариант HTML, определяющего структуру страницы, выглядел так:
<!doctype html>
<html>
<head>
<title>Amazeriffic</title>
</head>
<body>
<header>
<h1>Amazeriffic</h1>
<nav>
<a href="#">Войти</a> |
<a href="#">ВиО</a> |
<a href="#">Техподдержка</a>
</nav>
</header>
<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>