Стивен Хольцнер
HTML5
5-е издание
“10
минут
ЯЛ/И5
HTML5
за 10 минут
5-е издание
Стивен Хольцнер
ВИЛЬЯМС

Издательский дом “Вильямс”
Москва ♦ Санкт-Петербург ♦ Киев
2011
ББК 32.973.26-018.2.75
Х75
УДК 681.3.07
Издательский дом “Вильямс”
Зав. редакцией С.Н. Тригуб
Перевод с английского и редакция И.В. Берштейна
По общим вопросам обращайтесь в Издательский дом “Вильямс” по адресу:
info@williamspublishmg.com, http://www.williamspublishing.com
Хольцнер, Стивен.
Х75 HTML5 за 10 минут, 5-е изд. : Пер. с англ. — М. : ООО
“И.Д. Вильямс”, 2011. — 240 с. : ил. — Парал. тит. англ.
ISBN 978-5-8459-1745-4 (рус.)
ББК 32.973.26-018.2.75
Все названия программных продуктов являются зарегистрированными торго-
выми марками соответствующих фирм.
Никакая часть настоящего издания ни в каких целях не может быть воспроиз-
ведена в какой бы то ни было форме и какими бы то ни было средствами, будь то
электронные или механические, включая фотокопирование и запись на магнитный
носитель, если на это нет письменного разрешения издательства Sams Publishing.
Authorized translation from the English language edition published by Sams
Publishing, Copyright © 2011 by Pearson Education, Inc.
All rights reserved. No part of this book shall be reproduced, stored in a retrieval
system, or transmitted by any means, electronic, mechanical, photocopying, recording,
or otherwise, without written permission from the publisher.
Russian language edition published by Williams Publishing House according to the
Agreement with R&I Enterprises International, Copyright © 2011
Научно-популярное издание
Стивен Хольцнер
HTML5 за 10 минут
5-е издание
Литературный редактор ИЛ. Попова
Верстка МЛ. Удалов
Художественный редактор Е.П. Дынник
Корректор ИЛ. Гордиенко
Подписано в печать 30.06.2011. Формат 84x108/32.
Гарнитура Times. Печать офсетная.
Усл. печ. л. 12,6. Уч.-изд. л. 6,71. Тираж 1500 экз. Заказ № 25952.
ООО “И. Д. Вильямс”, 127055, г. Москва, ул. Лесная, д. 43, стр. 1
Отпечатано по технологии CtP в ОАО “Первая Образцовая типография”,
обособленное подразделение “Печатный двор”.
197110, Санкт-Петербург, Чкаловский пр., 15.
ISBN 978-5-8459-1745-4 (рус.)
ISBN 978-0-672-33333-0 (англ.)
© Издательский дом “Вильямс”, 2011
©by Pearson Education, Inc., 2011
Оглавление
Введение	14
Урок 1. Основы HTML5	19
Урок 2. Рисование с помощью элемента
управления Canvas	27
Урок 3. Перетаскивание средствами HTML5	51
Урок 4. Элементы управления веб-формами	73
Урок 5. Внутристрочное редактирование	97
Урок 6. Обращение к предыстории браузера	121
Урок 7. Обмен сообщениями между документами	143
Урок 8. Применение аудиовизуальной информации	165
Урок 9. Сохранение содержимого веб-страниц	187
Урок 10. Новые элементы HTML5	211
Предметный указатель	235
Содержание
Введение	14
Об этой книге	14
Необходимые средства для изучения HTML5	16
От издательства	18
Урок 1. Основы HTML5	19
Версия HTML5	19
Рисование с помощью элемента управления Canvas	20
Перетаскивание	21
Получение данных с помощью новых элементов
управления веб-формами	22
Оперативная правка веб-страниц	22
Запоминание предыстории браузера	22
Обмен сообщениями между документами	23
Поддержка аудиовизуальной информации	23
Использование возможности сохранять содержимое
веб-страниц	24
Применение новых элементов	24
Урок 2. Рисование с помощью элемента управления
Canvas	27
Общее представление об элементе управления Canvas	27
Представление о прикладном программном интерфейсе
элемента управления Canvas	29
Стилевое оформление	30
Установка стилей рисования линий	30
Отбрасывание теней	30
Рисование прямоугольников	31
Рисование сложных форм	31
Рисование текста	32-
Рисование изображений	32
Выполнение преобразований	33
Пример применения элемента управления Canvas	33
Рисование прямоугольников	35
Рисование штриховых рисунков	37
Содержание
7
Заполнение штриховых рисунков	39
Рисование кривых Безье	41
Рисование кривых второго порядка	42
Рисование дуг	43
Рисование текста	45
Полный исходный код примера HTML-документа
canvas.html	46
Урок 3. Перетаскивание средствами HTML5	51
Общее представление о перетаскивании	51
Представление о прикладном программном интерфейсе
перетаскивания	54
Атрибут draggable	54
Атрибут ondragenter	55
Атрибут ondragover	55
Атрибут ondrop	56
Атрибут ondragstart	56
Атрибут ondragend	56
Объект dataTransfer	57
Пример реализации перетаскивания	57
Стилевое оформление перетаскиваемых и целевых
элементов	60
Реализация начала операции перетаскивания	62
Разрешение перетаскиваемым элементам входить в
целевые элементы	64
Разрешение опускать перетаскиваемые элементы на
определенные целевые элементы	65
Обработка событий опускания одних элементов на
другие	67
Завершение операций опускания	68
Полный исходный код примера HTML-документа
draganddrop.html	69
Урок 4. Элементы управления веб-формами	73
Общее представление об элементах управления
веб-формами	74
Представление о прикладном программном интерфейсе
элементов управления веб-формами	77
Пример создания веб-форм	83
8
Содержание
Создание элемента управления, предоставляемого
по умолчанию	84
Создание элемента управления вводом веб-адреса	85
Создание элемента управления вводом адреса
электронной почты	86
Создание элементов управления вводом пределов и
числовых значений	88
Создание элементов управления вводом даты и времени 90
Создание элемента управления выбором цвета	91
Создание элемента управления запросом на поиск	93
Полный исходный код примера HTML-документа
webforms.html	94
Исходный код программы РНР, выполняемой на
стороне сервера	96
Урок 5. Внутристрочное редактирование	97
Общее представление о внутристрочном
редактировании	97
Атрибут contenteditable, делающий редактируемыми
отдельные элементы	98
Атрибут designmode, делающий редактируемыми
документы	98
Атрибут spellcheck, активизирующий проверку
орфографии	99
Пример внутристрочного редактирования
в элементе <div>	99
Ввод кнопки выделения текста полужирным	101
Ввод кнопки выделения текста курсивом	104
Ввод кнопки выделения текста подчеркиванием	105
Ввод кнопки добавления ссылки	107
Ввод кнопки для показа исходного текста	109
Проверка орфографии	112
Полный исходный код примера HTML-документа
editdiv.html	114
Пример внутристрочного редактирования
в элементе <if rame>	115
Ввод кнопок в HTML-документ editiframe.html	117
Полный исходный код примера HTML-документа
editif rame. html	119
Содержание
9
Урок 6. Обращение к предыстории браузера Общее представление о предыстории браузера Представление о прикладном программном интерфейсе предыстории браузера Атрибут window.history.length Функция window.history.back() Функция window.history.forwardQ Функция window.history.go([delta]) Функция window.history.pushState(data, title [, url ]) Функция window.history.replaceState(data, title [, url ]) Атрибут window.onpopstate Пример обращения к предыстории браузера Ввод кнопки Назад Ввод кнопки Вперед Ввод кнопки Перейти Получение протяженности предыстории браузера Размещение данных в предыстории Извлечение данных из предыстории Полный исходный код примера HTML-документа pophistory. html	121 121 123 123 123 124 124 124 125 125 125 126 129 131 134 135 138 140
Урок 7. Обмен сообщениями между документами Общее представление об обмене сообщениями Представление о прикладном программном интерфейсе обмена сообщениями Функция postMessage() Событие onMessage Атрибут event.data Атрибут event.origin Атрибут event.source Создание страницы parent.html для примера межоконного обмена сообщениями Отправка сообщений в режиме межоконного обмена Создание страницы child.html для примера межоконного обмена сообщениями Прием сообщений в режиме межоконного обмена Полный исходный код HTML-страницы parent.html Полный исходный код HTML-страницы child.html Создание страницы domainparent.html для примера междоменного обмена сообщениями	143 143 146 146 147 147 147 147 148 149 151 152 154 155 156
10
Содержание
Отправка сообщений в режиме междоменного обмена	157
Создание страницы domainchild.html для примера
междоменного обмена сообщениями	159
Прием сообщений в режиме междоменного обмена 161
Полный исходный код HTML-страницы
domainparent. ht ml	162
Полный исходный код HTML-страницы
domainchild.html	163
Урок 8. Применение аудиовизуальной информации	165
Общее представление об управлении воспроизведением
видеозаписей на веб-страницах	166
Представление о прикладном программном интерфейсе
воспроизведения видеозаписей	167
Атрибут autoplay	167
Атрибут controls	167
Атрибут height	168
Атрибут loop	168
Атрибут poster	168
Атрибут preload	168
Атрибут src	168
Атрибут width	168
Атрибут onerror	168
Преобразование видео- и аудиозаписей в формат OGG	169
Пример воспроизведения видеозаписи на веб-странице 171
Ввод элементов управления в пример HTML-документа
video.htm	174
Циклическое воспроизведение видеозаписи	174
Автоматическое воспроизведение видеозаписи	175
Выявление и обработка ошибок воспроизведения
видеозаписи	176
Общее представление об элементе управления
воспроизведением аудиозаписей	178
Представление о прикладном программном интерфейсе
воспроизведения аудиозаписей	179
Атрибут autoplay	180
Атрибут controls	180
Атрибут loop	180
Атрибут preload	180
Атрибут src	181
Содержание	11
Атрибут onerror	181
Пример воспроизведения аудиозаписи на веб-странице 181
Выявление и обработка ошибок воспроизведения
аудиозаписи	184
Урок 9. Сохранение содержимого веб-страниц	187
Общее представление о сохранении данных в текущем
веб-сеансе	188
Представление о прикладном программном интерфейсе
сохранения данных в текущем веб-сеансе	190
Атрибут length	190
Функция кеу()	191
Функция getltem()	191
Функция setltemQ	191
Функция removeltemO	191
Функция clear()	191
Пример сохранения и восстановления данных в
текущем веб-сеансе	192
Сохранение данных в текущем веб-сеансе	193
Восстановление данных из текущего веб-сеанса	194
Очистка данных в текущем веб-сеансе	196
Полный исходный код HTML-документа
sessionstorage.html	198
Общее представление о локальном сохранении данных 199
Представление о прикладном программном интерфейсе
локального сохранения данных	201
Пример локального сохранения и восстановления
данных	202
Сохранение данных в браузере	203
Восстановление данных, сохраненных непосредственно
в браузере	205
Очистка локально сохраняемых данных	207
Полный исходный код HTML-документа
localstorage.html	209
Урок 10. Новые элементы HTML5	211
Дополнительные языковые средства SVG и MathML	211
Общее представление о новых элементах HTML5	211
Элемент <article>	214
Элемент <aside>	215
12
Содержание
Элемент <audio>	216
Элемент <canvas>	216
Элемент <command>	216
Элемент <datalist>	217
Элемент <details>	218
Элемент <embed>	219
Элемент <figcaption>	220
Элемент <figure>	220
Элемент <footer>	221
Элемент <header>	222
Элемент <hgroup>	222
Элемент <keygen>	223
Элемент <mark>	224
Элемент <meter>	225
Элемент <nav>	226
Элемент <output>	227
Элемент <progress>	228
Элемент <гр>	229
Элемент <rt>	230
Элемент <ruby>	230
Элемент <section>	231
Элемент <source>	231
Элемент <summary>	232
Элемент <time>	233
Элемент <video>	234
Предметный указатель	235
Об авторе
Стивен Хольцнер — удостоившийся наград автор 108 книг по
вычислительной технике и статей для PC Magazine. Его книги
изданы тиражом около 2,5 млн. экземпляров и переведены на 22
иностранных языка. Он специализируется на тематике, связан-
ной с Интернетом, включая социальные сети типа Facebook,
оформление рекламных заголовков на веб-страницах, поисковые
механизмы Google и Yahoo, рекламные кампании в сети MSN,
скрытый маркетинг, маркетинг в сети Usenet, механизмы оплаты
за каждый щелчок на рекламном объявлении, размещаемом на
веб-странице, и пр. Кроме того, он владеет четырьмя многоквар-
тирными домами, сдавая квартиры в наем исключительно через
Интернет и пользуясь для поиска квартиросъемщиков элек-
тронной почтой, рекламой на веб-сайтах, автоответчиками элек-
тронной почты, электронными досками объявлений типа списка
Крейга, услугами веб-службы rent.com и десятком других рек-
ламных агентств.
Введение
Предлагаем вам ознакомиться с новой версией языка HTML —
HTML5.
Одни считают, что версия HTML 4.01, выпущенная в 1999 го-
ду, уже исчерпала себя и теперь настала пора для версии HTML5,
а другие — что отказываться от возможностей, предоставляемых
HTML5, было бы просто грешно. Надеемся, что вы согласны с мне-
нием обеих сторон.
Своими возможностями и масштабами применения HTML5
выходит далеко за рамки всех предыдущих версий языка HTML.
На самом деле это едва ли не самое крупное дополнение во всей
области создания сценариев, а не только в сфере применения
элементов HTML. Поэтому если вы предполагаете найти в этой
книге только перечень новых элементов HTML, то будете прият-
но удивлены, обнаружив в ней нечто большее. Ведь в новой вер-
сии HTML5 было сделано немало для обширного применения на
практике языковых средств JavaScript.
В частности, в HTML5 поддерживается механизм перетаски-
вания элементов веб-страницы, хотя для его реализации придет-
ся воспользоваться средствами такого языка описания сценари-
ев, как JavaScript. Кроме того, в HTML5 внедрен элемент управ-
ления Canvas, позволяющий рисовать на виртуальном полотне,
используя языковые средства JavaScript. Подобных областей
практического применения функциональных возможностей
языков создания сценариев вам предстоит обнаружить еще не-
мало в новой версии HTML.
Об этой книге
В книге делается краткий экскурс в новые языковые средства
HTML. Ее автор предполагает, что читатель достаточно хорошо
знаком с предыдущей версией HTML (HTML 4.01), чтобы быть
готовым к овладению только новыми языковыми средствами,
появившимся в версии HTML5. Ниже дается краткое описание
книги по отдельным главам, называемым уроками.
• Урок 1 “Основы HTML5”. Дается краткий обзор версии
HTML5, а также правил создания документов в HTML5.
Урок 2 “Рисование с помощью элемента управления
Canvas”. Вы узнаете, как пользоваться языковыми средст-
вами JavaScript для рисования на виртуальном полотне,
организуемом с помощью нового для HTML5 элемента
управления Canvas.
Урок 3 “Перетаскивание средствами HTML5”. Показа-
но, как сделать элементы веб-страниц перетаскиваемы-
ми мышью.
Урок 4 “Элементы управления веб-формами”. Речь пойдет
о новых элементах управления (например, кнопках-пере-
ключателях или флажках), включенных в версию HTML5,
в том числе и тех, что задают номер телефона, время и да-
ту, а также о том, как применять их на практике.
Урок 5 “Внутристрочное редактирование”. В HTML5 поя-
вилась возможность править текстовое содержимое таких
элементов, как <div> или <span>, в диалоговом режиме.
О том, как это делается, вы узнаете в данной главе.
Урок 6 “Обращение к предыстории браузера”. Будет рас-
смотрена встроенная в HTML поддержка функции, позво-
ляющей перемещаться по предыстории браузера для по-
вторного обращения к посещавшимся ранее страницам.
Урок 7 “Обмен сообщениями между документами”.
В HTML5 появилась также возможность организовать об-
мен сообщениями между документами, и в данной главе
будет показано, как это осуществляется на практике. В част-
ности, сообщения передаются из одного документа в дру-
гой, обозначаемый в первом документе с помощью эле-
мента <iframe>.
Урок 8 “Применение аудиовизуальной информации”.
К числу одних из самых замечательных и привлекатель-
ных средств HTML5 относятся элементы <video> и <audio>.
В этой главе будет показано, как с их помощью воспроизво-
дятся видео- и аудиозаписи, размещаемые на веб-странице.
Урок 9 “Сохранение содержимого веб-страниц”. Разра-
ботчикам традиционных веб-страниц на основе HTML и
JavaScript недоставало раньше подходящего места для
хранения веб-страниц в промежутках между последова-
тельными доступами к ним пользователей. В версии HTML5
для этой цели предоставляется ряд средств, о которых вы
узнаете в данной главе.
• Урок 10 “Новые элементы HTML5”. В версии HTML5
появился целый ряд новых элементов, помимо тех, что
рассматриваются в предыдущих главах. О них и пойдет
речь в данной главе.
Необходимые средства
для изучения HTML5
Версия HTML5 по-прежнему находится на стадии своего пер-
воначального развития, и поэтому для ее изучения требуется
терпение. В частности, поддержка HTML5 в браузерах остается
неполной. Это означает, что далеко не все языковые средства
HTML5 поддерживаются во всех без исключения браузерах. По-
этому в данной книге будут рассмотрены примеры просмотра до-
кументов HTML5 в пяти наиболее распространенных браузерах:
Firefox, Chrome, Safari, Opera и Internet Explorer.
При рассмотрении отдельных элементов HTML5 будут пере-
числяться те браузеры, в которых они поддерживались на мо-
мент написания этой книги. Поэтому, перед тем, как применять
какие-то элементы HTML5 на практике, следует непременно
убедиться в том, что они поддерживаются в браузерах.
Для чтения книги нужны практические знания HTML 4.01
(текущей стандартной версии HTML), а также JavaScript. Хотя
особенно большого опыта программирования на HTML и JavaScript
для этой цели не требуется.
Большинство примеров кода HTML, приведенных в настоя-
щей книге, можно выполнить простым открытием HTML-доку-
мента в избранном браузере непосредственно с жесткого диска
компьютера. Но для двух коротких примеров из главы 4
(webforms.html и webforms.php) и еще одного примера из главы 9
(sessionstorage.html) потребуется веб-сервер, чтобы продемонст-
рировать возможности чтения данных на сервере из новых эле-
ментов управления веб-формы и сохранения данных в веб-сеан-
се, организуемом между браузером и веб-сервером. Для практи-
ческого применения этих двух примеров их код придется выгру-
зить на веб-сервер. А для выполнения остальных примеров ни-
какой специальной подготовки не требуется. Исходный код всех
рассматриваемых примеров можно загрузить с веб-страницы
данной книги по адресу http://www.williamspublishing.com.
Вот, собственно, и все, что требуется для изучения материала
этой книги. Итак, смело приступайте, начиная с главы 1.
От издательства
Вы, читатель этой книги, и есть главный ее критик и ком-
ментатор. Мы ценим ваше мнение и хотим знать, что было сде-
лано нами правильно, что можно было сделать лучше и что еще
вы хотели бы увидеть изданным нами. Нам интересно услышать
и любые другие замечания, которые вам хотелось бы высказать в
наш адрес.
Мы ждем ваших комментариев и надеемся на них. Вы може-
те прислать нам бумажное или электронное письмо либо просто
посетить наш веб-сайт и оставить свои замечания там. Одним
словом, любым удобным для вас способом дайте нам знать, нра-
вится или нет вам эта книга, а также выскажите свое мнение о
том, как сделать наши книги более интересными для вас.
Посылая письмо или сообщение, не забудьте указать назва-
ние книги и ее авторов, а также ваш обратный адрес. Мы внима-
тельно ознакомимся с вашим мнением и обязательно учтем его
при отборе и подготовке к изданию последующих книг. Наши
электронные адреса:
E-mail:	inf oGwilliamspublishing. com
WWW:	http: / /www. williamspubli shing. com
Наши почтовые адреса:
в России:	127055, г. Москва, ул. Лесная, д. 43, стр. 1
в Украине:	03150, Киев, а/я 152
Урок1
Основы HTML5
Предлагаем ознакомиться с HTML5 — новой захватываю-
щей версией языка HTML, раздвигающей границы веб-разра-
ботки. Благодаря своим новым замечательным средствам вер-
сия HTML5 завоевала немало сторонников, поскольку она дает
им возможность выйти за традиционные рамки того, что им
удавалось до сих пор делать в HTML. Бэтой главе дается
краткий обзор функциональных возможностей HTML5 и начи-
нается рассмотрение процесса создания НТМБ5-документов.
Версия HTML5
Версия HTML5 устраняет преграды, стоящие между HTML и
написанием сценариев, благодаря тому, что средства создания
сценариев широко используются в HTML5. В этой версии поя-
вился целый ряд новых элементов и атрибутов, но главное отли-
чие HTML5 заключается в наличии тех средств, которые могут
быть доступны только посредством создания сценариев.
Реализация всех функциональных возможностей HTML5, будь
то перетаскивание элементов веб-страницы, рисование на вирту-
альном полотне, сохранение данных в промежутках между после-
довательными доступами к веб-страницам, просмотр предыстории
браузера и многое другое, как никогда прежде опирается на созда-
ние сценариев, а для большинства веб-разработчиков это означает
применение языковых средств JavaScript. Следовательно, для
применения HTML5 на практике придется создавать сценарии.
И это очень хорошо, поскольку внедрение непосредственно
в HTML новых функциональных возможностей, требующих на-
писания сценариев, означает, что производителям браузеров
придется обеспечивать поддержку этих новых возможностей.
Нередко поддержка функциональных возможностей, доступных
в JavaScript, заметно отличается в разных браузерах. Поэтому
20
Урок 1. Основы HTML5
для реализации новых средств HTML, предполагающих интен-
сивное использование написанных сценариев, потребуется уни-
версальная поддержка этих средств во всех браузерах.
Все версии HTML, в том числе и HTML5, являются результатами
работы Консорциума Всемирной паутины (World Wide Web Consor-
tium — W3C; www.w3c.org) — организации, отвечающей за составле-
ние спецификаций различных версий HTML. В частности, преды-
дущая версия HTML (HTML 4.01) была выпущена в 1999 году.
Каждая спецификация, выпускаемая членами W3C, прохо-
дит несколько стадий составления. Она называется рекоменда-
цией, поскольку консорциум W3C проявляет разумную осто-
рожность, не считая себя организацией, занимающейся разра-
боткой и распространением стандартов.
На первой стадии предварительных набросков члены W3C
обсуждают отдельные вопросы. Затем наступает стадия рабочего
проекта, когда приветствуются любые конструктивные коммен-
тарии и замечания к нему. После этого проект переходит к ста-
дии кандидата в рекомендации. И наконец, окончательная вер-
сия спецификации W3C выпускается в качестве рекомендации.
На всех этих стадиях составляемая спецификация публику-
ется в Интернете для всеобщего ознакомления. На момент напи-
сания этой книги спецификация HTML5 находилась на стадии
рабочего проекта и была доступна по адресу http://www.w3.org/
TR/html5/ в виде длинного перечня ссылок на другие документы.
Далее в книге будет использоваться версия рабочего проекта
HTML5 (W3C HTML5 Working Draft). А поскольку это довольно
ранняя стадия развития данной версии HTML, ее поддержка в
браузерах не является полной и всеобщей. Все рассматриваемые
далее средства HTML5 пока еще поддерживаются лишь в одном
или нескольких браузерах, включая Internet Explorer, Chrome,
Firefox, Opera и Safari. Поэтому при рассмотрении отдельных
средств HTML5 будут специально указаны те браузеры, в кото-
рых они поддерживались на момент написания этой книги.
А теперь перейдем к краткому обзору новых функциональ-
ных возможностей HTML5.
Рисование с помощью элемента
управления Canvas
Появление элемента управления Canvas ожидалось уже давно.
Как подразумевает название этого элемента, он служит для ри-
Урок 1. Основы HTML5
21
сования на виртуальном полотне прямых и кривых линий, ок-
ружностей, дуг, прямоугольников, а также сложных фигур. Ри-
суемые фигуры могут быть заполнены выбранным цветом или
изображением.
Эффективность элемента управления Canvas проявляется в том,
что он позволяет переносить динамичную графику на веб-стра-
ницы, отображая изменения в ней как реакцию на определен-
ные действия пользователя. Функционирование этого элемента
управления, как, впрочем, и большинства других элементов
HTML5, во многом опирается на JavaScript. А это означает, что
операции рисования придется выполнять в основном средства-
ми JavaScript.
В частности, для рисования большинства фигур на полотне
используется простой вызов таких функций JavaScript, как
lineTo(), strokef) или fill(). Таким образом, рисование осуще-
ствляется главным образом средствами JavaScript, что и будет
продемонстрировано в главе 2.
Перетаскивание
Еще одной давно ожидавшейся в HTML5 возможностью яв-
ляется перетаскивание. Раньше перетаскивание элементов на
веб-странице реализовывалось в специальном сценарии JavaScript,
который приходилось писать отдельно для каждого браузера.
А теперь перетаскивание должно стать универсальным механиз-
мом для всех браузеров.
Если вам приходилось когда-нибудь писать на JavaScript код
для реализации перетаскивания, то вы должны по достоинству
оценить данное новшество HTML5 как большое облегчение труда
для веб-разработчиков. Ведь теперь вам больше не придется про-
верять работоспособность своего кода в каждом браузере в от-
дельности, чтобы выяснить, где именно он будет выполняться:
в Internet Explorer, Firefox или другом браузере.
Большинство визуальных элементов HTML5 имеют атрибут
draggable. Если этот атрибут имеет логическое значение true,
пользователи могут перетаскивать соответствующий элемент, но
при условии, что функции перетаскивания реализованы в коде
JavaScript. Все, что касается перетаскивания, будет рассмотрено
более подробно в главе 3.
22
Урок 1. Основы HTML5
Получение данных с помощью новых
элементов управления веб-формами
В HTML5 реализован целый ряд новых элементов управле-
ния, значительно расширяющих функциональные возможности
уже имеющихся в HTML элементов управления, в том числе
флажков, кнопок-переключателей и т.д. К числу новых элемен-
тов управления относится селектор цвета, поля ввода адреса
электронной почты, даты и времени, а также номера телефона.
Подобные элементы управления обеспечивают столь необхо-
димую эффективность HTML. В частности, элемент управления
цветом, как правило, отображает селектор цвета, из которого
пользователь может выбирать цвета, щелкнув кнопкой мыши на
их образцах. А элемент управления вводом даты и времени ото-
бражает небольшой календарь, из которого пользователь может
выбирать даты. Конкретная реализация новых элементов управ-
ления отдается на откуп производителям отдельных браузеров,
хотя многие из этих элементов управления уже реализованы и
будут подробнее рассмотрены в главе 4.
Оперативная правка веб-страниц
Веб-страницы становятся более интерактивными благодаря
HTML5. Так, в HTML5 пользователю может быть разрешено
править текст на веб-странице.
Запоминание предыстории
браузера
В HTML5 допускается также обращаться к предыстории брау-
зера, т.е. к теми веб-страницами, которые посещались ранее.
В главе 6 будет показано, как обращаться к предыстории
браузера в HTML5. И это не просто отслеживание посещавшихся
ранее страниц. Ведь данные в промежутках между последова-
тельными доступами к веб-страницам можно сохранить, чтобы
они были доступными при возврате к нужной странице.
Если раньше при переходе или возврате к веб-странице брау-
зерам приходилось начинать все с самого начала, то теперь поя-
вилась возможность хранить данные в промежутках между по-
следовательными доступами к веб-страницам.
Урок 1. Основы HTML5
23
Обмен сообщениями между
документами
В HTML5 предоставляется также возможность обмениваться
сообщениями между различными частями документа, даже если
они на самом деле принадлежат разным документам. Это означа-
ет, что одну веб-страницу можно отобразить в элементе <iframe>
другой веб-страницы. Теперь появилась возможность посылать
текстовые сообщения одному документу, содержащемуся в дру-
гом документе, чего раньше нельзя было сделать.
В действительности сообщения можно теперь посылать веб-
страницам, отображающимся в таких элементах, как <iframe>
или <div>, даже если эти страницы происходят из совсем другого
домена, что до сих было совершенно недопустимо.
Поддержка аудиовизуальной
информации
Особого внимания заслуживает поддержка в HTML5 аудио-
визуальной информации. В частности, новые элементы <video>
и <audio> дают возможность воспроизводить видео- и аудиозапи-
си, не прибегая к таким подключаемым к браузерам модулям,
как Flash или QuickTime.
Эти новые элементы рассматриваются в главе 8, где будет по-
казано, каким образом в браузере поддерживаются видео- и ау-
диоформаты. Так, на момент написания данной книги в браузерах
Firefox, Opera и Chrome поддерживался видеоформат Theora для
элемента <video>, в котором воспроизводятся видеозаписи из
файлов с расширением .ogg, а также видеокодек VP8.
В главе 8 будет показано, как воспроизводить видеозаписи с
помощью элемента <video> и как преобразовывать распростра-
ненные видеоформаты в те форматы, которые пригодны для вос-
произведения видеозаписей в данном элементе. Аналогичным
образом будут рассмотрены аудиоформаты и элемент <audio> для
воспроизведения аудиозаписей.
24
Урок 1. Основы HTML5
Использование возможности
сохранять содержимое веб-страниц
Разработчикам веб-сайтов на основе HTML и JavaScript рань-
ше недоставало места для хранения данных в промежутках ме-
жду последовательными доступами к веб-страницам. Это озна-
чало, что при повторном открытии веб-страницы со стандартным
сценарием JavaScript устанавливались исходные значения всех
переменных в его коде.
Это положение исправлено в версии HTML5, в которой имеется
возможность сохранять данные как непосредственно в браузере, так
и на сервере в текущем веб-сеансе между браузером и веб-серве-
ром. Подробнее об этом речь пойдет в главе 9.
В главе 9 будет рассмотрен пример, демонстрирующий ло-
кальное сохранение текстовых данных непосредственно в браузе-
ре, для чего достаточно ввести их в текстовом поле и щелкнуть
на кнопке Сохранить, затем перейти на следующую веб-страни-
цу, а впоследствии вернуться к предыдущей странице. После
возврата к предыдущей веб-странице достаточно щелкнуть на
кнопке Получить, чтобы восстановить данные в текстовом поле.
Таким образом, у разработчиков веб-сайтов на основе HTML
и JavaScript появилась замечательная возможность сохранять
данные в промежутках между последовательными доступами
к веб-страницам.
Применение новых элементов
Ни одна версия HTML не может считаться новой без наличия
новых элементов. Поэтому ниже перечислены новые для HTML5
элементы, более подробно рассматриваемые в главе 10.
•	<article>
•	<aside>
•	<audio>
•	<canvas>
•	<command>
•	<datalist>
•	<details>
Урок 1. Основы HTML5
25
•	<embed>
•	<figcaption>
•	<figure>
•	<footer>
•	<header>
•	<hgroup>
•	<keygen>
•	<mark>
•	<meter>
•	<nav>
•	<output>
•	<progress>
•	<rp>
•	<rt>
•	<ruby>
•	<section>
•	<source>
•	<summary>
•	<time>
•	<video>
А приведенные ниже элементы включены в состав HTML5.
•	<асгопуш>
•	<applet>
•	<basefont>
•	<big>
•	<center>
•	<dir>
•	<font>
•	<frame>
•	<frameset>
26
Урок 1. Основы HTML5
•	<isindex>
•	<noframes>
•	<s>
•	<strike>
•	<tt>
•	<u>
Урок 2
Рисование с помощью
элемента управления
Canvas
В HTML5 элемент управления Canvas служит для отобра-
жения графики на виртуальном полотне. Сам этот элемент
создается в HTML5 довольно просто, как показано ниже.
<canvas height-"ууу" width=xxx">
</canvas>
Вот, собственно, и все, что требуется для создания элемента
управления Canvas. Так как же рисовать графику в таком эле-
менте управления? Для этого придется воспользоваться средст-
вами JavaScript, что и будет продемонстрировано в данной главе.
Элемент управления Canvas позволяет рисовать прямые и
кривые линии, дуги, сложные формы, изображения и текст.
Общее представление об элементе
управления Canvas
Формально говоря, элемент управления Canvas реализуется в
HTML5 довольно просто. Ниже приведена его спецификация.
Элемент: <canvas>
Начальный дескриптор: требуется
Конечный дескриптор: требуется
Требующиеся атрибуты: height и width
Поддерживающие браузеры: Chrome, Firefox, Opera, Safari
28
Урок 2. Рисование с помощью элемента управления Canvas
Основные действия, касающиеся этого элемента управле-
ния, происходят в коде JavaScript. Именно здесь предоставля-
ется возможность рисовать на виртуальном полотне элемента
управления Canvas, как будет продемонстрировано в примере,
рассматриваемом ниже, а результат показан на рис. 2.1.
Рис. 2.1. Пример рисования на виртуальном
полотне элемента управления Canvas в браузе-
ре Firefox
Для нормальной работы этого элемента управления использу-
ются языковые средства JavaScript, поэтому сделаем сначала
краткий обзор доступных для рисования средств, а затем перей-
дем к деталям.
Урок 2. Рисование с помощью элемента управления Canvas
29
Представление о прикладном
программном интерфейсе элемента
управления Canvas
Консорциум W3C разработал прикладной программный ин-
терфейс (API) для элемента управления Canvas, определив имена
встроенных функций и порядок их применения.
С полным описанием текущей версии интерфейса API для
элемента управления Canvas можно ознакомиться по адресу
http://dev.w3.org/html5/canvas-api/canvas-2d-api.html. А ниже
рассматриваются наиболее важные функции из этого интерфейса.
В описании интерфейса API, разработанного W3C для эле-
мента управления Canvas, перечисляются атрибуты элемента,
используемые в коде JavaScript, но не в коде HTML, как, напри-
мер, canvas 1 .fillstyle = хххх, а также встроенные функции
JavaScript. Поэтому сначала задается отдельное свойство элемента
управления Canvas с помощью атрибутов, а затем выполняется
соответствующая операция рисования. Так, в приведенном ниже
фрагменте кода сначала задается стиль рисования с помощью ат-
рибута fillstyle, а затем рисуется прямоугольник, заполняемый
при обращении к функции fillRect.
canvasl.fillstyle =xxxx
canvasl.fillRect(xx, xx, xx, xx;
Каждый элемент интерфейса API предваряется его типом,
например float для операций с плавающей точкой. Ниже пере-
числены некоторые типы данных, чаще всего встречающиеся в
спецификациях W3C.
•	any — для атрибутов. Это означает, что атрибут может
иметь любой тип.
•	DOMString — для текста в кавычках, где D0M означает
Document Object Model — объектная модель документов.
•	float — для числовых значений и операций с плавающей
точкой.
А теперь рассмотрим атрибуты и функции, доступные в ин-
терфейсе API для элемента управления Canvas.
30
Урок 2. Рисование с помощью элемента управления Canvas
Стилевое оформление
Для установки стиля рисования в элементе управления
Canvas, будь то с заполнением фигур или без такового, служат два
атрибута.
•	Атрибут заполнения:
attribute any fillstyle; //по умолчанию черный цвет
•	Атрибут обводки:
attribute any strokestyle; //по умолчанию черный цвет
Установка стилей рисования линий
Стили рисования линий, применяемые в элементе управле-
ния Canvas, устанавливаются с помощью следующих атрибутов
JavaScript.
•	attribute DOMString lineCap; // "butt” ("встык”), "round”
("скругление"), "square" ("под прямым углом") (по умолча-
нию устанавливается значение "butt")
•	attribute DOMString linejoin; // "miter" ("скос под углом
45 "), "round" ("скругление"), "bevel" ("скашивание")(по
умолчанию устанавливается значение "miter")
•	attribute float linewidth; // (по умолчанию устанавлива-
ется толщина линии 1)
•	attribute float miterLimit; // (по умолчанию устанавлива-
ется предельный скос 10)
Отбрасывание теней
В элементе управления Canvas допускается также добавлять
тени, отбрасываемые графическими элементами, с помощью
следующих атрибутов.
•	attribute float shadowBlur; 11 (по умолчанию устанавлива-
ется размытие тени 0)
•	attribute DOMString shadowcolor; // (по умолчанию уста-
навливается прозрачный черный цвет тени)
•	attribute float shadowOffsetX; // (по умолчанию смещение
тени по горизонтали устанавливается равным 0)
Урок 2. Рисование с помощью элемента управления Canvas
31
•	attribute float shadowOffsetY; // (по умолчанию смещение
тени по вертикали устанавливается равным 0)
Рисование прямоугольников
Ниже перечисляются функции JavaScript, применяемые для
рисования прямоугольников.
•	clearRect(float х, float у, float w, float h); // очи-
стить прямоугольник
•	fillRectffloat x, float y, float w, float h); // запол-
нить прямоугольник
•	strokeRect(float x, float y, float w, float h); // обвес-
ти прямоугольник
Рисование сложных форм
С помощью элемента управления Canvas можно рисовать ду-
ги, кривые Безье и прочие сложные формы, применяя следую-
щие функции.
•	arc(float х, float у, float radius, float startAngle,
float endAngle, boolean anticlockwise); // нарисовать дугу
•	arcTo(float xl, float yl, float x2, float y2, float
radius); // нарисовать дугу от одной точки к другой
•	beginPath(); // начать контур
•	bezierCurveTo(float cplx, float cply, float cp2x, float
cp2y, float x, float у); // нарисовать кривую Безье от
одной точки к другой
•	clip(); // ограничить контур
•	closePathf); // замкнуть контур
•	fill(); // заполнить форму
•	lineTo(float х, float у); // провести прямую линию из од-
ной точки в другую
•	moveToffloat х, float у); // переместить из одной точки в
другую
32
Урок 2. Рисование с помощью элемента управления Canvas
•	quadraticCurveToffloat срх, float сру, float х, float у);
// нарисовать кривую второго порядка от одной точки к
другой
•	rectffloat х, float у, float w, float h); // нарисовать
прямоугольник
•	stroked; // обвести по контуру
•	boolean isPointlnPathffloat x, float у); // определить
наличие заданной точки на контуре
Рисование текста
В элементе управления Canvas имеется также возможность
рисовать текст, используя следующие атрибуты и функции.
•	attribute DOMString font; // (по умолчанию выбирается
шрифт без засечек размером 10 пикселей)
•	attribute DOMString textAlign; // "start" ("сначала"),
"end" ("с конца"), "left" ("по левому краю"), "right" ("по
правому краю"), "center"("по центру") (по умолчанию уста-
навливается значение "start" для выравнивания текста)
•	attribute DOMString textBaseline; // "top" ("сверху"),
"hanging" ("в висячем положении"), "middle" ("посредине"),
"alphabetic" ("по алфавиту), "ideographic" ("по идеограм-
ме"), "bottom("снизу") ("по центру") (по умолчанию устанав-
ливается значение "alphabetic" для базовой линии текста)
•	fillText(DOMString text, float x, float y, optional float
maxwidth); // заполнить текст
•	TextMetrics measureText(DOMString text); // задать типо-
графские параметры шрифтового оформления текста
•	strokeTextfDOMString text, float x, float y, optional
float maxwidth); // обвести текст
Рисование изображений
Изображения можно нарисовать с помощью следующих
функций.
•	drawlmage(HTMLImageElement image, float dx, float dy,
optional float dw, float dh);
Урок 2. Рисование с помощью элемента управления Canvas
33
•	drawlmage(HTMLImageElement image, float sx, float sy,
float sw, float sh, float dx, float dy, float dw, float
dh);
•	drawlmage(HTMLCanvasElement	image,	float dx,	float	dy,
optional float dw, float dh);
•	drawlmage(HTMLCanvasElement	image,	float sx,	float	sy,
float sw, float sh, float dx, float dy, float dw, float
dh);
•	drawlmage(HTMLVideoElement	image,	float	dx,	float	dy,
optional float dw, float dh);
•	drawlmage(HTMLVideoElement	image,	float	sx,	float	sy,
float sw, float sh, float dx, float dy, float dw, float
dh);
Выполнение преобразований
Графические элементы можно вращать, масштабировать
(т.е. изменять их размеры) или перемещать (т.е. переносить)
с помощью следующих функций.
•	rotate(float angle); // повернуть на заданный угол
•	scale(float х, float у); // масштабировать
•	translate(float х, float у); // переместить
На этом краткий обзор интерфейса API для элемента управ-
ления Canvas завершается. А теперь применим его на практи-
ке, начиная с примера, рассматриваемого в следующем задании.
Пример применения элемента
управления Canvas
Для того чтобы показать, каким образом действует эле-
мент управления Canvas, создадим в качестве примера HTML-
документ под названием canvas.html. Результат загрузки этого
документа в браузер Firefox приведен на рис. 2.1, а весь его ис-
ходный код — в конце данной главы.
Приступая к созданию примера HTML-документа canvas.html,
выполните следующий действия.
34
Урок 2. Рисование с помощью элемента управления Canvas
1.	Создайте HTML-документ canvas.html в любом редакторе тек-
ста, например в Windows WordPad.
2.	Введите приведенный ниже код создания элемента <canvas> и
задания сценария JavaScript. Следует иметь в виду, что сце-
нарий JavaScript будет размещаться в теле функции загрузки
loader, которая выполняется лишь после полной загрузки
элемента управления Canvas браузером (только не вводите
три вертикальные точки, поскольку они служат лишь для
обозначения места, где в дальнейшем вам предстоит ввести
дополнительный код.)
<!DOCTYPE html>
<html>
<head>
<title>
Пример применения элемента управления Canvas
</title>
<script type-’text/javascript">
function loader()
{
}
</script>
</head>
<body onload="loader()">
<М>Пример применения элемента управления Canvas</hl>
<canvas id="canvas” width=,,600"
height="500">
</canvas>
</body>
</html>
3.	Введите выделенный ниже полужирным код сценария
JavaScript для создания объекта, соответствующего элементу
управления Canvas. Этот объект будет использоваться для дос-
тупа к элементу управления Canvas из сценария JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>
Пример применения элемента управления Canvas
Урок 2. Рисование с помощью элемента управления Canvas
35
</title>
<script type="text/javascript">
function loaderf)
{
var canvas = document.getElementByld
(’canvas’);
var canvasl = canvas.getContext(’2d’);
}
</script>
</head>
<body onload="loader()”>
<Ы>Пример применения элемента управления Canvas</hl>
<canvas id="canvas" width="600"
height="500">
</canvas>
</body>
</html>
4.	Сохраните HTML-документ в файле canvas.html. Непременно
сделайте это в текстовом формате. По умолчанию в тексто-
вом редакторе WordPad выбирается расширенный текстовый
формат RTF, непригодный для браузеров.
Итак, начало рассматриваемому здесь примеру положено.
Далее вам предстоит нарисовать ряд прямоугольников на вир-
туальном полотне элемента управления Canvas.
Рисование прямоугольников
Полые прямоугольники можно рисовать с помощью функции
strokeRect, определяемой следующим образом.
strokeRect(float х, float у, float w, float h);
А заполняемые прямоугольники рисуются помощью функции
f illRect, определяемой следующим образом.
fillRect(float xr float yr float w, float h);
Обеим функциям в качестве аргументов передаются координа-
ты (х, у) левого верхнего угла прямоугольника, а также его шири-
на и высота (w, h). Следует, однако, иметь в виду, что в элементе
36
Урок 2. Рисование с помощью элемента управления Canvas
управления Canvas левому верхнему углу виртуального полотна со-
ответствуют координаты (0, 0), положительная ось координат х
простирается справа налево, положительная ось координат у—
сверху вниз, а в качестве единицы измерения используются пик-
сели (т.е. элементы изображения).
В данном примере мы рассмотрим применение функции
f illRect для рисования заполняемых прямоугольников. Цвет их
заполнения выбирается с помощью атрибута fillstyle. В этом
атрибуте задается цвет, указываемый с помощью функции rgba (),
которой в качестве аргументов передаются значения красной,
зеленой и синей составляющих выбираемого цвета (в преде-
лах 0-255), а также коэффициент видимости (в пределах 0-1, где
0 означает, что прямоугольник совершенно невидим, al — пря-
моугольник полностью видим).
В частности, для установки стиля заполнения объекта
canvas 1 синим цветом служит строка кода, приведенная ниже.
canvasl.fillstyle = "rgba(0, 0, 200, 1)";
Для того чтобы нарисовать несколько прямоугольников, за-
полняемых разным цветом, выполните следующие действия.
1.	Откройте HTML-документ из файла canvas.html в избранном
вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для рисования
трех прямоугольников, заполняемых разным цветом.
<script type="text/javascript">
function loader()
{
var canvas = document.getElementByld
(’canvas’);
var canvasl = canvas.getContext('2d');
// Прямоугольники
canvasl.fillstyle = ”rgba(0, 0, 200, 1)”;
canvasl.fillRect(30, 30, 75, 70);
canvasl.fillstyle = ”rgba(200, 200, 0, 1)”;
canvasl.fillRect(70, 50, 55, 70);
canvasl.fillstyle = ”rgba(200, 0, 0, 1)”;
canvasl.fillRect(90, 50, 75, 50);
Урок 2. Рисование с помощькх элемента управления Canvas
37
}
</script>
3.	Сохраните внесенные изменения в файле canvas.html. Сде-
лайте это в текстовом формате.
Результаты загрузки HTML-документа из файла canvas,
html в браузер приведены на рис. 2.2. Как видите, все три нари-
сованных прямоугольника перекрываются.
Рис. 2.2. Рисование заполняемых прямоугольников
Рисование штриховых рисунков
С помощью элемента управления Canvas можно рисовать
штриховые рисунки. Этот процесс начинается с функции
beginPath(), уведомляющей элемент управления Canvas о том,
что создается фигура. А затем с помощью функций moveTo() и
lineTo() задается исходное положение для рисования и фактиче-
ски рисуются прямые линии.
По завершении рисования фигуры вызывается функция
closePath(), замыкающая контур нарисованной фигуры. По-
сле этого фигура обводится по контуру с помощью функции
strokef) для получения окончательного результата рисования.
Итак, продолжим рассматриваемый здесь пример, нарисовав
три треугольника описанным выше способом. А для того чтобы
нарисовать их красным цветом, установим этот цвет в атрибуте
strokestyle следующим образом.
canvas1.strokestyle = "rgba(200, 0, 0, 0.5)";
38
Урок 2. Рисование с помощью элемента управления Canvas
Для того чтобы нарисовать треугольники в виде штриховых
рисунков, выполните следующие действия.
1.	Откройте HTML-документ из файла canvas.html в избранном
вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для рисования
трех треугольников в виде штриховых рисунков.
<script type="text/javascript">
function loader()
{
var canvas = document.gdtElementByld
('canvas’);
var canvas1 = canvas.getContext(’2d');
11 Втриховые треугольники
canvasl.beginPath();
canvas1.strokestyle = ”rgba(200, 0, 0, 0.5)”;
canvasl.moveTo(110, 205);
canvasl.lineTo(110, 125);
canvasl.lineTo(30, 205);
canvas1.closePath();
canvasl.stroke();
canvasl.beginPath();
canvasl.moveTo(100, 205);
canvasl.lineTo(100, 125);
canvasl.lineTo(20, 205);
canvas1.closePath();
canvas1.stroke();
canvasl.beginPath();
canvasl.moveTo(90, 205);
canvasl.lineTo(90, 125);
canvasl.lineTo(10, 205);
canvasl.closePath();
canvasl.stroke();
}
</script>
3.	Сохраните внесенные изменения в файле canvas.html. Непре-
менно сделайте это в текстовом формате.
Результаты загрузки HTML-документа из файла canvas.
html в браузер приведены на рис. 2.3. Как видите, все три нари-
сованных штриховых треугольника перекрываются.
Урок 2. Рисование с помощью элемента управления Canvas
39
Рис. 2.3. Рисование штриховых треугольников
Заполнение штриховых рисунков
Штриховые фигуры можно не только рисовать, но и заполнять
выбранным цветом. В этом задании будет показано, как нарисо-
ванный штриховой треугольник заполняется зеленым цветом.
В данном случае штриховой треугольник рисуется таким же
образом, как и те штриховые фигуры, которые упоминались в пре-
дыдущем задании. И делается это с помощью все тех же функций
beginPath(), moveTo(), lineTo() и closePath(). Но на этот раз вме-
сто функции stroke () используется функция f ill ().
Функция f ill () заполняет нарисованную форму текущим цве-
том заполнения виртуального полотна, который задается в ат-
рибуте fillstyle. В частности, светло-зеленый цвет заполнения
задается в следующей строке кода.
canvasl.fillstyle = "rgba(0, 200, 0, 0.5)";
Для того чтобы нарисовать штриховой треугольник, заполняе-
мый зеленым цветом, выполните следующие действия.
1.	Откройте HTML-документ из файла canvas.html в избранном
вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для рисования
штрихового треугольника, заполняемого зеленым цветом.
40
Урок 2. Рисование с помощью элемента управления Canvas
<script type="text/javascript">
function loader()
{
var canvas = document.getElementByld
('canvas');
var canvasl = canvas. getContext('2d');
11 Заполняемый треугольник
canvasl.fillstyle = ”rgba(0, 200, 0, 0.5)”;
canvasl.beginPath();
canvasl.moveTo(225, 25);
canvasl.lineTo(305, 25);
canvasl.lineTo(225, 105);
canvasl.closePath();
canvasl.fill();
}
</script>
3.	Сохраните внесенные изменения в файле canvas.html. Не-
пременно сделайте это в текстовом формате.
Результаты загрузки HTML-документа из файла canvas.html
в браузер приведены на рис. 2.4. Как видите, нарисованный
справа штриховой треугольник заполняется зеленым цветом.
Рис. 2.4. Рисование заполняемого треугольника
Урок 2. Рисование с помощью элемента управления Canvas
41
Рисование кривых Безье
Рисование линий не ограничивается только прямыми,
проводимыми из одной точки в другую с помощью функции
lineTo. Используя функцию bezierCurveTof), можно также ри-
совать кривые линии Безье. Эта функция определяется следую-
щим образом.
bezierCurveToffloat cplx, float cply, float cp2x, float cp2y, float x,
float y);
В частности, для того чтобы нарисовать форму сердечка, состоя-
щую из кривых линий Безье, выполните следующие действия.
1.	Откройте HTML-документ из файла canvas.html в избранном
вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для создания
формы сердечка из линий Безье.
<script type="text/javascript">
function loader{)
{
var canvas = document.getElementByld
(’canvas');
var canvas1 = canvas. getContextf'2d');
11 Форма сердечка
canvas1.fillstyle = ”rgba(200, 0, 0, 0.5)”;
canvas1.beginPath();
canvasl.moveTo(75, 250);
canvasl.bezierCurveTo(75, 247, 70, 235, 50, 235);
canvasl.bezierCurveTo(20, 235, 20, 272.5, 20, 272);
canvasl.bezierCurveTo(20, 290, 40, 312, 75, 330);
canvasl.bezierCurveTo(110, 312, 130, 290, 130, 272);
canvasl.bezierCurveTo(130, 272.5, 130, 235, 100, 235);
canvasl.bezierCurveTo(85, 235, 75, 247, 75, 250);
canvas1.closePath();
canvasl.fill();
}
</script>
3.	Сохраните внесенные изменения в файле canvas.html. Непре-
менно сделайте это в текстовом формате.
42
Урок 2. Рисование с помощью элемента управления Canvas
Результаты загрузки HTML-документа из файла canvas.html в
браузер приведены на рис. 2.5. Как видите, слева внизу появля-
ется форма сердечка.
Рисование кривых второго порядка
Помимо кривых Безье, представленных в предыдущем зада-
нии, можно также рисовать кривые второго порядка, используя
функцию quadraticCurveTo(), определяемую следующим образом.
quadraticCurveTo(float срх, float сру, float х, float у);
Рис. 2.5. Рисование заполняемой формы сер-
дечка, состоящей из кривых Безье
В этом задании вам предстоит нарисовать форму, состоящую
из кривых второго порядка.
1.	Откройте HTML-документ из файла canvas.html в избранном
вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для создания
формы из кривых второго порядка.
Урок 2. Рисование с помощью элемента управления Canvas
43
<script type="text/javascript">
function loader()
{
var canvas = document.getElementByld
('canvas');
var canvasl = canvas.getContext('2d');
II Кривые второго порядка
canvasl.strokestyle = *rgba(0, 0, 0, 1)*;
canvasl.beginPath();
canvasl.moveTo(275, 125);
canvasl.quadraticCurveTo(225, 125, 225, 162);
canvasl.quadraticCurveTo(260, 200, 265, 200);
canvasl.quadraticCurveTo(325, 200, 325, 162);
canvasl.quadraticCurveTo(325, 125, 275, 125);
canvasl.closePath();
canvasl.stroke();
}
</script>
3.	Сохраните внесенные изменения в файле canvas.html. Не-
пременно сделайте это в текстовом формате.
Результаты загрузки HTML-документа из файла canvas. html в
браузер приведены на рис. 2.6. Справа внизу в окне браузера по-
является форма, состоящая из нарисованных кривых второго
порядка.
Рисование дуг
Элемент управления Canvas допускает также рисование дуг
с помощью функции аге, определяемой следующим образом.
arc(float х, float у, float radius, float startAngle, float endAngle,
boolean anticlockwise);
В этом задании вам предстоит нарисовать форму, состоящую
из дуг.
1.	Откройте HTML-документ из файла canvas.html в избранном
вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для создания
формы из дуг. Обратите внимание на применение константы
Math.PI в сценарии JavaScript для получения числового зна-
чения пи.
44
Урок 2. Рисование с помощью элемента управления Canvas
Рис. 2.6. Рисование формы, состоящей из
кривых второго порядка
<script type="text/javascript">
function loader()
{
var canvas = document.getElementByld
(’canvas’);
var canvas 1 = canvas. getContext('2d');
// Дуги
canvasl.beginPath();
canvasl.arc(275, 275, 50, 0, Math.PI * 2, true);
canvasl.moveTo(310, 275);
canvasl.arc(275, 275, 35, 0, 0.75 * Math.PI, false);
canvasl.moveTo(300, 255);
canvasl.arc(265, 255, 35, 0, 0.5 * Math.PI, false);
canvasl.moveTo(280, 255);
canvasl.arc(245, 255, 35, 0, 0.2 * Math.PI, false);
canvasl.closePath();
Урок 2. Рисование с помощью элемента управления Canvas
45
canvasl.stroke();
}
</script>
3.	Сохраните внесённые изменения в файле canvas.html. Не-
пременно сделайте это в текстовом формате.
Результаты загрузки HTML-документа из файла canvas.html
в браузер приведены на рис. 2.7. Справа внизу в окне браузера
появляется форма, состоящая из нарисованных дуг.
Рис. 2.7. Рисование дуг
Рисование текста
На виртуальном полотне элемента управления Canvas допус-
кается также рисование текста. Для этого нужно сначала вы-
брать подходящий шрифт, а затем установить его типографские
параметры в атрибуте font элемента управления Canvas, как по-
казано в приведенной ниже строке кода.
canvasl.font = 'italic 40рх sans-serif;
В этой строке кода JavaScript задается выбираемый по умол-
чанию шрифт без засечек размером 40 пикселей. Если не хотите
46
Урок 2. Рисование с помощью элемента управления Canvas
выделять рисуемый текст курсивом, опустите параметр italic
в данной строке кода.
После того как будет задан шрифт, текст может быть нарисо-
ван с помощью функции strokeText (), которой в качестве аргу-
ментов передаются рисуемый текст и его положение на вирту-
альном полотне. В качестве задания по рисованию текста выпол-
ните следующие действия.
1.	Откройте HTML-документ из файла canvas.html в избран-
ном вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для рисования
текста "Привет!”.
<script type-’text/javascript">
function loader()
{
var canvas = document.getElementByld
(’canvas');
var canvasl = canvas.getContext('2d');
11 Текст
canvasl.font - 'italic 40px sans-serif*;
canvasl.strokeText("Привет!", 50, 400);
}
</script>
3.	Сохраните внесенные изменения в файле canvas.html. Сде-
лайте это в текстовом формате.
Результаты загрузки HTML-документа из файла canvas.html
в браузер приведены на рис. 2.8. Слева внизу в окне браузера по-
является нарисованный и выделенный курсивом текст "Привет! ".
Полный исходный код примера
HTML-документа canvas.html
Ниже для справки приводится полностью исходный код рас-
смотренного в этом уроке примера HTML-документа canvas. html.
Урок 2. Рисование с помощью элемента управления Canvas
47
Рис. 2.8. Рисование текста
<!DOCTYPE html>
<html>
<head>
<title>
Пример применения элемента управления Canvas
</title>
<script type="text/javascript">
function loader()
{
var canvas = document.getElementByld
('canvas');
var canvasl = canvas.getContext('2d');
// Прямоугольники
canvasl.fillstyle = "rgba(0, 0, 200, 1)";
canvasl.fillRect(30, 30, 75, 70);
canvasl.fillstyle = "rgba(200, 200, 0, 1)";
canvasl.fillRect(70, 50, 55, 70);
48
Урок 2. Рисование с помощью элемента управления Canvas
canvasl.fillstyle = "rgba(200, 0, 0, 1)";
canvasl.fillRect(90, 50, 75, 50);
// Штриховые треугольники
canvas1.beginPath();
canvasl.strokestyle = nrgba(200, 0, 0, 0.5)";
canvasl.moveTo(110, 205);
canvasl.lineTo(110, 125);
canvasl.lineTo(30, 205);
canvasl.closePath();
canvas1.stroke();
canvas1.beginPath();
canvasl.moveTo(100, 205);
canvasl.lineTo(100, 125);
canvasl.lineTo(20, 205);
canvasl.closePath();
canvas1.stroke();
canvasl.beginPath();
canvasl.moveTo(90, 205);
canvasl.lineTo(90, 125);
canvasl.lineTo(10, 205);
canvasl.closePath();
canvasl.stroke();
11 Заполняемый треугольник
canvasl.fillstyle = "rgba(0, 200, 0, 0.5)";
canvasl.beginPath();
canvasl.moveTo(225, 25);
canvasl.lineTo(305, 25);
canvasl.lineTo(225, 105);
canvasl.closePath();
canvasl.fillf);
11 Форма сердечка
canvasl.fillstyle = "rgba(200, 0, 0, 0.5)";
canvasl.beginPath();
canvasl.moveTo(75, 250);
canvasl.bezierCurveTo(75, 247, 70, 235, 50, 235);
canvasl.bezierCurveTo(20, 235, 20, 272.5, 20, 272);
canvasl.bezierCurveTo(20, 290, 40, 312, 75, 330);
canvasl.bezierCurveTo(110, 312, 130, 290, 130, 272);
canvasl.bezierCurveTo(130, 272.5, 130, 235, 100, 235);
canvasl.bezierCurveTo(85, 235, 75, 247, 75, 250);
canvas1.closePath();
canvasl.fill();
Урок 2. Рисование с помощью элемента управления Canvas
49
И Кривые второго порядка
canvasl.strokestyle = "rgba(0, 0, 0, 1)";
canvasl,beginPath();
canvasl.moveTo(275, 125);
canvasl.quadraticCurveTo(225, 125, 225, 162);
canvasl.quadraticCurveTo(260, 200, 265, 200);
canvasl.quadraticCurveTo(325, 200, 325, 162);
canvasl.quadraticCurveTo(325, 125, 275, 125);
canvasl.closePath();
canvasl.stroke();
11 Дуги
canvasl.beginPath();
canvasl.arc(275, 275, 50, 0, Math.PI * 2, true);
canvasl.moveTo(310, 275);
canvasl.arc(275, 275, 35, 0, 0.75 * Math.PI, false);
canvasl.moveTo(300, 255);
canvasl.arc(265, 255, 35, 0, 0.5 * Math.PI, false);
canvasl.moveTo(280, 255);
canvasl.arc(245, 255, 35, 0, 0.2 * Math.PI, false);
canvasl.closePath();
canvasl.stroke();
11 Текст
canvasl.font = 'italic 40px sans-serif';
canvasl.strokeText("Привет!", 50, 400);
}
</script>
</head>
<body onload="loader()">
<Ь1>Пример применения элемента управления Canvas</hl>
<canvas id="canvas" width="600"
height="500">
</canvas>
</body>
</html>
УрокЗ
Перетаскивание
средствами HTML5
В HTML5 поддерживаются операции перетаскивания, в хо-
де которых отдельные элементы веб-страницы и текст можно
перемещать в окне браузера, используя мышь или другое указа-
тельное устройство.
Подобная возможность оказывается полезной для выполне-
ния таких операций, как перемещение пользователем выбран-
ных товаров в тележку для покупок или настройка начальной
страницы, на которой должны появляться только те элементы,
которые выбраны пользователем. Таким образом, поддержка пе-
ретаскивания является очень важной составляющей HTML5.
Перетаскивание поддерживается с помощью целого ряда ат-
рибутов, добавленных в элементы HTML5. Так, если установить
логическое значение true в атрибуте draggable, соответствующий
элемент станет перетаскиваемым. Но поддержка механизма пе-
ретаскивания реализуется в основном вручную на таком языке
описания сценариев, как JavaScript, что и будет продемонстри-
ровано в этой главе.
Перейдем непосредственно к рассмотрению операций пе-
ретаскивания.
Общее представление
о перетаскивании
На уровне элементов HTML5 перетаскивание реализуется до-
вольно просто с помощью следующих атрибутов этих элементов.
Требующиеся атрибуты: draggable, ondragenter, ondragover,
ondrop, ondragstart, ondragend.
Поддерживающие браузеры: Chrome, Firefox, Opera, Safari
52
Урок 3. Перетаскивание средствами HTML5
Основные действия, касающиеся перетаскивания, происхо-
дят в коде таких языков описания сценариев, как JavaScript,
как будет показано ниже. При этом каждый атрибут с префик-
сом on связывается с соответствующей функцией JavaScript. На-
пример, атрибут ondragstart связывается с функцией start, ко-
гда пользователь начинает перетаскивать тот элемент, который
действительно подлежит перетаскиванию, как показано в при-
веденной ниже строке кода.
ondragstart = "return start(event)";
Ваша задача — написать код функции JavaScript, связывае-
мой с каждым атрибутом с префиксом on.
Совет
Обратите внимание на то, что все атрибуты с префиксом on начи-
наются с фразы ondrag (при перетаскивании), кроме атрибута
ondrop, который соответствует событию опускания перетаскивае-
мого элемента на новом месте. Поэтому атрибут ondrop не следу-
ет трактовать как атрибут перетаскивания и опускания элемента,
чтобы не поставить в тупик некоторые браузеры, которые просто
откажутся выполнять код сценария.
В этой главе в качестве примера перетаскивания будет рас-
смотрен HTML-документ под названием draganddrop.html. Ре-
зультат загрузки этого документа в браузер Firefox приведен на
рис. 3.1-3.2, а весь его код — в конце данной главы. Три перетас-
киваемых элемента <div> обозначены метками 1, 2 и 3. Код в рас-
сматриваемом здесь примере будет настроен таким образом, что-
бы не все элементы <div> можно было перетаскивать на крупные
квадратные целевые элементы, расположенные на веб-странице.
Если, например, попытаться перетащить элемент <div> с меткой
1 на второй целевой элемент, появится знак запретной операции
(рис. 3.1), указывающий на то, что данный целевой элемент не
воспримет перетаскиваемый элемент <div> с меткой 1. С другой
стороны, элемент <div> с меткой 1 можно перетащить на третий
целевой элемент, как показано на рис. 3.2.
А теперь рассмотрим атрибут draggable и атрибуты с префик-
сом on и покажем, как пользоваться ими на практике для под-
держки перетаскивания.
УроцЗ.^ Перетасшыние средстеами HTW5
53
Рис. 3.1. Операция перетаскивания запрещается
Рис. 3.2. Операция перетаскивания разрешается
54
Урок 3. Перетаскивание средствами HTML5
Представление о прикладном
программном интерфейсе
перетаскивания
С полным описанием прикладного программного интерфейса
(API), разработанного W3C для поддержки перетаскивания в
HTML5, можно ознакомиться по адресу http://dev.w3.org/html5/
spec/dnd.html.
На уровне HTML поддержка перетаскивания реализуется
с помощью следующих атрибутов.
•	draggable
•	ondragenter
•	ondragover
•	ondrop
•	ondragstart
•	ondragend
Нетрудно догадаться, что в атрибуте draggable отдельного
элемента устанавливается логическое значение true, если дан-
ный элемент требуется сделать перетаскиваемым. В то же время
атрибуты с префиксом on служат для связывания функций
JavaScript с различными событиями, возникающими при пере-
таскивании. В частности, атрибут ondragenter служит для вызова
функции JavaScript в тот момент, когда перетаскиваемый эле-
мент перетаскивается на другой элемент веб-страницы. В функ-
ции JavaScript имеется возможность указать браузеру, следует
ли опускать перетаскиваемый элемент на расположенный под
ним другой элемент веб-страницы.
Рассмотрим вкратце каждый из упомянутых выше атрибу-
тов, а затем применим их на практике в примере HTML-доку-
мента из файла dradanddrop. html.
Атрибут draggable
Самым основным из всех атрибутов перетаскивания является
атрибут draggable. Для того чтобы сделать элементы перетаски-
ваемыми, в этом атрибуте устанавливается логическое значение
true, как показано в приведенном ниже фрагменте кода.
Урок 3. Перетаскивание средствами HTML5
55
<div id="draggable3" draggable="true”>
</div>
Тем самым браузер уведомляется о том, что данный элемент
является перетаскиваемым, но одной только упомянутой выше
установки атрибута draggable для этого недостаточно. Для того
чтобы механизм перетаскивания начал действовать, необходимо
также связать функции JavaScript и соответствующие атрибуты
с префиксом on.
Атрибут ondragenter
Событие вхождения в область действия целевого элемента
для перетаскивания наступает в нем в тот момент, когда пользо-
ватель перемещает перетаскиваемый элемент над целевым эле-
ментом. Это событие можно связать с функцией JavaScript для
обработки событий (ее вы должны написать сами) так, как пока-
зано ниже.
<div id="targetl"
ondragenter=’’return enter(event) ’’
Следует иметь в виду, что данное событие происходит в целе-
вых элементах перетаскивания, а не в перетаскиваемых.
Атрибут ondragover
Событие нахождения над целевым элементом для перетаски-
вания наступает в нем в тот момент, когда пользователь распола-
гает перетаскиваемый элемент над целевым элементом. Это со-
бытие можно связать с функцией JavaScript для обработки со-
бытий (ее вы должны написать сами) следующим образом.
<div id="targetl"
ondragenter="return enter(event)"
ondragover=”return over(event)”
Данное событие происходит в целевых элементах перетаски-
вания.
56
Урок 3. Перетаскивание средствами HTML5
Атрибут ondrop
Событие опускания на целевой элемент происходит в нем, ко-
гда пользователь опускает перетаскиваемый элемент на целевой.
Это событие можно связать с функцией JavaScript для обработки
событий (ее вы должны написать сами) следующим образом.
<div id="targetl"
ondragenter="return enter(event)"
ondragover="return over(event)"
ondrop="return drop(event)”>
Это событие происходит в целевых элементах опускания. Об-
ратите внимание на то, что оно наступает при опускании, а не
при перетаскивании и опускании!
Атрибут ondragstart
Это событие происходит в перетаскиваемых элементах, ко-
гда пользователь начинает их перетаскивать. Его можно связать
с функцией JavaScript для обработки событий (ее вы должны
написать сами) следующим образом.
<div id="draggablel" draggable="true"
ondragstart="return start(event)”
Данное событие происходит в перетаскиваемых элементах.
Атрибут ondragend
Это событие происходит в перетаскиваемых элементах, когда
пользователь перестает перетаскивать их. Его можно связать
с функцией JavaScript для обработки событий (ее вы должны
написать сами) следующим образом.
<div id="draggablel" draggable="true"
ondragstart="return start(event)"
ondragend=”return end(event)”>1
Данное событие происходит в перетаскиваемых элементах.
Урок 3. Перетаскивание средствами HTML5
57
Объект dataTransf er
Необходимо также упомянуть еще об одном элементе, о кото-
ром следует знать, поскольку он обеспечивает поддержку опера-
ций перетаскивания в HTML5. Это объект dataTransfer, встраи-
ваемый в событийные объекты. Доступ к этому объекту осуще-
ствляется через событийный объект, передаваемый в начале
операций перетаскивания.
В частности, у объекта dataTransfer имеется свойство
effectAllowed, позволяющее указывать разрешенную операцию
перетаскивания. У него имеются также функции setData() и
getData() для указания тех данных, которые требуется пере-
нести вместе с перетаскиваемым элементом, а также функция
setDrag!mage() для указания конкретного изображения перетас-
киваемого элемента.
В приведенном ниже фрагменте кода показан пример приме-
нения объекта dataTransfer в сценарии JavaScript. В этом фраг-
менте кода сначала указывается на то, что операции перемеще-
ния разрешаются, затем сохраняется идентификатор перетаски-
ваемого элемента, чтобы знать, какой именно элемент следует
переместить по завершении операции перетаскивания, и, нако-
нец, задается изображение в виде копии перетаскиваемого эле-
мента, на котором пользователь щелкнул кнопкой мыши (в при-
веденном ниже фрагменте кода оно определяется атрибутом
target объекта е).
е.dataTransfer.effectAllowed='move';
e.dataTransfer.setData("Data",
e.target.getAttribute(*id'));
e.dataTransfer.setDraglmagefe.target, 0, 0);
Пример реализации перетаскивания
Для того чтобы показать, каким образом перетаскивание реа-
лизуется на практике, создадим в качестве примера HTML-до-
кумент под названием draganddrop.html. Результат загрузки это-
го документа в браузер Firefox см. на рис. 3.1-3.2, а весь его
код — в конце главы.
Для того чтобы начать создание примера HTML-документа
draganddrop.html, выполните следующие действия.
58
Урок 3. Перетаскивание средствами HTML5
1.	Создайте HTML-документ draganddrop. html в любом редакторе
текста, например в Windows WordPad.
2.	Введите приведенный ниже код для создания трех целевых
элементов, на которые должны опускаться перетаскиваемые
элементы. Обратите внимание на применение в этом коде
элементов <div> для обозначения целевых элементов, а также
на связывание событий перетаскивания, поддерживаемых
в этих элементах, с функциями JavaScript, которые будут на-
писаны в дальнейшем.
<IDOCTYPE HTML>
<html>
<head>
<title>
Пример реализации перетаскивания
</title>
</head>
<body>
<Ы>Пример реализации перетаскивания*:/hl>
<div id="targetl"
ondragenter="return enter(event)"
ondragover="return over(event)"
ondrop-'return drop(event)">
</div>
<div id="target2"
ondragenter="return enter(event)"
ondragover="return over(event)"
ondrop="return drop(event)">
</div>
<div id="target3"
ondragenter="return enter(event)"
ondragover="return over(event)"
ondrop="return drop(event)">
</div>
</body>
</html>
3.	Введите выделенный ниже полужирным код для создания трех
перетаскиваемых элементов <div> в качестве потомков перво-
го целевого элемента. Обратите внимание на то, что в этом ко-
де задается логическое значение true атрибута draggable каж-
Урок 3. Перетаскивание средствами HTML5
59
дого перетаскиваемого элемента <div>, а также устанавливается
связь событий, поддерживаемых в этих элементах, с функ-
циями JavaScript, которые будут написаны в дальнейшем.
<’DOCTYPE HTML>
<html>
<head>
Пример реализации перетаскивания
</title>
</head>
<body>
<Ы>Пример реализации перетаскивания</Ы>
<div id="targetr
ondragenter-’return enter(event)"
ondragover="return over(event)"
ondrop="return drop(event)”>
<div id=,'draggabler’ draggable=”true”
ondragstart="return start(event)”
ondragend="return end(event)">1
</div>
<div id=,,draggable2" draggable="true"
ondragstart="return start(event)"
ondragend="return end(event)">2
</div>
<div id=,,draggable3" draggable=,,true"
ondragstart="return start(event)"
ondragend="return end(event)">3
</div>
</div>
<div id="target2"
ondragenter="return enter(event)"
ondragover="return over(event)"
ondrop-’return drop(event)">
</div>
<div id="target3"
ondragenter="return enter(event)"
ondragover="return over(event)"
ondrop-’return drop(event)">
60
Урок 3. Перетаскивание средствами HTML5
</div>
</body>
</html>
4.	Сохраните внесенные изменения в файле draganddrop.html.
Непременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Итак, начало рассматриваемому здесь примеру положено. Вы
создали три целевых элемента и три перетаскиваемых элемента.
Но все они пока еще невидимы, и поэтому в следующем задании
вам предстоит заняться их стилевым оформлением.
Стилевое оформление
перетаскиваемых и целевых
элементов
В этом задании необходимо сделать видимыми перетаскивае-
мые элементы <div> и соответствующие целевые элементы для
перетаскивания. В частности, целевые элементы должны быть
оформлены голубым цветом, а перетаскиваемые — оранжевым.
1.	Откройте HTML-документ из файла draganddrop.html в избран-
ном вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для стилевого
оформления перетаскиваемых элементов <div> и соответствую-
щих целевых элементов, а также для задания их размеров.
ClDOCTYPE HTML>
<html>
<head>
<title>
Пример реализации перетаскивания
</title>
<style type=”text/css”>
♦targetl, ftarget2, ftargets
{
float:left; width:250px; height:250px;
padding:lOpx; margin:lOpx;
}
♦draggablel, Jdraggable2, #draggable3
{
Урок 3. Перетаскивание средствами HTML5
61
width:75px; height:7Орх; padding:5рх;
margin:5рх;
}
#target1 {background-color: cyan;}
ftarget2 {background-color: cyan;}
ftargets {background-color: cyan;}
fdraggable1 {background-color: orange;}
fdraggable2 {background-color: orange;}
Idraggable3 {background-color: orange;}
</style>
</head>
<body>
<Ы>Пример реализации перетаскивания</Ы>
<div id="targetl"
ondragenter="return enter(event)"
ondragover="return over(event)"
ondrop-'return drop(event)">
<div id="draggablel" draggable="true"
ondragstart="return start(event)"
ondragend="return end(event)">1
</div>
<div id="draggable2" draggable="true"
ondragstart="return start(event)"
ondragend="retum end (event) ">2
</div>
<div id="draggable3" draggable="true"
ondragstart="return start(event)”
ondragend="return end(event)">3
</div>
</div>
<div id="target2"
ondragenter="return enter(event)”
ondragover="return over(event)"
ondrop="return drop(event)">
</div>
<div id="target3"
ondragenter="return enter(event)"
ondragover="return over(event)"
62
Урок 3. Перетаскивание средствам* НТМЦ>
ondrop=”return drop(event)">
</div>
</body>
</html>
3.	Сохраните внесенные изменения в файле draganddrop.html.
Непременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Теперь перетаскиваемые и целевые элементы для их пере-
таскивания должны быть видны в окне браузера, как показа-
но на рис. 3.3.
Рис. 3.3. Перетаскиваемые и целевые эле-
менты для перетаскивания в HTML-доку-
менте draganddrop.html
Реализация начала операции
перетаскивания
Когда пользователь начинает перетаскивать в рассматриваемом
здесь примере перетаскиваемый элемент <div>, в этом элементе
Урок 3. Перетаскивание средствами HTML5
63
наступает событие ondragstart, которое ранее было связано с функ-
цией JavaScript под названием start)).
В этом задании вам предстоит написать функцию start)) с
целью реализовать начало операции перетаскивания. Данный
процесс можно разделить на три стадии: задание разрешенной
операции перетаскивания, чтобы пользователь мог переместить
нужный ему перетаскиваемый элемент <div>; сохранение иден-
тификатора перетаскиваемого элемента, чтобы переместить его
после опускания на целевом элементе; а также задание изобра-
жения, используемого при перетаскивании по веб-странице.
Для того чтобы реализовать все эти стадии, выполните сле-
дующие действия.
1.	Откройте HTML-документ из файла draganddrop.html в избран-
ном вами редакторе текста, например в Windows WordPad.
2.	Введите приведенный ниже код в элементе <head>, начиная
с нового элемента <script>, где и должна быть написана функ-
ция start)).
<script type="text/javascript">
function start(e)
{
}
3.	Введите выделенный ниже полужирным код в теле функции
start)), чтобы указать на то, что элемент <div>, который поль-
зователь пытается перетащить, действительно можно пере-
таскивать. С этой целью задается значение "move" свойства
dataTransfer.effectAllowed событийного объекта, передавае-
мого функции start ().
<script type="text/javascript">
function start(e)
{
e. dataTransfer. ef f ectAllowed=’move’;
}
4.	Введите выделенный ниже полужирным код в теле функции
start)), чтобы сохранить идентификатор перетаскиваемого
64
Урок 3. Перетаскивание средствами HTML5
элемента <div>. Это даст возможность переместить данный
элемент после его опускания на целевом элементе.
<script type="text/javascript">
function start(e)
{
e.dataTransf er. effectAllowed-move';
e.dataTransfer.setData("Data”,
e.target.getAttribute(’id’));
}
5.	Введите выделенный ниже полужирным код в теле функции
start (), чтобы задать изображение, используемое при переме-
щении перетаскиваемого элемента <div>, со смещением (0, 0).
<script type="text/javascript">
function start(e)
{
e. dataTransf er. ef fee tAllowed='move';
e.dataTransfer.setData{"Data",
e.target.getAttribute{'id'));
e.dataTransfer.setDrag!mage(e.target, 0, 0);
return true;
}
6.	Сохраните внесенные изменения в файле draganddrop.html.
Непременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Теперь пользователю разрешено перемещать перетаскиваемый
элемент <div> в рассматриваемом здесь примере HTML-документа.
Разрешение перетаскиваемым
элементам входить в целевые
элементы
Когда пользователь перемещает перетаскиваемый элемент
<div> на целевой элемент <div>, в последнем наступает событие
ondragenter. Ранее это событие было связано с функцией JavaScript
под названием enter (). В этой функции нужно указать на то, что
Урок 3. Перетаскивание средствами HTML5
65
перетаскиваемому элементу разрешено входить в целевой эле-
мент, для чего из нее должно быть возвращено логическое значе-
ние true.
Для того чтобы реализовать все это в данном задании, выпол-
ните следующие действия.
1.	Откройте HTML-документ из файла draganddrop.html в избран-
ном вами редакторе текста, например в Windows WordPad.
2.	Введите приведенный ниже код функции enter () в элементе
<script>. Эта функция возвращает логическое значение true,
указывающее на то, что перетаскиваемому элементу раз-
решено входить в целевой элемент.
function enter(е)
{
return true;
}
3.	Сохраните внесенные изменения в файле draganddrop.html.
Непременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Теперь пользователь сможет перемещать перетаскиваемые
элементы <div> на целевые элементы <div>.
Разрешение опускать
перетаскиваемые элементы на
определенные целевые элементы
Когда пользователь перемещает перетаскиваемый элемент
<div>, располагая его над целевым элементом <div>, в последнем
наступает событие ondragover, которое ранее было связано с функ-
цией JavaScript под названием over(). С помощью функции over ()
можно указать на то, что перетаскиваемый элемент разрешается
опустить на текущий целевой элемент. Так, если эта функция
возвращает логическое значение true, перетаскиваемый элемент
нельзя опускать на текущий целевой элемент. А если она воз-
вращает логическое значение false, то перетаскиваемый элемент
разрешается опускать на текущий целевой элемент.
Для создания функции over () в этом задании выполните сле-
дующие действия.
'бб
Урок 3. Перетаскивание средствами HTML5
1.	Откройте HTML-документ из файла draganddrop.html в избран-
ном вами редакторе текста, например в Windows WordPad.
2.	Введите приведенный ниже код функции over() в элементе
<script>. В этой функции получаются идентификаторы пере-
таскиваемого элемента (переменная iddraggable) и целевого
элемента (переменная id).
function over(e)
{
var iddraggable =
e.dataTransfer.getData{"Data");
var id = e.target.getAttribute{'id');
}
3.	Введите выделенный ниже полужирным код в теле функ-
ции over(), чтобы указать на то, что любой перетаскиваемый
элемент может быть опущен на первый целевой элемент, что
третий перетаскиваемый элемент <div> может быть опущен
только на второй целевой элемент и что первый и второй пе-
ретаскиваемые элементы <div> могут быть опущены только
на третий целевой элемент.
function over(e)
{
var iddraggable =
e.dataTransfer.getData{"Data");
var id = e.target.getAttribute('id');
if (id ==’targetl’)
return false;
if ((id ==’target2')
&& iddraggable == 'draggable!')
return false;
else if (id ==’target3’
&& (iddraggable == 'draggablel' ||
iddraggable =='draggable2’))
return false;
else
return true;
}
Урок 3. Перетаскивание средствами HTML5
67
4.	Сохраните внесенные изменения в файле draganddrop.html.
Непременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Итак, вы указали браузеру на те перетаскиваемые элементы
<div>, которые могут быть опущены на конкретные целевые эле-
менты <div>.
Обработка событий опускания одних
элементов на другие
Когда пользователь опускает перетаскиваемый элемент <div>
на разрешенный для перетаскивания целевой элемент <div>, не-
вольно возникает вопрос: как переместить перетаскиваемый эле-
мент на целевой? Ответить на этот вопрос нетрудно: достаточно
воспользоваться встроенной в JavaScript функцией appendChild,
чтобы присоединить перетаскиваемый элемент <div> к текущему
целевому элементу <div>.
Когда пользователь опускает перетаскиваемый элемент <div>
на целевой элемент <div>, в последнем наступает событие ondrop,
которое ранее было связано с функцией JavaScript под названи-
ем drop)), чтобы реализовать операцию опускания. Для того что-
бы ввести функцию drop() в HTML-документ draganddrop.html,
выполните следующие действия.
1.	Откройте HTML-документ из файла draganddrop.html в избран-
ном вами редакторе текста, например в Windows WordPad.
2.	Введите приведенный ниже код функции drop() в элементе
<script>. В теле этой функции извлекается идентификатор
перетаскиваемого элемента (переменная iddraggable).
function drop(e)
{
var iddraggable =
e.dataTransfer.getData("Data");
}
68
Урок 3. Перетаскивание средствами HTML5
3.	Введите выделенный ниже полужирным код в теле функции
drop)), чтобы присоединить перетаскиваемый элемент <div>
к целевому элементу <div>, а также остановить дальнейшее
распространение текущего события по цепочке событий в брау-
зере с помощью функции stopPropagation (). Эта функция воз-
вращает логическое значение false, тем самым прекращая
дальнейшее распространение текущего события.
function drop(e)
{
var iddraggable =
e.dataTransfer.getData{"Data");
e.target.appendchild
(document.getElementByld(iddraggable));
e.stopPropagation();
return false;
}
4.	Сохраните внесенные изменения в файле draganddrop.html.
Непременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Итак, вы реализовали в этом задании обработку событий
опускания.
Завершение операций опускания
Когда перетаскиваемый элемент <div> опускается, в нем на-
ступает событие ondragend, которое ранее было связано с функцией
JavaScript под названием end(). В этом задании вам предстоит
ввести код функции end() с целью очистить данные, хранящиеся
в объекте dataTransfer, т.е. идентификатор перетаскиваемого эле-
мента, как только операция опускания будет завершена.
1.	Откройте HTML-документ из файла draganddrop.html в избран-
ном вами редакторе текста, например в Windows WordPad.
2.	Введите приведенный ниже код функции end() в элементе
<script>, завершив его соответствующим дескриптором.
function end(e)
{
е.dataTransfer.clearData("Data");
return true
Урок 3. Перетаскивание средствами HTML5
69
}
</script>
3.	Сохраните внесенные изменения в файле draganddrop.html.
Непременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
На этом создание примера HTML-документа draganddrop. html
завершается. Теперь операции перетаскивания элементов долж-
ны выполняться в любом браузере, где они поддерживаются, как
показано на рис. 3.4.
Пример ре<iпи।ации перем^ивания Mn/ilh Fi.. f, “*X.
Пример реализации перетаскивания
Пример реализации перетаскивания
Рис. 3.4. Перетаскивание элементов в HTML-
документе draganddrop.html
Полный исходный код примера
HTML-документа draganddrop.html
Ниже для справки приводится полностью исходный код рас-
смотренного в этой главе примера HTML-документа draganddrop.
html.
70
Урок 3. Перетаскивание средствами HTML5
<!D0CTYPE HTML>
<html>
<head>
<title>
Пример реализации перетаскивания
</title>
<style type="text/css">
♦targetl, <target2, <target3
{
float:left; width:250px; height:250px;
padding:10px; margin:lOpx;
}
idraggablel, fdraggable2r <draggable3
{
width:75px; height:7Opx; padding:5px;
margin:5px;
}
♦targetl {background-color: cyan;}
♦target2 {background-color: cyan;}
♦target3 {background-color: cyan;}
fdraggablel {background-color: orange;}
#draggable2 {background-color: orange;}
♦draggable3 {background-color: orange;}
</style>
<script type="text/javascript">
function start(e)
{
e.dataTransfer.effectAllowed='move';
e.dataTrans fer.setData("Data"r
e.target.getAttribute('id'));
e.dataTransfer.setDrag!mage(e.target, 0, 0);
return true;
}
function enter(e)
{
return true;
}
function over(e)
{
var iddraggable =
e. dataTransf er .getData( ’’Data");
Урок 3. Перетаскивание средствами HTML5
71
var id = е.target.getAttribute('id');
if(id =='targetl')
return false;
if((id =='target2')
&& iddraggable == 'draggable3')
return false;
else if(id =='target3'
&& (iddraggable == 'draggablel' ||
iddraggable =='draggable2'))
return false;
else
return true;
}
function drop(e)
{
var iddraggable =
e.dataTransfer.getDataf"Data");
e.target.appendChild
(document.getElementByld(iddraggable));
e.stopPropagation();
return false;
}
function end(e)
{
e.dataTransfer.clearData("Data");
return true
}
</script>
</head>
<body>
<Ы>Пример реализации перетаскивания</Ы>
<div id="target1"
ondragenter="return enter(event)"
ondragover="return over(event)"
ondrop="return drop(event)">
<div id="draggablel" draggable="true"
ondragstart="return start(event)"
ondragend="return end(event)">1
</div>
72
Урок 3. Перетаскивание средствами HTML5
<div id="draggable2" draggable="true"
ondragstart="return start(event)"
ondragend="return end(event)">2
</div>
<div id="draggable3" draggable="true"
ondragstart="return start(event)"
ondragend="return end(event)">3
</div>
</div>
<div id="target2"
ondragenter="return enter(event)"
ondragover="return over(event)"
ondrop="return drop(event)">
</div>
<div id="targets"
ondragenter="return enter(event)"
ondragover="return over(event)"
ondrop="return drop(event)">
</div>
</body>
</html>
Урок 4
Элементы управления
веб-формами
В HTML всегда поддерживались элементы управления за-
полняемыми формами. Так, с помощью элемента <input> можно
реализовать текстовые поля:
<input name="text" type="text">
или кнопки-переключатели:
<input name="radio" type="radio">
Подобные элементы управления создаются с помощью эле-
мента <input>, при условии, что в атрибуте type задан тип элемен-
та управления (флажок, кнопка-переключатель, текстовое поле),
а в атрибуте name — имя элемента управления, на которое дела-
ется ссылка в коде (сценария JavaScript или программы РНР,
выполняемой на стороне сервера).
В HTML5 число доступных элементов управления формами
расширено такими элементами, как селектор даты и времени
и элемент задания числовых пределов. Подобные элементы управ-
ления будут рассмотрены в этой главе.
В этой главе будет также создан в качестве примера HTML-
документ webforms.html, в котором отображаются новые элемен-
ты управления. Единственным браузером, в котором эти новые
элементы управления поддерживались на момент написания
данной книги, был браузер Opera, поэтому данный пример HTML-
документа может быть загружен и просмотрен только в этом
браузере. Кроме того, мы создадим небольшую программу РНР,
выполняемую на стороне сервера, для отображения конкретного
значения, введенного в селекторе даты и времени после выбора
кнопки Предъявить в рассматриваемом здесь примере заполняе-
мой формы, чтобы показать, каким образом данные извлекаются
74
Урок 4. Элементы управления веб-формами
из элементов управления формами на сервере. Имейте в виду,
что для изучения материала этой главы совсем не обязательно
знать язык РНР.
С полным описанием элементов управления веб-формами,
разработанных W3C, можно ознакомиться по адресу www.whatwg.
org/specs/web-apps/current-work/multipage/the-input-
element.html#attr-input-type.
А теперь перейдем непосредственно к рассмотрению элемен-
тов управления веб-формами.
Общее представление об элементах
управления веб-формами
Как упоминалось выше, элементы управления веб-формами
создаются с помощью элемента <input> и атрибута type, в кото-
ром задается требуемый тип элемента управления.
Элемент: <input>
Требующиеся атрибуты: нужный тип элемента управления
веб-формой задается в атрибуте type
Поддерживающие браузеры: Opera
Какие же элементы управления веб-формами имеются в
HTML5? В табл. 4.1 все имеющиеся в HTML 5 элементы управ-
ления веб-формами перечислены по их типу, задаваемому в ат-
рибуте type. Разумеется, не все они являются новыми.
Таблица 4.1. Элементы управления веб-формами в HTML5
Тип элемента Назначение
управления
button	Кнопка
checkbox	Флажок
color	Образец цвета
date	Элемент управления вводом даты
datetime	Элемент управления вводом даты и времени
datetime-local	Элемент управления вводом даты и местного времени
email	Текстовое поле для ввода адреса электронной почты
Урок 4. Элементы управления веб-формами
75
	Окончание табл. 4.1
Тип элемента управления	Назначение
file	Метка и кнопка
hidden	Отсутствует
image	Выбираемое щелчком изображение или кнопка
month	Элемент управления вводом месяца
number	Текстовое поле или счетчик
password	Текстовое поле, в котором вводимые данные скрываются
radio	Кнопка-переключатель
range	Ползунок или аналогичный элемент управления
reset	Кнопка
search	Поле поиска
submit	Кнопка
tel	Текстовое поле
text	Текстовое поле
time	Элемент управления вводом времени
url	Текстовое поле
week	Элемент управления вводом недели
Мы рассмотрим новые для HTML5 элементы управления веб-
формами на примере создания HTML-документа webforms.html,
просматриваемого в браузере Opera (рис. 4.1).
Кроме того, в целях демонстрации на языке РНР будет напи-
сана небольшая программа (в исходном файле webforms.php), вы-
полняемая на стороне сервера, для чтения значения, введенного
в элементе управления datetime из HTML-документа webforms.html,
и последующего уведомления о введенном значении (рис. 4.2).
На примере чтения данных из конкретного элемента управления
в сценарии РНР будет показано, каким образом данные считы-
ваются из любой веб-формы на сервер, если, конечно, в этом есть
потребность.
76
Урок 4. Элементы управления веб-формами
Рис. 4.1. Пример заполняемой веб-формы
в HTML-документе webforms.html
Рис. 4.2. Чтение данных из элемента управления вводом
даты и времени
А теперь перейдем к более подробному рассмотрению элемен-
тов управления веб-формами, обратив особое внимание на доступ-
ные для них атрибуты и функции.
Урок 4. Элементы управления веб-формами
77
Представление о прикладном
программном интерфейсе
элементов управления веб-формами
Как упоминалось выше, элементы управления веб-формами
создаются с помощью элемента <input>, а их тип (см. табл. 4.1)
задается в атрибуте type. Какие же еще атрибуты доступны для
элементов управления веб-формами? Если, например, использу-
ется элемент управления range, в котором отдельные числовые
значения можно задавать с помощью ползунка, то при его созда-
нии в элементе <input>, помимо атрибута type, используются
также атрибуты min и шах, устанавливающие пределы изменения
значений.
В табл. 4.2 приведены атрибуты, разрешенные для отдельных
элементов управления веб-формами. Кроме того, у каждого эле-
мента управления Имеются встроенные функции, которые мож-
но вызывать из сценария JavaScript, организуя доступ к данно-
му элементу управления как к объекту. Все эти функции приве-
дены в табл. 4.3. И наконец, у многих элементов управления
имеются встроенные события, происходящие при вводе данных
пользователем (табл. 4.4).
Если одни элементы управления веб-формами возвращают
простые текстовые строки, то другие возвращают отформатиро-
ванные данные. Типы данных, возвращаемых отдельными эле-
ментами управления веб-формами, приведены в табл. 4.5.
Таблица 4.2. Атрибуты, разрешенные для элементов управления веб-формами
Атрибут	Текст, Элек- Скры- Поиск, трон- тый URL, ная Телефон почта	Пароль	Дата, Дата и Время, местное Месяц, время, Неделя Число		Цвет	Число-	Флажок,	Кнопка	Кнопка вые	Кнопка-	предъ-	выбора преде-	переклю- „”*аи явления	изобра- {г*?™’ ооГо.с лов	кнопка лы	чатель	формы	жения	
accept						X	
alt							X
autocomplete	X	X	X	X	X	X	X	
checked						X	
formaction						X	X
formenctype						X	X
formmethod						X	X
formnovalidate .						X	X
formtarget						X	X
height							X
list	X	X		X	X	X	X	
max			X	X	X		
maxlength	X	X	X					
min			X	X	X		
Окончание табл. 4.2
Атрибут	Скры- тый	Текст, Поиск, URL, Телефо!	Элек- трон- ная i почта	Пароль	Дата, Дата и Время, местное Месяц, время, Неделя Число	Число-	Флажок,	в	Кнопка Цвет вые	Кнопка-	ка	предъ- 4	преде-	переклю- *	явления лы	чатель	л	формы	22Х Кнопка выбора фбрадд изобра- Кнопка жения кнопка
multiple			X			X	
pattern		X	X	X			
placeholder		X	X	X			
readonly		X	X	X	X	X		
required		X	X	X	X	X	X	X	
size		X	X	X			
src							X
step					X	X	X	
width							X
Таблица 4.3. Атрибуты и функции, встроенные в элементы управления веб-формами
Атрибут	Скры- тый	Текст, Элек- Поиск, трон- URL, ная Телефон почта		Пароль	Дата, Время, Месяц, Неделя	Дата и местное время, Число	Цвет	Число- вые преде- лы	Флажок, Выг- Кнопка- рузка переклю- фай- чатель лов	Кнопка Кнопка Кнопка предъ- выбора сбро- явления изобра- са, формы жения Кнопка	
checked									X		
files									X		
value	=i о *< о cd X X 5	значение	GO X св -С св X S CD	GO X CD -С CD X s CD	GO X CD CD X §	GO X CD CD X s CD	GO X CD CD X s CD	GO X CD CD X Ф	имя файла по умолча- нию/вклю- чено	=3 о § CD X S 5	о	о S	| CD	CD X	X S	X 5	5
valueAsDate					X						
valueAsNumber					X	X	X				
list		X	X		X	X	X	X			
selectedOption		X	X		X	X	X	X			
select))		X	X	X							
selectionstart		X	X	X							
selectionEnd		X	X	X							
setselection Range))		X	X	X							
Окончание табл. 4.3
Текст, Элек- Дтпибут	СкР“’ Поиск' ТР°Н’ АТрИОуТ	тый yRL)	ная Телефон почта	Дата,	Дата и	Число-	Флажок,	Выг-	Кнопка	Кнопка	Кнопка п	вРемя’	местное	ц	вые	Кнопка-	рузка	предъ-	выбора	сбро- ароль ^есЯц5	ВремЯ|	Чвет	преде-	переклю-	фай-	явления	изобра-	са, Неделя	Число	лы	чатель	лов	формы	жения	Кнопка
stepDown() stepUp()	XXX..	.... XXX..	....
Таблица 4.4. События, встроенные в элементы управления веб-формами
Текст, Элек- Атрибут Скрытый J"». Телефон почта	Пароль	Дата, Время, Месяц, Неделя	Дата и местное время, Число	Цвет	Число-	Флажок,	в	Кнопка вые Кнопка- Ж' предъ- преде-	переклю- * *	явления лы	чатель °	формы	АКХя Кнопка выбора сбр0Са изобра- к ’ жения кнопка
input	X	X	X	X	X	X	X	
change .	X	X	X	X	X	X	XXX.	
82
Урок 4. Элементы управления веб-формами
Таблица 4.5. Типы данных, возвращаемых элементами
управления веб-формами
Тип элемента управления	Тип данных
button	Отсутствует
checkbox	Ряд нулевых или больших значений из заранее определенного списка
color	Цвет из цветового пространства sRGB с красной, синей и зеленой составляющими
date	Дата (год, месяц, день) без указания часового пояса
datetime	Дата и время (год, месяц, день, часы, минуты, секунды и доли секунды) с указанием часового пояса в формате UTC (всеобщего скоординированного времени)
datetime-local	Дата и время (год, месяц, день, часы, минуты, секунды и доли секунды) без указания часового пояса
email	Адрес электронной почты или список подобных адресов
file	Нулевое или большее число файлов типа MIME, дополнительно с указанием имени файла
hidden	Произвольная символьная строка
image	Координаты (относительно конкретных размеров изображения) с дополнительной семантикой, указывающей на то, что это должно быть последнее выбранное значение перед инициированием предъявления формы
month	Дата, состоящая из года и месяца, но без указания часового пояса
number	Числовое значение
password	Текст без разрывов строк (секретные сведения)
radio	Значение перечислимого типа
range	Числовое значение с дополнительной семантикой, указывающей на то, что точное значение не столь важно
reset	Отсутствует
search	Текст без разрывов строк
Урок 4. Элементы управления веб-формами
83
	Окончание табл. 4.5
Тип элемента управления	Тип данных
submit	Значение перечислимого типа с дополнительной семантикой, указывающей на то, что это должно быть последнее выбранное значение перед инициированием предъявления формы
tel	Текст без разрывов строк
text	Текст без разрывов строк
time	Время (часы, минуты, секунды и доли секунды) без указания часового пояса
url	Универсальный идентификатор ресурса (веб-адрес)
week	Дата, состоящая из года и недели в виде числового значения, но без указания часового пояса
Пример создания веб-форм
В этой главе вам предстоит освоить новые для HTML5 эле-
менты управления веб-формами на примере HTML-документа
webforms.html (см. рис. 4.1).
Для того чтобы начать создание примера HTML-документа
webforms.html, выполните следующие действия.
1.	Создайте HTML-документ webforms.html в любом редакторе
текста, например в Windows WordPad.
2.	Введите приведенный ниже код для создания HTML-таблицы,
состоящей из элементов управления веб-формами, а также
кнопки Предъявить.
<!DOCTYPE html>
<html>
<head>
<title>
Пример веб-формы
</title>
</head>
<body>
<Ы>Пример веб-формы</Ы>
<form method="post" action="webforms.php">
<table border="l" cellpadding="5">
84
Урок 4. Элементы управления веб-формами
</table>
<input type="submit" value="Предъявить">
</form>
</body>
</html>
3.	Сохраните внесенные изменения в файле webforms.html. Не-
пременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Итак, начало рассматриваемому здесь примеру положено. А да-
лее вам предстоит ввести по очереди некоторые из новых для
HTML5 элементов управления веб-формами.
Создание элемента управления,
предоставляемого по умолчанию
Если конкретный тип создаваемого элемента управления не
указан, то по умолчанию предоставляется текстовое поле. Имен-
но такой предоставляемый по умолчанию элемент управления
вам предстоит создать в этом задании.
1.	Откройте HTML-документ из файла webforms.html в избран-
ном вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для создания
элемента управления, предоставляемого по умолчанию, не ука-
зывая атрибут type. Обратите внимание на атрибут autofocus,
который обозначает, что в поле данного элемента управления
должен появиться мигающий курсор после загрузки страницы
с веб-формой, а также на атрибут placeholder, позволяющий
задавать текст, заполняющий поле данного элемента управ-
ления по умолчанию, хотя эти атрибуты пока что действуют
не во всех браузерах.
<IDOCTYPE html>
<html>
<head>
<title>
Пример веб-формы
</title>
Урок 4. Элементы управления веб-формами
85
</head>
<body>
<Ы>Пример веб-формы</Ы>
<form method="post" action="webforms.php">
<table border="l" cellpadding="5">
<tr>
<td>Do yMon4aHBD</td><td><input name="name"
placeholder^Введите вайе имя" autofocus>
</td>
</tr>
</table>
<input type="submit" value="Предъявить">
</form>
</body>
</html>
3.	Сохраните внесенные изменения в файле webforms.html. Не-
пременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Теперь элемент управления, предоставляемый по умолчанию,
должен появиться в виде текстового поля в самом начале рас-
сматриваемого здесь примера HTML-документа (см. рис. 4.1).
Создание элемента управления
вводом веб-адреса
В этом задании вам предстоит создать элемент управления
вводом URL, т.е. универсального идентификатора ресурса, или,
проще говоря, адреса веб-сайта.
1.	Откройте HTML-документ из файла webforms.html в избран-
ном вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для создания
элемента управления вводом URL.
<!DOCTYPE html>
<html>
<head>
<title>
86
Урок 4. Элементы управления веб-формами
Пример веб-формы
</title>
</head>
<body>
<Ь1>Пример веб-формы</Ы>
<form method="post" action="webforms.php">
<table border="l" cellpadding="5">
<tr>
<td>no умолчанию</tdxtdxinput name="name"
placeholder^'Введите ваше имя" autofocus>
</td>
</tr>
<tr>
<td>Be6-aflpec</tdxtdxinput name="url"
type="url"x/td>
</tr>
</table>
<input type="submit" value="Предъявить">
</form>
</body>
</html>
3.	Сохраните внесенные изменения в файле webforms.html. Не-
пременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Браузер попытается отформатировать текст, введенный в по-
ле данного элемента управления, в общепринятом формате URL,
начиная с префикса http://. Если же это не удастся сделать, он
выдаст сообщение об ошибке.
Создание элемента управления
вводом адреса электронной почты
В HTML5 поддерживаются также элементы управления вво-
дом адреса электронной почты. Для создания такого элемента
управления выполните следующие действия.
1.	Откройте HTML-документ из файла webforms.html в избран-
ном вами редакторе текста, например в Windows WordPad.
Урок 4. Элементы управления веб-формами
87
2.	Введите выделенный ниже полужирным код для создания
элемента управления вводом адреса электронной почты.
<!DOCTYPE html>
<html>
<head>
<title>
Пример веб-формы
</title>
</head>
<body>
<Ы>Пример веб-формы</Ы>
<form method="post" action="webforms.php">
<table border="l" cellpadding="5">
<tr>
<Ь4>Электронная no4Ta</td><td><input name="email"
type="email"></td>
</tr>
</table>
<input type="submit" value="Предъявить">
</fonn>
</body>
</html>
3.	Сохраните внесенные изменения в файле webforms.html. Не-
пременно сделайте это в текстовом формате. По умолчанию в
текстовом редакторе WordPad выбирается расширенный тек-
стовый формат RTF, непригодный для браузеров.
Браузер попытается отформатировать текст, введенный в по-
ле данного элемента управления, в общепринятом формате адре-
са электронной почты. Если же это не удастся сделать, он выдаст
сообщение об ошибке, как показано на рис. 4.3.
88
Урок 4. Элементы управления веб-формами
Рис. 4.3. Ошибка, обнаруженная в элементе управ-
ления вводом адреса электронной почты
Создание элементов управления
вводом пределов и числовых
значений
В этом задании вам предстоит создать элементы управления
вводом заданных пределов и числовых значений.
1.	Откройте HTML-документ из файла webforms.html в избран-
ном вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для создания
элементов управления вводом заданных пределов и числовых
значений.
<IDOCTYPE html>
<html>
<head>
<title>
Пример веб-формы
</title>
</head>
<body>
<Ы>Пример веб-формы</Ы>
Урок 4. Элементы управления веб-формами
89
<fonn method="post" action="webfonns.php">
<table border="l" cellpadding="5">
<tr>
<tr>
<td>UpeHenH< / tdxtdxinput name=" range"
type="range" min="0" max="100" step="5"
value="40"x/td>
</tr>
<td>4ncло</tdxtdxinput name="number"
type=“number" min="0" max="100"
step="5" value="40"x/td>
</tr>
</table>
<input type="submit" value="Предъявить">
</form>
</body>
</html>
3.	Сохраните внесенные изменения в файле webforms.html. Не-
пременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Как показано на рис. 4.1, элемент управления вводом преде-
лов действует как ползунок, тогда как в поле элемента управле-
ния вводом числовых значений отображается введенное число,
которое может быть увеличено или уменьшено нажатием стрелок
в расположенном справа счетчике. Оба эти элемента управления
позволяют ввести числовое значение. Обратите внимание на ис-
пользуемые в приведенном выше коде атрибуты min и max, с по-
мощью которых задаются конкретные пределы для ввода число-
вых значений, а также на атрибуты step и value, задающие шаг
изменения числовых значений и устанавливаемое по умолчанию
значение соответственно.
90
Урок 4. Элементы управления веб-формами
Создание элементов управления
вводом даты и времени
В этом задании вам предстоит создать элементы управления
вводом даты и времени. К их числу относятся следующие эле-
менты управления.
•	Дата
•	Время
•	Неделя
•	Месяц
•	Дата и время
•	Дата и местное время
Для создания перечисленных выше элементов управления
выполните следующие действия.
1.	Откройте HTML-документ из файла webforms.html в избран-
ном вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для создания
элементов управления вводом даты и времени.
<!DOCTYPE html>
<html>
<head>
<title>
Пример веб-формы
</title>
</head>
<body>
<Ы>Пример веб-формы</Ы>
<fonn method="post" action="webfonns.php">
<table border="l" cellpaddings,,5">
<tr>
<td>Дата< / tdxtdxinput name=" date"
type="dateя ></td>
</tr>
<tr>
<td>HeflenH</td><td><input name="week"
type="week"x/td>
Урок 4. Элементы управления веб-формами
91
</tr>
<tr>
<td>Mecnq</tdxtdxinput name="month"
type="month"></td>
</tr>
<tr>
<td>Bpe>m</tdxtdxinput name= "time"
type="time"x/td>
</tr>
<tr>
<td>flaTa и времЖ/tdxtdxinput name="datetime"
type="datetime"></td>
</tr>
<tr>
<td>flaia и местное времЖ/tdxtdxinput
name=”datetimelocal”
type="datetime-local"></td>
</tr>
</table>
<input type="submit" value="Предъявить">
</form>
</body>
</html>
3.	Сохраните внесенные изменения в файле webforms.html. Не-
пременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Для выбора конкретной даты в поле соответствующего эле-
мента управления появляется всплывающее окно селектора дат,
как показано на рис. 4.4.
Создание элемента управления
выбором цвета
В этом задании вам предстоит создать элемент управления
выбором цвета.
1.	Откройте HTML-документ из файла webforms.html в избран-
ном вами редакторе текста, например в Windows WordPad.
92
Урок 4. Элементы управления веб-формами
Рис. 4.4. Элементы управления вводом даты и времени
2.	Введите выделенный ниже полужирным код для создания
элемента управления выбором цвета.
<!DOCTYPE html>
<html>
<head>
<title>
Пример веб-формы
</title>
</head>
<body>
<Ь1>Пример веб-формы</Ы>
<form method="post" action="webfonns.php">
<table border="l" cellpadding="5">
<tr>
<td>I(BeT</td><td><input name=" color
Урок 4. Элементы управления веб-формами
93
type="color"></td>
</tr>
<tr>
</table>
<input type="submit" value="Предъявить">
</form>
</body>
</html>
3.	Сохраните внесенные изменения в файле webforms.html. Не-
пременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
На момент написания этой книги в поле элемента управления
выбором цвета можно было вводить не только образец конкретного
цвета, но и его шестнадцатеричное значение, например f f f f f f или
f89f8a, что вообще характерно для HTML. Но это не очень удоб-
но, поскольку на уровне операционной системы предоставляют-
ся удобные селекторы для выбора подходящего цвета.
Создание элемента управления
запросом на поиск
В этом задании вам предстоит создать элемент управления
запросом на поиск.
1.	Откройте HTML-документ из файла webforms.html в избран-
ном вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для создания
элемента управления запросом на поиск.
<!DOCTYPE html>
<html>
<head>
<title>
Пример веб-формы
</title>
</head>
<body>
<Ы>Пример веб-формы</Ы>
94
Урок 4. Элементы управления веб-формами
<form method="post" action="webforms.php">
<table border=nr' cellpadding=n5">
<tr>
<td>3anpoc на поиск</tdxtdxinput name="search"
type="search"></td>
</tr>
</table>
<input type="submit" value="Предъявить">
</fonn>
</body>
</html>
3.	Сохраните внесенные изменения в файле webforms.html. Не-
пременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Полный исходный код примера
HTML-документа webforms.html
Ниже для справки приводится полностью исходный код
рассмотренного в этой главе примера HTML-документа
webforms.html.
<!DOCTYPE html>
<html>
<head>
<title>
Пример веб-формы
</title>
</head>
<body>
<Ы>Пример веб-формы</Ь1>
<form method="post" action="webforms.php">
<table border="l" cellpadding="5">
<tr>
<td>no yMon4aHHio</tdxtdxinput name="name"
placeholder="BBeflHTe ваше имя" autofocus>
Урок 4. Элементы управления веб-формами
95
</td>
</tr>
<tr>
<td>Be6-aflpec</tdxtdxinput name="url"
type="url"x/td>
</tr>
<tr>
<td>3neKTpoHHan почта</tdxtdxinput name="email”
type="emai1" x /td>
</tr>
<tr>
<tr>
<td>IIpeflenH</tdxtdxinput name="range"
type="range" min="0” max=”100” step="5"
value="40"x/td>
</tr>
<td>4ncno</tdxtdxinput name=" number"
type=”number" min="0" max="100"
step="5" value="40"x/td>
</tr>
<tr>
<td>flaTa</tdxtdxinput name=" date"
type="date"x/td>
</tr>
<tr>
<td>Henenn</tdxtdxinput name="week"
type=”week"x/td>
</tr>
<tr>
<td>MecHq</tdxtdxinput name="month"
type="month"></td>
</tr>
<tr>
<td>BpeMH</tdxtdxinput name=" time"
type="time"></td>
</tr>
<tr>
<td>flaTa и времЖ/tdxtdxinput name="datetime"
type="datetime"></td>
</tr>
<tr>
<td>flaTa и местное времж/tdxtdxinput
name="datetimelocal"
type="datetime-local"x/td>
</tr>
<tr>
<td>I]BeT</tdxtdxinput name="color"
96
Урок 4. Элементы управления веб-формами
type="color"></td>
</tr>
<tr>
<tr>
<td>3anpoc на noHCK</td><td><input name="search"
type="search"x/td>
</tr>
</table>
<br>
<input type="submit" value="Предъявить">
</form>
</body>
</html>
Исходный код программы PHP,
выполняемой на стороне сервера
Ниже приведен исходный код программы, написанной на
языке РНР и выполняемой на стороне сервера, для чтения дан-
ных, введенных в поле элемента управления вводом даты и вре-
мени, и последующего уведомления о введенном значении. Если
хотите воспользоваться этой программой в указанных целях,
поместите ее исходный файл webforms .php на сервере в том же ка-
талоге, где находится файл webforms.html примера HTML-доку-
мента, созданного в этой главе.
<html>
<head>
<title>
Чтение данных из элементов управления вводом даты и времени
</title>
</head>
<body>
<hl>
Чтение данных из элементов управления вводом даты и времени
</hl>
Вы ввели:
<?php
echo ^REQUEST["datetime"];
?>
</body>
</html>
Урок 5
Внутристрочное
редактирование
Согласно спецификации элементы HTML5 допускается ре-
дактировать. Это означает, что пользователь может пра-
вить их содержимое. В действительности редактируемым
можно сделать весь документ, что и будет рассмотрено в этой
главе.
Здесь имеются в виду не только текстовые поля. Когда эле-
менты делают редактируемыми, в их число можно включить
любые типы элементов, в том числе и элементы <div>.
В этой главе вам предстоит сделать редактируемым элемент
<div>. Это означает, что когда пользователь щелкнет кнопкой
мыши на этом элементе, появится знак вставки, указывающий
на место для ввода текста. Пользователь может также отформа-
тировать текст, как будет показано далее.
Кроме того, мы сделаем редактируемым весь документ, вклю-
чая и элемент <if гаше>. Пользователю будет даже предоставлена
возможность орфографической проверки введенного им текста.
А теперь перейдем непосредственно к рассмотрению средств
внутристрочного редактирования.
Общее представление
о внутристрочном редактировании
Для организации внутристрочного редактирования можно
воспользоваться тремя атрибутами.
•	Атрибут contenteditable. Делает редактируемыми отдель-
ные элементы HTML.
98
Урок 5. Внутристрочное редактирование
•	Атрибут designmode. Делает редактируемым весь доку-
мент.
•	Атрибут spellcheck. Активизирует проверку орфографии.
Рассмотрим эти атрибуты по отдельности.
Атрибут contented!table, делающий
редактируемыми отдельные элементы
Поддерживающие браузеры: Chrome, Firefox, IE, Safari,
Opera
В HTML5 отдельный элемент можно сделать редактируемым
с помощью атрибута contenteditable. В этом атрибуте можно ус-
тановить три значения.
•	Логическое значение true. Делает содержимое элемента
редактируемым.
•	Логическое значение false. Делает содержимое элемента
нередактируемым.
•	Значение inherit. Делает данный атрибут таким же, как и
у родительского элемента.
В рассматриваемом далее примере HTML-документа editdiv.
html в атрибуте contenteditable элемента <div> будет установлено
логическое значение true. Благодаря этому пользователь получит
возможность вводить текст в элементе <div>.
Атрибут designmode, делающий
редактируемыми документы
Поддерживающие браузеры: Chrome, Firefox, IE, Safari,
Opera
Это атрибут самого документа, поэтому с его помощью можно
сделать редактируемым весь документ. В атрибуте designmode
можно установить два значения.
•	Значение on. Включает атрибут designmode, делая доку-
мент редактируемым.
•	Значение off. Выключает атрибут designmode, делая доку-
мент нередактируемым.
Урок 5. Внутристрочное редактирование
99
В рассматриваемом далее примере HTML-документа editif rame.
html в атрибуте designmode будет установлено значение on. Благо-
даря этому пользователь получит возможность править документ
в элементе <if rame>.
Атрибут spellcheck, активизирующий
проверку орфографии
Поддерживающие браузеры: Firefox
Во время редактирования содержимого такого элемента, как
<div>, браузер может разрешить проверку орфографии введенно-
го текста. В атрибуте spellcheck можно установить два значения.
•	Логическое значение true. Включает проверку орфографии.
•	Логическое значение false. Выключает проверку орфо-
графии.
Далее будет показано, каким образом проверка орфографии
активизируется для содержимого элемента <div> в браузере Firefox.
А теперь покажем, каким образом все рассмотренные выше
средства внутристрочного редактирования реализуются на прак-
тике. И начнем с примера HTML-документа editdiv.html, в кото-
ром редактируемым будет элемент <div>.
Пример внутристрочного
редактирования в элементе <div>
Прежде всего вам предстоит применить на практике новый
для HTML5 атрибут contenteditable в элементе <div>. Это даст
пользователю возможность вводить и править текст в данном
элементе, как показано на рис. 5.1.
Кроме того, будет показано, каким образом текст форматиру-
ется, для чего в рассматриваемый здесь пример HTML-докумен-
та editdiv.html будут введены кнопки Ж (полужирный), К (кур-
сив) и Ч (подчеркивание) (см. рис. 5.1). Пользователю будет пре-
доставлена также возможность вводить ссылки в свой текст и
просматривать его в окончательном виде непосредственно в фор-
мате HTML после щелчка на кнопке Добавить ссылку и Показать
исходный текст соответственно.
100
Урок 5. Внутристрочное редактирование
Рис. 5.1. Ввод и правка текста в примере HTML-
документа editdiv.html
Для того чтобы приступить к созданию примера HTML-доку-
мента editdiv.html, выполните следующие действия.
1.	Создайте HTML-документ editdiv.html в любом редакторе тек-
ста, например в Windows WordPad.
2.	Введите приведенный ниже код основного тела HTML-до-
кумента.
<!DOCTYPE html>
<html>
<head>
<title>
Редактируемый элемент &lt;div&gt;
</title>
</head>
<body>
<hl Редактируемый элемент &lt;div&gt;</hl>
</body>
</html>
Урок 5. Внутристрочное редактирование
101
3.	Введите выделенный ниже полужирным код для создания
элемента <div> и установки логического значения true в его
атрибуте contenteditable.
<!DOCTYPE html>
<html>
<head>
<title>
Редактируемый элемент &lt;div&gt;
</title>
</head>
<body>
<hlРедактируемый элемент &lt;div&gt;</hl>
<div id=”div” style=*border: solid
black; height: ЗООрх; width: 450px'
contenteditable=”true”>
</div>
</body>
</html>
4.	Сохраните внесенные изменения в файле editdiv.html. Не-
пременно сделайте это в текстовом формате. По умолчанию в
текстовом редакторе WordPad выбирается расширенный тек-
стовый формат RTF, непригодный для браузеров.
Итак, начало созданию примера HTML-документа editdiv.html,
приведенного на рис. 5.1, положено.
Ввод кнопки выделения текста
полужирным
Пользователю можно разрешить выделять текст полужир-
ным в редактируемом элементе <div>, причем так, чтобы сделать
это было нетрудно. Для этого пользователю достаточно выделить
форматируемый текст мышью и щелкнуть на кнопке Ж, как в
обычном редакторе текста. А ваша задача — переслать команду
выделения текста полужирным текущему HTML-доку менту.
Для пересылки команды выделения текста полужирным те-
кущему HTML-документу служит функция JavaScript под на-
званием execCommand (). Этой функции передаются следующие ар-
гументы.
102
Урок 5. Внутристрочное редактирование
object.execCommand(sCommand [, bUserlnterface] [, vValue])
Ниже вкратце поясняется, что именно обозначают аргументы
функции execCommand ().
•	Обязательный аргумент s Command — символьная строка, в ко-
торой указывается команда, пересылаемая на исполнение.
•	Необязательный аргумент bUserlnterface — логическое
значение true или false, обозначающее одно из двух:
♦	отображать пользовательский интерфейс (логическое
значение true);
♦	не отображать пользовательский интерфейс (логическ-
ое значение false);
• Необязательный аргумент vValue обозначает присваивае-
мое значение.
В данном случае требуется переслать команду выделения тек-
ста полужирным, как показано в приведенной ниже строке кода,
document.execCommand(’bold', false, null);
Для того чтобы ввести кнопку Ж в пример HTML-документа
editdiv.html, выполните следующие действия.
1.	Откройте HTML-документ из файла editdiv.html в избранном
вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для создания
нового элемента <div>, чтобы добавить кнопки в пример рас-
сматриваемого здесь HTML-документа.
<!DOCTYPE html>
<html>
<head>
<title>
Редактируемый элемент &lt;div&gt;
</title>
</head>
<body>
<hl Редактируемый элемент &lt;div&gt;</hl>
<div>
</div>
<br>
Урок 5. Внутристрочное редактирование
103
<div id="div" style-border:solid
black; height: ЗООрх; width: 450px'
contenteditable="true">
</div>
</body>
</html>
3.	Введите выделенный ниже полужирным код для создания
кнопки Ж и пересылки команды выделения текста полужир-
ным при выборе этой кнопки.
<!DOCTYPE html>
<html>
<head>
<title>
Редактируемый элемент &lt;div&gt;
</title>
</head>
<body>
<Ы>Редактируемый элемент &lt;div&gt;</hl>
<div>
<input type="button" value="I"
onclick="document. execConmand ('bold', false, null); ">
</div>
<br>
<div id="div” style-border:solid
black; height: ЗООрх; width: 450px'
contented!table="true">
</div>
</body>
</html>
4.	Сохраните внесенные изменения в файле editdiv.html. Непре-
менно сделайте это в текстовом формате. По умолчанию в тек-
стовом редакторе WordPad выбирается расширенный тексто-
вый формат RTF, непригодный для браузеров.
Теперь пользователь может выделить текст и щелкнуть на
кнопке Ж, чтобы отформатировать этот текст полужирным, как
показано на рис. 5.2.
104
Урок 5. Внутристрочное редактирование
Рис. 5.2. Выделение текста полужирным в приме-
ре HTML-документа editdiv.html
Ввод кнопки выделения текста
курсивом
С помощью кнопки К и соответствующей команды формати-
рования текста, пересылаемой текущему HTML-документу, мож-
но разрешить пользователю выделять текст курсивом.
Для того чтобы ввести кнопку К в пример HTML-документа
editdiv.html, выполните следующие действия.
1.	Откройте HTML-документ из файла editdiv.html в избранном
вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для создания
кнопки К и пересылки команды выделения текста курсивом
при выборе этой кнопки.
<!DOCTYPE html>
<html>
<head>
<title>
Редактируемый элемент &lt;div&gt;
</title>
</head>
<body>
<Ы>Редактируемый элемент &lt;div&gt;</hl>
<div>
<input type="button" value="M"
onclick="document. execCommand ('bold', false, null);">
Урок 5. Внутристрочное редактирование
105
<input type="button" value="D"
onclick="docwnent.execCoiDBand ('italic', false, null);">
</div>
<br>
<div id="div" style-border:solid
black; height: ЗООрх; width: 450px*
contented!table="true">
</div>
</body>
</html>
3.	Сохраните внесенные изменения в файле editdiv.html. Не-
пременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Теперь пользователь может выделить текст и щелкнуть на
кнопке К, чтобы отформатировать этот текст курсивом, как по-
казано на рис. 5.3.
Рис. 5.3. Выделение текста курсивом в примере
НТМ L-документа editdiv. html
Ввод кнопки выделения текста
подчеркиванием
С помощью кнопки Ч и соответствующей команды формати-
рования текста, пересылаемой текущему HTML-документу, мож-
но разрешить пользователю выделять текст подчеркиванием.
106
Урок 5. Внутристрочное редактирование
Для того чтобы ввести кнопку Ч в пример HTML-документа
editdiv.html, выполните следующие действия.
1.	Откройте HTML-документ из файла editdiv.html в избранном
вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для создания
кнопки Ч и пересылки команды выделения текста подчерки-
ванием при выборе этой кнопки.
<!DOCTYPE html>
<html>
<head>
<title>
Редактируемый элемент &lt;div&gt;
</title>
</head>
<body>
<hl>Редактируемый элемент &lt;div&gt;</hl>
<div>
<input type="button" value="I"
onclick="document .execCommand('bold', false, null);">
<input type="button" value="K"
onclick="document.execConnnand ('italic', false, null);">
<input type=”button" value="4"
onclick="document. execCoaaand('underline', false,
null);">
</div>
<br>
<div id="div" style-border:solid
black; height: ЗООрх; width: 450px'
contenteditable="true">
</div>
</body>
</html>
3.	Сохраните внесенные изменения в файле editdiv.html. Не-
пременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный тек-
стовый формат RTF, непригодный для браузеров.
Теперь пользователь может выделить текст и щелкнуть на
кнопке Ч, чтобы отформатировать этот текст подчеркиванием,
как показано на рис. 5.4.
Урок 5. Внутристрочное редактирование
107
Рис. 5.4. Выделение текста подчеркиванием в при-
мере HTML-документа editdiv.html
Ввод кнопки добавления ссылки
С помощью кнопки Добавить ссылку и команды создания ссыл-
ки createlink можно разрешить пользователю вводить ссылки
в редактируемый текст. Как только пользователь выделит от-
дельный фрагмент текста и щелкнет на кнопке Добавить ссылку,
откроется диалоговое окно, в котором ему будет предоставлена
возможность ввести URL для ссылки на конкретный веб-сайт, а
затем из выделенного фрагмента текста будет создана сама ссылка.
Для того чтобы ввести кнопку Добавить ссылку в пример HTML-
документа editdiv.html, выполните следующие действия.
1.	Откройте HTML-документ из файла editdiv.html в избранном
вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для создания
кнопки Добавить ссылку и вызова функции createlink ().
<!DOCTYPE html>
<html>
<head>
<title>
Редактируемый элемент &lt;div&gt;
</title>
</head>
<body>
<hl Редактируемый элемент &lt;div&gt;</hl>
<div>
<input type="button" value="M"
108
Урок 5. Внутристрочное редактирование
onelick="document.execCommand('bold', false, null);">
<input type="button" value="K"
onclick="document.execCommand ('italic', false, null);">
<input type="button" value="4"
onclick="document.execCommand('underline', false, null);">
<input type=”button" ¥а1ие=”Добавить ссылку”
onclick=”createLink();”>
</div>
<br>
<div id="div" style-border:solid
black; height: ЗООрх; width: 450px'
contenteditable="true">
</div>
</body>
</html>
3.	Введите выделенный ниже полужирным код JavaScript, что-
бы получить сначала URL, вводимый пользователем для ссыл-
ки в открывающемся диалоговом окне, а затем добавить этот
URL к ссылке с помощью команды createlink.
<!DOCTYPE html>
<html>
<head>
<title>
Редактируемый элемент &lt;div&gt;
</title>
<script type="text/javascript”>
function createLink()
{
var url = prompt("Введите веб-адрес:”, "http://”);
if (url)
document.execCommand("createlink”, false, url);
}
</script>
<7head>
<body>
<hl Редактируемый элемент &lt;div&gt;</hl>
<div>
<input type="button" value="M"
onclick="document.execCommand('bold', false, null);">
<input type="button" value="K"
onclick-'document.execCommand ('italic', false, null);">
<input type="button" value="4"
Урок 5. Внутристрочное редактирование
109
onclick="document. execCommand('underline', false, null); ">
<input type="button" value-'Добавить ссылку"
onclick="createLink();">
</div>
<br>
<div id="div" style-border:solid
black; height: ЗООрх; width: 450px*
contenteditable="true">
</div>
</body>
</html>
4.	Сохраните внесенные изменения в файле editdiv.html. Непре-
менно сделайте это в текстовом формате. По умолчанию в тек-
стовом редакторе WordPad выбирается расширенный тексто-
вый формат RTF, непригодный для браузеров.
Теперь пользователь может выделить текст и щелкнуть на
кнопке Добавить ссылку, чтобы превратить выделенный текст
в гиперссылку, как показано на рис. 5.5, где ссылка выделена
подчеркиванием, как и после щелчка на кнопке Ч.
Рис. 5.5. Добавление ссылки в примере HTML-до-
кумента editdiv.html
Ввод кнопки для показа исходного
текста
Когда пользователь завершит форматирование своего текста,
ему можно разрешить просматривать его в окончательном виде
110
Урок 5. Внутристрочное редактирование
непосредственно в формате HTML после щелчка на кнопке Пока-
зать исходный текст. Так, если пользователь введет следующий
текст: “Это пример выделения текста полужирным, курсивом и
подчеркиванием. А это пример ввода ссылки.”, как показано на
рис. 5.5, то в формате HTML он будет выглядеть следующим об-
разом.
Это пример выделения текста <span style="font-weight: bold;">
полужирным</зрап>, <span style=" font-style: italic; "Журсивом
</span>n <span style="text-decoration: underline;">подчеркива-
нием</зрап>. А это пример ввода <а href="http://wine.ua">
ссылки</а>.
Для того чтобы ввести кнопку Показать исходный текст в пример
HTML-документа editdiv.html, выполните следующие действия.
1.	Откройте HTML-документ из файла editdiv.html в избранном
вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для создания кноп-
ки Показать исходный текст и вызова функции showSource ().
<1DOCTYPE html>
<html>
<head>
<title>
Редактируемый элемент &lt;div&gt;
</title>
</head>
<body>
<hl Редактируемый элемент &lt;div&gt;</hl>
<div>
<input type="button" value="I"
onclick="document. execCommand ('bold', false, null); ">
<input type="button" value="K"
onclick-'document.execCommand ('italic', false, null);">
<input type="button" value="4"
onclick-'document.execCommand('underline', false, null);">
<input type="button" value-'Добавить ссылку"
onclick="createLink();">
<input type=”button"
уа1ие="Показать исходный текст”
onclick=”showSource();”>
</div>
Урок 5. Внутристрочное редактирование
111
<br>
<div id-’div" style-border:solid
black; height: ЗООрх; width: 450px'
contenteditable="true">
</div>
</body>
</html>
3.	Введите выделенный ниже полужирным код JavaScript для
чтения исходного текста в формате HTML из свойства innerHTML
элемента <div> и последующего его вывода в диалоговом окне.
<!DOCTYPE html>
<html>
<head>
<title>
Редактируемый элемент &lt;div&gt;
</title>
<script type=”text/javascript”>
function showSource()
{
var content = document.getElementByld
(”div").innerHTML;
content.replace(/</g/&lt;’);
content.replace(/>/g, '&gt;’);
alert(content);
}
function createLink()
{
var url = prompt("Введите веб-адрес:", "http://");
if (url)
document.execCommand("createlink", false, url);
}
</script>
</head>
<body>
<hl Редактируемый элемент &lt;div&gt;</hl>
<div>
<input type-'button" value-'Ж"
onclick-'document.execCommand('bold', false, null);">
<input type="button" value="K"
onclick="document.execCommand ('italic', false, null);">
<input type="button" value="4"
112
Урок 5. Внутристрочное редактирование
onclick="document. execCommand ('underline', false, null); ">
<input type="button" value-'Добавить ссылку"
onclick="createLink();">
</div>
<br>
<div id="div" style-borders solid
black; height: ЗООрх; width: 450px'
contenteditable="trne">
</div>
</body>
</html>
4.	Сохраните внесенные изменения в файле editdiv.html. Непре-
менно сделайте это в текстовом формате. По умолчанию в тек-
стовом редакторе WordPad выбирается расширенный тексто-
вый формат RTF, непригодный для браузеров.
Теперь пользователь может щелкнуть на кнопке Показать ис-
ходный текст, чтобы просмотреть текст, введенный им в элементе
<div>, непосредственно в формате HTML, как показано на рис. 5.6.
Рис. 5.6. Вывод в диалоговом окне исходного текста не-
посредственно в формате HTML из примера HTML-доку-
мента editdiv.html
Проверка орфографии
Если браузер поддерживает проверку орфографии, а на момент
написания этой книги такая возможность имелась только в брау-
зере Firefox, то текст, введенный в редактируемых элементах и до-
кументах, можно проверить на правильность написания. Проверка
орфографии активизируется в браузере Firefox по умолчанию.
Урок 5. Внутристрочное редактирование
113
Совет
Для того чтобы отключить проверку орфографии, достаточно ус-
тановить логическое значение false в атрибуте spellcheck редак-
тируемого элемента или же всего документа.
Для орфографической проверки редактируемого текста в брау-
зере Firefox выполните следующие действия.
1.	Введите текст в редактируемом элементе или документе.
Все слова, которые будут признаны в браузере Firefox как
написанные с ошибками, будут подчеркнуты волнистой ли-
нией (рис. 5.7).
Рис. 5.7. Проверка орфографии в браузере Firefox
2.	Щелкните правой кнопкой мыши на слове, которое подчерк-
нуто волнистой линией как написанное неправильно. Поя-
вится контекстное меню с разными предлагаемыми вариан-
тами правильного написания данного слова (см. рис. 5.7).
3.	Выберите подходящий вариант правильного написания сло-
ва. Он будет автоматически вставлен в текст вместо заменяе-
мого слова.
114
Урок 5. Внутристрочное редактирование
Полный исходный код примера
HTML-документа editdiv.html
Ниже для справки приводится полностью исходный код рас-
смотренного в этой главе примера HTML-документа editdiv.html.
<!DOCTYPE html>
<html>
<head>
<title>
Редактируемый элемент &lt;div&gt;
</title>
<script type="text/javascript">
function showSource()
{
var content = document.getElementByld
("div").innerHTML;
content.replace(/</g, *&lt;');
content.replace(/>/g, '&gt;');
alert(content);
}
function createlink()
{
var url = prompt("Введите веб-адрес:", "http://");
if (url)
document.execCommand("createlink", false, url);
}
</script>
</head>
<body>
<hl Редактируемый элемент &lt;div&gt;</hl>
<div>
<input type="button" value="«"
onclick-’document.execCommand('bold', false, null);">
<input type="button" value="K"
onelick="document.execCommand ('italic', false, null);">
<input type="button" value="4"
onclick="document. execCommand('underline', false, null); ">
<input type="button" value="flo6aBHTb ссылку"
onclick="createLink();">
<input type="button"
value-'Показать исходный текст"
onclick="showSource();">
Урок 5. Внутристрочное редактирование
115
</div>
<br>
<div id-'div" style-border:solid
black; height: ЗООрх; width: 450px'
contented!table="true">
</div>
</body>
</html>
Пример внутристрочного
редактирования в элементе <iframe>
Далее вам предстоит применить на практике новый для HTML5
атрибут designmode, делающий редактируемым весь документ
в плавающей рамке элемента <iframe>. Это даст пользователю
возможность вводить и править текст документа в данном эле-
менте, как показано на рис. 5.8. С помощью атрибута designmode
весь элемент <if rame> и любые включаемые в него элементы стано-
вятся редактируемыми. Таким образом, вместо отдельного элемента
Рис. 5.8. Ввод и правка текста в примере HTML-до-
кумента editiframe.html
116
Урок 5. Внутристрочное редактирование
<div> теперь редактированию подлежит весь документ, содер-
жащийся в элементе <if гаше>.
Как и в примере HTML-документа editdiv.html, в данном слу-
чае пользователь может щелкнуть на кнопках Ж, К и Ч, чтобы
отформатировать выделенный текст полужирным, курсивом и под-
черкиванием соответственно.
Для того чтобы приступить к созданию примера HTML-доку-
мента editiframe.html, выполните следующие действия.
1.	Создайте HTML-документ editiframe.html в любом редакторе
текста, например в Windows WordPad.
2.	Введите приведенный ниже код основного тела HTML-доку-
мента, включая элемент <if rame>.
<I DOCTYPE html>
<html>
<head>
<title>
Редактируемый элемент &lt;iframe&gt;
</title>
</head>
<body onload="loader()">
<hl Редактируемый элемент &lt;iframe&gt;</hl>
<iframe id="content" style-border:solid
black; height: ЗООрх; width: 500px'
src="about:blank">
</iframe>
</body>
</html>
3.	Введите выделенный ниже полужирным код для активизации
атрибута designmode в элементе <if rame>.
<I DOCTYPE html>
<html>
<head>
<title>
Редактируемый элемент &lt;iframe&gt;
</title>
<script type="text/javascript">
var iframe;
function loader()
{
iframe = document.getElementByld("content");
Урок 5. Внутристрочное редактирование
117
iframe.contentDocument.designMode = "on”;
}
window.addEventListener("loader", onload, false);
</script>
</head>
<body onload="loader()">
<hl>Редактируемый элемент &lt;iframe&gt;</hl>
<iframe id="content" style-border:solid
black; height: ЗООрх; width: 500px'
src="about:blank">
</iframe>
</body>
</html>
4.	Сохраните внесенные изменения в файле editiframe. html. Сде-
лайте это в текстовом формате. По умолчанию в текстовом
редакторе WordPad выбирается расширенный текстовый фор-
мат RTF, непригодный для браузеров.
Итак, начало созданию примера HTML-документа editif rame.
html положено. В нем был определен элемент <if rame> и активизи-
рован его атрибут designmode. Далее вам предстоит ввести в этот
HTML-документ кнопки форматирования текста.
Ввод кнопок в HTML-документ
editiframe.html
В этом задании вам предстоит ввести кнопки в созданный ра-
нее пример HTML-документа editiframe.html. А поскольку эти
кнопки выполняют те же функции, что и в примере HTML-доку-
мента editdiv.html, их назначение и код создания не требуют ка-
ких-то дополнительных пояснений.
Для того чтобы ввести кнопки в пример HTML-документа
editiframe.html, выполните следующие действия.
1.	Откройте HTML-документ из файла editiframe.html в избран-
ном вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для ввода кно-
пок в данный HTML-документ.
118
Урок 5. Внутристрочное редактирование
c’DOCTYPE html>
<html>
<head>
<title>
Редактируемый элемент &lt;iframe&gt;
</title>
<script type="text/javascript">
var iframe;
function loader()
{
iframe = document.getElementBy!d{"content");
iframe.contentDocument.designMode = "on";
}
function showSource()
{
var content = iframe.contentDocument.body.innerHTML;
content.replace(/</g, ’&lt;’);
content.replace(/>/g, ’&gt;’);
alert(content);
}
function createLink()
{
var url = prompt(’’Введите веб-адрес:", "http://");
if (url)
iframe.contentDocument.execCommand("createlink",
false, url);
}
window.addEventListener("loader", onload, false);
</script>
</head>
<body onload="loader()">
<hl Редактируемый элемент &lt;iframe&gt;</hl>
<div>
<input type="button" value="I"
onclick=
"iframe.contentDocument.execCommand(’bold*, false,
null);’’>
<input type=’’button" value="K"
onclick=
"iframe.contentDocument.execCommand(’italic’, false,
null); ’’>
<input type="button" value="4"
Урок 5. Внутристрочное редактирование
119
onclick=
"iframe. contentDocument.execCommand('underline', false,
null);">
<input type="button" уа1ие="Добавить ссылку"
onclick="createLink();">
<input type="button" уа1ие="Показать исходный текст"
onclick="showSource();">
</div>
<iframe id="content" style-border:solid
black; height: ЗООрх; width: 500px'
src="about:blank">
</iframe>
</body>
</html>
3.	Сохраните внесенные изменения в файле editiframe.html. Сде-
лайте это в текстовом формате. По умолчанию в текстовом
редакторе WordPad выбирается расширенный текстовый фор-
мат RTF, непригодный для браузеров.
На этом создание примера HTML-документа editiframe.html
завершается. Внешне он практически ничем не отличается от
примера HTML-документа editdiv.html, как показано на рис. 5.8.
Но в данном примере пользователю предоставляется возмож-
ность править весь документ в элементе <if rame>.
Полный исходный код примера
HTML-документа editiframe.html
Ниже для справки приводится полностью исходный код
рассмотренного в этой главе примера HTML-документа
editiframe.html.
<1 DOCTYPE html>
<html>
<head>
<title>
Редактируемый элемент &lt;iframe&gt;
</title>
<script type="text/javascript">
var iframe;
function loader()
{
120
Урок 5. Внутристрочное редактирование
iframe = document.getElementByld("content");
iframe.contentDocument.designMode = "on";
}
function showSource()
{
var content = iframe.contentDocument.body.innerHTML;
content.replace(/c/g, '&lt;');
content.replace(/>/g, ’&gt;');
alert(content);
}
function createLinkf)
{
var url = prompt("Введите веб-адрес:", "http://");
if (url)
iframe.contentDocument.execCommand("createlink", false, url);
}
window.addEventListener("loader", onload, false);
</script>
</head>
cbody onload="loader()">
chi Редактируемый элемент &lt;iframe&gt;</hl>
<div>
cinput type="button" value="I"
onclick=
"iframe.contentDocument.execCommand('bold', false, null);">
cinput type="button" value="K"
onclick=
"iframe.contentDocument.execCommand('italic', false, null);">
cinput type="button" value="4"
onclick=
"iframe.contentDocument.execCommand('underline', false, null);">
cinput type="button" value="Добавить ссылку"
onclick="createLink();">
cinput type="button" value-'Показать исходный текст"
onclick="showSource();">
c/div>
cbr>
ciframe id="content" style-border:solid
black; height: ЗООрх; width: 500px'
src="about:blank">
c/iframe>
c/body>
c/html>
Урок 6
Обращение
к предыстории браузера
В HTML5 предоставляется возможность манипулировать
предысторией браузера, контролируя его предыдущее и текущее
состояния. В частности, объект history дает возможность пе-
ремещаться вперед и назад по веб-страницам, просматривав-
шимся в браузере. Это означает, что с помощью данного объек-
та предыстории можно, например, вернуться на три страницы
назад.
Кроме того, в объекте состояния, помещаемом в предыстории
браузера, могут быть сохранены данные. Таким образом, данные
можно сначала ввести в объект состояния, а затем поместить
объект состояния в предысторию браузера вместе с текущей веб-
страницей. А для восстановления сохраненных данных достаточ-
но извлечь объект состояния из предыстории браузера. Это дает
возможность передавать данные из одной страницы на другую.
В этой главе будет показано, каким образом данный механизм
работает на практике. А теперь перейдем непосредственно к рас-
смотрению того, что собой представляет предыстория браузера.
Общее представление
о предыстории браузера
В этой главе будет рассмотрен пример HTML-документа
pophistory.html, приведенного на рис. 6.1.
В данном примере демонстрируются различные свойства объ-
екта history, доступного в HTML5. Так, если пользователь щел-
кнет на кнопке Назад, произойдет переход на одну просматри-
вавшуюся страницу назад, что аналогично выбору кнопки Назад
в самом браузере. А если пользователь щелкнет на кнопке Вперед,
122
Урок 6. Обращение к предыстории браузера
то произойдет переход на одну просматривавшуюся страницу
вперед. Если же следующая страница отсутствует, то ничего су-
щественного не произойдет.
Рис. 6.1. Манипулирование предысторией браузера в при-
мере HTML-документа pophistory.html
Кроме того, в текстовом поле можно ввести целое значение, на-
пример 5, а затем щелкнуть на кнопке Перейти, чтобы перейти на
пять просматривавшихся страниц вперед. А если ввести отрица-
тельное целое значение, то произойдет переход на соответствую-
щее число просматривавшихся в браузере страниц назад.
Помимо этого, в рассматриваемом здесь примере отображает-
ся протяженность предыстории браузера, как показано на
рис. 6.1. Доступность протяженности предыстории браузера яв-
ляется частью спецификации HTML5.
И наконец, в рассматриваемом примере пользователю пре-
доставляется возможность ввести текст и поместить его в пре-
дысторию как данные, сохраненные в объекте текущего состоя-
ния, а затем перейти к другой странице и вернуться назад. В этом
случае объект состояния будет извлечен из предыстории, и введен-
ный пользователем текст появится в окне браузера. Подобным
образом можно передавать данные с одной страницы на другую.
Механизм размещения и извлечения объекта состояния вме-
сте с сохраненными данными должен поддерживаться браузером
как часть его функций обращения к предыстории. К сожалению,
Урок 6. Обращение к предыстории браузера
123
на момент написания этой книги отсутствовали какие-либо офи-
циальные сведения о подобной поддержке в браузерах, поэтому
данный механизм будет рассмотрен только в коде. Но как только
его поддержка появится в браузерах, вы уже будете готовы реа-
лизовать его на практике.
Ниже приведен краткий обзор программных средств, поло-
женных в основу примера, рассматриваемого в данной главе.
Представление о прикладном
программном интерфейсе
предыстории браузера
Объект history является составной частью объекта window
(т.е. его потомком) в браузере, и поэтому к нему можно обра-
щаться по ссылке window.history. Ниже приведены атрибуты
и функции, применяемые для реализации объекта window.history
в коде HTML5.
•	window.history.length
•	window.history.back()
•	window.history.forward()
•	window.history.go()
•	window.history.pushstate()
•	window.history.replaceState()
•	window.onpopstate
Рассмотрим их по порядку и более подробно.
Атрибут window.history.length
Атрибут window.history.length предоставляет целый ряд эле-
ментов предыстории из сеанса просмотра веб-страниц в браузере.
Более подробно этот атрибут будет рассмотрен далее по ходу соз-
дания примера HTML-документа pophistory.html.
Функция window.history.back()
Эта функция осуществляет продвижение на один шаг назад в
предыстории браузера. Таким образом, она возвращает браузер
124
Урок 6. Обращение к предыстории браузера
на предыдущую веб-страницу. Если же предыдущая страница
отсутствует, эта функция не производит никаких действий.
Функция window.history.forward()
Данная функция осуществляет продвижение на один шаг
вперед в предыстории браузера. Так, если пользователь, про-
сматривающий страницу А, перейдет на страницу Б, а затем
вернется к странице А, то для последующего перехода к страни-
це Б, т.е. на одну просматривавшуюся страницу вперед, следует
выполнить данную функцию. Если же следующая страница от-
сутствует, эта функция не производит никаких действий.
Функция window.history.go([delta])
Эта универсальная функция позволяет перемещаться вперед
и назад на число страниц, указанное в ее аргументе delta. Так,
если передать этой функции числовое значение -2 в качестве ее
аргумента delta, браузер осуществит возврат на две просматри-
вавшиеся страницы назад. А если передать данной функции чи-
словое значение 5, то браузер осуществит переход на пять про-
сматривавшихся страниц вперед.
В определении данной функции аргумент delta указывается в
квадратных скобках потому, что он является необязательным.
Поэтому если не предоставить ей аргумент delta, браузер просто
перезагрузит текущую страницу. Как и следовало ожидать, дан-
ная функция не производит никаких действий, если аргумент
delta оказывается за пределами предыстории браузера.
Функция window.history.pushstate(data,
title [, url ])
Данная функция позволяет поместить данные в предысто-
рию. Аргумент data обозначает объект, содержащий введенные
данные, аргумент title — имя, по которому следует обращаться
к данным, тогда как аргумент url позволяет связать данные с кон-
кретной страницей, чтобы извлечь их из предыстории при пе-
резагрузке этой страницы.
Урок 6. Обращение к предыстории браузера
125
Функция window.history.replacestate(data,
title [, url ])
Эта функция осуществляет замену данных, имени и URL (т.е.
веб-адреса) в текущем элементе предыстории браузера значе-
ниями, задаваемыми в аргументах data, title и url.
Атрибут window, onpopstate
Данный атрибут обозначает событие, происходящее при из-
влечении объекта состояния из предыстории. В итоге этот объект
становится доступным вместе с хранящимися в нем данными.
Обработка данного события будет продемонстрирована в коде по
ходу создания примера HTML-документа pophistory.html.
Пример обращения к предыстории
браузера
Для того чтобы приступить к созданию примера HTML-доку-
мента pophistory.html, демонстрирующего особенности обраще-
ния к предыстории браузера на практике, выполните следующие
действия.
1.	Создайте HTML-документ pophistory.html в любом редакторе
текста, например в Windows WordPad.
2.	Введите приведенный ниже код основного тела HTML-доку-
мента.
<!DOCTYPE html>
<html>
<head>
<title>
Предыстория просмотра веб-страниц
</title>
</head>
<body>
<Ы>Предыстория просмотра веб-страниц</Ы>
</body>
</html>
126
Урок 6. Обращение к предыстории браузера
3.	Введите выделенный ниже полужирным код для создания
элементов <div>, используемых в данном примере для ото-
бражения результатов.
<!DOCTYPE html>
<html>
<head>
<title>
Предыстория просмотра веб-страниц
</title>
</head>
<body onload=”loader()”>
<Ы>Предыстория просмотра веб-страниц</Ы>
<br>
<div id=”length”x/div>
<br>
<div id=”state”x/div>
<br>
</body>
</html>
4.	Сохраните внесенные изменения в файле pophistory.html. Не-
пременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Итак, начало созданию примера HTML-документ pophistory,
html положено. А теперь необходимо снабдить его функциональ-
ными возможностями для манипулирования предысторией
браузера.
Ввод кнопки Назад
С помощью функции window.history.back() и кнопки Назад
можно разрешить пользователю перемещаться назад по предыс-
тории браузера. Для того чтобы ввести эту кнопку в рассматри-
ваемый здесь пример HTML-документа pophistory.html, выпол-
ните следующие действия.
1.	Откройте HTML-документ из файла pophistory.html в избран-
ном вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для созданця
новой кнопки Назад.
Урок 6. Обращение к предыстории браузера
127
<!DOCTYPE html>
<html>
<head>
<title>
Предыстория просмотра веб-страниц
</title>
</head>
<body onload="loader()">
<Ы>Предыстория просмотра веб-страниц</Ы>
<input type=”button” ¥а1ие=”Назад”
onclick=”back(); '*>
<br>
<div id="length"x/div>
<br>
<div id="state"x/div>
<br>
</body>
</html>
3.	Введите выделенный ниже полужирным код для создания
функции back, вызывающей функцию window.history.back()
и активизирующей связанную с ней кнопку Назад.
<!DOCTYPE html>
<html>
<head>
<title>
Предыстория просмотра веб-страниц
</title>
<script type=”text/javascript”>
function back()
{
window.history.back();
}
</script>
</head>
<body onload="loader()">
<Ы>Предыстория просмотра веб-страниц</Ы>
<input type="button" value-’Назад"
onclick="back();">
128
Урок 6. Обращение к предыстории браузера
<br>
<div id="length"></div>
<br>
<div id="state"x/div>
<br>
</body>
</html>
4.	Сохраните внесенные изменения в файле pophistory.html. Не-
пременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Теперь пользователь может щелкнуть на кнопке Назад, как
показано на рис. 6.1, чтобы перейти на одну просматривавшуюся
в браузере страницу назад. В частности, пользователь может
перейти сначала на веб-сайт по адресу www.usatoday.com, как по-
казано на рис. 6.2, а затем на страницу с примером HTML-доку-
мента pophistory.html (рис. 6.3). Если же он щелкнет на кнопке
Назад, то произойдет возврат на начальную страницу веб-сайта
по адресу www.usatoday.com (рис. 6.4).

http.//www. usatoday com/
«-USA
%
fewt	• 4* 6 Й* Money
Essentteto: Markets ! Scores I G ime?  Lottenes I Video I Photo» I Oprmon
Used grease a hot item for thieves
Obama: American
OOamn told tamdies n De*
the country has я tong wi
recovery end a tot o* ptos
IRS to stop mailin'
Рис. 6.2. Начальная страница веб-сайта периодиче-
ского издания USA Today
Урок 6. Обращение к предыстории браузера
129
Рис. 6.3. Переход на страницу с примером HTML-документа
pophistory.html
Рис. 6.4. Возврат на начальную страницу веб-сайта
периодического издания USA Today
Ввод кнопки Вперед
С помощью функции window.history. forward() и кнопки Вперед
можно также разрешить пользователю перемещаться вперед по
предыстории браузера. Для того чтобы ввести эту кнопку в рас-
сматриваемый здесь пример HTML-документа pophistory.html,
выполните следующие действия.
130
Урок 6. Обращение к предыстории браузера
1.	Откройте HTML-документ из файла pophistory.html в избран-
ном вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для создания
новой кнопки Вперед.
<!DOCTYPE html>
<html>
<head>
<title>
Предыстория просмотра веб-страниц
</title>
</head>
<body onload="loader()">
<Ы>Предыстория просмотра веб-страниц</Ы>
<input type="button" уа1ие="Назад"
onclick="back();">
<input type="button" value="Вперед’
onclick="forward));">
<br>
<div id="length"x/div>
<br>
<div id=”state"></div>
<br>
</body>
</html>
3.	Введите выделенный ниже полужирным код для создания
функции forward, вызывающей функцию window.history,
forward)) и активизирующей связанную с ней кнопку Вперед.
c’DOCTYPE html>
<html>
<head>
<title>
Предыстория просмотра веб-страниц
</title>
<script type="text/javascript">
function back))
Урок 6. Обращение к предыстории браузера
131
{
window.history.back();
}
function forward()
{
window.history.forward();
}
</script>
</head>
<body onload="loader()">
<Ы>Предыстория просмотра веб-страниц</Ы>
<input type="button" value-'Назад"
onclick="back();">
<input type="button" value="Вперед"
onclick="forward();">
<br>
<div id="length"x/div>
<br>
<div id="state"x/div>
<br>
</body>
</html>
4.	Сохраните внесенные изменения в файле pophistory.html. Не-
пременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый»формат RTF, непригодный для браузеров.
Если теперь пользователь щелкнет на кнопке Вперед, в пре-
дыстории браузера произойдет переход на одну просматривав-
шуюся страницу вперед.
Ввод кнопки Перейти
С помощью текстового поля, кнопки Перейти и функции
window.history.до() можно разрешить пользователю ввести кон-
кретное число страниц для продвижения по предыстории брау-
зера вперед (положительное целое значение) или назад (отрица-
тельное целое значение).
Для того чтобы ввести кнопку Перейти и текстовое поле в рас-
сматриваемый здесь пример HTML-документа pophistory.html,
выполните следующие действия.
132
Урок 6. Обращение к предыстории браузера
1.	Откройте HTML-документ из файла pophistory.html в избран-
ном вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для создания
нового текстового поля и кнопки Перейти.
<!DOCTYPE html>
<html>
<head>
<title>
Предыстория просмотра веб-страниц
</title>
</head>
<body onload="loader()">
<Ы>Предыстория просмотра веб-страниц</М>
<input type="button" 7а1ие="Назад"
onclick="back();">
<input type="button" value="Вперед"
onclick="forward();">
<br>
Число перемечаемых страниц: <input id="amount"
type="text">
<input type="button" valuedПерейти" onclick=’go();>
<br>
<br>
<div id="length"x/div>
<br>
<div id="state"x/div>
<br>
</body>
</html>
3.	Введите выделенный ниже полужирным код для создания
функции до, вызывающей функцию window, hi story, до () и ак-
тивизирующей связанную с ней кнопку Перейти.
<!DOCTYPE html>
<html>
<head>
<title>
Урок 6. Обращение к предыстории браузера
133
Предыстория просмотра веб-страниц
</title>
<script type="text/javascript">
function back()
{
window.history.back{);
}
function forward{)
{
window.history.forward{);
}
function go()
{
var amount = document.getElementByld("amount").value;
window.history.go(amount);
}
</script>
</head>
<body onload="loader()">
<Ы>Предыстория просмотра веб-страниц</Ы>
<input type="button" 7а1ие="Назад"
onclick="back();">
cinput type="button" value="Вперед"
onclick="forward();">
<br>
<div id="length"x/div>
<br>
<div id="state"x/div>
<br>
</body>
</html>
4.	Сохраните внесенные изменения в файле pophistory.html. Не-
пременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Если теперь пользователь введет в текстовом поле число пе-
ремещаемых страниц и щелкнет на кнопке Перейти, произойдет
переход вперед или назад по предыстории браузера на заданное
число страниц.
134
Урок 6. Обращение к предыстории браузера
Получение протяженности
предыстории браузера
С помощью атрибута window.history, length можно определить
общее число веб-страниц, хранящихся в предыстории браузера,
т.е. количество элементов для продвижения по предыстории
вперед или назад. Для того чтобы отобразить в рассматриваемом
здесь примере HTML-документа pophistory.html протяженность
предыстории браузера, выполните следующие действия.
1.	Откройте HTML-документ из файла pophistory.html в избран-
ном вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для отображения
количества элементов в предыстории браузера в элементе <div>.
<!DOCTYPE html>
<html>
<head>
<title>
Предыстория просмотра веб-страниц
</title>
<script type="text/javascript">
function back()
{
window.history.back();
}
function forward()
{
window.history.forward();
}
function go{)
{
var amount = document.getElementByld("amount").value;
window.history.go(amount);
}
function loader()
{
var length = window.history.length;
document.getElementByld(’length").innerHTML = "<hl>" +
Протяженность предыстории:  + length + "</hl>";
}
Урок 6. Обращение к предыстории браузера
135
</script>
</head>
<body onload="loader()”>
<Ы>Предыстория просмотра веб-страниц</Ы>
<input type="button" 7а1ие="Назад"
onclick="back();">
<input type="button" value="Вперед"
onclick="forward{);">
<br>
Число перемещаемых страниц: <input id="amount"
type="text">
<input type="button" value="Перейти" onclick="go();">
<br>
<br>
<div id="length"x/div>
<br>
<div id="state"x/div>
<br>
</body>
</html>
3.	Сохраните внесенные изменения в файле pophistory.html. Не-
пременно сделайте это в текстовом формате. По умолчанию в
текстовом редакторе WordPad выбирается расширенный тек-
стовый формат RTF, непригодный для браузеров.
Если теперь загрузить в браузер страницу с примером HTML-
документа pophistory.html, на ней будет отображено количество
элементов предыстории браузера, как показано на рис. 6.5.
Размещение данных в предыстории
Пользователю можно также разрешить помещать текстовые
данные в предыстории текущей страницы для последующего их
восстановления. Для этой цели выполните следующие действия.
1.	Откройте HTML-документ из файла pophistory.html в избран-
ном вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для создания
текстового поля и кнопки с меткой Поместить данные.
136
Урок 6. Обращение к предыстории браузера
Рис. 6.5. Окно браузера с количеством элементов его предыстории
<!DOCTYPE html>
<html>
<head>
<title>
Предыстория просмотра веб-страниц
</title>
<script type="text/javascript">
function back()
{
window.history.back();
}
</script>
</head>
<body onload="loader()”>
<Ы>Предыстория просмотра веб-страниц</Ы>
cinput type=’,button" 7а1ие="Назад"
onclick=”back();”>
<input type="button" value="Вперед"
onclick="forward();">
<br>
Число перемещаемых страниц: <input id="amount"
type="text">
<input type="button" value="Перейти" onclick="go();">
Урок 6. Обращение к предыстории браузера
137
<br>
<br>
<br>
Помещаемый текст: <input id="statedata"
type="text">
<input type="button" value="Поместить данные”
onclick="pushdata();">
<br>
<div id="length"></div>
<br>
<div id="state"x/div>
<br>
</body>
</html>
3.	Введите выделенный ниже полужирным код для сохранения
введенного пользователем текста в объект и размещения это-
го объекта в предыстории текущей страницы. При возврате
к этой странице сохраненный текст будет восстановлен.
<!DOCTYPE html>
<html>
<head>
<title>
Предыстория просмотра веб-страниц
</title>
<script type="text/javascript">
function back{)
{
window.history.back{);
}
function pushData()
{
var statedata =
document.getElementById("statedata”).value;
var containerobject = {container: statedata};
history.pushstate(containerobject, "item”,
"pophistory.html");
}
</script>
</head>
<body onload="loader()">
138
Урок 6. Обращение к предыстории браузера
<Ы>Предыстория просмотра веб-страниц</Ы>
<input type="button” value-'Назад"
onclick="back{);">
<input type="button" value="Вперед"
onclick="forward(); ">
<br>
Число перемещаемых страниц: <input id="amount"
type="text">
<input type="button" value="Перейти" onclick="go{);">
<br>
<br>
<br>
Помещаемый текст: <input id="statedata"
type="text">
<input type="button" value="Поместить данные"
onclick="pushdata();">
<br>
<div id="length"x/div>
<br>
<div id="state"x/div>
<br>
</body>
</html>
4.	Сохраните внесенные изменения в файле pophistory.html. Не-
пременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Если теперь пользователь введет данные в текстовом поле
и щелкнет на кнопке Поместить данные, введенный им текст бу-
дет помещен в предысторию текущей страницы. В следующем
задании вам предстоит извлечь текст, помещенный в предысто-
рию браузера.
Извлечение данных из предыстории
Итак, введенные данные сохранены в объекте состояния и по-
мещены в предыстории текущей страницы, откуда они будут из-
влечены автоматически при перезагрузке текущей страницы.
Таким образом, введенные однажды данные могут быть восста-
новлены из предыстории. Для того чтобы извлечь эти данные из
предыстории и отобразить их в окне браузера, необходимо свя-
зать событие onpopstate, порождаемое для текущей страницы,
с функцией его обработки.
Урок 6. Обращение к предыстории браузера
139
1.	Откройте HTML-документ из файла pophistory.html в избран-
ном вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для обработки
события onpopstate, в результате чего текст, введенный поль-
зователем, будет восстановлен и затем отображен в элементе
<div>.
<!DOCTYPE html>
<html>
<head>
<title>
Предыстория просмотра веб-страниц
</title>
<script type="text/javascript”>
function back{)
{
window.history.back();
}
function pushData{)
{
var statedata = document.getElementByld("statedata").value;
var containerobject = {container: statedata};
history.pushstate(containerobject, "item",
"pophistory.html");
}
function popData(event)
{
var state = "Страница: " + document.location + 
Данные: " + event.state.container;
document.getElementById("state").innerHTML = "<hl>" +
state + "</hl>";
};
window.addEventhistener("popstate”, popData, false);
</script>
</head>
<body onload="loader()">
<Ь1>Предыстория просмотра веб-страниц</Ы>
<input type="button" value="Ha3an"
onclick="back{);">
<input type="button" value="Вперед"
140
Урок 6. Обращение к предыстории браузера
onclick="forward();">
<br>
Число перемещаемых страниц: <input id="amount"
type="text">
<input type="button" value="Перейти" onclick="go{);">
<br>
<br>
<br>
Помещаемый текст: <input id="statedata"
type="text">
<input type="button" value="Поместить данные"
onclick="pushdata{);">
<br>
<div id="length"x/div>
<br>
<div id="state"x/div>
<br>
</body>
</html>
3.	Сохраните внесенные изменения в файле pophistory.html. Не-
пременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Если теперь пользователь введет текст на странице HTML-до-
кумента pophistory.html, щелкнет на кнопке Поместить данные,
перейдет к следующей странице, а затем вернется к странице
HTML-документа pophistory.html, то введенный им текст будет
автоматически извлечен из предыстории и отображен на данной
странице. (На момент написания этой книги отсутствовали ка-
кие-либо официальные сведения о поддержке механизма разме-
щения и извлечения данных из предыстории в браузерах. Но как
только его поддержка появится в браузерах, вы будете готовы
реализовать его на практике.)
Полный исходный код примера
HTML-документа pophistory.html
Ниже для справки приводится полностью исходный код рас-
смотренного в этой главе примера HTML-документа pophistory,
html.
Урок 6. Обращение к предыстории браузера
141
<!DOCTYPE html>
<html>
<head>
<title>
Предыстория просмотра веб-страниц
</title>
<script type="text/javascript">
function back()
{
window.history.back();
}
function forward{)
{
window.history.forward();
}
function go{)
{
var amount = document.getElementById("amount").value;
window.history.go(amount);
}
function loader{)
{
var length = window.history.length;
document.getElementByld{"length").innerHTML = "<hl>" +
"Протяженность предыстории: " + length + "</hl>";
}
function pushData{)
{
var statedata = document.getElementByld{"statedata").value;
var containerobject = {container: statedata};
history.pushstate{containerobject, "item", "pophistory.html");
}
function popData{event)
{
var state = "Страница: " + document.location + " Данные: " +
event.state.container;
document.getElementByldf"state").innerHTML = "<hl>" + state +
"</hl>";
};
window.addEventListenerf"popstate", popData, false);
</script>
142
Урок 6. Обращение к предыстории браузера
</head>
<body onload="loader{)">
<Ы>Предыстория просмотра веб-страниц</Ы>
cinput type="button" value="Назад"
onclick="back{);">
cinput type="button" value="Вперед"
onelick="forward{);">
<br>
<br>
Число перемещаемых страниц: <input id="amount"
type="text">
cinput type="button" value="Перейти" onclick="go();">
<br>
<br>
<br>
Помещаемый текст: <input id="statedata"
type="text">
<input type="button" value="Поместить данные"
onclick="pushdata();">
<br>
<div id="length"></div>
<br>
<div id="state"></div>
<br>
</body>
</html>
Урок 7
Обмен сообщениями
между документами
В HTML5 предоставляется возможность обмениваться со-
общениями между окнами документов и доменами. Именно
этому и посвящен данный урок.
Допустим, страница Б загружается на страницу А из того же
самого каталога сервера для отображения в элементе <iframe>.
Теперь в HTML5 предоставляется возможность обмениваться
текстовыми сообщениями между страницами А и Б и соответст-
венно обрабатывать их. Такой обмен сообщениями называется
межоконным.
В действительности страница Б может быть загружена из со-
вершенно другого домена. Но она будет по-прежнему появляться
в элементе <iframe> на странице А. Обмен сообщениями в этом
случае будет называться междоменным. Если раньше междомен-
ный обмен сообщениями не допускался, то теперь он разрешен.
Даже если страница Б загружается из совершенно другого серве-
ра, это обстоятельство совсем не мешает отправлять сообщения
со страницы А на страницу Б.
В этой главе будет показано, каким образом действует меха-
низм обмена сообщениями. А теперь перейдем непосредственно
к его рассмотрению.
Общее представление об обмене
сообщениями
В данной главе будет создан первый пример HTML-документа
parent.html, приведенного на рис. 7.1.
Он содержит элемент <iframe>, обведенный черной рамкой
(см. рис. 7.1), где должно отображаться содержимое второй стра-
144
Урок 7. Обмен сообщениями между документами
ницы child.html, находящейся в том же самом каталоге, что и
страница parent.html. Благодаря такой структуре рассматривае-
мого здесь HTML-документа появляется возможность обменивать-
ся сообщениями между окнами в одном и том же приложении.
Рис. 7.1. Пример межоконного обмена сообщениями между
страницами parent.html и child.html
В данном примере имеется возможность ввести сообщение
в текстовом поле (см. рис. 7.1), а затем щелкнуть на кнопке
Отправить, чтобы переслать это сообщение на вторую страницу
HTML-документа, откуда оно отобразится обратно в элементе
<iframe>, как показано на рис. 7.2. Это характерный пример ме-
жоконного обмена сообщениями.
Во втором примере, рассматриваемом в этой главе, будет про-
демонстрировано применение механизма междоменного обмена
сообщениями, где в окнах отображаются веб-страницы из разных
доменов в Интернете. В данном случае страница domainparent,
html, приведенная на рис. 7.3, загружается из другого домена по
сравнению со страницей domainchild.html, появляющейся в эле-
менте <iframe> (рис. 7.3).
Сообщение можно ввести в текстовом поле (см. рис. 7.3), а за-
тем щелкнуть на кнопке Отправить, чтобы переслать это сообще-
Урок 7. Обмен сообщениями между документами
145
ние с первой страницы domainparent.html на вторую страницу
domainchild.html HTML-документа, откуда оно отобразится об-
ратно в элементе <iframe>, как показано на рис. 7.4. Это харак-
терный пример междоменного обмена сообщениями.
Рис. 7.2. Межоконный обмен сообщениями
Рис. 7.3. Пример междоменного обмена сообщениями между
страницами domainparent.html и domainchild.html
А теперь перейдем к краткому обзору программных средств,
положенных в основу обоих примеров организации обмена сооб-
щениями, рассматриваемых в этой главе.
146
Урок 7. Обмен сообщениями между документами
Рис. 7.4. Междоменный обмен сообщениями
Представление о прикладном
программном интерфейсе обмена
сообщениями
Механизм внутреннего обмена сообщениями реализуется сред-
ствами такого языка, как JavaScript. Неплохое введение в обмен
сообщениями можно найти по адресу www.whatwg.org/specs/
web-apps/current-work/multipage/comms.html.
Ниже перечислены программные средства, используемые в
сценариях для организации обмена сообщениями.
•	Функция postMessage ()
•	Событие onMessage
•	Атрибут event.data
•	Атрибут event.origin
•	Атрибут event. source
Рассмотрим их по порядку и более подробно.
Функция postMessage()
Поддерживающие браузеры: Opera, Safari
Эта функция служит в качестве основного средства для от-
правки сообщений в HTML5 по месту назначения:
window.postMessage(message, targetorigin)
Урок 7. Обмен сообщениями между документами
147
где аргумент message обозначает отправляемое сообщение, тогда
как аргумент targetorigin — место его назначения. О местах
назначения сообщений речь пойдет более подробно ниже, когда
дело дойдет до их отправки. Место назначения особым образом
определяет адресат сообщения, подобно URL. Если отправить со-
общение не по месту назначения, указываемому во втором аргу-
менте функции postMessage(), это сообщение будет отвергнуто.
Для указания любого места назначения достаточно передать
данной функции значение в качестве второго ее аргумента.
Событие onMessage
Поддерживающие браузеры: Opera, Safari
Это событие наступает при получении сообщения. С ним свя-
зывается функция его обработки с целью восстановить конкрет-
ное отправленное сообщение в результате анализа члена данных
событийного объекта.
Атрибут event.data
Поддерживающие браузеры: Opera, Safari
Событийный объект, передаваемый обработчику события
onMessage, содержит все необходимые сведения о сообщении, то-
гда как атрибут event.data — текст сообщения.
Атрибут event.origin
Поддерживающие браузеры: Opera, Safari
Этот атрибут содержит место назначения отправленного со-
общения.
Атрибут event.source
Поддерживающие браузеры: Opera, Safari
Этот атрибут содержит объект WindowProxy исходного окна.
А теперь применим все эти программные средства на практи-
ке, начиная с примера межоконного обмена сообщениями между
страницами parent.html и child.html.
148
Урок 7. Обмен сообщениями между документами
Создание страницы parent.html
для примера межоконного обмена
сообщениями
Для того чтобы приступить к созданию HTML-страницы
parent.html из примера межоконного обмена сообщениями, вы-
полните следующие действия.
1.	Создайте HTML-документ parent.html в любом редакторе тек-
ста, например в Windows WordPad.
2.	Введите приведенный ниже код основного тела HTML-доку-
мента.
CIDOCTYPE html>
<html>
<head>
<title>
Межоконный обмен сообщениями
</title>
</head>
<body>
<Ы>Межоконный обмен сообщениями</Ы>
</body>
</html>
3.	Введите выделенный ниже полужирным код для создания
элемента <iframe>, используемого в данном примере для ото-
бражения содержимого второй страницы child.html, а также
текстовое поле для ввода отправляемого сообщения и кнопки
Отравить, связываемой с функцией send(), для отправки вве-
денного сообщения.
<!DOCTYPE html>
<html>
<head>
<title>
Межоконный обмен сообщениями
</title>
</head>
<body>
<Ы>Межоконный обмен сообщениями</Ы>
<iframe id="iframe" src="child.html"
height="300" width="600">
Урок 7. Обмен сообщениями между документами
149
</iframe>
<br>
<br>
Отправляемое сообщение: <input id="message"
type="text">
<input type="button" onclick="send();"
value="Отправить•>
</body>
</html>
4.	Сохраните внесенные изменения в файле parent.html. Непре-
менно сделайте это в текстовом формате. По умолчанию в тек-
стовом редакторе WordPad выбирается расширенный тексто-
вый формат RTF, непригодный для браузеров.
Итак, начало созданию HTML-страницы parent.html положе-
но. А теперь нужно организовать отправку из нее сообщений на
вторую HTML-страницу.
Отправка сообщений в режиме
межоконного обмена
Для того чтобы организовать отправку сообщений с HTML-
страницы parent.html на HTML-страницу child.html в режиме
межоконного обмена, выполните следующие действия.
1.	Откройте HTML-документ из файла parent.html в избранном
вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для реализации
функции send(), получающей всю необходимую информацию
о другом окне в качестве места назначения, а также отправ-
ляемое сообщение для его отправки по указанному месту на-
значения.
<!DOCTYPE html>
<html>
<head>
<title>
Мехоконный обмен сообщениями
</title>
<script type="text/javascript">
function send()
{
150
Урок 7. Обмен сообщениями между документами
var message = document.getElementById("message").value;
var location = window.location;
var protocol = location.protocol;
var host = location.host;
}
</script>
</head>
<body>
<Ы>Мехоконный обмен сообщениями</Ы>
<iframe id="iframe" src="child.html"
height="300" width="600">
</iframe>
<br>
<br>
Отправляемое сообщение: <input id="message"
type="text">
<input type="button" onclick="send();"
value="Отправить">
</body>
</html>
3.	Введите выделенный ниже полужирным код для отправки
сообщений в другое окно в качестве места назначения.
<!DOCTYPE html>
<html>
<head>
<title>
Мехоконный обмен сообщениями
</title>
<script type="text/javascript">
function send()
{
var message = document.getElementById("message").value;
var location = window.location;
var protocol = location.protocol;
var host = location.host;
document.getElementById("iframe”).contentwindow.postMessage
(message, protocol + "//" + host);
}
</script>
</head>
<body>
Урок 7. Обмен сообщениями между документами
151
<Ы>Межоконный обмен сообщениями</Ы>
<iframe id="iframe” src=”child.html”
height="300" width="600">
</iframe>
<br>
<br>
Отправляемое сообщение: <input id="message"
type="text">
<input type=”button” onclick="send();"
value=”Отправить">
</body>
</html>
4.	Сохраните внесенные изменения в файле parent.html. Непре-
менно сделайте это в текстовом формате. По умолчанию в тек-
стовом редакторе WordPad выбирается расширенный тексто-
вый формат RTF, непригодный для браузеров.
Теперь пользователь может ввести сообщение в текстовом
поле, как показано на рис. 7.1, а затем щелкнуть на кнопке
Отправить, чтобы послать это сообщение второй HTML-странице
child.html. Но прежде необходимо создать эту страницу. Поэтому
не пытайтесь открывать страницу parent.html в браузере и вы-
полнять присутствующий на ней код HTML до тех пор, пока не
будет создана страница child.html.
Создание страницы child.html
для примера межоконного обмена
сообщениями
Для того чтобы приступить к созданию HTML-страницы child,
html из примера межоконного обмена сообщениями, выполните
следующие действия.
1.	Создайте HTML-документ child.html в любом редакторе тек-
ста, например в Windows WordPad.
2.	Введите приведенный ниже код основного тела HTML-доку-
мента.
<!DOCTYPE html>
<html>
<head>
152
Урок 7. Обмен сообщениями между документами
<title>
Порожденная страница
</title>
</head>
<body>
</body>
</html>
3.	Введите выделенный ниже полужирным код для создания
элемента <div>, используемого для отображения текста сооб-
щений, принимаемых на HTML-странице child.html.
<!DOCTYPE html>
<html>
<head>
<title>
Порожденная страница
</title>
</head>
<body>
<div id="messages" style="width:400px;
height:250px"></div>
</body>
</html>
4.	Сохраните внесенные изменения в файле child.html. Непре-
менно сделайте это в текстовом формате. По умолчанию в тек-
стовом редакторе WordPad выбирается расширенный-тексто-
вый формат RTF, непригодный для браузеров.
Итак, начало созданию HTML-страницы child.html положено.
А теперь нужно организовать прием сообщений на этой странице.
Прием сообщений в режиме
межоконного обмена
В этом задании вам предстоит организовать прием на HTML-
странице child.html сообщений, отправляемых со страницы
parent.html в режиме межоконного обмена. Для этого выполните
следующие действия.
Урок 7. Обмен сообщениями между документами
153
1.	Откройте HTML-документ из файла child.html в избранном
вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для связывания
события onMessage с функцией loader)) его обработки.
<!DOCTYPE html>
<html>
<head>
<title>
Порожденная страница
</title>
<script type="text/javascript">
window.addEventhistener("message”, loader, false);
</script>
</head>
<body>
<div id="messages" style="width:400px;
height:2 5 Opx"></div>
</body>
</html>
3.	Введите выделенный ниже полужирным код для создания
функции loader (), считывающей данные из свойства data пе-
редаваемого ей событийного объекта и отображающей эти
данные в элементе <div> на HTML-странице child.html.
<!DOCTYPE html>
<html>
<head>
<title>
Порожденная страница
</title>
<script type="text/javascript">
window.addEventListener)"message", loader, false);
function loader(e)
{
document.getElementByld("messages").innerHTML = e.data;
}
</script>
</head>
<body>
<div id="messages" style="width:400px;
height:250px"></div>
154
Урок 7. Обмен сообщениями между документами
</body>
</html>
4.	Сохраните внесенные изменения в файле child.html. Непре-
менно сделайте это в текстовом формате. По умолчанию в тек-
стовом редакторе WordPad выбирается расширенный тексто-
вый формат RTF, непригодный для браузеров.
Если теперь открыть HTML-страницу parent.html в браузере,
поддерживающем обмен сообщениями (Opera или Safari), ввести
сообщение в текстовом поле и нажать кнопку Отправить, то пос-
ланное сообщение появится на второй HTML-странице child.html
(см. рис. 7.1 и 7.2).
Полный исходный код
HTML-страницы parent.html
Ниже для справки приводится полностью исходный код
HTML-страницы parent. html из рассмотренного в этой главе при-
мера межоконного обмена сообщениями.
<!DOCTYPE html>
<html>
<head>
<title>
Межоконный обмен сообщениями
</title>
cscript type="text/javascript">
function send()
{
var message = document.getElementByld("message").value;
var location = window.location;
var protocol = location.protocol;
var host = location.host;
document.getElementByld("iframe").contentwindow.postMessage
(message, protocol + "//" + host);
}
</script>
</head>
<body>
<Ы>Межоконный обмен сообщениями</Ь1>
<iframe id="iframe" src="child.html"
Урок 7. Обмен сообщениями между документами
155
height="300" width="600">
</iframe>
<br>
<br>
Отправляемое сообщение: <input id="message"
type="text">
<input type="button" onclick="send()
7а1ие="0тправить">
</body>
</html>
Полный исходный код HTML-
страницы child.html
Ниже для справки приводится полностью исходный код HTML-
страницы child.html из рассмотренного в этой главе примера меж-
оконного обмена сообщениями.
<!DOCTYPE html>
<html>
<head>
<title>
Порожденная страница
</title>
<script type="text/javascript">
window.addEventListener("message", loader, false);
function loader(e)
{
document.getElementByld("messages").innerHTML = e.data;
}
</script>
</head>
<body>
<div id="messages" style="width:400px;
height:250px"></div>
</body>
</html>
156
Урок 7. Обмен сообщениями между документами
Создание страницы
domainparent.html для примера
междоменного обмена
сообщениями
Рассмотрим пример организации междоменного обмена со-
общениями. Для того чтобы приступить к созданию HTML-стра-
ницы parent.html из примера междоменного обмена сообщения-
ми, выполните следующие действия.
1.	Создайте HTML-документ domainparent.html в любом редакто-
ре текста, например в Windows WordPad.
2.	Введите приведенный ниже код основного тела HTML-доку-
мента.
CIDOCTYPE html>
<html>
<head>
<title>
Междоменный обмен сообщениями
</title>
</head>
<body>
<И1>Междоменный обмен сообщениями</М>
</body>
</html>
3.	Введите выделенный ниже полужирным код для создания
элемента <iframe>, используемого в данном примере для ото-
бражения содержимого второй страницы domainchild.html,
а также текстовое поле для ввода отправляемого сообщения
и кнопки Отравить, связываемой с функцией send(), для от-
правки введенного сообщения. (Замените домен www.domain.com
в приведенном ниже коде тем доменом, в котором вы соби-
раетесь хранить страницу domainchild.html.)
<!DOCTYPE html>
<html>
<head>
Урок 7. Обмен сообщениями между документами
157
<title>
Междоменный обмен сообщениями
</title>
</head>
<body>
<И1>Междсменный обмен сообщениями*:/hl>
<iframe id="iframe
src=" http: 11 www. domain. com/domainchi Id. html"
height="300" width="600">
</iframe>
<br>
<br>
Отправляемое сообщение: <input id="message"
type="text">
<input type="button" onclick="send();
value="Отправить">
</body>
</html>
4.	Сохраните внесенные изменения в файле domainparent.html.
Непременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Итак, начало созданию HTML-страницы domainparent.html
положено. Теперь нужно организовать отправку с нее сообщений
на вторую HTML-страницу.
Отправка сообщений в режиме
междоменного обмена
Для того чтобы отправить сообщения с HTML-страницы
domainparent.html на HTML-страницу domainchild.html в режиме
междоменного обмена, выполните следующие действия.
1.	Откройте HTML-документ из файла domainparent. html в избран-
ном вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для реализации
функции send(), выполняющей отправку сообщений.
clDOCTYPE html>
<html>
<head>
<title>
158
Урок 7. Обмен сообщениями между документами
Мехдоменный обмен сообщениями
</title>
<script type="text/javascript>
function send()
{
}
</script>
</head>
<body>
<Ы>Междоменный обмен сообщениями*:/hl>
ciframe id="iframe"
sr c=" http: / / www. domain. com/domainchi Id. html"
height="300" width="600">
</iframe>
<br>
<br>
Отправляемое сообщение: cinput id="message"
type="text">
cinput type="button" onelick="send();"
value="Отправить">
c/body>
c/html>
3.	Введите выделенный ниже полужирным код, чтобы отпра-
вить сообщения на другую HTML-страницу в качестве места
назначения. На этот раз в качестве места назначения указы-
вается полный веб-адрес (URL) страницы domainchild.html,
а также значение "*” для сопоставления с любым местом на-
значения отправляемых сообщений.
CIDOCTYPE html>
chtml>
chead>
ctitle>
Мехдоменный обмен сообщениями
c/title>
escript type="text/javascript">
function send()
{
var message = document.getElementById("message").value;
document.getElementByld("iframe").contentwindow.postMessage
(message,
Урок 7. Обмен сообщениями между документами
159
}
</script>
</head>
<body>
<Ь1>Междоменный обмен сообщениями</Ы>
<iframe id="iframe"
src=" http: / / vw, domain. com/domainchild. html"
height="300" width="600">
</iframe>
<br>
<br>
Отправляемое сообщение: <input id="message"
type="text">
<input type="button" onclick="send();"
value="Отправить">
</body>
</html>
4.	Сохраните внесенные изменения в файле domainparent.html.
Непременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Теперь пользователь может ввести сообщение в текстовом по-
ле, как показано на рис. 7.3, а затем щелкнуть на кнопке Отпра-
вить, чтобы послать это сообщение на вторую HTML-страницу
domainchild.html, несмотря на то, что в отличие от страницы
domainparent.html она находится в другом домене. Но прежде не-
обходимо создать эту страницу. Поэтому не пытайтесь открывать
страницу domainparent.html в браузере и выполнять имеющийся
на ней код HTML до тех пор, пока не будет создана страница
domainchild.html.
Создание страницы domainchild.html
для примера междоменного обмена
сообщениями
Для того чтобы приступить к созданию HTML-страницы
domainchild.html из примера междоменного обмена сообщения-
ми, выполните следующие действия.
160
Урок 7. Обмен сообщениями между документами
1.	Создайте HTML-документ domainchild. html в любом редакторе
текста, например в Windows WordPad.
2.	Введите приведенный ниже код основного тела HTML-доку-
мента.
ClDOCTYPE html>
<html>
<head>
<title>
Порожденная страница
</title>
</head>
<body>
</body>
</html>
3.	Введите выделенный ниже полужирным код для создания
элемента <div>, используемого для отображения текста сооб-
щений, принимаемых на HTML-странице domainchild.html.
ClDOCTYPE html>
chtml>
chead>
ctitle>
Порожденная страница
c/title>
c/head>
cbody>
cdiv id="messages" style="width:400px;
heights250px">c/div>
c/body>
c/html>
4.	Сохраните внесенные изменения в файле domainchild.html.
Сделайте это в текстовом формате. По умолчанию в текстовом
редакторе WordPad выбирается расширенный текстовый фор-
мат RTF, непригодный для браузеров.
После того как HTML-страница domainchild.html создана, нуж-
но организовать прием сообщений на ней.
Урок 7. Обмен сообщениями между документами
161
Прием сообщений в режиме
междоменного обмена
В этом задании вам предстоит организовать прием на HTML-
странице domainchild.html сообщений, отправляемых со страни-
цы domainparent.html, в режиме междоменного обмена.
1.	Откройте HTML-документ из файла domainchild.html в избран-
ном вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для связывания
события onMessage с функцией loader () его обработки.
<IDOCTYPE html>
<html>
<head>
<title>
Порожденная страница
</title>
<script type="text/javascript">
window.addEventListener("message", loader, false);
</script>
</head>
<body>
<div id="messages" style="width:400px;
height:250px"></div>
</body>
</html>
3.	Введите выделенный ниже полужирным код для создания
функции loader (), выполняющей чтение данных из свойства
data передаваемого ей событийного объекта и отображающей
эти данные в элементе <div> на HTML-странице domainchild,
html.
<I DOCTYPE html>
<html>
<head>
<title>
Порожденная страница
</title>
162
Урок 7. Обмен сообщениями между документами
<script type="text/javascript">
window.addEventListener("message", loader, false);
function loader(e)
{
document.getElementById("messages").innerHTML = e.data;
}
</script>
</head>
<body>
<div id="messages" style="width:400px;
height:2 5 Opx"></div>
</body>
</html>
4.	Сохраните внесенные изменения в файле domainchild.html.
Непременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Если теперь открыть HTML-страницу domainparent. html в брау-
зере, поддерживающем обмен сообщениями (Opera или Safari),
ввести сообщение в текстовом поле и нажать кнопку Отправить,
посланное сообщение появится на второй HTML-странице
domainchild.html, как показано на рис. 7.3 и 7.4.
Полный исходный код
HTML-страницы domainparent.html
Ниже для справки приводится полностью исходный код HTML-
страницы domainparent.html из рассмотренного в этой главе при-
мера междоменного обмена сообщениями. (Не забудьте заменить
домен www.domain.com в приведенном ниже коде тем доменом, в ко-
тором вы собираетесь хранить страницу domainchild.html.)
<!DOCTYPE html>
<html>
<head>
<title>
Междоменный обмен сообщениями
</title>
<script type="text/javascript">
function send()
Урок 7. Обмен сообщениями между документами
163
{
var message 3 document.getElementByld("message").value;
document.getElementByld("iframe").contentwindow.postMessage
(message,
}
</script>
</head>
<body>
<М>Междоменныи обмен сообщениями</Ы>
<iframe id="iframe"
src="http • /1 www. domain. corn! domainchi Id. html"
height="300" width="600">
</iframe>
<br>
<br>
Отправляемое сообщение: <input id3"message"
type»"text">
<input typea"button" onclick="send();"
value3"Отправить">
</body>
</html>
Полный исходный код
HTML-страницы domainchild.html
Ниже для справки приводится полностью исходный код HTML-
страницы domainchild.html из рассмотренного в этой главе при-
мера междоменного обмена сообщениями. (Расположите эту
страницу в домене, указанном вместо www.domain.com в исходном
коде HTML-страницы domainchild.html.)
<!DOCTYPE html>
<html>
<head>
<title>
Порожденная страница
</title>
<script type="text/javascript">
window.addEventListener("message", loader, false);
function loader(e)
{
document.getElementByld("messages").innerHTML = e.data;
164
Урок 7. Обмен сообщениями между документами
}
</script>
</head>
<body>
<div id="messages" style="width:400px;
height:250px"></div>
</body>
</html>
Урок 8
Применение
аудиовизуальной
информации
В HTML5 предоставляется возможность воспроизводить
видео- и аудиозаписи с помощью элементов <video> и <audio>.
На момент написания этой книги в большинстве браузеров
допускалось воспроизводить видео- и аудиозаписи только в OGG —
малоизвестном открытом формате. Правда, видео- и аудиозаписи
можно легко преобразовать в этот формат из большинства наибо-
лее распространенных форматов. Хотя в некоторых браузерах
все же допускается использовать видео- и аудиозаписи в элемен-
тах <video> и <audio> в других форматах.
В этой главе будет показано, как воспроизводить видео- и
аудиозаписи формата OGG на веб-странице. Кроме того, будут
рассмотрены элементы управления, предназначенные для вос-
произведения подобных записей. Для этой цели будут использо-
ваны новые для HTML5 элементы <video> и <audio>, применение
которых будет продемонстрировано на конкретных примерах.
Совет
Появление элемента <video> ожидалось с большим нетерпением,
в частности, потому, что на проигрывателе Apple iPad не воспро-
изводится Flash-видео, тогда как элемент <video> способен вос-
полнить этот недостаток.
166
Урок 8. Применение аудиовизуальной информации
Общее представление об
управлении воспроизведением
видеозаписей на веб-страницах
Вам предстоит создать пример HTML-документа video.html,
приведенного на рис. 8.1. В этом документе воспроизводится ви-
деозапись из файла brtmuseum.ogg, взятого в качестве примера и
предварительно преобразованного из формата AVI описанным
далее способом, но вы вольны подставить вместо него в исходный
код рассматриваемого здесь примера HTML-документа любой
другой файл видеозаписи в формате OGG.
Рис. 8.1. Пример воспроизведения видеозаписи в HTML-
документе video.html
Ниже дан краткий обзор программных средств, положенных
в основу рассматриваемого в этой главе примера воспроизведе-
ния видеозаписей в HTML-доку ментах.
Урок 8. Применение аудиовизуальной информации
167
Представление о прикладном
программном интерфейсе
воспроизведения видеозаписей
У элемента <video> имеется целый ряд атрибутов, перечис-
ленных ниже.
Элемент: <video>
Атрибуты:
♦ autoplay
♦ controls
♦ height
♦ loop
♦ poster
♦ preload
♦ src
♦ width
♦ onerror
Поддерживающие браузеры: Chrome, Opera, Firefox, Safari,
Internet Explorer 9
Подробнее с описанием, назначением и возможностями эле-
мента <video> можно ознакомиться на веб-сайте W3C по адресу
http://www.w3.org/TR/html5/video.html.
Ниже дается краткий обзор перечисленных выше атрибутов
элемента <video>.
Атрибут autoplay
В нем устанавливается логическое значение true или false,
чтобы выбрать возможность управлять воспроизведением видео-
записи автоматически или же отказаться от такой возможности.
Атрибут controls
Определяет, следует ли показывать панель управления под
окном отображения кадров видеозаписи вместе с кнопками на-
чала и остановки воспроизведения.
168
Урок 8. Применение аудиовизуальной информации
Атрибут height
Задает высоту кадра воспроизводимой видеозаписи.
Атрибут loop
В нем устанавливается логическое значение true или false
для циклического (true) или однократного (false) воспроизведе-
ния видеозаписи.
Атрибут poster
Содержит URL (веб-адрес) изображения, которое показывает-
ся в качестве заставки в отсутствие видеозаписи.
Атрибут preload
Определяет, следует ли предварительно загружать видеоза-
пись в элемент <video> на* веб-странице. В нем могут быть уста-
новлены три значения.
•	Значение попе. Предварительная загрузка видеозаписи не
требуется.
•	Значение metadata. Браузер уведомляется о необходимости
обнаруживать метаданные видеозаписи, включая разре-
шение, первый кадр и пр.
•	Значение auto. Предварительная загрузка видеозаписи ос-
тавляется на усмотрение браузера.
Атрибут src
Содержит URL (веб-адрес) видеозаписи.
Атрибут width
Определяет ширину кадра воспроизводимой видеозаписи.
Атрибут onerror
С элементом <video> связано событие, наступающее при по-
явлении ошибок воспроизведения видеозаписи. Это событие оп-
ределяется атрибутом onerror.
Урок 8. Применение аудиовизуальной информации
169
В данной главе практическое применение элемента <video>
будет продемонстрировано на примере воспроизведения видео-
записи в формате OGG. И поэтому рассмотрение данного примера
будет начато с процедуры преобразования видеозаписей (а также
аудиозаписей) из наиболее распространенных форматов в фор-
мат OGG.
Преобразование видео- и
аудиозаписей в формат OGG
На момент написания этой книги в большинстве браузеров
видео- и аудиозаписи можно было воспроизводить в элементе
<video> только в формате OGG, хотя в дальнейшем предполагает-
ся поддержка других форматов. Конечно, воспроизводить видео-
и аудиозаписи в формате OGG на веб-страницах совсем неплохо,
но как быть с записями в таких распространенных форматах,
как WMV, AVI, MP3 или MP4?
Прежде всего следует проверить, поддерживается ли текущий
формат записи в избранном браузере. Для этого достаточно указать
URL (веб-адрес) видео- или аудиозаписи в атрибуте src элемента
<video>. Со временем все большее число браузеров будет поддержи-
вать наиболее распространенные форматы видео- и аудиозаписи.
Но если альтернативы формату OGG в данный момент не
существует, то в Интернете можно найти подходящий преобра-
зователь форматов, например, по адресу http://www.online-
convert . сот/. На рис. 8.2 приведена начальная страница веб-сайта
с этим хорошо известным преобразователем форматов файлов.
Он хорошо известен потому, что позволяет выполнять преобра-
зование из множества одних форматов файлов в другие, а так-
же потому, что он доступен в Интернете и не требует предвари-
тельной загрузки и установки на компьютере.
Для того чтобы преобразовать видео- или аудиозапись в фор-
мат OGG, выполните следующие действия.
1. Перейдите по адресу http://www.online-convert.com/.
2. Выберите целевой формат преобразования аудиозаписей из
раскрывающегося списка в левой области Audio Converter (Пре-
образователь аудиозаписей), а для преобразования видеозапи-
сей — в правой области Video Converter. В данном случае вы-
бирается вариант Convert to OGG (Преобразовать в формат OGG)
170
Урок 8. Применение аудиовизуальной информации
как для видео-, так и для аудиозаписи. В этих списках для
выбора доступны самые разные форматы преобразования ви-
део- и аудиозаписей, в том числе перечисленные ниже.
Рис. 8.2. Начальная страница веб-сайта www.online-convert.com
♦	Видеоформат Apple QuickTime (. mov)
♦	Видеоформат WEBM (. wbm)
♦	Видеоформат Flash Video (. f Iv)
♦	Видеоформат Matroska (. mkv)
♦	Видеоформат Windows Media Video (. wmv)
♦	Формат 3GP/3G2 Video (. 3g2, . 3gp)
♦	Формат AVI перемежающихся аудио- и видеоданных (. avi)
♦	Формат MPEG-4 для видео- и аудиозаписей (.mp4)
♦	Формат OGG для видео- и аудиозаписей (. ogg)
♦	Аудиоформат ААС (. аас)
♦	Аудиоформат WAV (. wav)
♦	Аудиоформат WMA (. wma)
♦	Аудиоформат MPEG 1 (.mpg)
♦	Аудиоформат MPEG-2 (. mpg)
Урок 8. Применение аудиовизуальной информации
171
3.	Щелкните на кнопке Go (Перейти).
4.	Щелкните после перехода к следующей странице на кнопке
Обзор, а затем выберите исходный файл для преобразования.
По желанию можете настроить дополнительные параметры
преобразования, в том числе разрядность преобразования,
разрешение, частоту кадров, звуковой частотный диапазон,
размеры кадра, обрезку записи до нужной продолжительно-
сти и пр.
5.	Щелкните на кнопке Convert File (Преобразовать файл).
6.	Вместо кнопки Convert File появится кнопка Submitting Data
(Передача данных), а также индикатор выполнения преоб-
разования. По завершении данного процесса произойдет пе-
реход на следующую страницу, где выходной файл подго-
тавливается к загрузке и затем открывается стандартное
окно загрузки или открытия файла в выбранном приложе-
нии. Как правило, файл загружается в каталог, используе-
мый браузером по умолчанию. В Windows это каталог \Мои
документахЗагрузки, откуда вы можете переместить преобразо-
ванный файл туда, где находится исходный файл, средствами
операционной системы.
После того как вы преобразовали все необходимые файлы
видео- и аудиозаписей в формат OGG, можете приступать к соз-
данию HTML-документа video. htm, рассматриваемого в этой гла-
ве в качестве примера воспроизведения видеозаписи на веб-стра-
нице. Вместо конкретных имен файлов видео- и аудиозаписей
в формате OGG, указываемых в исходном коде приведенных ни-
же примеров HTML-документов, можете подставить файлы со
своими видео- и аудиозаписями, предварительно преобразовав
их в формат OGG описанным выше способом.
Пример воспроизведения
видеозаписи на веб-странице
Для того чтобы приступить к созданию примера HTML-доку-
мента video.htm, выполните следующие действия.
1.	Создайте HTML-документ video.htm в любом редакторе тек-
ста, например в Windows WordPad.
172
Урок 8. Применение аудиовизуальной информации
2.	Введите приведенный ниже код основного тела HTML-доку-
мента.
<!DOCTYPE html>
<html>
<head>
<title>
Видео в HTML5
</title>
</head>
</html>
3.	Введите выделенный ниже полужирным код для создания
элемента <body>.
<!DOCTYPE html>
<html>
<head>
<title>
Видео в HTML 5
</title>
</head>
<body>
<Ь1>Видео в HTML5</hl>
</body>
</html>
4.	Сохраните внесенные изменения в файле video. htm. Непремен-
но сделайте это в текстовом формате. По умолчанию в тексто-
вом редакторе WordPad выбирается расширенный текстовый
формат RTF, непригодный для браузеров.
Итак, начало созданию примера HTML-документа video.htm
положено. Для того чтобы ввести в него элемент <video>, выпол-
ните следующие действия.
1.	Откройте HTML-документ из файла video.htm в избранном
вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для создания
элемента <video>.
Урок 8. Применение аудиовизуальной информации
173
<!DOCTYPE html>
<html>
<head>
<title>
Видео в HTML5
</title>
</head>
<body>
<Ы>Видео в HTML5</hl>
<video>
</video>
</body>
</html>
3.	Введите выделенный ниже полужирным код для указания мес-
та нахождения видеозаписи и размеров кадра ее воспроизве-
дения. (Вместо файла brtmuseum.ogg можете подставить в при-
веденный ниже исходный код файл своей видеозаписи.)
<!DOCTYPE html>
<html>
<head>
<title>
Видео в HTML5
</title>
</head>
<body>
<Ы>Видео в HTML5</hl>
<video height=”300” width=”400"
src="brtauseum.ogg">
</video>
</body>
</html>
4.	Сохраните внесенные изменения в файле video. htm. Непремен-
но сделайте это в текстовом формате. По умолчанию в тексто-
вом редакторе WordPad выбирается расширенный текстовый
формат RTF, непригодный для браузеров.
В итоге видеозапись будет воспроизводиться, но только в том
случае, если щелкнуть на ее кадре правой кнопкой мыши и вы-
брать команду Воспроизвести из контекстного меню. В следующем
задании вам предстоит упростить воспроизведение видеозаписи
на веб-странице с помощью специальных элементов, управляю-
щих этим процессом и отображаемых на странице.
174
Урок 8. Применение аудиовизуальной информации
Ввод элементов управления
в пример HTML-документа video.htm
Для того чтобы ввести элементы, управляющие воспроизве-
дением видеозаписи на HTML-странице video.htm, выполните
следующие действия.
1.	Откройте HTML-доку мент из файла video.htm в избранном
вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для ввода атри-
бута controls в элемент <video>.
<!DOCTYPE html>
<html>
<head>
<title>
Видео в HTML5
</title>
</head>
<body>
<Ы>Видео в HTML5</hl>
<video controls height="300" widths"400"
src=" brtmiseum. ogg">
</video>
</body>
</html>
3.	Сохраните внесенные изменения в файле video. htm. Непремен-
но сделайте это в текстовом формате. По умолчанию в тексто-
вом редакторе WordPad выбирается расширенный текстовый
формат RTF, непригодный для браузеров.
Теперь видеозапись выглядит на веб-странице так, как пока-
зано на рис. 8.1. Для ее воспроизведения щелкните на кнопке
Воспроизвести.
Циклическое воспроизведение
видеозаписи
Для того чтобы организовать циклическое воспроизведение
видеозаписи на веб-странице, выполните следующие действия.
Урок 8. Применение аудиовизуальной информации
175
1.	Откройте HTML-документ из файла video.htm в избранном
вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для цикличе-
ского воспроизведения видеозаписи.
<!DOCTYPE html>
<html>
<head>
<title>
Видео в HTML5
</title>
</head>
<body>
<Ы>Видео в HTML5</hl>
<video controls height="300" width="400"
loop src-'brtmuseum.ogg">
</video>
</body>
</html>
3.	Сохраните внесенные изменения в файле video. htm. Непремен-
но сделайте это в текстовом формате. По умолчанию в тексто-
вом редакторе WordPad выбирается расширенный текстовый
формат RTF, непригодный для браузеров.
Теперь видеозапись будет воспроизводиться циклически до
тех пор, пока пользователь не остановит ее воспроизведение.
Автоматическое воспроизведение
видеозаписи
При открытии веб-страницы можно также организовать ав-
томатическое воспроизведение видеозаписи. С этой целью вы-
полните следующие действия.
1.	Откройте HTML-документ из файла video.htm в избранном
вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для организа-
ции автоматического воспроизведения видеозаписи.
<!DOCTYPE html>
<html>
<head>
<title>
176
Урок 8. Применение аудиовизуальной информации
Видео в HTML5
</title>
</head>
<body>
<Ы>Видео в HTML5</hl>
<video controls height="300" width="400"
autoplay src=" brtniuseum.ogg">
</video>
</body>
</html>
3.	, Сохраните внесенные изменения в файле video. htm. Непремен-
но сделайте это в текстовом формате. По умолчанию в тексто-
вом редакторе WordPad выбирается расширенный текстовый
формат RTF, непригодный для браузеров.
Выявление и обработка ошибок
воспроизведения видеозаписи
С помощью атрибута onerror можно выявлять и обрабатывать
различные ошибки воспроизведения видеозаписи, в том числе
невозможность обнаружить саму видеозапись.
1.	Откройте HTML-документ из файла video.htm в избранном
вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для создания
функции fail(), обрабатывающей возможные ошибки вос-
произведения видеозаписи и предупреждающей о них поль-
зователя.
ClDOCTYPE html>
<html>
<head>
<title>
Видео в HTML5
</title>
<script>
function fail(e)
{
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
alert ('Воспроизведение прервано.');
break;
Урок 8. Применение аудиовизуальной информации
177
case е.target.error.MEDIA_ERR_NETWORK:
alert ('Сетевая оиибка.');
break;
case e.target.error.MEDIAERRDECODE:
alert ('Видеозапись испорчена.');
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
alert ('Формат не поддерживается, или файл
не найден.');
break;
default:
alert('Произоила неизвестная оиибка.');
break;
}
}
</script>
</head>
<body>
<Ы>Видео в HTML5</hl>
<video controls height="300" width="400"
src=' 'brtmuseum. ogg">
</video
</body>
</html>
3.	Введите выделенный ниже полужирным код для связывания
функции f ail () с элементом <video>.
<!DOCTYPE html>
<html>
<head>
<title>
Видео в HTML5
</title>
<script>
function fail(e)
{
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
alert ('Воспроизведение прервано.');
break;
case e.target.error.MEDIA_ERR_NETWORK:
alert ('Сетевая ошибка.');
break;
case e.target.error.MEDIA_ERR_DECODE:
alert ('Видеозапись испорчена.');
178
Урок 8. Применение аудиовизуальной информации
break;
case е.target.error.MEDIA__ERR_SRC_NOT_SUPPORTED:
alert ('Формат не поддерживается, или файл не найден.');
break;
default:
alert ('Произошла неизвестная ошибка.');
break;
}
}
</script>
</head>
<body>
<Ы>Видео в HTML5</hl>
<video controls height="300" width="400"
onerror="fail (event) ” src-'brtmuseum. ogg">
</video
</body>
</html>
4.	Сохраните внесенные изменения в файле video. htm. Непремен-
но сделайте это в текстовом формате. По умолчанию в тексто-
вом редакторе WordPad выбирается расширенный текстовый
формат RTF, непригодный для браузеров.
Если теперь при воспроизведении видеозаписи произойдет
ошибка, появится окно с сообщением, предупреждающим поль-
зователя о характере возникшей ошибки (рис. 8.3).
Рис. 8.3. Ошибка воспроизведе-
ния видеозаписи
Общее представление об элементе
управления воспроизведением
аудиозаписей
Далее вам предстоит создать пример HTML-документа audio.
htm, демонстрирующего воспроизведение аудиозаписей на веб-
странице с помощью нового для HTML5 элемента <audio> (рис. 8.4).
УрЬк 8. Применение аудиовизуальной информации
179
Рис. 8.4. Пример воспроизведения аудиозаписи в HTML-
документе audio.htm
Для воспроизведения аудиозаписи достаточно щелкнуть на
кнопке Воспроизвести. Аналогично элементу <video>, элемент
<audio> позволяет воспроизводить аудиозаписи в поддерживающих
его браузерах только в формате OGG, хотя со временем ожидается
поддержка других форматов. В рассматриваемом здесь примере
HTML-документа используется файл аудиозаписи music.ogg, но
вы вольны подставить вместо него любой другой файл аудиоза-
писи формата OGG в приведенном далее исходном коде. Для
предварительного преобразования файлов аудиозаписей в фор-
мат OGG воспользуйтесь любым доступным в Интернете преоб-
разователем, например, на веб-сайте www.online-convert.com, как
пояснялось ранее в разделе “Преобразование видео- и аудиозапи-
сей в формат OGG”.
Представление о прикладном
программном интерфейсе
воспроизведения аудиозаписей
У элемента <audio> имеется целый ряд атрибутов, доступных
для применения в коде HTML и перечисленных ниже.
Элемент: <audio>
Атрибуты:
♦ autoplay
♦ controls
180
Урок 8. Применение аудиовизуальной информации
♦	loop
♦	preload
♦	src
♦	onerror
Поддерживающие браузеры: Chrome, Opera, Firefox, Safa-
ri, Internet Explorer 9
Подробнее с описанием, назначением и возможностями эле-
мента <audio> можно ознакомиться на веб-сайте W3C по адресу
http://www.w3.org/TR/html5/video.htmllaudio.
Ниже дается краткий обзор перечисленных выше атрибутов
элемента <audio>.
Атрибут autoplay
Как и в элементе <video>, в элементе <audio> атрибуту autoplay
присваивается логическое значение true или false, чтобы выбрать
возможность управления воспроизведением видеозаписи авто-
матически или отказаться от такой возможности.
Атрибут controls
Определяет, следует ли показывать панель управления вме-
сте с кнопками начала и остановки воспроизведения, чтобы
пользователь мог воспользоваться ими для прослушивания ау-
диозаписи на веб-странице.
Атрибут loop
В этом атрибуте устанавливается логическое значение true
или false для циклического (true) или однократного (false) вос-
произведения аудиозаписи.
Атрибут preload
Как и в элементе <video>, атрибут preload определяет, следует
ли выполнять предварительную загрузку аудиозаписи в элемент
<audio> на веб-странице. В нем могут быть установлены три зна-
чения.
Урок 8. Применение аудиовизуальной информации
181
•	Значение попе. Предварительная загрузка аудиозаписи не
требуется.
•	Значение metadata. Браузер уведомляется о необходимости
обнаруживать метаданные об аудиозаписи, включая раз-
решение, продолжительность и пр.
•	Значение auto. Предварительная загрузка аудиозаписи ос-
тавляется на усмотрение браузера.
Атрибут src
Содержит URL (веб-адрес) аудиозаписи.
Атрибут onerror
С элементом <audio> связано событие, наступающее при по-
явлении ошибок воспроизведения аудиозаписи. Это событие оп-
ределяется атрибутом onerror.
Пример воспроизведения
аудиозаписи на веб-странице
Для того чтобы приступить к созданию примера HTML-доку-
мента audio.htm, выполните следующие действия.
1.	Создайте HTML-документ audio. htm в любом редакторе текёта,
например в Windows WordPad.
2.	Введите приведенный ниже код основного тела HTML-доку-
мента.
<!DOCTYPE html>
<html>
<head>
<title>
Аудио в HTML5
</title>
</head>
</html>
3.	Введите выделенный ниже полужирным код для создания
элемента <body>.
182
Урок 8. Применение аудиовизуальной информации
<!DOCTYPE html>
<html>
<head>
<title>
Аудио в HTML5
</head>
<body>
<Ы>Аудио в HTML5</hl>
<body>
</html>
4.	Сохраните внесенные изменения в файле audio. htm. Непремен-
но сделайте это в текстовом формате. По умолчанию в тексто-
вом редакторе WordPad выбирается расширенный текстовый
формат RTF, непригодный для браузеров.
Итак, начало созданию примера HTML-документ audio.htm по-
ложено. Для того чтобы ввести в него элемент <audio>, выполни-
те следующие действия.
1.	Откройте HTML-документ из файла audio.htm в избранном ва-
ми редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для создания
элемента <audio>.
<!DOCTYPE html>
<html>
<head>
<title>
Аудио в HTML5
</title>
</head>
<body>
<М>Аудио в HTML5</hl>
<audio>
</ audio
<body>
</html>
3.	Введите выделенный ниже полужирным код для указания
места нахождения аудиозаписи и ввода элементов управле-
ния, с помощью которых пользователь мог бы воспроизво-
Урок 8. Применение аудиовизуальной информации
183
дить ее для прослушивания. (Вместо файла music.одд можете
подставить в приведенный ниже исходный код файл своей
аудиозаписи.)
c’DOCTYPE html>
<html>
<head>
<title>
Аудио в HTML5
</title>
</head>
<body>
<Ы>Аудио в HTML5</hl>
<audio controls src=*music.ogg*>
</audio>
<body>
</html>
4.	Сохраните внесенные изменения в файле audio.htm. Непремен-
но сделайте это в текстовом формате. По умолчанию в тексто-
вом редакторе WordPad выбирается расширенный текстовый
формат RTF, непригодный для браузеров.
Теперь пользователь может щелкнуть на кнопке Воспроиз-
вести, чтобы прослушать аудиозапись на веб-странице рассмат-
риваемого здесь примера.
Как и у элемента <video>, у элемента <audio> имеется атрибут
loop, с помощью которого можно организовать циклическое вос-
произведение аудиозаписи, а с помощью атрибута autoplay — ав-
томатическое ее воспроизведение сразу же после загрузки веб-
страницы.
Совет
Организовать циклическое и автоматическое воспроизведение
аудиозаписей можно, конечно, и без элементов управления, оп-
ределяемых атрибутом controls, опустив его в исходном коде
HTML-документа. Но в этом случае аудиозаписи будут воспроиз-
водиться после загрузки веб-страницы без всякой возможности
остановить их, что вряд ли понравится пользователям и даже
способно вызвать у них раздражение.
184
Урок 8. Применение аудиовизуальной информации
Выявление и обработка ошибок
воспроизведения аудиозаписи
С помощью атрибута onerror можно выявлять и обрабатывать
различные ошибки воспроизведения аудиозаписи, в том числе
невозможность обнаружить саму аудиозапись. С этой целью вы-
полните следующие действия.
1.	Откройте HTML-документ из файла audio.htm в избранном ва-
ми редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для создания
функции fail (), обрабатывающей возможные ошибки воспро-
изведения аудиозаписи и предупреждающей о них пользователя.
<!DOCTYPE html>
<html>
<head>
<title>
Аудио в HTML5
</title>
<script>
function fail(e)
{
switch (e.target.error.code) {
case e. target. error.MEDIAERRABORTED:
alert('Воспроизведение прервано.');
break;
case e.target.error.MEDIA_ERR_NETWORK:
alert('Сетевая оиибка.');
break;
case e.target.error.MEDIA_ERR_DECODE:
alert('Аудиозапись испорчена.');
break;
case
e.target.error.MEDIAERRSRCNOTSUPPORTEDs
alert('Формат не поддерживается, или файл
не найден.');
break;
default:
alert('Произонла неизвестная оиибка.');
break;
}
}
</script>
Урок 8. Применение аудиовизуальной информации
185
</head>
<body>
<Ы>Аудио в HTML5</hl>
<audio controls src="music.ogg*>
</audio>
<body>
</html>
3.	Введите выделенный ниже полужирным код для связывания
функции f ail () с элементом <audio>.
<1 DOCTYPE html>
<html>
<head>
<title>
Аудио в HTML5
</title>
<script>
function fail(e)
{
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
alert('Воспроизведение прервано.');
break;
case e.target.error.MEDIA_ERR_NETWORK:
alert('Сетевая ошибка.');
break;
case e.target.error.MEDIA_ERR_DECODE:
alert('Аудиозапись испорчена.');
break;
case
e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
alert('Формат не поддерживается, или файл не найден.');
break;
default:
alert('Произошла неизвестная ошибка.');
break;
}
}
</script>
</head>
<body>
<Ы>Аудио в HTML5</hl>
<audio controls onerror= fail(event)  sic="music.ogg”>
</audio>
186	Урок 8. Применение аудиовизуальной информации
<body>
</html>
4.	Сохраните внесенные изменения в файле audio. htm. Непремен-
но сделайте это в текстовом формате. По умолчанию в тексто-
вом редакторе WordPad выбирается расширенный текстовый
формат RTF, непригодный для браузеров.
Если теперь при воспроизведении аудиозаписи произойдет
ошибка, появится окно с сообщением, предупреждающим поль-
зователя о характере возникшей ошибки.
Урок 9
Сохранение
содержимого
веб-страниц
Разработчики HTML-документов уже давно испытывали
потребность в средствах, позволяющих сохранять данные
в промежутках между последовательными доступами к веб-
страницам. Так, при повторном открытии веб-страницы со
стандартным сценарием JavaScript устанавливались исход-
ные значения всех переменных в его коде. Как же сохранить
данные с веб-страницы, чтобы восстановить их, когда пользо-
ватель возвратится к этой странице?
Для того чтобы сохранить данные в промежутках между по-
следовательными доступами к веб-страницам, разработчикам
HTML-документов нередко приходится обращаться к коду про-
грамм, выполняющихся на стороне сервера. Теперь в HTML5
появились для этого новые средства. Так, если требуется отсле-
живать закупки посетителя интернет-магазина, данные о них
можно сохранить и затем восстановить при возврате к той стра-
нице, на которой осуществлялись закупки.
Используя простой код JavaScript и HTML5, можно сохранять
данные с текущей страницы, чтобы восстановить их даже после
ее перезагрузки. Эти данные могут быть сохранены глобально
в текущем веб-сеансе, организуемом между браузером и веб-сер-
вером (в этом случае хранящиеся на сервере данные, как правило,
удаляются, если по истечении 15 минут пользователь не предпри-
нимал никаких действий), либо локально в самом браузере. В этой
главе будут рассмотрены оба способа сохранения данных с теку-
щей веб-страницы.
188
Урок 9. Сохранение содержимого веб-страниц
Общее представление о сохранении
данных в текущем веб-сеансе
Когда браузер устанавливает связь с сервером, он начинает
веб-сеанс. В этом веб-сеансе браузер может сохранить данные с те-
кущей веб-страницы. Эти данные будут надежно храниться на
сервере в течение 15 минут, а по истечении данного срока будут
удалены, если пользователь не предпринимал никаких действий.
В настоящей главе вам предстоит создать пример HTML-до-
кумента sessionstorage.html, демонстрирующий механизм со-
хранения данных в текущем веб-сеансе (рис. 9.1).
В данном примере пользователь может ввести некоторую ин-
формацию в текстовом поле (см. рис. 9.1), а затем щелкнуть на
кнопке Сохранить, чтобы сохранить эту информацию в текущем
веб-сеансе. После этого пользователь может стереть информацию,
введенную в текстовом поле, нажав кнопку Очистить, как пока-
зано на рис. 9.2.
Если же пользователь выберет кнопку Получить, то данные,
сохраненные в текущем веб-сеансе, будут восстановлены в тек-
стовом поле, как показано на рис. 9.3.
Иными словами, в примере HTML-документа sessionstorage,
html демонстрируется механизм сохранения и восстановления
данных в текущем веб-сеансе только языковыми средствами
JavaScript.
Рис. 9.1. Пример HTML-документа sessionstorage.html, демонст-
рирующий сохранение данных в текущем веб-сеансе
Урок 9. Сохранение содержимого веб-страниц
189
Рис. 9.2. Стирание данных, введенных ранее в текущем веб-сеансе
Рис. 9.3. Восстановление данных, сохраненных в текущем веб-сеансе
Однако для применения этого примера на практике браузер
должен установить сеанс связи с веб-сервером. А это означает,
что HTML-документ sessionstorage.html придется сначала выгру-
зить на веб-сервер, а затем открыть в браузере. Его нельзя просто
открыть с жесткого диска своего компьютера, чтобы воспользо-
ваться данным примером на практике.
190
Урок 9. Сохранение содержимого веб-страниц
Представление о прикладном
программном интерфейсе
сохранения данных в текущем
веб-сеансе
Механизм сохранения данных из веб-страницы в текущем
веб-сеансе основывается на применении объекта JavaScript, на-
зываемого sessionstorage и встраиваемого в браузеры, поддержи-
вающие рассматриваемое здесь средство HTML5. Подробнее об этом
объекте можно узнать, обратившись по адресу http://dev.w3.org/
html5/webstorage. А ниже дается самое общее представление об
этом объекте и связанных с ним программных средствах.
Объект: sessionstorage
Атрибуты: length
Функции:
♦	кеу()
♦	getltemf)
♦	setltemf)
♦	removeItem()
♦	clear()
Поддерживающие браузеры: Firefox и Safari
Для хранения значений в объекте sessionstorage служат пары
“ключ-значение”. Это означает, что при сохранении данных сле-
дует указывать не только значение данных, но и ключ, предос-
тавляющий доступ к ним, например "data" или "phone". Этот
ключ обязательно указывается впоследствии, когда читаются со-
храненные данные.
Рассмотрим вкратце атрибуты и функции объекта
sessionstorage.
Атрибут length
В атрибуте length хранится число пар “ключ-значение”, ко-
торые имеются в настоящий момент в объекте sessionstorage.
Урок 9. Сохранение содержимого веб-страниц
191
Функция кеу()
Используется так, как показано ниже,
key(index)
Функция key() возвращает имя n-го ключа в объекте
sessionstorage.
Функция getltem()
Используется следующим образом.
getItem(key)
Функция getltemf) возвращает значение элемента данных,
связанного с указанным ключом.
Функция setltem()
Используется следующим образом.
setItem(key, data)
Функция setltem() служит для сохранения данных в текущем
веб-сеансе. Для этого достаточно передать функции setltem()
значение сохраняемых данных и ключ, по которому они будут
храниться. Например, при вызове функции setItem("Data",
’’turbulent") слово "turbulent" сохраняется по ключу "Data".
Функция removeltem()
Используется так, как показано ниже.
removeltem(key)
С помощью этой функции отдельные элементы данных уда-
ляются из объекта sessionstorage.
Функция clear()
Очищает все данные, сохраненные в текущем веб-сеансе.
А теперь применим все рассмотренные выше программные
средства в примере HTML-документа sessionstorage.html, чтобы
продемонстрировать на практике, каким образом данные с веб-стра-
ницы сохраняются и восстанавливаются в текущем веб-сеансе.
192
Урок 9. Сохранение содержимого веб-страниц
Пример сохранения
и восстановления данных в текущем
веб-сеансе
Для того чтобы приступить к созданию примера HTML-доку-
мента sessionstorage.html, выполните следующие действия.
1.	Создайте HTML-документ sessionstorage.html в любом редак-
торе текста, например в Windows WordPad.
2.	Введите приведенный ниже код основного тела HTML-доку-
мента.
<!DOCTYPE html>
<html>
<head>
<title>
Сохранение содержимого веб-страниц
</title>
</head>
<body>
<hlСохранение данных в веб-сеансе</Ы>
</body>
</html>
3.	Введите выделенный ниже полужирным код для создания
текстового поля и трех кнопок.
clDOCTYPE html>
<html>
<head>
<title>
Сохранение содержимого веб-страниц
</title>
</head>
<body>
<hlСохранение данных в веб-сеансе</Ы>
Данные: cinput id="Data" type="text">
cinput type="button" value="Сохранить"
cinput type="button" value="Получить"
cinput type="button" 7а1ие="0чистить"
Урок 9. Сохранение содержимого веб-страниц
193
</body>
</html>
4.	Сохраните внесенные изменения в файле sessionstorage.html.
Непременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Итак, начало созданию HTML-документа sessionstorage.html
положено. А теперь нужно организовать в нем сохранение дан-
ных в текущем веб-сеансе.
Сохранение данных в текущем
веб-сеансе
Для того чтобы сохранить данные, введенные пользователем,
в текущем веб-сеансе, выполните следующие действия.
1.	Откройте HTML-документ из файла sessionstorage.html в из-
бранном вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для связывания
кнопки Сохранить с кодом функции sessionstore(), написан-
ной на JavaScript.
<1DOCTYPE html>
<html>
<head>
<title>
Сохранение содержимого веб-страниц
</title>
</head>
<body>
<hl Сохранение данных в веб-сеансе</М>
Данные: <input id="Data" type="text">
<input type="button" value="Сохранить"
onclick="sessionStore();>
<input type="button" value="Получить"
<input type="button" 7а1ие="0чистить"
</body>
</html>
3.	Введите выделенный ниже полужирным код для создания
функции sessionstore(), которая сохраняет текстовые дан-
ные, введенные пользователем в текущем веб-сеансе.
194
Урок 9. Сохранение содержимого веб-страниц
<!DOCTYPE html>
<html>
<head>
<title>
Сохранение содержимого веб-страниц
</title>
<script type="text/javascript">
function sessionstore()
{
var text = document.getElementById("Data").value;
sessionstorage.setItern("Data", text);
}
</script>
</head>
<body>
<hlСохранение данных в веб-сеансе</Ы>
Данные: <input id="Data" type="text">
<input type="button" value="Сохранить"
onclick="sessionStore();">
<input type="button" value="Получить"
<input type="button" value="Очистить"
</body>
</html>
4.	Сохраните внесенные изменения в файле sessionstorage.html.
Непременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный тек-
стовый формат RTF, непригодный для браузеров.
Таким образом, введенные пользователем данные будут со-
хранены в текущем веб-сеансе. А теперь необходимо восстановить
их на веб-странице после возврата к ней.
Восстановление данных из текущего
веб-сеанса
Для того чтобы восстановить данные из текущего веб-сеанса
в примере HTML-документа sessionstorage.html, выполните сле-
дующие действия.
1.	Откройте HTML-документ из файла sessionstorage.html в из-
бранном вами редакторе текста, например в Windows WordPad.
Урок 9. Сохранение содержимого веб-страниц
195
2.	Введите выделенный ниже полужирным код для связывания
кнопки Получить с кодом функции sessionGetf), написанной
на JavaScript.
<1DOCTYPE html>
<html>
<head>
<title>
Сохранение содержимого веб-страниц
</title>
<script type="text/javascript">
function sessionstore()
{
var text = document.getElementById("Data").value;
sessionstorage.setltemf"Data", text);
}
</script>
</head>
<body>
chi Сохранение данных в веб-сеансе</Ы>
Данные: <input id="Data" type="text">
cinput type="button" value="Сохранить"
onclick="sessionstore();">
cinput type="button" value="Получить"
onclick="sessionGet();">
cinput type="button" value="Очистить"
с/body>
c/html>
3.	Введите выделенный ниже полужирным код для создания
функции sessionGetf), выполняющей восстановление в тек-
стовом поле данных, введенных ранее пользователем в теку-
щем веб-сеансе.
ClDOCTYPE html>
chtml>
chead>
ctitle>
Сохранение содержимого веб-страниц
c/title>
cscript type="text/javascript">
function sessionstore()
{
var text = document.getElementByld("Data").value;
sessionstorage.setltem("Data", text);
196
Урок 9. Сохранение содержимого веб-страниц
}
function sessionGet()
{
document.getElementById("Data").value =
sessionstorage.getltemf"Data");
}
</script>
</head>
<body>
<hlСохранение данных в веб-сеансе</Ы>
Данные: <input id="Data" type="text">
<input type="button" value="Сохранить"
onclick="sessionstore();">
<input type="button" value="Получить"
onclick="sessionGet();">
<input type="button" value="Очистить"
</body>
</html>
4.	Сохраните внесенные изменения в файле sessionstorage.html.
Непременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Таким образом, введенные ранее данные восстанавливаются
из текущего веб-сеанса.
Очистка данных в текущем
веб-сеансе
Данные, введенные и сохраненные в текущем веб-сеансе, мо-
гут быть очищены. Для этого выполните следующие действия.
1.	Откройте HTML-документ из файла sessionstorage.html в из-
бранном вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для создания
связывания кнопки Очистить с кодом функции sessionClear (),
написанной на JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>
Урок 9. Сохранение содержимого веб-страниц
197
Сохранение содержимого веб-страниц
</title>
<script type="text/javascript">
function sessionstore()
{
var text = document.getElementById("Data").value;
sessionstorage.setltem("Data", text);
}
function sessionGet()
{
document.getElementById("Data").value =
sessionstorage.getltem("Data");
}
</script>
</head>
<body>
<hl Сохранение данных в веб-сеансе</Ы>
Данные: <input id="Data" type="text">
<input type="button" value="Сохранить"
onclick="sessionstore();">
<input type="button" value="Получить"
onclick="sessionGet();">
<input type="button" value="Очистить"
onclick="sessionClear();>
</body>
</html>
3.	Введите выделенный ниже полужирным код для создания
функции sessionClear(), выполняющей очистку в текстовом
поле данных, введенных пользователем в текущем веб-сеансе.
<!DOCTYPE html>
<html>
<head>
<title>
Сохранение содержимого веб-страниц
</title>
<script type="text/javascript">
function sessionstore()
{
var text = document.getElementById("Data").value;
sessionstorage.setitem("Data", text);
}
198
Урок 9. Сохранение содержимого веб-страниц
function sessionGet()
{
document.getElementByld("Data").value =
sessionstorage.getltem("Data");
}
function sessionClearf)
{
sessionstorage.removeItern("Data");
document.getElementById("Data").value = "";
}
</script>
</head>
<body>
<hlСохранение данных в веб-сеансе</Ы>
Данные: <input id="Data" type="text">
<input type="button" value="Сохранить"
onclick="sessionStore();">
<input type="button" value="Получить"
onclick="sessionGet();">
<input type="button" value="Очистить"
onclick="sessionClear();">
</body>
</html>
4.	Сохраните внесенные изменения в файле sessionstorage.html.
Непременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Теперь данные, введенные в текущем веб-сеансе, могут быть
очищены.
Полный исходный код
HTML-документа sessionstorage.html
Ниже для справки приводится полностью исходный код HTML-
документа sessionstorage.html из рассмотренного в этой главе при-
мера сохранения и восстановления данных в текущем веб-сеансе.
<!DOCTYPE html>
<html>
<head>
<title>
Сохранение содержимого веб-страниц
Урок 9. Сохранение содержимого веб-страниц
199
<script type="text/javascript">
function sessionstore()
{
var text = document.getElementByld("Data").value;
sessionstorage.setltem("Data", text);
}
function sessionGetQ
{
document.getElementById("Data").value =
sessionstorage.getltem("Data");
}
function sessionClear()
{
sessionstorage.removeltem("Data");
document.getElementByld("Data").value = "";
}
</script>
</head>
<body>
<hl Сохранение данных в веб-сеансе</М>
<br>
Данные: <input id="Data" type="text">
<input type="button" value="Сохранить"
onclick="sessionstore();">
<input type="button" value="Получить"
onclick="sessionGet();">
cinput type="button" value="Очистить"
onclick="sessionClear();">
<br>
</body>
</html>
Общее представление о локальном
сохранении данных
Помимо глобального сохранения данных в текущем веб-сеан-
се на стороне сервера, они могут быть также сохранены локально
в самом браузере. В данной главе локальное сохранение дан-
ных будет продемонстрировано на примере HTML-документа
localstorage.html, приведенного на рис. 9.4.
200
Урок 9. Сохранение содержимого веб-страниц
Рис. 9.4. HTML-документ localstorage.html, демонстрирующий ло-
кальное сохранение данных в браузере
Как и в предыдущем примере HTML-документа sessionstorage,
html, в данном случае пользователь может ввести некоторую ин-
формацию в текстовом поле, как показано на рис. 9.4, а затем
щелкнуть на кнопке Сохранить, чтобы сохранить эту информацию
в самом браузере. После этого пользователь может стереть ин-
формацию, введенную в текстовом поле, нажав кнопку Очис-
тить, как показано на рис. 9.5.
Рис. 9.5. Стирание данных, введенных ранее в браузере
Урок 9. Сохранение содержимого веб-страниц
201
Если же пользователь выберет кнопку Получить, то данные,
сохраненные в самом браузере, будут восстановлены в текстовом
поле, как показано на рис. 9.6.
Рис. 9.6. Восстановление данных, сохраненных в браузере
На примере создания HTML-документа localstorage.html по-
казывается, каким образом данные сохраняются и восстанавли-
ваются локально из браузера в промежутках между последова-
тельными доступами к веб-страницам только языковыми сред-
ствами JavaScript.
Представление о прикладном
программном интерфейсе
локального сохранения данных
Локальным сохранением данных в самом браузере удобно поль-
зоваться в течение всего периода работы браузера. В этом случае
пользователь может неоднократно возвращаться к одной и той же
веб-странице, получая доступ к сохраненным данным до тех пор,
пока окно браузера не будет закрыто.
Механизм локального сохранения данных основывается на
применении объекта JavaScript, называемого localSession. Под-
робнее об этом объекте можно узнать, обратившись по адресу
http://dev.w3.org/html5/webstorage/. А ниже дается самое общее
202
Урок 9. Сохранение содержимого веб-страниц
представление об этом объекте и связанных с ним программных
средствах.
Объект: localsession
Атрибуты: length
Функции:
♦ кеу()
♦ getltem()
♦ setltemf)
♦ removeitem()
♦ clear()
Поддерживающие браузеры: Firefox, Safari и Chrome
Аналогично рассматривавшемуся ранее в этой главе объекту
sessionstorage, данные могут сохраняться в объекте localsession
с помощью пар “ключ-значение”. Это означает, что при сохра-
нении данных указывает не только их значение, но и ключ, пре-
доставляющий доступ к ним. Этот ключ указывается впоследст-
вии, когда сохраненные данные читаются.
Атрибуты и функции объекта localsession точно такие же,
как и у объекта sessionstorage. Поэтому с их синтаксисом, на-
значением и применением вы можете ознакомиться, обратившись
в разделу “Представление о прикладном программном интерфей-
се сохранения данных в текущем веб-сеансе” ранее в этой главе.
Пример локального сохранения
и восстановления данных
Для того чтобы приступить к созданию примера HTML-доку-
мента localstorage.html, выполните следующие действия.
1.	Создайте HTML-документ localstorage.html в любом редакто-
ре текста, например в Windows WordPad.
2.	Введите приведенный ниже код основного тела HTML-доку-
мента.
<’DOCTYPE html>
<html>
<head>
<title>
Урок 9. Сохранение содержимого веб-страниц
203
Сохранение содержимого веб-страниц
</title>
</head>
<body>
<hl>Локальное сохранение данных в браузере</Ы>
</body>
</html>
3.	Введите выделенный ниже полужирным код для создания
текстового поля и трех кнопок.
<!DOCTYPE html>
<html>
<head>
<title>
Сохранение содержимого веб-страниц
</title>
</head>
<body>
<Ы>Локальное сохранение данных в браузере</Ы>
Данные: <input id="Data" type="text">
<input type="button" value="Сохранить"
<input type="button" value="Получить"
<input type="button" value="Очистить"
</body>
</html>
4.	Сохраните внесенные изменения в файле localstorage.html.
Непременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Итак, HTML-документ localstorage.html создан, а теперь нуж-
но организовать в нем локальное сохранение данных непосредст-
венно в браузере.
Сохранение данных в браузере
Для того чтобы сохранить данные, введенные пользователем,
непосредственно в браузере, выполните следующие действия.
1.	Откройте HTML-документ из файла localstorage. html в избран-
ном вами редакторе текста, например в Windows WordPad.
204
Урок 9. Сохранение содержимого веб-страниц
2.	Введите выделенный ниже полужирным код для связывания
кнопки Сохранить с кодом функции localstore (), написанной
на JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>
Сохранение содержимого веб-страниц
</title>
</head>
<body>
<Ы>Локальное сохранение данных в браузере</Ы>
Данные: <input id="Data" type="text">
<input type="button" value="Сохранить"
onclick="localstore();">
<input type="button" value="Получить"
<input type="button" value="Очистить"
</body>
</html>
3.	Введите выделенный ниже полужирным код для создания
функции localstore (), которая сохраняет текстовые данные,
введенные пользователем, непосредственно в браузере.
<!DOCTYPE html>
<html>
<head>
<title>
Сохранение содержимого веб-страниц
</title>
<script type="text/javascript">
function localstore()
{
var data = document.getElementById("Data").value;
localstorage.setltemf"Data", data);
}
</script>
</head>
<body>
<Ы>Локальное сохранение данных в браузере</Ы>
Данные: <input id="Data" type="text">
<input type="button" value="Сохранить"
onclick="localstore();">
<input type="button" value="Получить"
Урок 9. Сохранение содержимого веб-страниц
205
<input type="button" value="Очистить"
</body>
</html>
4.	Сохраните внесенные изменения в файле localstorage.html.
Непременно сделайте это в текстовом формате. По умолчанию
в текстовом редакторе WordPad выбирается расширенный
текстовый формат RTF, непригодный для браузеров.
Таким образом, данные, введенные пользователем, сохраня-
ются непосредственно в браузере. А теперь необходимо восстано-
вить их на веб-странице после возврата к ней.
Восстановление данных,
сохраненных непосредственно
в браузере
Для того чтобы восстановить данные непосредственно из
браузера в примере HTML-документа localstorage.html, выпол-
ните следующие действия.
1.	Откройте HTML-документ из файла localstorage.html в из-
бранном вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для связывания
кнопки Получить с кодом функции localGet(), написанной на
JavaScript.
<1 DOCTYPE html>
<html>
<head>
<title>
Сохранение содержимого веб-страниц
</title>
<script type="text/javascript">
function localstore()
{
var data = document.getElementByld("Data").value;
localstorage.setltemf"Data", data);
}
</script>
</head>
<body>
206
Урок 9. Сохранение содержимого веб-страниц
<Ы>Локальное сохранение данных в браузере</Ы>
Данные: <input id="Data" type="text”>
<input type="button" value="Сохранить"
onclick="localstore();">
<input type="button" value="Получить"
onclick="localGet();">
<input type="button" value="Очистить"
</body>
</html>
3.	Введите выделенный ниже полужирным код для создания функ-
ции localGet(), выполняющей восстановление данных, введен-
ных пользователем и сохраненных непосредственно в браузере.
<!DOCTYPE html>
<html>
<head>
<title>
Сохранение содержимого веб-страниц
</title>
<script type="text/javascript">
function localstore()
{
var data = document.getElementByld("Data").value;
localstorage.setltemf"Data", data);
}
function localGet()
{
document.getElementById("Data").value =
localstorage.getltem("Data");
}
</script>
</head>
<body>
<hl>Локальное сохранение данных в браузере</Ы>
Данные: <input id="Data" type="text">
<input type="button" value="Сохранить"
onclick="localstore();">
<input type="button" value="Получить"
onclick="localGet();">
<input type="button" value="Очистить"
</body>
</html>
Урок 9. Сохранение содержимого веб-страниц
207
4.	Сохраните внесенные изменения в файле localstorage,
html. Непременно сделайте это в текстовом формате. По умол-
чанию в текстовом редакторе WordPad выбирается расши-
ренный текстовый формат RTF, непригодный для браузеров.
Таким образом, данные, сохраненные непосредственно в бра-
узере, восстанавливаются в текстовом поле.
Очистка локально сохраняемых
данных
Данные, введенные и сохраненные непосредственно в браузере,
могут быть очищены. Для этого выполните следующие действия.
1.	Откройте HTML-документ из файла localstorage. html в избран-
ном вами редакторе текста, например в Windows WordPad.
2.	Введите выделенный ниже полужирным код для связывания
кнопки Очистить с кодом функции 1оса1С1еаг(), написанной
на JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>
Сохранение содержимого веб-страниц
</title>
<script type="text/javascript">
function localstore(}
{
var data = document.getElementById("Data”).value;
localstorage.setltemf"Data", data);
}
function localGetf)
{
document.getElementByld("Data").value =
localstorage.getltemf"Data");
}
</script>
</head>
<body>
<hl>Локальное сохранение данных в браузере</Ы>
Данные: <input id="Data" type="text">
208
Урок 9. Сохранение содержимого веб-страниц
<input type="button" value="Сохранить"
onclick="localstore(); ">
<input type="button" value="Получить"
onclick="localGet();">
<input type="button" value="Очистить"
onclick="localClear();">
</body>
</html>
3.	Введите выделенный ниже полужирным код для создания
функции 1оса1С1еаг(), выполняющей очистку данных, введен-
ных пользователем и сохраненных непосредственно в браузере.
<!DOCTYPE html>
<html>
<head>
<title>
Сохранение содержимого веб-страниц
</title>
<script type="text/javascript">
function localstore()
{
var data = document.getElementByldf"Data").value;
localstorage.setltemf"Data", data);
}
function localGet()
{
document.getElementById("Data").value =
localstorage.getltemf"Data");
}
function localClear()
{
localstorage.removeItern("Data");
document.getElementById("Data").value = "";
}
</script>
</head>
<body>
<hl>Локальное сохранение данных в браузере</Ы>
Данные: <input id="Data" type="text">
<input type="button" value="Сохранить"
onclick="localstore();">
<input type="button" value="Получить"
onclick="localGet();">
Урок 9. Сохранение содержимого веб-страниц
209
<input type="button" value="Очистить"
onclick="localClear();">
</body>
</html>
4.	Сохраните внесенные изменения в файле localstorage,
html. Непременно сделайте это в текстовом формате. По умол-
чанию в текстовом редакторе WordPad выбирается расши-
ренный текстовый формат RTF, непригодный для браузеров.
Теперь данные, сохраненные непосредственно в браузере, мо-
гут быть очищены.
Полный исходный код
HTML-документа localstorage.html
Ниже для справки приводится полностью исходный код
HTML-документа localstorage.html из рассмотренного в этой
главе примера сохранения и восстановления данных непосредст-
венно в браузере.
<!DOCTYPE html>
<html>
<head>
<title>
Сохранение содержимого веб-страниц
</title>
<script type="text/javascript">
function localstore()
{
var data = document.getElementById("Data").value;
localStorage.setltern("Data", data);
}
function localGet()
{
document.getElementByld("Data").value =
localstorage.getltem("Data");
}
function localClear()
L.
«localstorage.removeltem("Data");
document.getElementByld("Data").value =
}
210
Урок 9. Сохранение содержимого веб-страниц
</script>
</head>
<body>
<hl>Локальное сохранение данных в браузере</Ы>
<br>
Данные: <input id="Data" type="text">
<input type="button" value="Сохранить"
onclick="localstore();">
<input type="button" value="Получить"
onclick="localGet();">
<input type="button" value="Очистить"
onclick="localClear();">
</body>
</html>
Урок 10
Новые элементы HTML5
В состав HTML5 включен ряд новых элементов, рассмотре-
нию которых посвящена данная глава. Некоторые из этих эле-
ментов уже рассматривались в предыдущих главах, но имеется
немало других новых элементов, связанных главным образом со
структурой документа.
Дополнительные языковые средства
SVG и MathML
Любопытно, что теперь в HTML5 поддерживаются два XTML-
подобных языка: SVG (язык разметки масштабируемой вектор-
ной графики) и MathML (язык разметки математических выра-
жений). В частности, язык SVG уже поддерживается некоторы-
ми браузерами, в том числе Firefox (рис. 10.1).
На момент написания этой книги языковые средства MathML,
применяемые в HTML5, поддерживались только в браузере
Amaya. Пробная версия этого браузера предоставляется на веб-
сайте W3C по адресу www.w3 .org/Amaya/.
Общее представление о новых
элементах HTML5
Ниже перечислены новые элементы, вошедшие в состав HTML5.
•	<article>
•	<aside>
•	<audio>
•	<canvas>
•	<command>
212
Урок 10. Новые элементы HTML5
Рис. 10.1. Пример, демонстрирующий применение язы-
ковых средств SVG в НТМ1_5-документе и их поддержку
в браузере Firefox
•	<datalist>
•	<details>
•	<embed>
•	<figcaption>
•	<figure>
•	<footer>
•	<header>
•	<hgroup>
•	<keygen>
•	<mark>
•	<meter>
•	<nav>
•	<output>
•	<progress>
•	<rp>
Урок 10. Новые элементы HTML5
213
•	<rt>
•	<ruby>
•	<section>
•	<source>
•	<summary>
•	<time>
•	<video>
Ознакомиться с подробным описанием перечисленных выше
новых элементов можно на веб-сайте W3C по адресу www.w3.org/
TR/html5/spec.html#auto-toc-8. Следует также обратить внимание
на приведенные ниже элементы, внедренные в HTML5.
•	<асгопуш>
•	<applet>
•	<basefont>
•	<big>
•	<center>
•	<dir>
•	<font>
•	<frame>
•	<frameset>
•	<isindex>
•	<noframes>
•	<s>
•	<strike>
•	<tt>
•	<u>
Далее дается краткий обзор назначения и применения новых
для HTML5 элементов.
214
Уоок 10. Новые элементы HTML5
Элемент <article>
Служит для разметки части документа, распространяемой
как независимый документ, подобно статье из журнала. Ниже
приведены атрибуты элемента <article>.
•	accesskey
•	class
•	contenteditable
•	contextmenu
•	dir
•	draggable
•	hidden
•	id
•	lang
•	spellcheck
•	style
•	tabindex
•	title
Далее приводится практический пример, демонстрирующий
применение элемента <article> в коде HTML-документа.
<IDOCTYPE HTML>
<html>
<head>
<title>
Собирается дождь
</title>
</head>
<body>
<article>
<header>
<Ь1>Собирается дождь</Ь1>
<P>
<time pubdate datetime="2010-10-09T14:28-08:00"></time>
</p>
</header>
<р>Текущий прогноз на ливень.</p>
<section>
Урок 10. Новые элементы HTML5
215
<h1>Комментарии</h1>
<article>
<footer>
<р»Опубликовано: Семеном Кроикой</р>
<p»<time pubdate datetime»"2011-05-10T19:10-08:00">
</time></p>
</footer>
<рМ)чень нужен дождь.</p>
</article>
<article>
<footer>
<рХ)публиковано: Федором Кузнечиком</р»
<pxtime pubdate datetimes"2011-05-10T19:15-08:00">
</timex/p>
</footer»
<р»Возможно, но я так не думаю.</p>
</article>
</section»
</article>
</body»
</html»
Элемент <aside»
С помощью этого элемента размечаются отступления от
основного текста, в том числе врезки. Текст в элементе <aside>
обычно отделяется от основного текста. Ниже перечислены ат-
рибуты элемента <aside>.
•	accesskey
•	class
•	contenteditable
•	contextmenu
•	dir
•	draggable
•	hidden
•	id
•	lang
•	spellcheck
•	style
216
Урок 10. Новые элементы HTML5
•	tabindex
•	title
Элемент <audio>
Этот элемент подробно рассматривался в главе 8.
Элемент <canvas>
Данный элемент подробно рассматривался в главе 2.
Элемент <command>
С помощью этого элемента можно оформить кнопку, флажок
или кнопку-переключатель на веб-странице. Ниже перечислены
атрибуты элемента <command>.
•	accesskey
•	checked
•	class
•	contenteditable
•	contextmenu
•	dir
•	disabled
•	draggable
•	hidden
•	icon
•	id
•	label
•	lang
•	radiogroup
•	spellcheck
•	style
-• tabindex
Урок 10. Новые элементы HTML5
217
•	title
•	type
Атрибут type определяет тип отображаемого элемента уп-
равления. Если в этом атрибуте установлено ключевое слово
"command", то на месте элемента управления отображается кнопка,
что соответствует состоянию Command. Флажку, определяемому
ключевым словом "checkbox", соответствует состояние Checkbox,
а кнопке-переключателю, определяемой ключевым словом radio, —
состояние Radio.
В приведенном ниже фрагменте кода демонстрируется при-
менение элемента <command> в HTML-документе.
<menu type="toolbar">
«command type="radio" radiogroup="colors" checked="checked"
1аЬе1="Слева" onclick="red()">
«command type="radio" radiogroup="colors"
1аЬе1="По центру" onclick="blue()">
«command type="radio" radiogroup="colors"
1аЬе1="Справа" onclick="green()">
<hr>
«command type="command" disabled
label="Опубликовать" onclick="publish()">
</menu>
Элемент <datalist>
Предоставляет элементы выбора <option> для других эле-
ментов управления. Он связывается с атрибутом list элемента
<input>. Ниже перечислены атрибуты элемента <datalist>.
•	accesskey
•	class
•	contenteditable
•	contextmenu
•	dir
•	draggable
•	hidden
•	id
218
Урок 10. Новые элементы WTML5
•	lang
•	spellcheck
•	style
•	tabindex
•	title
Элемент <details>
Выбирается щелчком кнопкой мыши и раскрывается для
отображения подробностей, когда они требуются пользователю.
Ниже перечислены атрибуты элемента <details>.
•	accesskey
•	class
•	contenteditable
•	contextmenu
•	dir
•	draggable
•	hidden
•	id
•	lang
•	open
•	spellcheck
•	style
•	tabindex
•	title
Сами подробности хранятся в элементах <dt> (заглавие под-
робностей) и <dd> (элементы данных подробностей). В приведен-
ном ниже фрагменте кода демонстрируется применение элемен-
та <details> в HTML-документе.
<section>
<details>
<summary>MopoxeHoe</summary>
<dl>
Урок 10. Новые элементы HTML5
219
<dt>CopT:</dt> <dd>Kny6HH4Hoe</dd>
<dt>HaHMeHOsaHHe</dt> <dd>Bonwnoe xpacHoe</dd>
<dt>CoflepxHT caxap</dt> <dd>Be3ycnoBHO</dd>
</dl>
</details>
</section>
Элемент <embed>
С помощью этого элемента можно встраивать результаты,
выводимые из другого приложения, как правило, подключаемо-
го модуля, в том числе видео- и аудиозаписи. Ниже перечислены
атрибуты элемента <embed>.
•	accesskey
•	class
•	contenteditable
•	contextmenu
•	dir
•	draggable
•	height
•	hidden
•	id
•	lang
•	spellcheck
•	src
•	style
•	tabindex
•	title
•	type
•	width
Атрибут src задает URL (веб-адрес) встраиваемого ресурса.
А тип MIME встраиваемого ресурса определяется с помощью ат-
рибута type.
220
Урок 10. Новые элементы HTML5
Элемент <f igcaption>
Содержит подрисуночную надпись для элемента <figure>,
рассматриваемого далее. Ниже перечислены атрибуты элемента
<figcaption>.
•	accesskey
•	class
•	contenteditable
•	contextmenu
•	dir
•	draggable
•	hidden
•	id
•	lang
•	spellcheck
•	style
•	tabindex
•	title
Элемент <figure>
С помощью этого элемента подрисуночная надпись связыва-
ется с рисунком. Ниже перечислены атрибуты элемента <f igure>.
•	accesskey
•	class
•	contenteditable
•	contextmenu
•	dir
•	draggable
•	hidden
•	id
•	lang
Урок 10. Новые элементы HTML5
221
•	spellcheck
•	style
•	tabindex
•	title
В приведенном ниже фрагменте кода демонстрируется при-
менение элемента <f igure> в HTML-документе.
<figure>
<img src="icecream.jpeg"
alt-'Клубничное мороженое">
<figcaption>Kny6HH4Hoe MopoxeHoe</figcaption>
</figure>
Элемент <f ooter>
С помощью этого элемента текст отображается в нижнем ко-
лонтитуле для самого последнего элемента <section>. Ниже пе-
речислены атрибуты элемента <footer>.
•	accesskey
•	class
•	contenteditable
•	contextmenu
•	dir
•	draggable
•	hidden
•	id
•	lang
•	spellcheck
•	style
•	tabindex
•	title
Пример применения элемента <footer> см. выше в разделе
“Элемент <article>”.
222
Ур<ж 10. Ном аяемомы HTML5
Элемент <header>
Группирует вводный или навигационный материал. Ниже пе-
речислены атрибуты элемента <header>.
•	accesskey
•	class
•	contenteditable
•	contextmenu
•	dir
•	draggable
•	hidden
•	id
•	lang
•	spellcheck
•	style
•	tabindex
•	title
В приведенном ниже фрагменте кода демонстрируется при-
менение элемента <header> в HTML-документе.
<body>
<header>
<h 1>Мороженое</h1>
<nav>
<ul>
<1i><a href="/strawberry”>Клубничное</a>
<1i><a href="/chocolate">Шоколадное</a>
<li><a href=,7vanilla">BaHHnbHoe</a>
</ul>
</nav>
<Ь2>Благоприятные вести о морохеном</Ь2>
</header>
</body>
Элемент <hgroup>
Содержит заголовок раздела и служит для группирования
ряда элементов hl-h6, когда заголовок оказывается многоуров-
Урок 10. Новые элементы HTML5
223
невым, т.е. содержит подзаголовки, альтернативные заглавия и
заголовки более низкого уровня. Ниже перечислены атрибуты
элемента <hgroup>.
•	accesskey
•	class
•	contenteditable
•	contextmenu
•	dir
•	draggable
•	hidden
•	id
•	lang
•	spellcheck
•	style
•	tabindex
•	title
С помощью элемента <hgroup> несколько составляющих заго-
ловка группируются в единое целое при создании структуры до-
кумента.
Элемент <keygen>
Представляет элемент управления, генерирующий пары “ключ-
значение” для открытых и секретных ключей шифрования. Ко-
гда предъявляется форма, содержащая подобный элемент управ-
ления, секретный ключ сохраняется, а открытый передается на
сервер. Ниже перечислены атрибуты элемента <keygen>.
•	accesskey
•	autofocus
•	challenge
•	class
•	contenteditable
•	contextmenu
224
Урок 10. Новые элементы HTML5
•	dir
•	disabled
•	draggable
•	form
•	hidden
•	id
•	keytype
•	lang
•	name
•	spellcheck
•	style
•	tabindex
•	title
Элемент <mark>
Представляет текст в одном документе, помеченный или вы-
деленный для ссылки, поскольку он уместен в другом контексте.
Ниже перечислены атрибуты элемента <mark>.
•	accesskey
•	class
•	contenteditable
•	contextmenu
•	dir
•	draggable
•	hidden
•	id
•	lang
•	spellcheck
•	style
•	tabindex
•	title
Урок 10. Новые элементы HTML5
225
В приведенном ниже фрагменте кода демонстрируется при-
менение элемента <mark> в HTML-документе.
<р>Выделенный ниже текст содержит ошибку:</р>
<pre><code>
var х: Integer;
begin
х := <mark>'a'</mark>;
end.
</code></pre>
Элемент <meter>
Этот элемент отображает шкалу, показывающую ход выпол-
нения процесса и измеряемую величину. Ниже перечислены ат-
рибуты элемента <meter>.
•	accesskey
•	class
•	contenteditable
•	contextmenu
•	dir
•	draggable
•	form
•	hidden
•	high
•	id
•	lang
•	low
•	max
•	min
•	optimum
•	spellcheck
•	style
•	tabindex
•	title
•	value
226
Урок W. Новые элементы HTML5
В приведенной ниже строке кода демонстрируется примене-
ние элемента <meter> в HTML-доку менте.
<meter min=0 max=60 value=15 title="MHHyTH"x/meter>
Элемент <nav>
Содержит навигационные ссылки. Ниже перечислены атри-
буты элемента <nav>.
•	accesskey
•	class
•	contenteditable
•	contextmenu
•	dir
•	draggable
•	hidden
•	id
•	lang
•	spellcheck
•	style
•	tabindex
•	title
В приведенном ниже фрагменте кода демонстрируется при-
менение элемента <nav> в HTML-доку менте.
<body>
<header>
<nav>
<Ь1>Вести о мороженом</Ь1>
<ul>
<li><a href="articles.html">YKa3aTenb всех статей</а></Н>
<li><a href="today.html">Насущные вопросы мороженого</а></Н>
<li><a href="new.html">HoBHe сорта мороженого</а></Н>
</ul>
</nav>
</header>
<div>
Урок 10. Ноше мемкмты NTML5
227
Элемент <output>
Управляет выводом результатов расчетов. Ниже перечислены
атрибуты элемента <output>.
•	accesskey
•	class
•	contenteditable
•	contextmenu
•	dir
•	draggable
•	for
•	form
•	hidden
•	id
•	lang
•	name
•	spellcheck
•	style
•	tabindex
•	title
В приведенном ниже фрагменте кода демонстрируется при-
менение элемента <output> в HTML-доку менте.
<form onsubmit="return false”>
<input name=x type=number step=any>
<br>
+
<br>
<input name=y type=number step=any>
<br>
<br>
<output onforminput=”value = x.value + y.value"x/output>
</form>
228
Урок 10. Новые элементы HTML5
На момент написания этой книги было не совсем ясно, чем же
элемент <output> должен отличаться от текстового поля, предна-
значенного только для чтения.
Элемент <progress>
Выводит полосу, отображающую ход выполнения процесса.
Ниже перечислены атрибуты элемента <progress>.
•	accesskey
•	class
•	contenteditable
•	contextmenu
•	dir
•	draggable
•	form
•	hidden
•	id
•	lang
•	max
•	spellcheck
•	style
•	tabindex
•	title
•	value
В приведенном ниже фрагменте кода демонстрируется при-
менение элемента <progress> в HTML-документе. В этом примере
функция updateBar() обновляет полосу выполнения процесса.
<head>
<title>nonoca выполнения<ЛШе>
<script>
var bar = document. getElementByld('pb');
function updateBar(new)
{
bar.value = new;
bar.getElementsByTagName('span')[0].textcontent = new;
Урок 10. Новые элементы HTML5
229
</head>
<body>
}
</script>
<Ь2>Выполнение задания</Ь2>
<р>Выполнение: <progress id="pb"
max=100><span>0</span>%</progress></p>
</body>
Элемент <rp>
Является составной частью элемента <ruby>, отображающего
аннотации к тексту. В частности, текст самой аннотации в эле-
менте <ruby> нередко используется в качестве вспомогательного
средства для обозначения правильного произношения. Текст, раз-
мечаемый элементом <гр>, заключается в круглые скобки в тек-
сте аннотации, размечаемом элементом <ruby>. Ниже перечисле-
ны атрибуты элемента <гр>.
•	accesskey
•	class
•	contenteditable
•	contextmenu
•	dir
•	draggable
•	hidden
•	id
•	lang
•	spellcheck
•	style
•	tabindex
•	title
См. также краткое описание элемента <ruby>.
230
Урок tO. Новые элементы HTML5
Элемент <rt>
Размечает текстовую составляющую аннотации в элементе
<ruby>. См. также краткое описание элемента <ruby>. Ниже пере-
числены атрибуты элемента <rt>.
•	accesskey
•	class
•	contenteditable
•	contextmenu
•	dir
•	draggable
•	hidden
•	id
•	lang
•	spellcheck
•	style
•	tabindex
•	title
Элемент <ruby>
Размечает текст аннотации, обозначения правильного произ-
ношения и прочие вспомогательные средства, указываемые ря-
дом с аннотируемым текстом. Ниже перечислены атрибуты эле-
мента <ruby>.
•	accesskey
•	class
•	contenteditable
•	contextmenu
•	dir
•	draggable
•	hidden
Урок 10. Новые элементы HTML5
231
•	id
•	lang
•	spellcheck
•	style
•	tabindex
•	title
Элемент <section>
Представляет раздел из основного текста. В частности, он мо-
жет представлять отдельную главу длинного документа. Элемент
<section>, как правило, используется для разделения содержи-
мого элемента <article> на более мелкие части. Ниже перечисле-
ны атрибуты элемента <section>.
•	accesskey
•	class
•	contenteditable
•	contextmenu
•	dir
•	draggable
•	hidden
•	id
•	lang
•	spellcheck
•	style
•	tabindex
•	title
См. также краткое описание элемента <article>.
Элемент <source>
С помощью этого элемента можно указывать несколько аль-
тернативных информационных ресурсов для мультимедийных
232
Урок 10. Новые элементы HTML5
элементов. Если один из ресурсов не удастся найти, поиск будет
продолжен со следующего ресурса. Ниже перечислены атрибуты
элемента <source>.
•	accesskey
•	class
•	contenteditable
•	contextmenu
•	dir
•	draggable
•	hidden
•	id
•	lang
•	media
•	spellcheck
•	src
•	style
•	tabindex
•	title
•	type
В приведенном ниже фрагменте кода демонстрируется при-
менение элемента <source> в HTML-доку менте.
<source src=icecream.mp4' type-video/mp4;
codecs="mp4v.20.240, mp4a.40.2'">
Элемент <summary>
Является производным от элемента <details> и предоставляет
сводку содержимого элемента <details>. Ниже перечислены ат-
рибуты элемента <summary>.
•	accesskey
•	class
•	contenteditable
Урок 10. Новые элементы HTML5
233
•	contextmenu
•	dir
•	draggable
•	hidden
•	id
•	lang
•	spellcheck
•	style
•	tabindex
•	title
Элемент <time>
Содержит метку даты. Ниже перечислены атрибуты элемента
<time>.
•	accesskey
•	class
•	contenteditable
•	contextmenu
•	datetime
•	dir
•	draggable
•	hidden
•	id
•	lang
•	pubdate
•	spellcheck
•	style
•	tabindex
•	title
234
Урок 10. Новые элементы HTML5
В приведенной ниже строке кода демонстрируется примене-
ние элемента <time> в HTML-доку менте.
<time datetime=’’2010-10-09T14:28-08:00”></time>
Элемент <video>
Данный элемент подробно рассматривался в главе 8.
Предметный указатель
А
Аудиовизуальная информация
воспроизведение
автоматическое, 175
аудиозаписи, пример, 181
в формате OGG, 165
видеозаписи, пример, 171
выявление и обработка
ошибок, 176; 184
циклическое, 174
поддержка в HTML5,23
преобразование в формат OGG,
169
в
Внутристрочное
редактирование
атрибуты, 97
в отдельном элементе
полный исходный код примера,
114
создание примера, 99
всего документа
полный исходный код
примера, 119
создание примера, 115
добавление ссылок, 107
показ исходного текста, 109
проверка орфографии, 112
средствами HTML5,22
форматирование текста, 101;
104; 105
3
Заполнение штриховых
рисунков
пример, 39
функции,39
н
Новая версия HTML5
новые функциональные
возможности, 20
особенности, 14
поддержка в браузерах, 16; 20
разработка консорциума W3C, 20
спецификация, текущее состояние,
20
средства создания сценариев,
применение, 19
текущее состояние, 16
о
Обмен сообщениями между
документами
междоменный
определение, 143
отправка сообщений, 157
полный исходный код примера,
162; 163
прием сообщений, 161
создание примера, 156
межоконный
определение, 143
отправка сообщений, 149
полный исходный код
примера, 154; 155
прием сообщений, 152
создание примера, 148
механизм и программные
средства, 146
средствами HTML5,23
Основы HTML5,19
п
Перетаскивание
атрибуты, 54; 56
236
Предметный указатель
завершение операции
опускания,68
интерфейс API, 54
начало операции, реализация, 62
обработка событий опускания, 67
объект dataTransfег, 57
поддержка в HTML5,51
полезные операции, 51
полный исходный код примера, 69
пример реализации, 57
разрешение операции
опускания, 65
перетаскивания, 64
средствами HTML5,21
Предыстория браузера
извлечение данных, 138
интерфейс API, 123
обращение, 22
объекты
history, атрибуты и функции,
123
состояния, механизм
размещения и извлечения, 122
перемещение назад и вперед, 126;
129
полный исходный код примера,
140
пример обращения, 125
продвижение на заданное число
страниц, 131
протяженность, отображение, 134
размещение данных, 135
сохранение и восстановление
данных, механизм, 121
р
Рекомендации консорциума
W3C
составление, 20
стадии разработки, 20
Рисование на виртуальном
полотне
дуг
пример, 43
функции,43
изображений, функции, 32
кривых Безье
пример, 41
функции, 41
кривых второго порядка
пример, 42
функции,42
линий, атрибуты, 30
отбрасывание теней, атрибуты, 30
полный исходный код примера, 46
преобразования графических
элементов, функции, 33
прямоугольников
пример, 35
функции,31
с помощью
функций JavaScript, 21
элемента управления Canvas,
21; 28
сложных форм
пример, 41; 42; 43
функции,31
стилевое оформление,
атрибуты, 30
текста
атрибуты и функции, 32
пример, 46
шрифтовое оформление, 45
штриховых рисунков
пример, 37
функции, 37
С
Создание веб-форм
исходный код программы РНР,
96
новые элементы управления в
HTML5, 75
полный исходный код примера,
94
пример, 83
элементы управления, 22
Сохранение содержимого веб-
страниц
в текущем веб-сеансе
интерфейс API, 190
механизм, 188
Предметный указатель
237
полный исходный код примера,
198
пример, 192
локальное
интерфейс API, 201
механизм, 199
полный исходный код
примера, 209
пример, 202
поддержка в HTML5,24
э
Элементы HTML5
<article>
атрибуты, 214
пример применения, 214
<aside>
атрибуты, 215
назначение, 215
<canvas>
атрибуты, 29
назначение, 28
<command>
атрибуты, 216
назначение, 216
пример применения, 217
<datalist>
атрибуты, 217
назначение, 217
<details>
атрибуты, 218
пример применения, 218
<embed>
атрибуты, 219
назначение, 219
<figcaption>
атрибуты, 220
<figure>
атрибуты, 220
назначение, 220
пример применения, 221
<footer>
атрибуты, 221
назначение, 221
<header>
атрибуты, 222
пример применения, 222
<hgroup>
атрибуты, 223
<keygen>
атрибуты, 223
<mark>
атрибуты, 224
пример применения, 225
<meter>
атрибуты, 225
назначение, 225
пример применения, 226
<nav>
атрибуты, 226
пример применения, 226
<output>
атрибуты, 227
пример применения, 227
<progress>
атрибуты, 228
назначение, 228
пример применения, 228
<гр>
атрибуты, 229
назначение, 229
<rt>
атрибуты, 230
<ruby>
атрибуты, 230
<section>
атрибуты, 231
<source>
атрибуты, 232
назначение, 231
пример применения, 232
<summary>
атрибуты, 232
<time>
атрибуты, 233
пример применения, 234
включенные в состав новой
версии, 25; 213
воспроизводящие видео- и
аудиозаписи
<audio>, атрибуты, 179
<video>, атрибуты, 167
новые, перечень, 24; 211
редактируемые
238
Предметный указатель
<div>, 99
<iframe>, 115
особенности, 97
Элементы управления
Canvas
атрибуты и функции, 29
интерфейс API, 29
назначение, 21; 27
пример применения, создание,
33
реализация в HTML5,27
типы данных, 29
функционирование, 21
вводом
адреса электронной почты,
создание, 86
веб-адреса, создание, 85
даты и времени, создание, 90
заданных пределов и числовых
значений, создание, 88
веб-формами
атрибуты и функции, 77
представляемые по умолчанию,
создание, 84
разновидности, 22
реализованные в HTML5, 74
создание, 74
типы данных, 77
воспроизведением видео- и
аудиозаписей, 174
выбором цвета, создание, 91
запросом на поиск, создание, 93
я
Языковые средства
JavaScript, 19
MathML, 211
SVG, 211
HTML5
5-е издание
заЮ
минут
Поддержка HTML5 уже реализована
в самых последних версиях всех
основных веб-браузеров. С его по-
мощью можно внедрить захватываю-
щие воображение, новейшие дости-
жения в области веб-разработки.
Эта книга служит кратким и удобным
справочным руководством по новым,
уже доступным языковым средствам
HTML5.
Особенности книги:
Простой и удобный для усвоения
способ изложения материала
с демонстрацией на конкретных
примерах применения элементов
HTML5 и их атрибутов.
Пошаговые инструкции, просто
и доходчиво поясняющие, каким
образом в HTML5 реализуется
рисование форм, воспроизведение
видео- и аудиозаписей,
перетаскивание элементов веб-
страниц, создание заполняемых веб-
форм и многое другое.
Простое и логичное разъяснение
противоречивых и неверных
представлений о том, что собой
представляет HTML5.
Научитесь:
•	Размещать и воспроизводить
видео- и аудиозаписи на веб-
страницах с помощью новых для
HTML5 элементов <video> и <audio>
•	Рисовать прямые и кривые линии,
заполняемые цветом формы и текст
на виртуальном полотне с помощью
элемента <canvas>
•	Перетаскивать отдельные элементы
на веб-страницах новыми средства-
ми HTML5
•	Создавать заполняемые веб-
формы с помощью новых элементов
управления, доступных в HTML5
•	Редактировать текстовое содер-
жимое веб-страниц в диалоговом
режиме
•	Пользоваться встроенной в HTML5
поддержкой перемещения по
предыстории браузера
•	Осуществлять обмен сообщениями
между HTML-документами
•	Сохранять данные с веб-страниц
глобально на сервере и локально
в браузере
Категория: Веб-дизайн/HTML
Предмет рассмотрения: HTML5
Уровень: Начальный - средний
ВИЛЬЯМС
№9
http://www.williamspublishing.com
SAMS
www.informit.com/sams
ISBN 978-5-8459-1745-4