Автор: Гаевский А.Ю. Романовский В.А.
Теги: программирование веб дизайн
Текст
А.Ю. Гаевский
В.А. Романовский
САМОУЧИТЕЛЬ
Создание Web-страниц
Краткое содержание
(подробное содержание находится в конце книги)
Введение.............................................5
Часть I. Язык разметки HTML..........................7
ГЛАВА 1. Введение в HTML........................... 8
ГЛАВА 2. Оформление текста..........................27
ГЛАВА 3. Листы стилей...............................65
ГЛАВА 4. Таблицы...................................112
ГЛАВА 5. Графика и мультимедиа на Web-странице.....143
ГЛАВА 6. Фреймы....................................166
ГЛАВА 7. Формы.....................................181
ГЛАВА 8. Планирование и размещение
Web-сайта в Интернете..............................203
Часть П. Язык сценариев JavaScript.................223
ГЛАВА 9. Введение в JavaScript.....................224
ГЛАВА 10. Объектная модель JavaScript..............255
ГЛАВА 11. Обработка событий........................290
Часть Ш. Динамический HTML.........................309
ГЛАВА 12. Управление окнами........................310
ГЛАВА 13. Управление документом....................338
ГЛАВА 14. Динамические стили и анимация............367
ГЛАВА 15. Программирование форм....................398
Приложение А. HTML-элементы........................419
Приложение Б. Список допустимых атрибутов..........423
Приложение В. Свойства стилей......................437
Приложение Г. Таблица символьных примитивов........444
Введение
Перед вами книга, в которой излагаются основы работы в HTML и JavaScript. Для изу-
чения представленного материала от читателя не требуется серьезной подготовки в об-
ласти программирования, достаточно владения основами информатики в объеме средней
школы. Последовательно изучая материал данной книги, вы поймете, что в программи-
ровании Web-публикаций нет ничего сложного и недоступного. Вы научитесь создавать
как простые сайты с помощью обычного HTML, так и публикации, содержащие различ-
ные интерактивные элементы, анимацию и т.д.
К настоящему времени издано немало книг по технологии Web-публикаций. Их можно
условно разделить на книги по работе в среде визуальных HTML-редакторов и книги по
программированию публикаций для Web, которые дают более глубокое понимание тех-
нологий Web-дизайна. Данный самоучитель относится ко второй категории книг и рас-
считан на читателей, интересующихся не только конечным результатом - созданными
Web-страницами и сайтами, но и кодом, с помощью которого они были получены.
Основой программирования документов для Web является, безусловно, язык разметки
HTML. Однако с его помощью можно создавать только статические документы, обнов-
ляемые с сервера. В отличие от обычного HTML, динамический HTML обеспечивает
взаимодействие Web-документов с пользователем и дает возможность изменять доку-
мент на компьютере клиента без обращения на сервер.
Инструментом для манипулирования страницами служат языки сценариев JavaScript,
VBScript, Jscript, из которых в настоящее время наиболее популярен JavaScript. Этот
язык стал языком создания не только интерактивных публикаций, но и различных Web-
приложений.
Предлагаемая вашему вниманию книга состоит из трех частей, посвященных соответст-
венно HTML, JavaScript и Dynamic HTML. Опишем кратко содержание каждой из частей.
Часть I. «Язык разметки HTML 4.x». Первая часть книги посвящена основам языка
HTML версий 4.0 и 4.01 и состоит из восьми глав. Глава 1 является вводной, в ней рас-
сматриваются основные понятия HTML: назначение языка разметки, теговая модель,
использование браузеров и др. В следующей главе 2 вы узнаете об основных приемах
оформления текста и текстовых элементов: символов, абзацев, цитат, списков. Большое
внимание уделено принципам создания и оформления гиперссылок - основных элемен-
тов Web-публикаций. В главе 3 описан язык каскадных листов стилей CSS, который со-
держит набор свойств, позволяющих манипулировать внешним видом документа. Бла-
годаря технологии CSS, средства форматирования отделяются от содержания документа
и возможен перенос стилей оформления одного документа на множество других доку-
ментов. В главе 4 читателю предлагается изучить средства создания и форматирования
таблиц. Таблицы в Web-документах имеют не только иллюстративное назначение, они
являются удобным инструментом компоновки документа, размещения изображений,
связи с базами данных. Следующая глава 5 посвящена размещению на страницах изо-
бражений и мультимедийных элементов. Именно изображения придают Web-страницам
индивидуальность и позволяют разработчику перейти от простого форматирования до-
кумента к дизайнерским решениям. В главе 6 вы познакомитесь с элементами фреймов,
научитесь корректно размещать в одном окне браузера несколько документов, а также
узнаете достоинства и недостатки этой технологии. Глава 7 посвящена различным во-
просам создания форм и элементов управления, которые обеспечивают интерактивность
6
Введение
Web-страниц. Наконец, в главе 8 вы получите представление о том, каким должен быть
сайт в целом, какую структуру сайта предпочтительнее выбрать и в каком виде он дол-
жен существовать на диске компьютера. Здесь вы изучите простые приемы размещения
сайта в Интернете, то есть закачки файлов на Web-сервер.
Часть II. «Язык сценариев JavaScript». В этой части книги излагаются основы
JavaScript - основного языка разработки «живых» Web-страниц и неординарных реше-
ний в области Web-публикаций. Глава 9 является фактически введением в JavaScript,
в ней описываются синтаксис языка, операторы, типы данных, функции. Прочитав эту
главу, вы научитесь создавать простейшие сценарии и интерактивные страницы. Язык
JavaScript предназначен, прежде всего, для манипулирования объектами, и этому учит
следующая глава 10. Из этой главы вы узнаете о приемах работы со встроенными и
пользовательскими объектами, с массивами и строками. Глава 11 второй части книги
посвящена обработке событий, которые генерируются в результате действий пользова-
теля (щелчков мыши, нажатия клавиш и т.д.) или при изменении состояния документа.
Часть III. «Динамический HTML». В третьей части книги описываются средства ди-
намического HTML, благодаря которым обеспечиваются полный доступ к структуре
документа, поддержка динамических стилей и содержания, эффекты анимации и муль-
тимедиа. В главе 12 вы познакомитесь с объектной моделью браузера, методами управ-
ления окнами браузера, научитесь работать с диалоговыми окнами. Глава 13 посвящена
работе с документом в интерактивном режиме: динамическому изменению содержания
документа, созданию таблиц и других элементов в ответ на некоторые события. В главе
14 вы научитесь использовать листы стилей CSS в динамических Web-публикациях, по-
чувствуете значительные удобства их применения в различных задачах анимации. В по-
следней главе 15 вам предлагается ознакомиться с возможностями программирования
форм, анализируются коды, предназначенные для проверки введенной информации,
очистки формы, изменения набора отображаемых элементов управления и т.д.
Итак, изучайте материал, представленный в самоучителе, и смело приступайте к созда-
нию собственных Web-сайтов, отвечающих всем современным требованиям. Творите,
пробуйте и получайте удовольствие!
Часть I.
Язык разметки HTML
Возможно, путешествуя по World Wide Web и открывая понравив-
шуюся вам Web-страницу, вы задавались вопросом, как она создана.
Вы могли заглянуть во «внутреннее строение» этой страницы, на-
брав команду Вид - В виде HTML (при работе в Internet Explorer), и
представившееся вам окно с HTML-кодом могло повергнуть вас в
трепет. Когда вы хотели узнать, почему работает та или иная анима-
ция, вы находили в коде одну лишь ссылку на файл с расширением
.gif, и этот файл представлялся вам каким-то черным ящиком. Когда
вы начинали разбирать, как работают формы, то дело было вообще
плохо - в коде страницы появлялись какие-то команды и объекты,
предварявшиеся строкой <SCRIPT».
Если мы правильно угадали ваше состояние при взгляде на строение
Web-страниц, то открывайте эту книгу и смело беритесь за освоение
всего, что в ней есть. Последовательно изучив представленный в кни-
ге материал, вы сможете сказать, что для вас загадок в конструирова-
нии Web-страниц уже нет. Вы сами сможете создавать Web-страницы
и сайты, подобные тем, что видите в Интернете, и даже в чем-то их
превзойдете.
К настоящему времени существует множество технологий создания
Web-страниц, без которых не может обойтись Web-мастер. Но осно-
вой при разработке документов Web является, конечно, язык размет-
ки HTML, о котором и пойдет речь в настоящей части книги. Мы
будем рассматривать HTML 4.0, который на сегодня является наибо-
лее рекомендуемой версией HTML, а также остановимся на расши-
рении языка в версии 4.01.
ГЛАВА 1
Введение в HTML
Основой Всемирной «паутины» World Wide Web является язык гипертекстовой разметки
HTML. Создатель этого языка Тим Бернерс-Ли, разрабатывая его для нужд одного круп-
ного научного центра, даже не предполагал, что его детище вырастет до общемирового
масштаба и будет определять развитие компьютерных технологий на многие десятилетия.
Общие сведения о HTML
Приступая к изучению HTML, нужно знать, что это не вполне обычный язык. Он не от-
носится к языкам программирования высокого уровня, таким как C++, Java или Visual
Basic. HTML - это, прежде всего, язык разметки, и код, написанный на нем, исполняется
на компьютере клиента в приложении Web-браузера. С этим связана его относительная
простота и легкость освоения.
Зачем нужен язык разметки?
Когда вы создаете обычный документ в программе текстового процессора, вы легко
можете выполнять форматирование документа, например, для символов задать кур-
сивный или полужирный шрифт, абзацу присвоить стиль заголовка или обычного
текста и т.д. То, что вы делаете с документом на экране монитора, в том же виде пе-
реносится на бумагу при распечатке на принтере. Это возможно благодаря графиче-
скому интерфейсу пользователя (GUI), который поддерживает технологию точного ото-
бражения WYSIWIG (сокращение от «What You See Is What You Get» - что видите, то и
получаете). Выбираете ли вы опцию из выпадающих меню или даете клавишную команду,
вы сразу видите на экране результат ваших усилий. Однако конкретные команды, которые
реализуют отображение документа на экране или на бумаге, будут скрыты от вас.
В случае Web-страниц пользователь имеет дело не с бумажными, а с электронными до-
кументами, полученными через Internet. Принцип отображения документа средствами
форматирования родительского приложения здесь неприемлем. Слишком много прило-
жений или всевозможных конверторов пользователю пришлось бы иметь на своем ком-
пьютере, чтобы эффективно работать с множеством возможных форматов документов.
Идея решения проблемы обмена документами между различными компьютерами и при-
ложениями через Internet основана на языке разметки гипертекста HTML (HyperText
Markup Language). Этот язык был создан более 15 лет назад как стандарт оформления
документов и был принят подавляющим большинством пользователей Internet, а глав-
ное, - всеми производителями программного обеспечения и оборудования для Web. До-
кументы, размеченные согласно HTML, могут читаться на любом компьютере, на кото-
ром установлена всего лишь одна программа просмотра таких документов - браузер.
Благодаря языку разметки HTML, клиент Web может на экране своего компьютера про-
смотреть документ в том виде, в каком его задумал разработчик: с определенными раз-
мерами шрифта и разбивкой на абзацы, с определенным расположением рисунков, ги-
перссылок и проч. Текстовый документ, составленный на HTML, имеет размер в байтах
Введение в HTML
9
в несколько раз меньший, чем размер аналогичного документа, подготовленного в тек-
стовом процессоре (например, Word).
Разметка документа - это описание различных фрагментов
документа и их взаимного расположения. Выполняется разметка
с помощью символов ASCII, а точнее арабских цифр, символов
; латинского алфавита и некоторых знаков препинания. Из этих
символов набираются команды языка HTML - теги, или, иначе
говоря, дескрипторы.
В языке HTML имеется множество тегов, среди которых - теги создания заголовка до-
кумента, задания параметров шрифта, вычерчивания линий, вставки гиперссылок, встав-
ки графических элементов и т.д. В итоге Web-страница, кроме текста и ссылок, может
содержать графику, звуки, видео, то есть иметь такой вид, который вы и видите на экра-
не компьютера.
Получить представление о том, как выглядит код HTML, вы сможете, если откроете
в браузере любую Web-страницу и перейдете к представлению HTML (см. начало гла-
вы). При этом вы можете видеть, как создана та или иная страница - это вам пригодится
при разработке своих документов. Однако не стоит увлекаться только этой стороной
обучения HTML, чтобы создаваемые вами документы не были ухудшенным вариантом
чужих страниц.
Об истории HTML и World Wide Web
История языков разметки уходит в 60-е годы 20 в., когда сотрудники компании IBM взялись
за решение задач переноса документов между различными платформами и операционными
системами. Результатом их усилий стал язык GML (General Markup Language - общий язык
разметки), который предназначался для использования на ЭВМ семейства IBM. Язык GML
в дальнейшем был расширен, а в 80-х годах прошел стандартизацию в ISO (Международная
организация стандартизации). Этот мощный и универсальный язык разметки, названный
SGML (Standard General Markup Language), использовался военным ведомством США
при оформлении технической документации. Однако SGML широкого распространения не
получил в виду своей сложности и дороговизны реализации.
Следующий этап развития языков разметки связан с Европейским центром ядерных ис-
следований (CERN, г. Женева). Приезжавшие в этот центр специалисты со всего мира
применяли собственные методы представления информации. Чтобы облегчить доступ
к тысячам документов, требовалось создание универсальной системы, которая не зави-
села бы от используемой компьютерной платформы и в то же время была бы достаточно
простой. В начале 80-х годов этой проблемой занялся сотрудник CERN, консультант по
программному обеспечению Тим Бернерс-Ли. Для решения этих задач он стал разраба-
тывать язык разметки, с помощью которого документы воспроизводились бы одинаково
на разных компьютерах.
В основу разрабатываемого языка Бернерс-Ли положил язык SGML и приемы рабо-
ты с гипертекстом, с чем и связано название созданного им языка - HTML. Новый
язык использовал основные конструкции SGML для описания документов и гипер-
текстовых ссылок.
10
ГЛАВА 1
Гипертекст - это способ организации текста, графики и других
данных, при котором элементы данных связаны между собой.
Связанными могут быть как элементы одного документа, так и
элементы различных документов. Гипертекстовая структура
лежит в основе World Wide Web.
Вообще, термин гипертекст был придуман задолго до появления Интернета (авторы
этого понятия - Ваневар Буш, Тед Нельсон). Аналогом гипертекста может быть обычная
энциклопедия. Том энциклопедии составлен из небольших статей на определенные те-
мы, а в каждой статье могут содержаться ссылки на другие статьи. Гипертексты, в отли-
чие от печатной энциклопедии-книги, представляют собой электронные документы.
С гипертекстами можно работать только на компьютере, в печатном виде гипертексты
не существуют. Примером гипертекстовой системы может служить известная справоч-
ная система ОС Windows.
Связи (links) в гипертекстовой структуре осуществляются с помощью ссылок. Благодаря
ссылкам, пользователь может из одного документа вызвать другой документ, из него
следующий документ и т.д.
В 1989 году Бернерс-Ли предложил для CERN разработать информационную систему,
напоминающую паутину документов, связанных ссылками. Документы хранятся на сер-
верах, которые размещаются по всему миру и соединены между собой каналами Интер-
нета. Первоначально эта идея отклика не получила, и из-за бюрократических проволочек
работа продвигались медленно. Тогда Бернерс-Ли разработал протокол HTTP - язык, на
котором серверы должны обмениваться гипертекстовыми документами, и написал пер-
вые программы Web-сервера и браузера. Он обратился напрямую к Интернет-
сообществу, и энтузиасты в 1991 году начали создавать первые узлы Web.
В последующие годы система World Wide Web стремительно развивалась, она стала са-
мой популярной службой в Интернете. В настоящее время она удовлетворяет потребно-
сти в информации самых широких слоев пользователей, включая в свой состав миллио-
ны узлов Web. На больших узлах размещаются тысячи и сотни тысяч документов, при-
чем общее количество документов в WWW с каждой секундой увеличивается, посколь-
ку над их созданием трудится огромная армия специалистов и любителей в разных угол-
ках земного шара.
World Wide Web. или сокращенно Web - это глобальная система
распространения гипертекстовой информации, использующая в
качестве каналов транспортировки Интернет. в У К
Фактически World Wide Web - это гипертекстовое пространство документов, которое не
связано с географией размещения самих Web-узлов. Поэтому в этом пространстве физи-
ческое расстояние между узлами не имеет смысла. Вы можете на экране монитора оди-
наково просматривать Web-страницы, которые хранятся как на диске компьютера в со-
седней комнате, так и на сервере, расположенном в другой стране.
Введение в HTML 11
World Wide Web функционирует по определенным стандартам, которые разрабатывают-
ся и внедряются объединением исследовательских и промышленных организаций - кон-
сорциумом W3C (сокращение от World Wide Web Consortium). Ознакомиться с деятель-
ностью W3C можно на сайте: www.w3.org.
От HTML до HTML 4.01
Итак, разработанный в 1989 году Бернерсом-Ли язык разметки HTML был основан на
языке SGML. Средства разметки абзацев, заголовков, списков и прочие элементы,
имеющиеся в HTML, были предусмотрены и в SGML. Заслуга изобретателя HTML со-
стоит в том, что он ввел в язык разметки то, чего не было SGML - это гипертекстовые
ссылки.
В 1992 году Д. Раггетт из компании Hewlett-Packard Labs составил более расширенную
версию HTML, которая получила обозначение HTML+.HTML 2. Начиная с 1992 года,
многие разработчики браузеров начали расширять HTML за счет добавления собствен-
ных элементов. Это привело к тому, что документы, разработанные с учетом возможно-
стей конкретного браузера, не отображались другими браузерами. Поэтому группа под
руководством Дэна Коннолли в 1994 году проанализировала наиболее широко исполь-
зуемые элементы HTML и составила новую версию HTML, которая получила обозначе-
ние HTML 2. Эта версия была утверждена международной комиссией по стандартам
в Internet (IETF).
В 1995 году был опубликован проект версии HTML 3.0, а в январе 1997 года версия
HTML 3.2. рекомендована в качестве стандарта.
Современной версией является HTML 4.0, которая была опубликована в декабре 1997 г.
В ней поддерживаются листы стилей, сценарии, фреймы, внедренные объекты, улучше-
ны средства работы с таблицами и формами. Ко времени написания данной книги из-
вестна версия HTML 4.01, принятая в конце 1999 г.
Web-документы, Web-сайты, Web-серверы
К основным достоинствам гипертекстов относятся, во-первых, возможность разместить
на небольшом пространстве (в пределах нескольких экранов) огромное количество ин-
формации и, во-вторых, интуитивно-понятный способ поиска информации с помощью
ссылок.
; Гипертекстовые документы в WWW представляются в виде
< Web-страниц (или, другими словами, Web-документов). Web-
>< страница обычно содержит разнородную информацию: текст,
графику, звуки и даже видео.
Ссылки на Web-страницах отображаются выделенными словами или графическими изо-
бражениями. Если навести на ссылку указатель мыши, то он обычно превращается с изо-
бражение руки с поднятым указательным пальцем. Любая ссылка - это вход в другой
документ: щелчок мышью по ссылке открывает другой документ, на который указывает
ссылка. Web-страницы обычно организуются в так называемые сайты.
12
ГЛАВА 1
Web-сайт (или Web-узел) - это совокупность Web-страниц (не-
скольких десятков, сотен или даже тысяч), объединенных одной
общей темой и помещенных, как правило, на одном узловом ком-
пьютере.
Web-сайт принадлежит конкретному липу или организации, которая его поддерживает
(или финансирует его поддержку). Адреса Web-страниц, составляющих сайт, имеют об-
щий префикс - это URL данного Web-узла (см. раздел «Адресация документов в Web»
данной главы).
Гипертекстовые документы в World Wide Web размещаются на Web-серверах. Пользо-
ватель, получающий с помощью браузера доступ к ресурсам Интернета, называется кли-
ентом (слово «клиент» относится, строго говоря, к программе Web-браузера, которая
формирует запросы компьютера). Когда компьютер клиента стремится получить тот или
иной файл из Web, его запрос отправляется на Web-сервер, который отвечает за данный
файл. Сервер отыскивает затребованный файл в своих хранилищах и отправляет его ко-
пию на компьютер клиента.
Web-cepeep - это компьютер, подключенный к Интернету, на
котором выполняется специальная программа, обеспечивающая
обработку запросов клиентов и выдающая клиентам различные
страницы с информацией.
Взаимодействие клиента с Web-сервером происходит согласно протоколу HTTP
(HyperText Transport Protocol - протокол передачи гипертекста). Этот протокол опреде-
ляет язык, на котором клиентская программа «разговаривает» с сервером, а также фор-
мат ответов сервера клиенту. Пример работы HTTP пользователь видит всякий раз, ко-
гда он щелкает мышью по какой-либо ссылке.
Браузеры
Чтобы отобразить на экране компьютера HTML-документы в том виде, как они задумы-
вались разработчиками, необходимо иметь специальную программу, называемую брау-
зером (по-русски - «обозревателем»).
Браузер - это программа просмотра информационных ресурсов
WWW на компьютере, подключенном к Интернету. Современные
программы браузеров работают в соответствии со специфика-
цией HTML, содержат интерпретаторы языков сценариев
(VBScript, JavaScript), поддерживают динамическую объектную
) модель (Dynamic HTML) и т.д.
Первые программы браузеров (типа Lynx) предназначались только для просмотра тек-
ста. Однако со временем от них потребовалось обрабатывать не только текст, но и гра-
Введение в HTML
13
фику, звук, видео. Задача просмотра как текстовых, так и графических данных, впервые
была решена в браузере Mosaic (бесплатно распространяемый Mosaic существует и
в настоящее время в версиях для Windows, UNIX и Macintosh).
Впоследствии создатель интерфейса Mosaic, Марк Андриссен, основал компанию
Netscape Communications, разработавшую программу популярного браузера Netscape
Navigator. В первой половине 90-х годов Netscape стал безусловным лидером на рынке
браузеров (вы можете «скачать» последнюю версию Netscape по адресу:
http://www.netscape.com).
Годом позже после Netscape (в 1993 году) была выпущена первая версия браузера
Internet Explorer фирмы Microsoft. Возможности нового браузера были сравнимы с
возможностями Netscape. Следующая версия Internet Explorer 4.0 уже превзошла
Netscape, особенно в части, касающейся динамического HTML. В Internet Explorer 4.0
появилась также полноценная поддержка языка сценариев JavaScript, который стал в
этом браузере языком программирования Web-документов наряду с VBScript.
Программа браузера органично вошла в состав операционной системы Windows 98.
Последующие версии Internet Explorer входят в виде интегрированных модулей в ОС
Windows 98/МЕ/2000/ХР. Общую информацию об Internet Explorer вы сможете получить
на сайте фирмы Microsoft по адресу: www.microsoft.com/ie.
Наиболее популярным браузером в настоящее время является Internet Explorer 6. Эта
версия вместе с предыдущей IE 5 набирают свыше 70% всех пользователей Интерне-
та. Затем по популярности следует Netscape, а оставшаяся часть пользователей отда-
ет свои предпочтения (почти поровну) браузерам Opera и Mozilla. Последние два
браузера постоянно увеличивают число своих поклонников: Opera - благодаря своей
компактности и быстродействию, a Mozilla - благодаря тому, что, в отличие от IE,
работает как на платформе Windows, так и Linux. В данном самоучителе, охваты-
вающем вопросы HTML и Dynamic HTML, будем ориентироваться на браузер Internet
Explorer, поскольку существующие версии Netscape не обладают полноценной под-
держкой динамического HTML.
Работа браузера начинается с установления связи с сервером и отправки на сервер адре-
са запрашиваемой Web-страницы. Отправка запроса на сервер и последующая загрузка
Web-страницы являются основными задачами браузера. Обработка браузером HTML-
документов заключается, во-первых, в форматировании текста на основании специаль-
ных служебных символов (тегов), а, во-вторых, в загрузке дополнительных файлов. До-
полнительно загружаемые файлы обеспечивают отображение картинок, воспроизведе-
ние звукового сопровождения или видеоклипов и т.д.
/ Если вы разработали новую Web-страницу, желательно, чтобы
'; перед публикацией в WWW она была протестирована на несколь- л 4
ких наиболее популярных браузерах. Связано это с тем, что раз-
личные версии браузеров и, тем более, браузеры разных компа- jVjHS j
'< ний могут по-разному отображать вашу страницу. SS -
14
ГЛАВА 1
Адресация документов в Web
Все файлы в Интернете, в том числе и Web-страницы, идентифицируются с помощью
специальных обозначений, называемых URL. Именно с помощью URL вы сообщаете
программе браузера, какой файл вам нужен.
?< URL (Uniform Resource Locator - унифицированный локатор ресур- /
са) - это уникальный адрес файла в Интернете, хранящегося на gsssgb. Л
хост-компьютере, подключенном к Интернету. С помощью URL, v
независимо от протокола доступа, может быть найдена любая uyjkJ ><
информация в Интернете.
Программа браузера использует URL для того, чтобы обратиться к нужному хост-
компьютеру и извлечь файл из каталога, в котором он размещен. Этот файл затем будет
отображен на мониторе клиентского компьютера.
В записи URL используется система адресации хостов, принятая в DNS. Аббревиатура
DNS обозначает буквенную систему доменных имен - Domain Name System. Согласно
этой системе имя каждого хоста состоит из последовательности слов, разделенных точ-
ками, и легко запоминается пользователями. URL для файлов на Web- и FTP-серверах
имеет следующий формат записи:
protocol://host[:port]/path/filename
где protocol - протокол доступа к ресурсу (например, http или ftp), от последую-
щей части URL он обязательно отделяется двоеточием и двойной косой чертой; host -
доменное имя хоста согласно DNS; [:port] - номер порта Web-сервера (квадратные
скобки указывают на необязательность этого элемента адреса); path - путь к файлу;
filename - спецификация файла.
В подавляющем большинстве URL номер порта WEB-сервера опускается; при этом
по умолчанию используется порт 80. Параметр [:port] необходимо указывать только
в тех случаях, когда Web-сервер работает не на стандартном порту.
В качестве примера приведем URL Web-страницы сайта одного из российских уни-
верситетов:
http://www.nsu.ru/official/index.xml
Он состоит из следующих компонентов:
http - протокол доступа;
www - тип ресурса (данный элемент в URL не обязателен);
nsu - домен второго уровня;
ru - домен верхнего уровня;
official = имя каталога;
index. xml - имя файла.
Введение в HTML
15
Префикс http указывает на документы, которые извлекаются с Web-серверов с помощью
протокола HTTP. Если же URL начинается префиксом ftp, то это означает запрос на пе-
редачу файла, к которому обеспечивает доступ протокол FTP:
ftp://sim.df.ru/drivers/Intel/lOOadisk.exe
где sim.df.ru обозначает доменное имя FTP-сервера; drivers/Intel - каталог;
lOOadisk. exe - запрашиваемый файл.
Принципы создания Web-страниц
Web-страница, загружаемая в браузер, представляет собой HTML-файл. Это текстовый
ASCII-файл с расширением .htm, .html или .htmll. Файлы .htm создаются для обработки
в операционной системе DOS (где принято расширения обозначать тремя буквами). Для
работы в Windows 9х/2000 допустимо сохранять HTML-файлы с расширениями .htm
и .html, причем более предпочтительным является .html. Если работа с файлами Web-
документов будет выполняться в ОС Unix, можно использовать расширение .htmll.
Просмотр кода страниц
В данной книге вас, очевидно, будет интересовать не внешний вид Web-страниц, а код
HTML, с помощью которого они записаны. Для просмотра HTML-кода страницы в брау-
зере Internet Exlorer можете выполнить любое из следующих действий:
✓ Щелкните правой кнопкой мыши в окне документа и в появившемся контекстном
меню выберите команду Просмотр в виде HTML.
✓ Выберите команду меню Вид - В виде HTML.
После этого на экране откроется окно приложения Блокнот с HTML-кодом просматри-
ваемой вами страницы.
Если вы работаете в браузере Netscape, то просмотреть HTML-код загруженного докумен-
та вы сможете с помощью команды View - Page source или нажатия клавиш Ctrl+U.
Документ, оформленный в соответствии со стандартом HTML,
называется документом HTML (или HTML-документом). Такой
документ состоит из содержимого и тегов, определяющих
структуру и отображение документа. HTML-документ сохраня-
ется в виде HTML-файла.
Редакторы HTML-файлов
Поскольку документ Web представляет собой текстовый файл, для его редактирования
можно использовать не только Блокнот, но и любой текстовый редактор, например,
из состава MS-DOS, Norton Commander или FAR. Кстати, многие пользователи так и де-
лают, набирая вручную HTML-код в этих простейших редакторах.
16
ГЛАВА 1
В настоящее время существуют также более серьезные программы для подготовки Web-
страниц, которые можно условно разделить на два типа:
✓ Визуальные редакторы HTML, то есть редакторы типа WYSIWIG (например,
Microsoft FrontPage, Macromedia Dreamveawer, Netscape Navigator Gold и др.). При ра-
боте в этих программах пользователь имеет дело с графическими образами элемен-
тов HTML, а не с кодом документа. Кстати, существуют конверторы текстовых до-
кументов, подготовленных в Word и Word Perfect, в формат HTML-файлов (такой
конвертор имеется, например, в самом процессоре Word 97/2000).
✓ Редакторы собственно HTML-текстов, позволяющие автоматизировать набор и
редактирование кода (например, HomeSite, HotDog, Ken Nesbitt Web Editor и многие
другие). Эти программы дают возможность пользователю быстро и легко вставлять в
документ элементы HTML, проверять синтаксис команд, выполнять запуск и отладку
страницы, не покидая окна редактора. Вообще работа в таких редакторах напоминает
работу в интерактивной среде программирования типа Delphi или Visual Basic.
Кроме перечисленных двух категорий, существуют программы, объединяющие в себе
черты текстовых и визуальных HTML-редакторов. К таким программам относится Hot-
Metal разработки компании SoftQuad Software.
Теговая модель
Разметка HTML-документов выполняется с помощью тегов, которые записываются с
соблюдением определенных правил. Теговая модель предполагает разбиение документа
на отдельные фрагменты, которые заключаются в теги или начинаются тегом.
Тег (tag - указатель, метка) - это код, идентифицирующий опреде- , J-—,
ленный элемент документа HTML, например, абзац, заголовок,
ссылку, таблицу и т.д. Теги заключаются в угловые скобки < >.
Теги HTML являются подмножеством тегов языка SGML. Если какие-либо из тегов не
понятны браузеру, они при анализе документа просто игнорируются.
Ваша первая Web-сграница
Чтобы лучше представить, о чем пойдет речь, приведем простой пример HTML-докумецта:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/htm!4/strict.dtd">
<HTML>
<HEAD>
<Т1ТВЕ>Пример Web-документа*:/TITLE>
</HEAD>
<BODY>
<Р>Моя первая Web-страница
</BODY>
</HTML>
Введение в HTML
17
*тот несложный код содержит, тем не менее, основные теги, определяющие структуру
iTML-документа. Для удобства чтения HTML-кода обычно вводят необязательные от-
. тупы слева, которые игнорируются браузером.
Заберите код примера в привычном для вас текстовом редакторе (первые две строки пока
южете не набирать). Сохраните текст в виде файла с расширением .html, после чего за-
-устите браузер и выполните команду Файл - Открыть (в Internet Explorer) или команду
Файл - Открыть файл (в Netscape Communicator). В последующих диалогах выберите
озданный файл, и вы получите отображение вашего документа, показанное на Рис. 1.1.
Как видите, для просмотра данного файла соединение с Интернетом не понадобилось.
Рис. 1.1. Отображение простой Web-страницы в окне браузера
В иллюстрациях данной книги мы будем приводить окно браузера
Internet Explorer с минимальным количеством элементов интер-
фейса, которые в большинстве примеров не существенны. Окно
браузера с отсутствующими панелями инструментов (Рис. 1.1)
получается, если щелкнуть правой кнопкой мыши в области па-
нелей и снять все флажки в появившемся контекстном меню.
Вы создали свою первую страницу, не вникая пока в смысл набранных тегов. Анализом
структуры тегов и собственно HTML-документа займемся в следующих разделах.
Парные и одиночные теги, контейнеры
Все теги начинаются с открывающейся угловой скобки с, за которой следует текст, оп-
ределяющий содержание тега, например, TITLE или BODY. Оканчивается тег закры-
вающейся угловой скобкой >. Содержанием тега может быть просто имя тега либо имя и
набор атрибутов тега (см. раздел «Атрибуты тегов» данной главы).
Большинство тегов являются парными, то есть для каждого начального тега <Имя>
есть конечный тег </Имя>, в котором к имени тега добавляется косая черта
(слэш), например,
<HTML>...</HTML>
<HEAD>...</HEAD>
Здесь многоточие означает, что между начальным и конечным тегами может находиться
текст и (или) другие теги. Парные теги предназначены для описания содержимого
документа: заголовка, абзаца, элементов таблицы и т.д.
18
ГЛАВА 1
Кроме парных, возможны одиночные теги, т.е. теги, в которых имеется только откры-
вающий тег. В соответствии с инструкциями одиночных тегов браузер выполняет опре-
деленные действия. Например, согласно тегу <BR> выполняется разрыв текстовой стро-
ки, а в соответствии с тегом <Р> формируется новый абзац. При наличии тегов <HR>,
<IMG> или <EMBED> производится вставка горизонтальной линии, изображения или
звукового файла соответственно.
Имена всех тегов стандартизированы и удобны для запоминания. Например, имя тега
<BODY> (в переводе «тело») обозначает основную часть документа, а тег <1> (сокраще-
ние от italic - курсив) задает начертание курсивом.
Имена в парных тегах должны быть одинаковыми. Отклонение
от этого правила, например, <FONT> ... </FNT>, будет считать-
ся ошибкой. Однако в некоторых случаях можно опускать закры-
вающие теги.
Пара тегов, состоящая из начального и конечного тегов, называется контейнером. Кон-
тейнеры обозначаются по имени начального тега и записываются в угловых скобках.
Два выражения «пара тегов <TITLE></TITLE>» и «контейнер <Т1ТЬЕ>» обозначают
одно и то же.
Элементы HTML
Документ HTML включает в себя элементы, которые представляют абзацы, заголовки,
гиперссылки, списки, таблицы, рисунки и проч. Вообще весь документ можно рассмат-
ривать состоящим из определенных элементов.
Элемент - это пара тегов и символьные данные (текст или код), заключенные между
ними. То есть элемент состоит из трех компонент: начального тега, содержимого и ко-
нечного тега. В некоторых элементах конечный тег может быть опущен (в случае оди-
ночных тегов).
Элемент называется обычно по имени тега (без угловых скобок). Например, элементами
являются следующие фрагменты страницы, показанной на Рис. 1.1:
✓ <TITLE> Пример Web-документ a </TITLE> - это элемент TITLE, обозна-
чающий название документа;
✓ <Р>Моя первая Web-страница - элемент Р, определяющий абзац.
Некоторые элементы могут не иметь содержимого, например, элемент разрыва строки
BR. В таких элементах отсутствует конечный тег.
Описывая синтаксис элементов HTML, необходимо указать, что они не чувствительны к
регистру символов, то есть браузер одинаково воспринимает теги <TITLE>, <Title>
или <title>. Однако для единообразия обозначений элементов мы будем пользовать-
ся прописными буквами.
Езедение в HTML
19
Следует различать термины «элемент» и «тег». Элемент обя-
зательно включает в себя хотя бы один тег и, возможно, содер-
жимое, в то время как у тега содержимое отсутствует. Напри-
мер, HTML-код <Т1ТЕЕ>Пример №еЬ-документа</Т1ТЬЕ> пред-
ставляет собой элемент title, a <title> - тег.
Полный список элементов, утвержденных спецификацией HTML 4.01, приведен
Приложении А.
Классификация элементов
Все элементы, предусмотренные в HTML, можно условно разбить на несколько категорий:
✓ структурные - это элементы, которые обязательны для документа, соответствующе-
го стандарту HTML (например, элементы HTML, HEAD, BODY и TITLE);
✓ блоковые - элементы, которые предназначены для форматирования целых текстовых
блоков (например, элементы BLOCKQUOTE, DIV, Hl, Н2, НЗ, Н4, Н5, Н6, Р, PRE);
часто блоковые элементы отделяются переводом строки от остального содержания
документа;
✓ текстовые - элементы, которые задают разметку текста (ЕМ, STRONG, DFN, CODE,
SAMP, KBD, VAR, CITE, ABBR, ACRONYM), разметку шрифта (I, В, U, TT, BIG,
SMALL, SUB, SUP);
✓ специальные - элементы пустой строки (BR, HR, NOBR), якорный элемент А, вне-
дренные элементы (EMBED, IMG, BGSOUND, OBJECT, MAP), элементы формы
(INPUT, SELECT, TEXTAREA), элементы таблицы (TABLE) и др.
Вложенные элементы
В документе HTML обязательно присутствуют вложенные элементы, то есть элементы,
включенные в состав других элементов. Так, в примере из раздела «Ваша первая Web-
страница» элемент TITLE вложен в элемент HEAD, а элемент Р - в, элемент BODY.
Элементы HEAD и BODY, в свою очередь, являются вложенными в элемент HTML.
Последовательность, в которой допустимо размещать HTML-теги, то есть правила вло-
жения элементов HTML, зависят от их категории. При составлении кода страницы со-
блюдайте следующие правила:
✓ Структурные элементы могут включать в себя элементы других категорий. Например,
элемент <HTML> является внешним по отношению ко всем остальным элементам;
✓ Блоковые элементы могут включать в себя другие блоковые или текстовые эле-
менты. Так, элемент TABLE, задающий таблицу, может содержать элементы заго-
ловка Н1 и разметки шрифта I, В;
✓ Текстовые элементы также могут быть вложенными, но они не могут включать
блоковые элементы. Например, недопустимо, чтобы элементы верхних индексов
SUP содержали элементы абзаца Р или списков UL;
20
ГЛАВА 1
При составлении HTML-кода нужно следить за правильным написанием имен вло-
женных парных тегов. Для закрытия тегов лучше придерживаться последовательно-
сти: от последнего к первому. Понятно, что подобных проблем не возникает с оди-
ночными тегами.
Элементы должны вкладывать друг в друга таким образом, чтобы каждый внутренний
элемент располагался внутри одного и того же внешнего элемента, например:
<ОЬ><иь>Пример правильного вложения элементов</иь></ОЬ>
Пример неправильной последовательности в записи тегов:
<ОЬ><иь>Пример некорректного вложения элементов</ОЬ></иь>
Пустые элементы
Кроме перечисленных выше разновидностей элементов, в HTML предусмотрены пус-
тые элементы. Такие элементы не включают в себя какие-либо текстовые фрагменты
или другие элементы. Пустой элемент состоит только из одиночного тега, например,
тег <HR> является в то же время элементом горизонтальной линии HR.
Атрибуты тегов
Часто теги, помимо имени, содержат дополнительные элементы, которые называют-
ся атрибутами, например,
<Н1 id="zagl">
Это заголовок, идентифицируемый как элемент "zagl" благодаря наличию атрибута id
</Н1>
Атрибут записывается после имени тега перед закрывающейся скобкой > и состоит,
как правило, из пары «имя атрибута - значение». Однако возможны атрибуты, в ко-
торых значение отсутствует, например,
<TD NOWRAP>
Атрибуты - это компоненты тега, содержащие указания о том,
как браузер должен воспринять и обработать тег. В объектных /2.
моделях, которые будут рассматриваться в частях II и III книги,
атрибуты отвечают свойствам объектов. Mir
В теге может быть несколько атрибутов. Тогда атрибуты отделяются друг от друга про-
белами, символами табуляции или возврата к началу строки. Очередность записи атри-
бутов в теге значения не имеет. Атрибуты записываются только в начальных тегах и
отсутствуют в конечных тегах.
Значение атрибута указывается после имени атрибута через знак равенства (символ =).
Допускается применение пробела до и после знака =, например, записи
Введение в HTML
21
10L0R="blue", COLORS "blue" и COLOR ="blue" будут восприняты браузером
одинаково.
Зсе значения атрибутов по умолчанию должны заключаться в двойные (") или одинар-
лые (') кавычки. В определенных случаях при записи значений можно обходиться и без
кавычек, однако в руководствах W3C рекомендуется кавычки все же ставить.
Имена атрибутов могут набираться как строчными, так и прописными буквами, - брау-
зер будет интерпретировать их одинаковым образом. Однако для атрибутов элементов
HTML мы будем пользоваться прописными буквами, например,
<INPUT TYPE="button" NAME="rest" VALUE="Сведения">
Если имя атрибута не чувствительно к регистру, то при записи значений атрибутов ре-
гистр символов все же нужно учитывать. Особенно это касается пользовательских зна-
чений, например, имен файлов в качестве значений атрибутов. Для значений, преду-
смотренных стандартом HTML, учет регистра не обязателен, например, значение
"button" можно записать как "BUTTON", "Button" и даже buTTon или BUTTON.
Имена атрибутов мы будем записывать строчными буквами, например:
<INPUT type="button" name="rest" value="сведения">
Набор допустимых атрибутов для каждого тега и их имена определены спецификацией
HTML. Например, в состав тега <TITLE> могут входить только два атрибута lang и
dir, а вот тег <TABLE> может дополняться 25 атрибутами.
Имена элементов и атрибутов должны записываться в соот-
ветствии со спецификацией HTML. Если браузер в коде докумен-
та встретит тег, отличающийся по написанию от принятого в
спецификации, он его просто проигнорирует. Например, в атри-
буте lagn переставлены местами последние две буквы, поэто-
му этот атрибут учитываться не будет.
Полный перечень допустимых атрибутов для каждого тега в соответствии со специфи-
кацией HTML 4.01 вы найдете в Приложении Б.
Комментарии
Еще одним элементом теговой структуры HTML являются комментарии. Коммента-
рии - это произвольные фрагменты текста, которые не исполняются браузером. С по-
мощью комментариев вы можете пояснять назначение различных фрагментов кода. Это
бывает полезно, когда вы возвращаетесь к анализу страницы по прошествии какого-то
времени. Комментарии облегчают также труд другим разработчикам, которые вдруг
станут разбирать ваш код.
Комментарии располагаются между группами символов < ! - - и -->, которые обозна-
чают фрагмент неисполняемого кода. Стандартом HTML предусмотрено, что все брау-
зеры игнорируют любой текст, оформленный таким образом. Например, на экране не
будут отображаться следующие элементы:
22
ГЛАВА 1
<!-- Это комментарий -->
или
<!-- Это комментарий,
записанный в двух строках -->
-Л ; -ЛЭ •> < ЛЭ х . к ;; > к - ' г-.'.<<Эк4
> Открывая комментарий, нельзя ставить пробел между парами
л символов <! и - - . В то же время при закрытии комментария
Э пробел между двумя дефисами и скобкой > допустим. В тексте
комментария следует избегать использования двух и более сле-
дующих друг за другом дефисов (- - или - - -).
Основные правила синтаксиса HTML
В заключение рассмотрения синтаксиса HTML перечислим основные правила записи
кода HTML-документов:
✓ каждый тег должен начинаться с открывающейся угловой скобки, а заканчиваться
закрывающейся угловой скобкой;
✓ браузеры игнорируют нестандартные теги и атрибуты, поэтому имена тегов и их
атрибутов должны соответствовать перечню допустимых в HTML имен
(см. Приложения А и Б);
✓ при записи имен тегов можно пользоваться как верхним, так и нижним регистрами,
но нельзя ставить пробелы;
✓ значения атрибутов можно записывать в любом регистре (за исключением пользова-
тельских значений атрибутов, для которых соблюдается соответствие имен с точно-
стью до регистра);
✓ если значение атрибута содержит пробелы, оно обязательно должно быть заключено
в кавычки;
✓ в содержимом документа браузеры игнорируют несколько пробелов, следующих
подряд, и сжимают их до одного пробела;
✓ элемент, включающий в себя начальный тег другого элемента, должен содержать и
конечный тег этого элемента (за исключением одиночных тегов);
✓ допускается включать в HTML-документы комментарии.
Общая структура HTML-доку мента
Просматривая коды Web-страниц, вы можете заметить, что в каждом документе обяза-
тельно присутствуют определенные теги, причем в расположении этих тегов имеется
закономерность. Весь документ HTML можно разбить на три части (см. пример раздела
«Ваша первая Web-страница»):
Введение в HTML 23
✓ Строка, представленная тегом <!DOCTYPE>, которая содержит информацию для
браузера о версии HTML.
/ Заголовочная часть, открываемая тегом <HEAD>. Это декларативная часть, в которой
содержится название документа, а также могут располагаться служебная информация
для серверов, описания сценариев (см. часть II книги) и проч.
/ Тело документа, представленное элементом BODY или элементом FRAMESET.
13 коде документа вы увидите также многочисленные пробелы и разрывы строк. Они не
меют значения для браузера и расставляются разработчиком для удобства чтения.
Информация о версии HTML
браузеру можно сообщить, с применением какой версии HTML подготовлен загружае-
мый документ. Очевидно, что инструкции об этом должны располагаться в самом начале
кода, поскольку браузер последовательно обрабатывает теги HTML-файла.
Информация о версии HTML содержится в теге <!DOCTYPE>, открывающем HTML-
зокумент. Содержимое этого тега на экране не отображается. Тег < ! DOCTYPE> заимст-
зован из набора средств обобщенного языка SGML и определяет тип документа. Этот
гег вынесен за пределы контейнера HTML, поскольку стандарт HTML не предусматрива-
ет отдельных элементов для описания используемой версии HTML. Язык SGML исполь-
зует стандарт DTD (Document Type Definition - определение типа документа), который
задает синтаксис элементов и атрибутов. Существует несколько версий стандарта DTD,
которые отличаются друг от друга набором элементов и синтаксисом.
В теге < ! DOCTYPE> указываются версия HTML и стандарт DTD, либо его версия. На-
пример, тег
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
объявляет, что ваш документ соответствует спецификации DTD HTML 4.0, которая ре-
комендована консорциумом W3C, и для просмотра документа необходим браузер, под-
держивающий эту версию.
Ссылки на более ранние версии HTML задаются, например, тегом
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">,
который расшифровывается следующим образом: документ составлен с применением
средств, соответствующих стандарту DTD HTML 2.0, утвержденному международной
комиссией по стандартам в Internet (IETF).
В рамках одной версии DTD HTML существует несколько модификаций, отличающихся
набором поддерживаемых элементов:
✓ Strict DTD - поддерживает все элементы и атрибуты, кроме устаревших и тех,
которые используются фреймами; Strict DTD применяется по умолчанию;
24
ГЛАВА 1
✓ Transitional DTD - включает все элементы и атрибуты модификации Strict плюс
устаревшие элементы (в основном элементы, отвечающие за визуальное отображение
документа);
✓ Frameset DTD - поддерживает все элементы модификации Transitional, а также
элементы фреймов.
Приведем пример объявления типа документа, в котором использована модификация
Transitional стандарта HTML 4.01 DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transi-
tional/ /EN" >
Последние две буквы в объявлении типа документа указывают на язык DTD. Для доку-
ментов HTML это всегда буквы EN, обозначающие английский язык.
В соответствии с рекомендациями W3C для документов, соответствующих HTML 4.0 и
HTML 4.01, тег < !DOCTYPE> дополняется адресом файла с описанием DTD. Например,
полная форма записи тега типа документа для HTML 4.01 с указанием ссылки на моди-
фикацию Strict DTD имеет вид:
<!DOCTYPE HTML PUBLIC " - // W3C // DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Далее в книге мы будем записывать примеры согласно стандарту Strict DTD, кроме
примеров, относящихся к фреймам. Однако для краткости строку определения типа до-
кумента (версии HTML) будем опускать.
HTML-документ (элемент HTML)
Для обозначения границ HTML-документа используется парный тег <HTML>. Началь-
ный тег <HTML>, не имеющий атрибутов, располагается в самом начале HTML-файла, а
конечный тег </HTML> является последним тегом кода и обозначает окончание всего
документа. Таким образом, элемент HTML является самым «внешним» и не входит в
состав других элементов, то есть с элементом HTML не связан какой-либо объект, ото-
бражаемый в окне браузера.
В состав контейнера HTML входят два структурных элемента: HEAD (элемент заголов-
ка) и BODY (основная часть или тело документа). Таким образом, документ HTML
представляется в виде:
<HTML>
<!-- Здесь располагаются элементы
заголовочной и основной частей документа -->
</HTML>
Введение в HTML
25
Заголовочная часть документа (элемент HEAD)
Заголовочная часть HTML-документа определяется элементом HEAD. Тег <HEAD> не
имеет атрибутов. Элемент HEAD размещается сразу после тега <HTML> и предшествует
основной части Web-страницы:
<HTML>
<HEAD>
<!-- Здесь располагается заголовочная часть документа -->
</HEAD>
</HTML>
Элемент HEAD (как и элемент HTML) не отображается при просмотре Web-страницы, он
предоставляет браузеру общую информацию о HTML-файле. Между тегами <HEAD> и
</HEAD> могут размещаться элементы BASE, LINK, МЕТА, SCRIPT, STYLE И TITLE.
Эти вложенные элементы мы будем рассматривать в следующих разделах и главах.
Название документа (элемент TITLE)
В заголовочную часть документа входит обязательный элемент, представленный контейне-
ром <TITLE>. Все, что находится между парой тегов <TITLE> и </TlTLE> интерпрети-
руется браузером как название Web-страницы (не нужно путать с именем HTML-файла).
Содержимое контейнера <TITLE> отображается в заголовке окна браузера.
Если в документе имеются гиперссылки, то название документа, на который указывает
ссылка, будет появляться во всплывающей подсказке при наведении на ссылку указателя
мыши.
Элемент TITLE по отношению к элементу HEAD является дочерним, то есть вкладыва-
ется в контейнер <HEAD>:
<HTML>
<HEAD>
<TITLE>Название МеЪ-страницы</Т1ТЕЕ>
</HEAD>
</HTML>
Название Web-страницы - это важный элемент, который имеет
значение при предоставлении информации для поисковых систем
и может привлечь внимание потенциальных посетителей. Нужно
выбирать краткие содержательные названия. Например, вместо
названия "Обзор" лучше написать "Обзор характеристик дизель-
ных двигателей" или "Обзор цен на курортах Гоеции". Оптималь-
ный размер названия -от 2 до 6 слов.
26
ГЛАВА 1
Тело документа (элемент BODY)
Элемент BODY является следующим компонентом Web-страницы. Парные теги <BODY>
и </BODY> указывают на начало и конец тела документа. Вся содержательная часть
документа располагается в элементе BODY. Содержимое этого элемента отобразится на
экране согласно заданной вами HTML-разметке.
Начальный и конечный теги элемента BODY являются необязательными в структуре HTML-
документа. Однако контейнер <BODY> необходим, когда требуется задать свойства всей
страницы. Присутствие в HTML-документе элемента BODY является формальным призна-
ком того, что данный документ имеет обычную структуру. Если в документе используются
фреймы, то вместо BODY применяется элемент FRAMESET (см. главу 6 «Фреймы»).
Тег <BODY> размещается непосредственно после элемента HEAD, а конечный тег
< / BODY> является предпоследним тегом документа:
<HTML>
<HEAD>
<Т1ТЬЕ>Название ИеЬ-страницы</Т1ТЬЕ>
</HEAD>
<BODY>
<!-- Содержательная часть документа -->
</BODY>
</HTML>
Начальный тег <BODY> может дополняться несколькими атрибутами, которые опреде-
ляют внешний вид документа в целом. Среди многочисленных атрибутов тега <BODY>
остановимся пока на атрибутах размеров свободного поля. Так, размер верхнего поля
страницы определяется атрибутом topmargin, значение которого указывается в пиксе-
лах. Например, тег
<BODY topmargin=12>
оставляет свободным от текста верхнее поле размером 12 пикселов. По умолчанию раз-
мер верхнего поля равен 8 пикселам.
Размеры других полей задаются аналогичным образом атрибутами
bottommargin="Размер нижнего поля", leftmargin="Размер левого
поля" и rightmargin=" Размер правого поля". Например, тег
<BODY leftmargin=O rightmargin=O>
назначает расположение содержимого страницы непосредственно возле обрамления ок-
на с правой и левой стороны.
Другие допустимые атрибуты тега <BODY> - это, например, атрибут цвета шрифта
text, атрибут цвета фона bgcolor всей страницы, атрибут фонового изображения
background и др.
ГЛАВА 2.
Оформление текста
Текст - это основной вид информации, представленный на большинстве Web-страниц.
Действительно, пользователи приходят на ваш сайт прежде всего за информацией, для
которой наиболее привычное представление - текст.
Формирование абзацев и строк
Основные области Web-страниц заняты, как правило, текстом. Текстовые блоки состоят
из отдельных строк, объединенных в абзацы. Абзацы начинаются с новой строки, а
группы абзацев отделяются друг от друга заголовками.
Разбиение текста на абзацы (элементы Р)
При оформлении обычных текстовых документов законченные мысли представляются
в виде абзацев. Этого правила придерживаются и в процессе создания документов
для Web. Более того, в случае Web-страниц четкое деление текста на абзацы является
обязательным, поскольку тексты должны быть лаконичными и допускать возможность
беглого чтения.
Для создания абзаца в языке HTML предусмотрено несколько возможностей. Простейшая из
них - это использование тегов <Р> и < / Р>, между которыми помещается текст абзаца.
Код страницы, содержащей абзацы, может иметь вид*:
<HTML>
<HEAD>
<Т1ТЬЕ>Разбиение на абзацы</Т1ТЬЕ>
</HEAD>
<BODY>
<Р>Опять ударили в камень звенящие подковы,
затихли в отдалении&ЬеШр;</Р>
<Р>Ходжа Насреддин поднялся; его первые слова
были обращены к ишаку:</Р>
<P>– Теперь я понимаю, зачем ты свернул утром
с большой дороги, о презренный сын гнусных деяний своего от-
ца! Мой халат показался тебе слишком пыльным?</Р>
</BODY>
</HTML>
Здесь использованы специальные символы: &hellip (многоточие) и &ndash (тире).
Полный список подобных символов, которые можно использовать для браузера Internet
* На этой странице приведен отрывок из книги Л. Соловьева «Повесть о Ходже Насреддине».
28
ГЛАВА 2
Explorer, приведен в Приложении Г (в Netscape специальные символы не поддержива-
ются в полном объеме).
Внешний вид страницы показан на Рис. 2.1. Обратите внимание, что каждый новый аб-
зац отделяется от предыдущего текста пустой строкой (двойным интервалом).
Рис. 2.1. Пример разбиения текста на абзацы
Конечный тег </Р> в элементе абзаца не обязателен. Однако, спецификация HTML ре-
комендует конечный тег не пропускать, так как некоторые браузеры могут просто про-
игнорировать одиночный тег <Р>.
? Отметим, что вставка подряд нескольких дескрипторов <Р> не
% приводит к появлению пустой строки, так как согласно специфи-
: 5 кации HTML браузеры игнорируют пустые элементы Р.
Разрывы строк (теги <BR>, <NOBR>)
Если в тексте нужно выполнить перевод строки (разрыв строки), используйте элемент <BR>.
Тег <BR> - это один из немногих одиночных тегов, относящийся по классификации HTML к
элементам пробелов. Он представляет собой пустой элемент, заставляющий браузер перене-
сти текст на новую строку независимо от состояния текущей строки.
Теги <BR> вам могут понадобиться при публикации текстов, содержащих отдельные строки,
например, почтовых адресов или стихов. Как пример? приведем следующий код*:
* Здесь набран один из стихов книги Л. Кэрролла «Сквозь зеркало и что там увидела Алиса, или
Алиса в Зазеркалье».
Оформление текста
29
<HTML>
<HEAD>
<Т1ТЬЕ>Разрывы строк</Т1ТЬЕ>
</HEAD>
<BODY>
Сияло солнце в небесах,<BR>
Светило во всю мочь,<BR>
Была светла морская гладь,<BR>
Как зеркало точь-в-точь,<BR>
Что очень странно – ведь тогда<ВБ>
Была глухая ночь.
<BR><BR>
Л. Кэрролл<ВБ>
</BODY>
</HTML>
В результате введения разрывов строк у вас получится текст, показанный на Рис. 2.2.
Размер пустого поля между строками, которое будет отображено благодаря тегу <BR>,
зависит от установок браузера.
Рис. 2.2. Пример использования разрывов строк
Два следующих подряд тега <BR> (в данном примере перед фамилией автора) приводят к
отображению одной пустой строки между текстовыми строками. Точно такой же пустой
строкой отделяется от остального текста рассмотренный ранее элемент абзаца <Р>.
Разрывы строк, заданные тегами <BR>, будут появляться при любой ширине окна брау-
зера. Если вам нужно, наоборот, сделать так, чтобы браузер не образовывал новой стро-
ки ни при каком размере окна, воспользуйтесь элементом <NOBR>, который блокирует
разрыв строки.
30
ГЛАВА 2
Выравнивание абзацев (атрибут align)
Абзацы, которые задаются тегами <Р> и <BR> по умолчанию выравниваются по левому
краю (см. Рис. 2.1, Рис. 2.2). С помощью атрибута align можно задать выравнивание по
правому краю страницы (значение right) и по центру (значение center). Значение
align= "lef t" определяет выравнивание по левому краю.
Приведем пример оформления текста с различными способами выравнивания:
<HTML>
<HEAD>
<Т1ТЬЕ>Разбиение на абзацы</Т1ТЬЕ>
</HEAD>
<BQDY>
<Р align="right">Ричард Бах</Р>
<Р align="center">Единственная</P>
<P align="right">Мы прошли долгий путь, правда? </Р>
<Р>Впервые мы встретились двадцать пять лет тому
назад. Тогда я был летчиком, очарованным полетом, и пытался
найти смысл жизни в показаниях приборов. Двадцать лет назад
наше путешествие привело нас в новый необычный мир, распах-
нутый для нас крыльями Чайки.</Р>
</BODY>
</HTML>
Здесь всюду для элементов абзацев Р расставлены как открывающие, так и закрывающие
теги. Если ориентироваться на популярные коммерческие браузеры пользователей, то
теги </Р> можно опустить. Внешний вид документа показан на Рис. 2.3.
Заметим, что эта страница выглядела бы значительно лучше, если бы был выделен
заголовок, использованы различные начертания шрифтов или другие средства фор-
матирования, с которыми вы познакомитесь чуть позже.
Рис. 2.3. Пример различного выравнивания абзацев
Оформление текста 31
Разделы (элементы DIV)
Для структуризации текста в HTML-документах, помимо абзацев, используются разде-
лы. Они задаются тегами <DIV> и </DIV>. Элементы DIV относятся к группе блоковых
элементов, характерной чертой которых является наличие перед ними пустой строки.
Разделы DIV удобны тем, что они позволяют выровнять любой фрагмент текста, задать
его размеры и расположить в нужном месте страницы. К разделам можно применять
любые атрибуты стиля и обращаться к ним как к объектам листов стилей (см. главу 3
«Листы стилей»). Большое значение разделы имеют при разработке динамической моде-
ли документа (см. главу 14 «Динамические стили и анимация»).
Начальный тег <DIV> может дополняться атрибутами: align, class, datafld,
datasrc, dir, href, id, lang, language, title, style и др. Эти атрибуты будут
рассматриваться в последующих разделах книги. Пока же остановимся только на атри-
буте выравнивания align. Атрибут align применяется к разделам, так же как к абза-
цам (см. предыдущий раздел), например, строка
<DIV align="center">Единственная</В1У>
задает центрирование содержимого контейнера <DIV>.
Заголовки (элементы Нх)
Зайдя на Web-страницу, посетитель прежде всего обращает внимание на заголовки. За-
головки позволяют разделить Wcb-страницу на логически законченные блоки и помога-
ют посетителю сориентироваться в содержимом документа. Именно по заголовкам посе-
титель получает представление о содержании основного текста. Поэтому заголовки
должны нести максимальную смысловую нагрузку.
Заголовки задаются парными тегами <Нх> (х=1, 2,..б), причем конечные теги </Нх>
являются обязательными. В HTML определено шесть уровней заголовков. Все уровни
пронумерованы от Н1 до Нб. Самый крупный заголовок - первого уровня (Н1 ),а шес-
того уровня (Нб),наоборот - самый мелкий. Размеры шрифта этих заголовков соотно-
сятся как 2 : 1,5 : 1,17 : 1,33 : 0,83 : 0,67.
Все заголовки обычно отображаются браузерами более крупным шрифтом. Кроме того,
в Internet Explorer и Netscape заголовки выделяются полужирным шрифтом. Заголовки
как блоковые элементы отделяются от остального текста пустыми строками.
Приведем пример страницы, содержащей заголовки всех шести уровней:
<HTML>
<HEAD>
<Т1ТЬЕ>Примеры заголовков</Т1ТЬЕ>
</HEAD>
<BODY>
<Н1>Заголовок, представленный элементом Н1</Н1>
<Н2>Заголовок, представленный элементом Н2</Н2>
<НЗ>Заголовок, представленный элементом Н3</Н3>
32
ГЛАВА 2
<Н4>Заголовок, представленный элементом Н4</Н4>
<Н5>Заголовок, представленный элементом Н5</Н5>
<Нб>Заголовок, представленный элементом Нб</Нб>
</BODY>
</HTML>
Внешний вид страницы показан на Рис. 2.4. Обратите внимание, что заголовки располо-
жены в последовательности от верхнего уровня к нижнему. К примеру, после заголовка
Н1 следует Н2, а не НЗ или Н5. Пропуск заголовка какого-либо уровня нежелателен,
поскольку пользователь может начать искать заголовок отсутствующего уровня и
соответствующий фрагмент текста.
Разнообразить оформление Web-страниц можно с помощью их выравнивания. Для этого
применяется атрибут align в составе любого из тегов <Нх>. Возможные значения это-
го атрибута: left, right и center (см. раздел «Выравнивание абзацев (атрибут
align)»). По умолчанию заголовки размещаются по левому краю страницы. (Рис. 2.4).
Рис. 2.4. Отображение заголовков различных уровней
Центрирование (элемент CENTER)
Часто при создании Web-страниц применяют выравнивание текстовых блоков по центру
страницы. Центрирование возможно как с помощью атрибута align=" center":
<DIV align="center">Текст по центру страницы </DIV>
так и с применением парного тега <CENTER>, например:
<CENTER>Размещение текста по центру</СЕ№ГЕР>
Оформление текста
33
Содержимое контейнера <CENTER> при отображении на экране размещается по центру
страницы. Если горизонтальная полоса прокрутки отсутствует, то элемент CENTER бу-
дет расположен посредине окна браузера, независимо от размеров самого окна.
В спецификации HTML 4.01 элемент CENTER отмечен как устаревший и вместо него
рекомендуется применять блок DIV и листы стилей (см. главу 3 «Листы стилей»).
Горизонтальные линии в документе (элемент HR)
Различные части большого документа можно визуально отделить одну от другой с по-
мощью горизонтальных линий. Для создания таких линий в HTML предусмотрен специ-
альный элемент HR (сокращение от Horizontal Ruler).
Пустой элемент HR отображается браузером в виде стандартной линии. По умолчанию
стандартная линия занимает всю ширину окна браузера, а ее толщина составляет
2 пиксела. Верхняя часть такой линии несколько темнее, чем ее нижняя часть. Поэтому
в этом случае говорят о стандартной линии с тенью.
Для создания горизонтальных линий, отличающихся от стандартной, применяются ат-
рибуты тега <HR>. Этими атрибутами изменяются свойства стандартной линии. Напри-
мер, можно убрать тень с помощью атрибута NOSHADE:
<HR NOSHADE>
Другие атрибуты позволяют управлять шириной, толщиной, цветом линии, а также спо-
собом ее выравнивания. Рассмотрим подробнее каждое из свойств линии.
✓ Выравнивание линии назначается атрибутом align (как и в случае выравнивания
абзаца). Этот атрибут, обычно применяемый в паре с атрибутом задания ширины ли-
нии, принимает значения: center (для центрирования линии), left (выравнива-
ние линии по левому краю страницы) или right (выравнивание линии по правому
краю страницы). По умолчанию горизонтальные линии отображаются по центру
страницы.
✓ Ширина линии формируется атрибутом widht, который указывает значение шири-
ны в пикселах или процентах. Например, тег <HR widht=25> определяет горизон-
тальную линию шириной 25 пикселов. Если значение атрибута widht задается
в процентах (ставится символ %), то ширина линии вычисляется относительно шири-
ны окна. Например, запись <HR widht="25%"> приводит к отображению гори-
зонтальной линии шириной в одну четвертую окна браузера.
Задание длины линии в относительных единицах (в процентах)
более предпочтительно, поскольку в этом случае линии будут
одинаково отображаться на пользовательских мониторах разно-
го размера.
34
ГЛАВА 2
✓ Толщина линии задается атрибутом SIZE. Значение этого атрибута назначается в
пикселах в диапазоне от 1 до 175. Присвоение больших значений атрибуту SIZE не
приводит к увеличению фактической толщины линии в обоих браузерах (Internet
Explorer и Netscape). Если значение SIZE не указано, по умолчанию отображается
линия толщиной 2 пиксела.
✓ Цвет линии. Для задания цвета линии в наборе допустимых атрибутов тега горизон-
тальной линии имеется атрибут color. Запись значения этого атрибута подчиняет-
ся определенным правилам, которые изложены в разделе «Управление цветом» дан-
ной главы. Например, красная линия задается тегом:
<HR color="red">
Приведем пример документа (Рис. 2.5), содержащего линии с различными значениями
перечисленных атрибутов:
<HTML>
<HEAD>
<Т1ТЬЕ>Свойства горизонтальных линий</Т1ТЬЕ>
</HEAD>
<BODY>
<Н1>Примеры горизонтальных линий</Н1>
Линия шириной 40%:
<HR WIDTH="40%">
Линия шириной 50%, выровненная по левому краю:
<HR WIDTH="50%" align="left">
Линия шириной 75%, выровненная по правому краю:
<HR WIDTH="75%" align="right">
Линия шириной 90% толщиной 5 пикселов:
<HR WIDTH="90%" SIZE=5 NOSHADE>
Оконтуренная линия шириной 90% толщиной 10 пикселов:
<HR WIDTHS"90%" SIZE=10>
Голубая линия толщиной 10 пикселов без тени:
<HR SIZE=10 COLOR="cyan" NOSHADE>
Линия шириной 80% и максимальной толщины:
<HR WIDTH="80%" SIZE=175 NOSHADE>
</BODY>
</HTML>
Оформление текста
35
Рис. 2.5. Примеры отображения различных горизонтальных линий
Обратите внимание, что толстые линии заливаются цветом, если для них указан атрибут
NOSHADE. В противном случае линия обозначается на экране только своим контуром.
Согласно спецификации HTML 4.01 атрибуты align, width, size
: и no shade в составе тега <hr> считаются устаревшими. Вме-
сто них рекомендуется пользоваться листами стилей. Напри-
мер, голубая линия в приведенном выше примере будет зада-
ваться в виде: <HR NOSHADE style="height: Юрх;
•л col or:cyan">
Простейшие приемы форматирования текста
Для работы с текстом в HTML предусмотрены простейшие приемы форматирования, на
которых мы сейчас остановимся.
Предварительное форматирование текста (элемент PRE)
Наиболее простой способ форматирования текста - это его вообще не форматировать,
точнее, сохранить признаки формата, которые в нем присутствовали ранее. Для этого
36
ГЛАВА 2
используется парный тег предварительного форматирования <PRE>. Этот элемент при-
меняется к тексту, для которого важно сохранить все пробелы, табуляции или пере-
воды строк. Например, если вы набрали стихотворение в каком-либо текстовом ре-
дакторе и хотите его перенести на Web-страницу, то проще всего это сделать
с помощью элемента PRE.
Содержимое элемента PRE по умолчанию отображается в окне браузера моноширинным
шрифтом с одинаковой шириной любого символа. Обычно в качестве такого шрифта
браузеры используют Courier New.
Если вы хотите изменить шрифт в элементе pre, можете вос-
пользоваться встроенным стилем (см. главу «Листы стилей»).
Например, моноширинный шрифт заменяется на гарнитуру Arial
с помощью тега <pre style=" f on t - f ami ly: Ari al ">.
Как пример использования предварительного форматирования продолжим оформление
стихотворения из сказки Л. Кэрролла (см. раздел «Разрывы строк (теги <BR>,
<NOBR>)»). При этом постараемся сохранить в авторской редакции запись отступов и
пустых строк:
<HTML>
<HEAD>
<Т1ТЬЕ>Преформатированный тексте/TITLE>
</HEAD>
<BODY>
еН2>Пример преформатированного текста</Н2>
<PRE>
Сияло солнце в небесах,
Светило во всю мочь,
Была светла морская гладь,
Как зеркало точь-в-точь,
Что очень странно – ведь тогда
Была глухая ночь.
И недовольная луна
Плыла над бездной вод
И говорила: &1адио;Что за чушь
Светить не в свой черед?
И день – не день, и ночь – не ночь,
А все наоборот&гадио;.
Л. Кэрролл<ВБ>
</PRE>
</BODY>
</HTML>
Оформление текста 37
Здесь для отображения тире использован уже известный вам спецсимвол &ndash, а для
вывода двойных кавычек - символы « (открывающиеся кавычки) и » (за-
крывающиеся кавычки). Обратите внимание, что на специальные символы предвари-
тельное форматирование не распространяется. Внешний вид приведенного выше доку-
мента HTML показан на Рис. 2.6.
Спецификация HTML 3.2 и последующих версий языка допускает вставку внутрь эле-
мента PRE изображений и других текстовых блоков, меняющих свойства шрифта. Та-
кие вставки поддерживаются большинством браузеров, однако в каждом конкретном
случае лучше убедиться в правильном распознавании составленного документа.
Рис. 2.6. Использование предварительно отформатированного текста
Работа с шрифтами
Рассмотренные выше средства задания абзацев, заголовков, линий - это в основном
средства форматирования текстовых блоков. Рассмотрим теперь возможности
управления шрифтами при подготовке Web-страниц.
Для правильного отображения текста HTML-документа важное значение имеет вы-
бор шрифтов. Шрифты различаются, прежде всего, гарнитурой, то есть особенно-
стями своего оформления. Условно шрифты можно разделить на две большие груп-
пы: шрифты с «засечками» (Times, Courier, Serif и др.) и «рубленые» (Arial,
Helvetica, Pragmatica и множество других). При отображении текста на компьютере
пользователя программе браузера доступен достаточно большой набор гарнитур,
установленных в результате настройки пользовательского интерфейса.
В одной и той же гарнитуре обычно существует несколько начертаний шрифта, это:
обычный шрифт (Normal), полужирный (Bold), курсив (Italic) и полужирный курсив
38
ГЛАВА 2
(Bold Italic). Для некоторых шрифтов существуют также начертания Light (легкий),
Condensed (сжатый) и другие, однако они спецификацией HTML не предусмотрены.
Еще одним важным параметром шрифта является его размер. Этот параметр может исполь-
зоваться в нескольких значениях, однако чаще всего под размером шрифта понимают высо-
ту его символов (букв). Для определения высоты шрифта часто используются типографские
единицы - пункты, или сокращенно «pt» (Ipt = 0,353 мм), Возможно также определение раз-
мера шрифта в «экранных единицах» - пикселах (сокращенно рх). Пиксел - это минималь-
ный адресуемый элемент экранного изображения.
Для отображения основного текста документа (тела BODY) в большинстве браузеров
по умолчанию- используется шрифт размером 12 пунктов. Шрифт такого размера
наиболее удобен для чтения с экрана.
Элемент FONT и его атрибуты
Свойства шрифта проще всего определять с помощью элемента FONT, для которого пре-
дусмотрены следующие атрибуты:
✓ size - размер шрифта.
✓ color - цвет шрифта, определяемый именным или кодовым значением (см. раздел
«Управление цветом шрифта и фона страницы» данной главы).
✓ face - гарнитура шрифта или список допустимых шрифтов.
Допустим, вы хотите, чтобы фрагмент текста был показан шрифтом Arial, имеющим
оливковый цвет и размер 16 пунктов. Для этого введите элемент:
<FONT face="Arial" size=16pt со1ог="о1^е">Выделенный
тексте/FONT>
Относительные размеры шрифтов
Размер шрифта в HTML-документах часто выражают не в абсолютных единицах
(разделах или пикселах), а в относительных единицах, записываемых целыми числа-
ми - от 1 до 7. В этих единицах основному шрифту, используемому по умолчанию,
присваивается размер 3. Самый мелкий шрифт имеет размер 1, а самый крупный -
размер 7.
Каждый шрифт в шкале «1 - 7» на 20% больше или меньше размера основного
шрифта. Так размер 4 на 20% больше, а размер 5 на 40% больше размера 3, в то вре-
мя как размеры 2 и 1 соответственно на 20% и 40% меньше 3. Таким образом, размер
шрифта 3 выражает некоторый условный размер, который может различаться для
разных браузеров. Чтобы задать точный размер шрифта, нужно обратиться к абсо-
лютным единицам - пикселам или разделам.
Сейчас мы рассмотрим еще один способ задания размера шрифта, основанный на сравнении
его с основным шрифтом. Так текст, выделенный тегом <FONT size=-l>, будет отобра-
жен шрифтом, размер которого равен 2 (отсчет ведется от размера 3, принятого по умол-
Оформление текста
39
чанию: 3 - 1 = 2). А текстовый фрагмент, предваряемый тегом <FONT size=+2>,
будет выводиться на экран шрифтом размера 5 (3+2 = 5).
При определении размера шрифта может оказаться, что вычисляемое значение равно
нулю или отрицательно. Тогда шрифту назначается размер 1 (самый мелкий шрифт
в шкале 1 - 7). Если же вычисляемый размер оказывается большим 7, то размер
шрифта все равно считается равным 7 (самый крупный шрифт).
Шрифт размера 7 - это действительно самый крупный
шрифт, который может задаваться в элементе FONT. Ис-
5. пользование очень больших абсолютных значений для атри-
<< бута size не приводит к фактическому увеличению размера
шрифта. Чтобы задать размер шрифта, больший 7, нужно
> прибегнуть к листам стилей (см. главу 3). Аналогичная си-
X туация наблюдается и при попытке задать шрифт мельче,
+ чем 1.
Ниже приведен пример документа, в котором текст отображается шрифтами различных
относительных размеров:
<HTML>
<HEAD>
<Т1ТЬЕ>Размеры шрифта</Т1ТЬЕ>
</HEAD>
<BODY>
<FONT з1ге=7>Шрифт размером 7</F0NT><BR>
<FONT Б1ге=б>Шрифт размером 6</FONT><BR>
<FONT з!ге=+2>Шрифт размером 5</FONT><BR>
<FONT з!ге=+1>Шрифт размером 4</FONT><BR>
<FONT з1ге=3>Шрифт размером 3
(основной шрифт по умолчанию)</FONT><BR>
<FONT з!ге=-1>Шрифт размером 2</F0NTxBR>
<FONT з1ге=-2>Шрифт размером 1</FONT><BR>
</BODY>
</HTML>
На Рис. 2.7 показан вид этого документа в браузере Internet Explorer. Отображение
в браузере Netscape шрифтов, заданных числами 1-7, почти не отличается от их вида
в Internet Explorer.
40
ГЛАВА 2
Рис. 2.7. Примеры относительных размеров шрифтов,
отображаемых в Internet Explorer
Изменение основного шрифта (элемент BASEFONT)
По умолчанию текстовое содержимое документа отображается основным шрифтом,
заданным в начальных установках браузера. Обычно основной шрифт имеет размер 3 и
гарнитуру Times New Roman (Рис. 2.7).
В браузере Internet Explorer параметры основного шрифта можно
изменить с помощью команды Сервис - Свойства обозревате-
ля. На вкладке Общие имеются кнопки Шрифты (открывает
диалог для задания гарнитуры) и Оформление (установка поль-
зовательского стиля отображения текста).
В HTML для изменения свойств основного шрифта предназначен одиночный тег
<BASEFONT>. Например, <BASEFONT size=6> устанавливает для основного шрифта
размер 6.
Тег <BASEFONT> может располагаться в любом месте элемента BODY, но, обычно, его
ставят сразу после тега <BODY> и тем самым назначают шрифт в пределах всего доку-
мента. Действие элемента BASEFONT не распространяется на содержимое элементов
Нх (заголовки) и TABLE (таблицы) - их шрифт определяется начальными установками
браузера.
Тег <BASEFONT> может дополняться атрибутами: size, color и face, задающими
соответственно размер, цвет и гарнитуру шрифта.
Оформление текста
41
Выбор гарнитуры шрифта (атрибут face)
Чтобы определять гарнитуру шрифта, фирма Microsoft ввела в свое время в элемент
FONT атрибут face. С тех пор этот атрибут поддерживается всеми браузерами и по-
зволяет авторам Web-страниц задавать отображение текста шрифтами, отличными от
шрифта по умолчанию (Times New Roman). Например, элемент
<FONT face="Helvetica">Текст, отображаемый
шрифтом Helvetica</FONT>
задаст отображение содержимого шрифтом Helvetica («Гельветика»).
В принципе существует множество допустимых гарнитур шрифтов, однако отображать-
ся будут лишь те шрифты, которые установлены на компьютере пользователя. Как же
предвидеть, какие шрифты могут быть у пользователей? Дело в том, что большинство
компьютеров, работающих под Windows, Macintosh или UNIX, имеют стандартные набо-
ры шрифтов, которые устанавливаются вместе с операционной системой. Если же раз-
работчик страниц сомневается в наличии какого-либо шрифта у пользователей, он ука-
зывает в атрибуте face несколько шрифтов. Например, не у всех на компьютерах
может быть шрифт Helvetica, однако практически у каждого пользователя имеется более
распространенный шрифт Arial, похожий на Helvetica. Поэтому вместо приведенного
выше элемента в атрибуте можно перечислить допустимые шрифты:
<FONT face="Helvetica, Arial">Текст, отображаемый шрифтом
Helvetica. Если этот шрифт отсутствует,
получим вывод шрифтом Arial</FONT>
; В атрибуте face в качестве значений допустимо указывать не-
сколько гарнитур шрифтов, разделяя их запятой. Для отобра-
< жения текста браузер применит одну из перечисленных гарни-
v тур, имя которой первой совпадет с имеющимся в его
$ распоряжении набором гарнитур. oS)
Приведем пример страницы, содержащей текст, отображаемый различными гарнитура-
ми шрифтов:
<нтмь>
<HEAD>
<Т1ТЬЕ>Гарнитуры шрифтовс/Т1Т1>Е>
</HEAD>
<BODY>
<FONT size=5>npnMepbi гарнитур шрифтов:</FONT>
<BR><BR>
<FONT face="Arial">Arial Cyr</FONT><BR>
<FONT face="Arial Black">Arial Black</FONT><BR>
<FONT face="Comic Sans MS">Comic Sans MS</FONT><BR>
<FONT face="Courier New">Courier New</FONT><BR>
<FONT face="Helvetica">Helvetica</FONT><BR>
<FONT face="Impact">Impact</FONT><BR>
42
ГЛАВА 2
<FONT face="Monotype Corsiva">Monotype Cor-
s iva</FONT><BR>
<FONT face="Palatino">Palatino</FONTxBR>
<FONT face="Symbol">Symbol</FONTxBR>
<FONT face="Times New Roman”>Times New Ro-
man</FONT><BR>
<FONT face= "Verdana">Verdana</FONTxBR>
</BODY>
</HTML>
Несмотря на то, что в стандарте HTML 4.01 предусмотрен тег
<font>, более универсальным способом задания свойств шриф-
та (размер, цвет и гарнитура) является применение листов
стилей (см. главу 3 «Листы стилей»).
Мои компьютер
Рис. 2.8. Отображение текста шрифтами различных гарнитур
Управление цветом шрифта и фона страницы
Цвет текста Web-страницы и ее фона задаются атрибутами тегов <BODY>, <BASEFONT>
и <FONT>. Их применение мы рассмотрим ниже. Сейчас же остановимся на цветовой
модели и форматах описания цвета, принятых в HTML.
Цветовая модель RGB и форматы описания цвета
В HTML для описания цветов используются числовой и символьный форматы цветовой
модели RGB. Цветовая модель - это способ описания цвета. Например, цвет может быть
Оформление текста 43
задан количественным значением базовых цветов в его разложении. Для описания цве-
тов, воспроизводимых на мониторе, применяется цветовая модель RGB (от названий
основных цветов: Red (красный), Green (зеленый), Blue (синий)). В полиграфии принята
модель CMYK с компонентами Cyan (голубой), Magenta (пурпурный), Yellow (желтый)
и black (черный). Существует также цветовая модель HSV, основанная на восприятии
цвета человеком. В ней для количественного описания приняты цветовой тон (Hue), на-
сыщенность (Saturation) и яркость (Value).
В RGB-модели цвет можно кодировать с помощью трех пар шестнадцатеричных чисел.
Каждая пара определяет «количество» основного цвета в интервале от 00 до FF. Первое
число определяет «долю» красного цвета, второе число - зеленого цвета, а последнее -
задает синюю компоненту. Например, темно-фиолетовый цвет задается кодом
#800080. Значение цвета начинается символом #, а запись шестнадцатеричных чисел
не зависит от регистра букв (например, браузер одинаково отобразит белый цвет, уста-
новленный символами #FFFFFF И #f Ff Ff F).
Для упрощения процедуры задания цвета в HTML применяется символьный код, соглас-
но которому каждому цвету присваивается имя. В Табл. 2.1 приведены 16 основных цве-
тов (4-битный цвет).
Табл. 2.1. Таблица цветов
Цвет Имя цвета Шестнадцате- ричный код Цвет Имя цвета Шестнадцате- ричный код
Черный Black 000000 Темно-зеленый green 008000
Темно- синий Navy 000080 Голубой teal 008080
Светло- серый silver cOcOcO Зеленый lime OOffOO
Синий Blue OOOOff Бирюзовый aqua OOffff
Малиновый maroon 800000 Оливковый olive 808000
Сиреневый purple 800080 Темно-серый gray 808080
Красный Red ffOOOO Желтый yellow ffffOO
Розовый fuchsia ffOOff Белый white ffffff
Цвет фона (атрибут bgcolor)
Цвет фона всего документа определяется атрибутом bgcolor тега <BODY>.
Например, тег
<BODY bgcolor="#ffffff">
назначает одинаковую, максимально возможную насыщенность красного, зеленого и
синего, в результате чего браузер устанавливает белый фон страницы.
44
ГЛАВА 2
Цвет текста (атрибуты text и color)
Для определения цвета шрифта в HTML-документе вы можете воспользоваться одним
из трех способов:
назначение цвета текстовых символов всего документа осуществляется атрибутом
text тега <BODY>; например, синий цвет текста устанавливается тегом
<BODY text="blue">
✓ если в HTML-документе определен основной шрифт с помощью элемента
BASEFONT,-то можно дополнить этот элемент атрибутом color, например:
<BASEFONT size=5 color="red">
✓ для текстовых фрагментов цвет шрифта задается с помощью атрибута color в тегах
<FONT>, например, отображение текста красным шрифтом можно задать одной из
следующих инструкций:
<FONT color="red">TeKCT</FONT>
или
<FONT color="#ffООО0">Текст</FONT>
Отметим, что введение атрибута color в тег FONT отменяет цвета, заданные атрибу-
том text в элементе BODY.
Задание начертания шрифта (элементы Bz I, U)
Для задания различных начертаний шрифтов используются следующие теги:
<В> . . . </В> - полужирный текст;
✓ <!>...</!> - курсивный текст;
✓ <U>...</U> - подчеркнутый текст.
Примеры этих тегов даны в следующем документе:
<HTML>
<HEAD>
<Т1ТЬЕ>Начертания шрифтов</Т1ТЬЕ>
<BASEFONT size=5>
</HEAD>
<BODY>
Нормальный текст<ВИ>
<В>Полужирный текст</ВхВЕ>
<1>Курсивный текст</1><ВЕ>
<и>Подчеркнутый текст</и><ВЕ>
</BODY>
</HTML>
Оформление текста
45
Внешний вид документа показан на Рис. 2.9. Для основного шрифта здесь задан размер 5
с помощью известного вам элемента BASEFONT.
Рис. 2.9. Различные начертания шрифтов
Если браузер пользователя не поддерживает полужирный шрифт либо курсив, то текст,
обрамленный тегами <В>. . .</В> либо <1>. . .</1>, будет отображаться подчеркну-
тым шрифтом.
Вообще говоря, лучше избегать употребления подчеркивания, поскольку подчеркнутый
текст пользователь может принять за гиперссылку на другие документы. В специфика-
ции HTML 4.01 элемент и отмечен как устаревший.
Стили текстовой разметки
Все браузеры по умолчанию отображают текст обычным стилем, который для каждого
типа браузера определяется его начальными установками. Так, основной текст отобра-
жается шрифтом Times New Roman размером 3 (Рис. 2.6), а заголовки выводятся на эк-
ран шрифтом полужирного начертания.
Для отклонения от обычного стиля в HTML предусмотрены специальные элементы, ко-
торые делятся на фразеологические и элементы стиля шрифтов. К фразеологическим
относятся устаревшие элементы: ЕМ, CITE, DFN, DFN - выделение курсивом; STRONG -
выделение полужирным; KBD, SAMP - моноширинный шрифт. Подробнее остановимся
на элементах стиля шрифтов.
Элементы стиля шрифтов
Элементы стиля шрифтов дают прямое указание браузеру для оформления текстового
фрагмента в определенном стиле. При этом фрагмент отображается одинаково всеми
браузерами, например, как при выделении текста курсивом или полужирным шрифтом.
Перечислим возможные элементы стиля шрифтов.
46
ГЛАВА 2
✓ В, I, U - элементы начертания шрифта (полужирное, курсивное, подчеркнутое).
Эти элементы уже рассматривались нами ранее (см. раздел «Задание начертания
шрифта (элементы В, I, U)»);
✓ ТТ - моноширинный шрифт. Этот элемент является аналогом уже рассматривав-
шихся элементов KBD, CODE, SAMP;
✓ BIG - увеличение шрифта. Данный элемент задает увеличение размера шрифта на
10 - 20% относительно размера основного шрифта. Тег <BIG> не определяет точный
размер увеличенного шрифта - выбор увеличения остается за браузером;
✓ SMALL - уменьшение шрифта. С помощью данного элемента можно уменьшить
шрифт на 10 - 20%. Как и в случае тега <BIG>, степень изменения размера шрифта
определяется браузером;
✓ STRIKE, S - зачеркнутый текст. Эти два вида элементов определяют зачеркнутый
текст (тег <S> является сокращенным вариантом записи <STRIKE>).
Примеры отображения текста, выделенного элементами ТТ, BIG, SMALL, U, STRIKE
имеются в следующем документе:
<HTML>
<HEAD>
<Т1ТЕЕ>Элементы стиля шрифтов</Т1ТЕЕ>
</HEAD>
<BODY>
<BASEFONT size=4>
<Н1>Примеры оформления шрифтов</Н1>
<ТТ>Текст, набранный моноширинным шрифтом.</ТТ>
<BR>
Последние два слова строки набраны
<В1С>увеличенным шрифтом.</BIG>
<BR>
Последние два слова строки набраны
<5МАЬЕ>уменьшенным шрифтом.</SMALL>
<BR>
<и>Подчеркнутый текст.</U>
<BR>
<3>3ачеркнутый текст.</S>
</BODY>
</HTML>
Отображение данного документа вы можете видеть на Рис. 2.10.
Оформление текста
47
Нормальный текст
11олужирный текст
Курсивный текст И
Подчеркнутый текст М
"опгово . I. п> И ой компьютер
Рис. 2.10. Примеры стилей шрифтов
К одному текстовому фрагменту можно применить несколько стилей. Это так называе-
мый прием комбинирования, при котором нужно правильно расставлять закрывающие
теги, следя за тем, чтобы вложенные элементы не перекрывались. Например, фрагмент,
обрамленный вложенными тегами
<B><I>Internet Explorer</Ix/B>
будет отображаться полужирным курсивом: Internet Explorer.
Верхние и нижние индексы (элементы SUP и SUB)
Некоторые HTML-документы содержат тексты, в которых встречаются символы в виде
верхних и нижних индексов. Это относится к математическим выражениям или химиче-
ским формулам. Для отображения индексов в HTML предусмотрены следующие
элементы.
✓ Верхние индексы. Надстрочный текст, показатели степени, а также верхние индексы
формируются парными тегами <SUP></SUP>. К примеру, выражение S= Pi*R2 за-
писывается в виде:
S=Р i * R< SUP> 2 </SUP>
✓ Нижние индексы. Формирование подстрочного текста или нижних индексов выпол-
няется парными тегами <SUB></SUB>. Например, химическая формула воды (Н2О)
может быть задана строкой вида:
H<SUB>2</SUB>0
48
ГЛАВА 2
Списки
Одним из достоинств HTML является представление информации в наглядном виде.
В предыдущих разделах мы рассмотрели теги форматирования простого текста.
Но HTML располагает также специальными элементами, позволяющими представлять
текстовую информацию в виде упорядоченных списков.
Последние спецификации HTML (4.0 и 4.01) предоставляют авторам возможность соз-
дания следующих списков:
✓ маркированный (неупорядоченный) список;
✓ нумерованный (упорядоченный) список;
✓ список определений.
Для тех, кто незнаком с термином «маркированный список», отметим, что приведенный
выше перечень является примером такого списка. Маркерами в данном примере являют-
ся галочки. Нумерованный список отличается от маркированного тем, что вместо марке-
ров в нем используются последовательные цифры или буквы алфавита.
Структура маркированных и нумерованных списков
Списки строятся по принципу вложения элементов. Вначале определяется родительский
элемент, задающий тип списка, после чего следуют дочерние элементы заголовка и от-
дельных строк списка.
Родительский элемент, внутри которого размещается список, задается следующими пар-
ными тегами.
✓ <UL>. . . </UL> - маркированный список. Сокращение UL происходит от друго-
го названия данного элемента: Unordered List - неупорядоченный список.
✓ <OL>. . . </OL> - нумерованный список. Сокращение OL означает Ordered List -
упорядоченный список.
✓ <DL> . . . </DL> - список определений (сокращение от Definition List).
Заголовок списка является необязательным элементом, он формируется с помощью
парного тега <LH>:
<LH>3aronoBOK списка</ЬН>
Содержимое списка состоит из отдельных строк. Каждая строка задается одиночным
тегом <Ы> (сокращение от List Item - элемент списка), например:
<Ы>Содержимое строки списка
Таким образом, количество элементов LI равно количеству строк в списке. В результа-
те маркированный список оформляется следующим образом:
Оформление текста
49
<UL>
<LH>
<’--Заголовок списка-->
</LH>
<LI><’--Первая строка списка-->
<LI><’--Последняя строка списка-->
</UL>
Отдельная строка при отображении маркируется сообразно выбранному автором виду
списка.
Маркированный список (элемент UL)
Рассмотрим подробнее создание маркированного списка, например, списка рубрик неко-
го сайта:
<HTML>
<HEAD>
<Т1ТЬЕ>Маркированный списокс/TITLE>
</HEAD>
<BODY>
<Н2 >Список рубрик:</Н2 >
<UL>
<Ы>Новости
<Ы>Финансы
<Ы>Спорт
<Ы>Погода
<Ы>Горячая линия
</UL>
</BODY>
</HTML>
Внешний вид этой страницы показан на Рис. 2.11.
Рис. 2.11. Пример маркированного списка
50
ГЛАВА 2
По умолчанию маркеры отображаются в виде маленьких затемненных кружков. Дру-
гой вид маркеров можно установить с помощью листов стилей (см. главу 3 «Листы
стилей»). Но можно воспользоваться предусмотренным атрибутом type. Например,
элемент списка
<LI type=square>HoBocTM
будет иметь маркер в виде заполненного квадратика, а элемент
<LI type=circle>HoBOCTM
будет отображаться с маркером - незаполненным кружком.
Нумерованный список (элемент OL)
Формирование нумерованного списка сводится к применению парного тега <OL></OL>
для обрамления элементов списка. Ниже приведен код документа с нумерованным спи-
ском, а на Рис. 2.12 показано, как браузер Internet Explorer его отображает.
<HTML>
<HEAD>
<Т1ТЬЕ>Нумерованный список</Т1ТЬЕ>
</HEAD>
<BODY>
<OL>
<Н2>Состав интегрированного пакета
Microsoft Office 2000:</Н2>
<LI>Word;
<LI>Excel;
<LI>Access ;
<LI>PowerPoint ;
<LI>Outlook;
<LI>FrontPage;
<LI>Publisher;
<LI>Project;
<LI>PhotoDraw;
<LI>Team Manager.
</OL>
</BODY>
</HTML>
Обратите внимание, что заголовок Н2 включен в контейнер <OL>. Поэтому заголовок
выровнен по левому краю элементов списка (без учета номеров).
Оформление текста
51
Рис. 2.12. Пример списка с нумерацией арабскими цифрами
В HTML допускается несколько стилей нумерации, которые задаются атрибутом
type. В зависимости от значения атрибута type списку присваиваются следующие
стили нумерации:
✓ type=l - нумерация арабскими цифрами (1, 2, 3,...). Кстати такая нумерация при-
меняется по умолчанию (если атрибут type отсутствует);
✓ type=A - нумерация прописными буквами английского алфавита (А, В, С,...);
✓ type=a - нумерация строчными буквами английского алфавита (а, Ь, с,...);
✓ type=I - нумерация с помощью римских цифр (I, II, III,...);
✓ type=i - нумерация строчными римскими цифрами (i, ii, iii, iv,...).
Вы можете изменить начало нумерации строк списка, а также порядок нумерации внут-
ри списка. Например, первой строке списка можно присвоить номер 101, тогда все ос-
тальные строки будут пронумерованы последовательно (102, 103...). При изменении
порядка нумерации списка нужно придерживаться следующих правил.
✓ Задание номера первой строки. Этот номер определяется атрибутом start в эле-
менте OL. Значением атрибута является число или буква, с которой начинается нуме-
рация строк. Например, все строки списка будут последовательно пронумерованы,
начиная с буквы Е, если вы в качестве начального установите тег <OL type=A
start=5>;
✓ Изменение нумерации внутри списка. Подобные изменения задаются атрибутом
value в теге <Ы>. Этот атрибут может принимать только численное значение
(2,3,...), которое задает измененный порядок нумерации.
52
ГЛАВА 2
Списки определений
Рассмотренные выше маркированные и нумерованные списки состоят из элементов од-
ного типа: UL либо 0L. Более сложную структуру, представленную двумя типами эле-
ментов DT и DD, имеют списки определений. Эти списки представляют собой списки
терминов вместе с их определениями, то есть они напоминают обычный толковый сло-
варь. Каждому термину соответствует абзац определения, расположенный с отступом
ниже термина.
Задаются списки определений с помощью родительского элемента DL (сокращение
от слов Definition List - список определений). Каждая позиция списка формируется дву-
мя одиночными тегами, вложенными в контейнер <DL></DL>
✓ <DT> т тег, задающий определяемый термин (DT - сокращение от Definition Term)-,
<DD> - тег, за которым следует собственно определение термина.
Текст, размещенный между тегами <DT> и <DD>, воспринимается браузером как тер-
мин. А текст, следующий за тегом <DD>, считается определением термина и отобража-
ется новым абзацем с отступом от левого края страницы. Ниже приведен пример
документа, содержащего список определений.
<HTML>
<HEAD>
<Т1ТЬЕ>Список определенийс/TITLE>
</HEAD>
<BODY>
<CENTER>
<Н1>Словарь школьника</Ы>
<H2>B</h2>
</CENTER>
<DL>
<DT>Вакуум
<DD>3to состояние разреженного газа,
находящегося при давлении ниже атмосферного.
<ВТ>Векторная физическая величина
<DD>3to физическая величина, которая имеет
не только численное значение, но и направление.
<DT>Bec тела
<DD>3to сила, с которой тело, вследствие
его притяжения к Земле, действует
на опору или подвес.
</DL>
</BODY>
</HTML>
Внешний вид документа показан на Рис. 2.13.
Оформление текста
53
Рис. 2.13. Пример списка определений
Кроме составления списков определений элемент DL можно использовать для разметки,
например, диалогов в пьесах. Тогда элемент DT определяет персонаж, а тег <DD> задает
смысловую часть диалога.
Гиперссылки
Известно, что наиболее простой путь путешествия по Сети - это переходы по гипер-
ссылкам. Этим объясняется популярность использования гиперссылок на Web-
страницах. С помощью гиперссылок, или, проще говоря, ссылок, пользователь может
переходить к различным частям просматриваемой страницы, обращаться к другим стра-
ницам или к другим сайтам.
Ссылки и закладки
Ссылка представляет собой логическую связь одного фрагмента (элемента) документа
с другим фрагментом в том же самом или в другом документе. Если щелкнуть мышью
по ссылке, то выполняется переход по указанной связи.
Ссылка характеризуется двумя точками, называемыми закладками (anchor - якорь,
закладка). Различают начальную закладку (source anchor) и конечную закладку
(destination anchor).
✓ Начальная закладка устанавливается на конкретном HTML-элементе и опреде-
ляет точку, из которой задается ссылка. Начальные закладки можно размещать
в тексте, в таблицах, в списках, изображениях или фреймах. Обычно начальная
закладка выделяется относительно других элементов документа (цветом,
подчеркиванием и т.д.).
54
ГЛАВА 2
✓ Конечная закладка определяет точку назначения ссылки. В отличие от начальной
закладки, эта закладка может относиться не только к конкретному HTML-элементу
(тексту, изображению, аудио- или видеоклипу), но и к программе или документу
в целом.
В HTML различают внутренние и внешние гиперссылки. Внутренние ссылки осуществ-
ляют переход в пределах одного и того же документа. Их применение целесообразно
в больших документах для перемещения по разделам. Например, в начале документа
может быть размещено содержание (оглавление), состоящее из ссылок на заголовки раз-
делов документа. Внешние ссылки обеспечивают переходы к другим документам, распо-
ложенным на других Web-серверах. Внешние ссылки иногда называют удаленными
гиперссылками.
Принципы создания ссылок
Прежде чем вставлять в HTML-документы ссылки, рассмотрим основные правила, кото-
рых нужно придерживаться при создании ссылок.
Элемент привязки <А>
Для создания ссылок (как внешних, так и внутренних) применяется элемент <А>, назы-
ваемый элементом привязки, или, другими словами, якорным элементом (буквальный
перевод термина anchor element). Название элемента <А> происходит от первой буквы
слова anchor - якорь.
Элемент привязки <А> должен выполнять простую задачу: отображать содержимое
ссылки на экране и указывать браузеру, к какому ресурсу необходимо перейти при
щелчке по ссылке. Для этого внутри тега <А> ставится обязательный атрибут href,
с помощью которого определяется целевой ресурс (конечная закладка), а внутри кон-
тейнера <А> размещается содержимое ссылки. Содержимым элемента А могут быть
любые текстовые символы или графические элементы. Место расположения ссылки
в документе (начальная закладка) определяется непосредственно местом вставки
элемента <А> в HTML-код.
Простейшая ссылка создается по следующей схеме:
<А href="адрес_перехода">
текст ссылки
</А>
Содержимое ссылки в данном случае - это выделенный «текст ссылки», щелчок по ко-
торому инициирует переход. Вообще, если код между тегами <А> и </А> представляет
собой текст, элемент <А> называется текстовым элементом привязки.
Как пример, приведем простую ссылку вида:
<А href="review.html">Обзор</А>
Это ссылка на HTML-файл Review.html (в атрибуте href указано только имя файла,
что отвечает относительной ссылке, см. ниже). Значение атрибута href определяет
конечную закладку. Текст ссылки будет отображаться на экране словом «Обзор».
Оформление текста 55
Отметим, что элементы ссылок лучше всего размещать, не
прерывая текста документа дополнительными пробелами или
разрывами строк. Текст ссылки должен быть кратким и содер-
жательным, чтобы пользователь представлял, какую информа-
цию он получит, перейдя по данной ссылке. При наличии в доку-
менте нескольких ссылок нужно учитывать, что вложение
ссылок не допустимо.
Атрибут href
Итак, обязательным атрибутом элемента привязки <А> является href. Значение этого
атрибута определяет целевой объект перехода, который задается в виде адреса URL (Uni-
form Resource Locator - унифицированный локатор ресурса).
В качестве URL указывается адрес, по которому хранится целевой документ. URL обыч-
но состоит из трех частей (см. раздел «Адресация документов в Web» главы 1):
✓ протокол доступа к источнику - это правила, которые должны выполняться при об-
мене определенными данными (в нашем случае - при обмене Web-страницами);
✓ имя сервера, где хранится документ;
✓ имя источника (имя файла документа).
Например, URL-адрес http://www.w3.org/tr/html401, который уже упоминался как перво-
источник информации по WWW, расшифровывается следующим образом: документ
с именем htm!401 хранится на сервере www.w3.org в разделе tr (Technical
Reports - технические сообщения) и доступен с помощью протокола HTTP.
После загрузки страницы URL отображается в адресной строке браузера. При просмотре
Web-страниц можно заметить, что, если подвести указатель мыши к гиперссылке,
в строке состояния окна браузера появится URL страницы, на которую указывает ссылка
(иногда появляется всплывающая подсказки с URL-адресом).
Протоколы доступа
Как отмечалось выше, первым компонентом URL является протокол доступа, или,
другими словами, тип ресурса. Протоколом называются правила, по которым проис-
ходит обмен данными между компьютерами. Перечислим наиболее часто исполь-
зуемые протоколы.
✓ http - это протокол, на котором основан Web. Такой префикс является указанием
браузеру для поиска документа по всему WWW. Например, записав код:
<А href="http://www.kodak.сот/us/en/health">текст ссылки</А>
вы зададите ссылку на Web-страницу медицинского отделения компании Kodak.
✓ mailto - префикс вызова протокола электронной почты SMPT (Simple Mail
Transport Protocol - простой протокол передачи почты). Например, ссылка вида
<А href="mailto://medinews©kodak.com">текст ссылки</А>
56
ГЛАВА 2
позволит посетителю вашей страницы перейти к открытию на экране его компьютера
окна для ввода исходящей почты, а в диалоге Куда будет указан адрес
MediNews©Kodak. com медицинского журнала компании Kodak.
✓ ftp - протокол обмена данными с ftp-серверами (ftp - сокращение от File Transfer
Protocol - протокол передачи файлов). Если, например, создать ссылку вида
<А href="ftp: //dartmouse.edu/pub/something.exe11 >текст
ссылки</А>
то можно организовать подключение к йр-серверу dartmouse. edu с тем, чтобы полу-
чить доступ к файлу something. ехе из папки pub.
Существуют также другие типы протоколов (например, gopher, nntp и др.), рассмот-
рение которых выходит за рамки данной книги.
Абсолютные и относительные URL
До сих пор мы говорили об абсолютных адресах URL, то есть адресах, в которых
явно указывается протокол, узел, папка и файл. Абсолютные URL содержат все ком-
поненты, необходимые для того, чтобы браузер смог найти Web-страницу в необъ-
ятной паутине WWW.
Однако указание подробной информации в URL не всегда удобно, поэтому по мере
возможности прибегают к сокращенной форме записи адреса. Например, при обра-
щении к HTML-документу, который размещен на том же узле, что и документ-
источник, достаточно указать только папку и файл. Подобная запись адреса называ-
ется относительным URL.
Обычно в относительном URL опускается название протокола и имя сервера. То есть
документы с относительным URL размещены на том же сервере, что и текущий документ.
Например, если в браузере загружена страница http://www.uniservice.com/transl/eng-rus, то
относительный адрес fr-greek указывает на то, что этому адресу отвечает абсолютный URL:
http://www.uniservice.com/transl/fir-greek.
Создание ссылок на другие Web-узлы
Мы уже приводили примеры создания ссылок на Web-страницы, размещенные на раз-
личных узлах в WWW. Такие ссылки задаются якорным элементом вида:
<А href="URL">текст ссылки</А>
В качестве URL может быть использован как абсолютный, так и относительный адрес.
Относительные ссылки (элемент BASE)
Ранее говорилось о том, как относительный URL привязывается к текущему Web-узлу
(см. раздел «Абсолютные и относительные URL» данной главы). Однако URL можно
привязывать к любому адресу, в том числе, к другому узлу. Для этого в документе, из
которого выполняется гиперссылка, используется специальный элемент BASE. Одиноч-
ный тег <BASE> размещается в заголовочной части (между тегами <HEAD> и
Оформление текста
57
</HEAD>) и обязательно дополняется атрибутом href. В этом атрибуте указывается
абсолютный адрес, называемый базовым URL. Полная форма записи тега <BASE> с его
атрибутом имеет вид
<BASE href="http://имя сервера/имя каталога/">
При этом ссылка на конкретный файл будет задаваться как обычно якорным тегом <А>
с атрибутом href:
<А href="имя файла">текст гиперссылки</А>
Действие тега <BASE> распространяется на все относительные ссылки текущего HTML-
документа. Элемент BASE, изменяющий фактически адресацию всех относительных
ссылок, может оказаться полезным, когда нужно перенаправить пользователей на другой
сервер. Это выполняется простой заменой значения атрибута href в теге <BASE>.
Создание ссылок на объекты текущего Web-узла
Рассмотрение гиперссылок начнем с самого простого типа - с внутренних ссылок.
Внутренние ссылки
Этот вид ссылок применяется для переходов из одной части документа в другую его
часть, что полезно в случае больших документов со многими разделами, которые не
отображаются целиком в окне браузера. Применение внутренних ссылок дает возмож-
ность пользователю легко перемещаться по странице.
Внутренняя ссылка определяется с помощью элемента привязки <А> с атрибутом href.
При щелчке по внутренней ссылке вы попадаете в определенное место документа. Это
место обозначается меткой. Причем метка создается с помощью якоря <А>, однако
в нем вместо атрибута href используется атрибут паше. Напомним, что точка разме-
щения ссылки называется начальной закладкой, а точка размещения метки - конечной
закладкой. Рассмотрим подробнее создание закладок в случае внутренних ссылок.
Поскольку переход задается в пределах одного и того же документа, внутренние ссылки
записываются без URL-адреса. Вместо URL задается имя метки, к которой выполняется
переход:
<А href="#MMH метки">текст ссылки</А>
Символ # означает, что ссылка указывает на метку, а не на внешний файл. Для создания
конечной закладки ссылки применяется тег <А> с атрибутом паше:
<А паше="имя метки">
<! - - текст элемента метки - ->
</А>
58
ГЛАВА 2
Допустим, документ имеет несколько разделов, из названий которых составлен списо)
(подобно оглавлению). Оформим элементы этого списка в виде внутренних ссылок *:
<А href="#глав1">Глава 1. Безенчук и
«нимфы&гадио ;
</A><BR>
< А Ьге£="#глав2">Глава 2. Кончина мадам Петуховой
</A><BR>
< А Ьге£="#главЗ">Глава 3. «Зерцало
грешного&гадио;
</A><BR>
< А Ьге£="#глав4">Глава 4. Муза дальних странствий
</A><BR>
< А Ьге£="#глав5">Глава 5. Великий комбинатор
</А>
Текст всего документа оформляется обычным образом - с одним отличием: заголовю
глав снабжаются якорями, для которых заданы соответствующие имена паше:
<Н1>Часть первая. Старгородский лев</Н1>
< Н2><А паше="глав1">Глава 1. Безенчук и
« HHM$bi» </Ах/Н2>
В уездном городе N было так много парикмахерских заведений
и бюро похоронных процессий, что казалось, жители города
рождаются лишь затем, чтобы побриться, остричься, освежить
голову вежеталем и сразу же умереть...
<Н2хА пате="глав2 ">Глава 2. Кончина мадам
Петуховой </Ах/Н2>
Клавдия Ивановна лежала на спине, подсунув одну руку под
голову. Голова ее была в чепце интенсивно абрикосового
цвета, который был в какой-то моде в каком-то году, когда
дамы носили «maHTeKnep» и только начинали
танцевать аргентинский танец танго...
<Н2хА пате="главЗ ">Глава 3. « Зерцало
rpeniHoro» </А></Н2>
Исповедав умирающую Клавдию Ивановну, священник церкви
Фрола
и Лавра, отец Федор Востриков, вышел из дома Воробьянино-
ва в
полном ажиотаже и всю дорогу до своей квартиры прошел,
рассеянно глядя по сторонам и смущенно улыбаясь...
<Н2хА паше="глав4">Глава 4. Муза дальних
странствий </Ах/Н2>
За час до прихода вечернего почтового поезда отец Федор
* Нетрудно догадаться, что здесь приведен список первых глав «Двенадцати стульев» И. Ильфа и
Е. Петрова.
Оформление текста
59
в коротеньком, чуть ниже колен пальто и с плетеной
корзинкой, стоял в очереди у кассы и боязливо поглядывал на
входные двери...
<Н2><А пате="глав5">Глава 5. Великий комбинаторе/А></Н2>
В половине двенадцатого с северо-запада, со стороны деревни
Чмаровки, в Старгород вошел молодой человек лет двадцати
восьми.
За ним бежал беспризорный...
Внешний вид документа, в котором содержатся оформленные таким образом внутрен-
ние ссылки, показан на Рис. 2.14.
Л Вичч <’♦*»**• соылвм > Mici ‘ oft Internet LmiiIoioi H-riO
Фв^л Правка Избранно,- Сервис L-n правка К’ Ж
( о io ржание
Глава 1 Е^зснчуу и кни;^фы >
Глава 2 Кончина кадаг. Пегуховсй
Глава 3 Мерцало грешного
Глава 4 Муза дальних странствии
Глава 5 ВгЛИКИЙ
Часть первая. Старгородский лев
Глава 1. Безенчук и «нимфы»
В уездном городе N было так много парикмахерских заведений и бюро похоронных процессии, что
казалось, жители города рождаются лишь затем, чтобы побриться, остричься, освежить голову
вежеталем и сразу же умереть
Глава 2. Кончина мадам Петуховой
Клавдия Ивановна лежала на спине, подсунув одну руку под голову Голова се была© чепце
интенсивно абрикосового цвета, который был в какой-то моде в каком-то году, когда дамы носили
«шантеклер» и только начинали танцевать аргентинский танец танго If
Глава 3. «Зерцало грешного» j
Исповедав умирающую Клавдию Ивановну, священник церкви Фрола и Лавра, отец Федор В
Востриков, вышел из дома Воробьянинова в полном ажиотаже и всю дорогу до своей квартиры н
прошел, рассеянно глядя по сторонам и смущенно улыбаясь.________________________________р
, Л ' ТЯ Мои компыотар 2
Рис. 2.14. Пример внутренних ссылок, формирующих содержание большого документа
Ссылки, составляющие содержание этого документа, выделены подчеркнутым шрифтом
иного цвета. Если навести указатель мыши на какую-либо ссылку, он примет форму ру-
ки с вытянутым указательным пальцем. В строке состояния окна браузера (в левом ниж-
нем углу) при этом появится адрес конечной закладки, на которую указывает ссылка.
Например, при наведении указателя на ссылку «Глава 5 . Великий комбинатор»
в строке состояния появляется сообщение «. . ./12_стульев.Ьбш1#глав5», где
60
ГЛАВА 2
многоточием мы обозначили URL внешней папки, 12_стульев.html - это имя
HTML-файла, а глава 5 - имя закладки.
Существует еще один способ создания внутренних ссылок - это использование в конеч-
ных закладках вместо элемента <А> уникального идентификатора id. Якорный тег при
этом не нужен. Для приведенного выше примера конечные закладки с использованием
id записываются в виде:
<Н2 id="глав2">Глава 2. Кончина мадам Петуховой</Н2>
Однако поддержка такого способа создания ссылок реализована только в браузерах
Internet Explorer, начиная с версии 5.0.
Имя закладки может быть набрано латинским или русским алфа-
витом, в верхнем или нижнем регистре. Но само имя закладки
г должно быть уникальным и одинаковым (с учетом регистра) как
{ в атрибуте href, так и в атрибутах пате или id. Например,
два тега <А name="YYY"> и <А пате="ууу"> будут восприня-
ты браузером как разные конечные закладки.
>
Переход на другую страницу
При создании Web-страниц часто применяются ссылки из одного HTML-документа на
другой документ, размещенный на том же сайте и в той же папке, что и исходный
документ. Для таких ссылок в атрибуте href элемента привязки не требуется задавать
абсолютный адрес URL, - можно воспользоваться относительным URL. В качестве ко-
нечной закладки указывается имя целевого файла, например:
<А href="bonaqua.html">IIonpo6yHTe свежесть воды BonAqua</A>
В этом примере начальная закладка задана текстом «Попробуйте свежесть воды
BonAqua», которая будет показана подчеркнутым шрифтом с цветом, отличным от ос-
новного шрифта. Щелчок мышью по этой ссылке приведет вас в начало другой страни-
цы bonaqua.html.
Переход к заданному фрагменту в другом документе
В предыдущем разделе мы говорили о ссылке, которая осуществляет переход к началу
целевого документа. Чтобы переход происходил к определенному фрагменту документа,
выполните следующее.
> В атрибуте href тега начальной закладки определите целевой файл и имя закладки
(через разделительный символ #), например:
<А href="bonaqua.html#рг!се">Условия поставки BonAqua</A>
> В атрибуте name конечной закладки укажите имя закладки. В данном примере - это
price:
Оформление текста
61
<А name="price">
<!- - Содержание условий поставки - ->
</А>
Этот элемент А должен быть установлен в начале фрагмента, на который указывает ссылка.
Оформление ссылок
Остановимся на приемах оформления ссылок с помощью изменения шрифта, цвета
ссылки, задания ссылки в виде рисунка.
Задание шрифта
В HTML имеются средства для выбора шрифта ссылок (точнее, их начальных закладок).
Во-первых, это простые приемы задания шрифтов (см. раздел «Работа с шрифтами»
данной главы) и, во-вторых, это применение атрибута style в якорных тегах. На пер-
вой группе приемов останавливаться не будем, считая, что читатель уже в состоянии
применить их самостоятельно. Рассмотрим только использование стилевых свойств яко-
рей (подробнее об этих свойствах вы можете узнать в главе «Листы стилей»).
Допустим, вы хотите для рассматривавшегося примера из раздела «Внутренние ссылки»
назначить отображение ссылок жирным шрифтом небольшими прописными буквами.
Тогда можете записать якорные теги в следующем виде:
<А href="#глав5"
style="font-weight:bold; font-variant:small-caps">
Глава 5. Великий комбинатор
</А>
Этот элемент содержит атрибут style, в котором определяются соответствующие
стилевые свойства font-weight («жирность» шрифта) и font-variant (вариант
начертания).
Цвет ссылки
По умолчанию браузер устанавливает определенное цветовое оформление ссылок. Раз-
работчик по своему усмотрению может изменить эти цвета. Поскольку ссылки оформ-
ляются единым образом для всего документа, атрибуты цвета ссылок вводятся в элемент
тела документа BODY. Различают следующие атрибуты цвета:
✓ link - устанавливает цвет неактивизированных ссылок, то есть ссылок, которые
еще не посещались;
✓ vlink - задает цвет просмотренных ссылок;
✓ al ink - определяет цвет активной ссылки, то есть ссылки, на которую наведен
указатель мыши.
Значением каждого из этих атрибутов может быть либо имя цвета, либо шестнадцате-
ричное число в формате #RRGGBB. Можно задать один, два или все три атрибута, при
62
ГЛАВА 2
этом для неопределенных атрибутов будут использованы значения по умолчанию. На-
пример, корректной является любая из следующих записей:
<BODY link="olive">
<BODY link="plum" alink=#800080>
<BODY vlink="green" alink="red">
Таблица имен и шестнадцатеричных кодов цветов приведена в разделе «Управление
цветом шрифта и фона страницы» данной главы.
Отметим, что атрибуты link, al ink и vlink в спецификации HTML 4.01 отме-
чены как устаревшие, поэтому часто вместо них применяется другой способ измене-
ния цвета ссылок, основанный на псевдоклассах (см. раздел «Псевдоклассы и псев-
доэлементы» главы 3).
Представление ссылки рисунком
Выше мы рассматривали примеры текстовых элементов привязки, в которых содержи-
мое ссылки отображалось на экране текстом. Если вместо текста ссылки используется
какой-либо рисунок, щелчок по которому приводит к переходу, то говорят о графиче-
ском элементе привязки.
Для отображения рисунка в контейнер <А> вставляется элемент IMG (см. раздел
«Вставка изображения» главы 5), например,
<А href="applehistory.html"><IMG scr=apple.gif></А>
где IMG - одиночный тег вставки изображения, а атрибут scr определяет файл-
источник изображения. Рисунок, представляющий ссылку, заключается в рамку того же
цвета, которым отображаются все ссылки в документе.
Всплывающая подсказка
Если вы хотите, чтобы пользователь получил информацию о содержании ссылки, не за-
гружая ее, создайте подпись к ссылке. Текст подписи будет появляться в виде всплы-
вающей подсказки при наведении указателя мыши на ссылку. Задается подпись с помо-
щью атрибута title якорного тега.
Рассмотрим простой пример, приведенный в предыдущем разделе. Добавим к графиче-
ской ссылке небольшую всплывающую справку:
<А href="applehistory.html"
title="WcTopna компьютеров Apple">
<IMG scr=apple.gif></A>
Однако нужно отметить, что атрибут title для элементов ссылок поддерживается
только браузером Internet Explorer. В браузере Netscape всплывающие подсказки не
отображаются.
Оформлениетекста
63
Применение многоязычного текста
В процессе разработки Web-страницы вам могут понадобиться тексты или их отдельные
фрагменты, написанные с применением разных языков. Указание языков, использован-
ных на странице, целесообразно по следующим причинам:
✓ ускорение работы поисковых серверов;
✓ улучшение качества отображения текста браузером благодаря выбору шрифтов, ха-
рактерных для используемых языков;
✓ правильное определение браузером начала и конца цитат;
✓ правильные расстановка переносов слов и распределение свободных полей с учетом
особенностей данного языка;
✓ если страница воспроизводится с применением речевых синтезаторов (для пользова-
телей с ослабленным зрением), то указание языка ускоряет загрузку страницы и
улучшает воспроизведение речи.
Указание языка, на котором составлен документ или его фрагмент, выполняется специ-
альным атрибутом lang. В качестве значения атрибута подставляется код языка в соот-
ветствии со стандартом ISO (Табл. 2.2).
Табл. 2.2. Коды наиболее распространенных языков
Язык Значение атрибута lang
Английский еп
Английский (США) en-US
Немецкий de
Русский ru
Украинский uk
Атрибут lang появился впервые в спецификации HTML 4.0.
Этот атрибут можно включать в состав всех (!) элементов
HTML, за исключением base, basefont, br, frame, frameset,
IFRAME, PARAM, SCRIPT.
Приведем несколько примеров указания языка. Начальный тег документа вида <HTML
lang="de"> означает, что документ составлен на немецком языке. А вот пример запи-
си цитаты на украинском языке <Q lang= "uk" >. Для указания языка отдельного абза-
ца атрибут lang вводится в состав начального тега абзаца <Р>. При этом нужно пом-
нить, что применение конечного тега </Р> или </Q> отменяет для последующего
текста назначение языка данного абзаца.
64
ГЛАВА 2
Направление чтения текста
Указание браузеру, в каком направлении необходимо читать текст, ускоряет вывод до-
кумента на экран и способствует его правильному отображению. Это касается докумен-
тов, составленных, например, на арабском языке или иврите.
Задание направления чтения выполняется атрибутом dir. Спецификацией HTML 4.01
утверждены следующие значения этого атрибута:
✓ Itr - чтение слева направо;
✓ rtl - чтение справа налево.
Как правило, атрибут dir используется в тегах совместно с атрибутом lang.
Кодирование символов
Заканчивая рассмотрение вопросов подготовки текста для Web, остановимся на спосо-
бах ввода специальных символов в код Web-страниц. Напомним, что HTML-код набира-
ется с помощью символов ASCII. Проблема состоит в том, что многие специальные сим-
волы отсутствуют в кодировке ASCII. Кроме того, не все браузеры понимают некоторые
символы.
Чтобы обойти эти ограничения, в стандарте HTML всем символам назначены опреде-
ленные коды - так называемые именные и числовые примитивы. Например, символу <
(меньше) соответствует именной примитив < и числовой примитив <. Знаку
тире соответствует, как вы уже знаете, примитив –, а также –. При за-
писи примитивов нужно придерживаться определенных правил:
✓ именной примитив любого символа начинается знаком & (амперсанд), а числовой
примитив - знаками &#;
✓ заканчиваются примитивы символов точкой с запятой (;);
✓ именные примитивы состоят из строчных букв латинского алфавита; кодировка типа
" или &Атр; не допускается.
Существует множество примитивов, предусмотренных стандартом HTML (см. Прило-
жение Г). Однако все эти примитивы по-разному поддерживаются программами браузе-
ров. Практически все версии популярных браузеров Internet Explorer и Netscape отобра-
жают числовые примитивы, в то время, как поддержка именных примитивов
ограничена.
Кодировки символов в виде стандартных последовательностей из перечисленных групп
вы можете включать в тексты HTML-документов. Браузеры будут отображать их в виде
общепринятых символов. Отметим, что символы текстовой разметки (<, >, " и др.), за-
писанные в цифро-символьной форме не воспринимаются браузерами как символы раз-
метки, а отображаются как обычные символы текста.
ГЛАВА 3.
Листы стилей
В предыдущих главах вы познакомились с простыми средствами подготовки текста для
Web-страниц - это создание абзацев, заголовков, назначение шрифтов и т.д. Однако
сравнение этих скромных средств с возможностями специализированных программ под-
готовки текстов (текстовых процессоров и издательских систем) говорит явно не в поль-
зу HTML. Связано это в первую очередь с тем, что в рамках HTML содержание Web-
страниц не может быть отделено от представления страниц на экране. Поясним, почему
так важно иметь средства форматирования, не зависимые от содержания документа.
Напомним, что при работе в текстовом процессоре (например, Word) вы можете произ-
вольным образом форматировать текст. Причем возможен перенос атрибутов формата
из одного документа в другой. Такая свобода появляется благодаря тому, что свое пред-
ставление о том, как должен выглядеть документ, вы можете сформулировать на языке
стилей. По мере необходимости можно создавать и редактировать стили, которые опре-
деляют размеры шрифта, отбивки абзацев, межстрочные интервалы и т.д. Заранее опре-
деленные стили могут применяться к любому форматируемому объекту (символу, слову,
абзацу, рисунку и проч.). В то же время имеется возможность уточнения формата для
конкретного объекта, которому был присвоен стиль.
Приблизиться к подобной технологии при создании Web-страниц позволяют листы сти-
лей, которые добавляются к обычным HTML-файлам. Возможности листов стилей даже
более широкие, чем возможности стилей обычного текстового процессора. Пользуясь
листами стилей, разработчик может с точностью до пиксела определить положение на
странице любого объекта, выполнять наложение одного объекта на другой, автоматизи-
ровать применение стилей к объектам и классам и т.д.
Понятие о листах стилей
Стандарты листов стилей для Web были разработаны консорциумом W3C в 1995-96 гг. и
названы Cascading Style Sheets (каскадные листы стилей), или сокращенно, СЖ. При-
сутствие слова «каскадные» в этом термине означает, что листы стилей позволяют соз-
давать иерархию стилевых свойств, согласно которой локальный стиль отменяет гло-
бальный стиль. Вообще, HTML-документ представляется как структура вложенных эле-
ментов различного уровня, в которой стиль элемента более низкого уровня имеет при-
оритет перед стилем внешнего элемента высокого уровня.
Поддержка листов стилей
Листы стилей позволяют освободиться от некоторых специфических элементов HTML,
которые консорциум W3C считает устаревшими и рекомендует использовать вместо них
свойства стилей из CSS (многочисленные примеры устаревших элементов вы найдете
в таблице Приложения А).
Однако листы стилей CSS не являются одним из разделов HTML. Не все браузеры под-
держивают CSS в полном объеме. Ситуация усугубляется еще тем, что существует не-
сколько типов листов стилей. В настоящее время все более популярным становится
66
ГЛАВА 3
расширяемый язык стилей XSL (extensible Style Language), который использует синтак-
сис языка XML (extensible Markup Language - расширяемый язык разметки).
Популярные браузеры Internet Explorer и Netscape, начиная с версий 4.0, обеспечивают
поддержку листов стилей CSS1 (Cascading Style Sheets Level 1 - листы каскадных сти-
лей, уровень /), хотя и в различной степени. К настоящему времени существует уже вто-
рая версия листов стилей CSS2. Вы можете ознакомиться со стандартом CSS2, посетив
сайт: http://www.w3.org/ TR/1998/REC-CSS2.
Как записывается стиль
HTML-документ представляет собой множество вложенных друг в друга элементов (на-
пример, элементы BODY, Р, Hl, Н2 и другие). Для каждого элемента предусмотрен до-
пустимый’ набор свойств, который определяется спецификацией HTML. В коде HTML
принято свойства записывать в виде атрибутов и их значений, которые указываются
в начальном теге каждого элемента.
Среди всех допустимых свойств элемента имеются такие, которые непосредственно свя-
заны со стилями, определяемыми с помощью CSS (например, гарнитура или цвет шриф-
та конкретного абзаца, цвет фона документа, размеры рисунка и т.д.). Такие свойства
называются стилевыми свойствами (или свойствами стиля).
Свойство стиля - это параметр стилевого оформления
документа, который определяется спецификацией CSS. Если
провести аналогию с синтаксисом HTML, то свойства, приме-
няемые в листах стилей, напоминают атрибуты тегов.
В листах стилей значение свойства присоединяется к стилю при помощи двоеточия. На-
пример, назначение красного цвета задается записью:
color:red
а определение размера шрифта осуществляется так:
font-size:14pt
Все пробелы между наименованием свойства и его значением браузером игнорируются,
поэтому приведенные выше назначения можно записать с промежуточными пробелами:
color: red или font-size: 14pt.
Значения свойств стиля записываются, вообще говоря, без ка-
вычек. Однако если значение состоит из нескольких слов с про-
белами (например, наименование шрифта), то кавычки (одинар-
ные ' или двойные ") ставятся.
Листы стилей 67
Определение встроенного стиля (атрибут style)
Прежде, чем рассматривать использование CSS, остановимся на простейшем способе
задания стиля элемента HTML через атрибут style. Вы можете в процессе разработки
страницы быстро изменить стиль элемента, добавив к тегу атрибут style с указанием
требуемых свойств. Допустим, вы хотите, чтобы абзац был набран шрифтом 6 пункта.
Для этого тег <Р> нужно записать следующим образом:
<Р style="font-size:6pt">
При отображении элемента Р браузер согласно этой записи заменит размер основного
шрифта, принятого по умолчанию, на шрифт 6 пунктов. Приведенный способ формати-
рования называется встроенным стилем.
Встроенный стиль можно применять к строковым элементам (например, SPAN). Сле-
дующий код присваивает красный цвет одному слову в заголовке:
<H1><SPAN style="color:red">Защита</ЗРАЫ>
компьютерных сетей</Н1>
Вы можете установить встроенный стиль для блока, при этом свойства стиля будут при-
менены ко всем элементам, входящим в блок, например,
<DIV style="font-family:serif; color:brown">
<Н1>Часть первая</Н1>
<Н2>Глава 1</H2>
<НЗ>НИКОГДА НЕ РАЗГОВАРИВАЙТЕ С НЕИЗВЕСТНЫМИ</НЗ>
В час жаркого весеннего заката на Патриарших прудах появи-
лось двое граждан.
<BR><BR>
<С1ТЕ>М. Булгаков<С1ТЕ>
</DIV>
Зо всех вложенных элементах Hl, Н2, НЗ, CITE будет использован шрифт семейства
serif коричневого цвета. Это произойдет согласно правилам наследования, о которых
1Ы поговорим несколько позже (см. раздел «Правила наследования свойств» настоящей
лавы).
Значения атрибута style обязательно заключаются в кавычки
(одинарные 1 или двойные "), причем свойства отделяются друг
от друга точками с запятой (пробелы не обязательны).
Нетрудно заметить, что описанное введение стиля мало чем отличается от форматирова-
ли! средствами HTML. В то же время встроенный стиль - это простейший способ зада-
ния стилевых свойств, который можно оперативно применить к отдельным элементам
68
ГЛАВА 3
в процессе создания Web-страниц. При этом нужно учитывать, что встроенные стили все
же нарушают основную концепцию CSS, заключающуюся в том, что форматирование
документа должно быть отделено от его содержания.
Формирование листа стилей
Вы познакомились с правилами записи стилевых свойств и с простейшим способом при-
своения стиля с помощью атрибута style. Теперь рассмотрим общие правила опреде-
ления и присвоения стилевых свойств, предусмотренные CSS.
CSS-правила
Согласно спецификации CSS стилевые свойства вводятся с помощью определения сти-
ля, которое принято обозначать фигурными скобками. Например, назначение курсивного
начертания текста выполняется с помощью определения
{font-style:italic}
В одном определении стиля может записываться несколько свойств. Свойства перечис-
ляются через точку с запятой, например:
{color:blue; font-family:Arial; text-align:right}
Согласно спецификации CSS назначение стиля тому или иному элементу HTML состоит
в установлении связи:
Элемент {Определение_стиля}
Например, если вы хотите, чтобы все элементы абзацев Р отображались шрифтом Arial
размером 14pt, запишите следующую строку:
Р {font-family:Arial; font-size:14pt}
Приведем еще один пример - это назначение стиля элементу, обозначенному в докумен-
те идентификатором id="fl". Пусть этот элемент вводит в документ рисунок, и вы
хотите, чтобы последний имел определенные размеры: 150 пикселов в ширину и
100 пикселов в высоту. Это достигается с помощью следующего кода:
#fl {width:150;
height:100}
Элемент, к которому относится определяемый стиль, обобщенно называется селек-
тором. В предыдущих двух примерах селекторы были представлены именами
HTML-элементов Р и идентификатором fl. О возможных видах селекторов и пра-
вилах их записи пойдет речь позже (см. раздел «Виды селекторов»). Пока мы только
отметим, что селекторы, записанные прописными буквами, обозначают классы, а
селекторы, начинающиеся со знака # («рамка»), отвечают уникальным идентифика-
торам элементов.
Листы стилей
69
Селекторы обозначаются по имени элементов, к которым применяется определение сти-
ля. Например, селектор TABLE указывает на то, что определение стиля относится к
элементам TABLE. Селекторы нечувствительны к регистру, однако мы будем придержи-
ваться принятой в CSS записи элементов прописными буквами.
Запись, состоящая из селектора и определения стиля, называ-
ется CSS-правилом. Листы стилей - это фактически наборы
CSS-правил, которые задают свойства форматирования эле-
ментов документа.
О том, как связываются листы стилей с HTML-документом, мы расскажем в последую-
щих разделах.
Внутренние и внешние листы стилей
Ранее мы рассмотрели простейший способ стилевого форматирования с помощью вве-
дения встроенных стилей для элементов HTML (см. раздел «Определение встроенного
стиля (атрибут style)»). Однако встроенные стили имеют существенный недостаток -
они не позволяют отделить средства форматирования документа от его содержания.
Кроме того, объявления встроенного стиля приходится повторять для каждого формати-
руемого элемента на протяжении всего документа.
От этих недостатков свободен другой способ введения стилей - это размещение листа
стилей в заголовочной части документа (в элементе HEAD). Согласно этому способу,
называемому заголовочным стилем, можно единым образом управлять представлением
всего документа. Для изменения отображения одинаково оформленных элементов (абза-
цев, заголовков, рисунков и т.д.) достаточно один раз изменить соответствующие свой-
ства в листе стилей.
Встроенные и заголовочные стили относятся согласно специ-
фикации CSS к внутренним листам стилей. Это название ука-
зывает на то, что определение стилей выполняется в рамках
одного документа. В то же время возможно задание стилей в
отдельном файле с расширениями .css или .jss. Такой способ on-
ределения называется внешним листом стилей (см. раздел
«Внешние листы стилей»).
Введение заголовочного стиля (элемент STYLE)
Как отмечалось выше, CSS представляет собой язык описания информации о стиле фор-
матирования элементов HTML-документа. Поэтому по отношению к HTML-документу
листы стилей CSS являются инородными элементами. Для размещения информации
о стиле применяется специальный контейнер <STYLE></STYLE>, который вставляется
в заголовочную часть документа и имеет вид:
70
ГЛАВА 3
<STYLE type="text/css">
<!-- Описание листа стилей -->
</STYLE>
В этом коде значение text/css атрибута type сообщает браузеру, что в текущем
файле применен текст на языке CSS. Все формальные описания стилей, представляющие
собой CSS-правила, помещаются в элемент STYLE. В результате заголовок HTML-файла
может, например, иметь вид:
<HEAD>
<Т1ТЬЕ5-Внутренние листы стилей</Т1ТЬЕ>
<STYLE type="text/css">
<!-- Ниже следует описание стилей -->
Н2 {font-size:15pt)
Н2.curs {font-size:16pt;
font-style:italic)
#zelen {background-color:green;
color:white)
</STYLE>
<!-- Конец описания стилей -->
</HEAD>
Забегая вперед, поясним определения стилей в этом примере. Все элементы Н2 бу-
дут отображены шрифтом размера 15pt, а некоторые элементы Н2, выделенные
в класс curs, будут представлены курсивом с размером 16pt. В то же время элемент,
обозначенный идентификатором ID="zelen", будет выведен белым шрифтом на
зеленом фоне.
Сопоставление CSS-правил с конкретными элементами документа выполняется с помо-
щью атрибутов class или id. Приведенный выше пример листа стилей может приме-
няться к такому элементу BODY:
<BODY>
<Н2>Заголовок Н2</Н2>
<Н2 class="curs">Первый заголовок класса curs</H2>
<Н2 id="zelen">3aronoBOK zelen </Н2>
<Н2 class="curs">BTopow заголовок класса curs</H2>
</BODY>
В итоге задание внутреннего листа стилей и его использование в основной части BODY
приводит к внешнему виду документа, показанному на Рис. 3.1.
Листы стилей
71
-------------------------------------------------
Заголовок Н2
Первый заголовок класса curs
Заголовок / Лев
Второй заголовок класса curs
Готово
FTW Мои компьютер
Рис. 3.1. Пример страницы с внутренним листом стилей
Виды селекторов
В спецификациях CSS определено несколько видов селекторов, основные из них были
использованы в примере предыдущего раздела. Рассмотрим возможные виды селекторов
подробнее.
Селекторы типа
Селектор типа устанавливает соответствие между определением стиля и типом HTML-
элементов, к которым этот стиль будет применен. Например, CSS-правило
Р {font-family:arial;
font-size:14pt)
использует селектор типа и задает шрифт для всех абзацных блоков HTML, а другое правило
Н2 {font-family:monospace;
background-color:magenta}
определяет для всех заголовков второго уровня Н2 моноширинный шрифт и пурпур-
ный фон.
Селекторы класса
HTML-элемент или группа элементов, оформленных одним стилем, образуют класс.
Например, элементы заголовков второго уровня, одинаково форматируемые, состав-
ляют класс.
Класс может обозначаться так же, как и тип HTML-элемента, например, абзацы до-
кумента образуют класс р. Однако чаще классу присваивается формальное имя, ко-
торое в дальнейшем будет связано с определенным набором стилевых свойств. До-
пустим, вы можете заголовки первого уровня Н1 синего цвета сгруппировать в класс
с именем blue:
72
ГЛАВА 3
Hl.blue {color:blue)
Имя класса отделяется от имени элемента точкой. Другой пример задания класса был
приведен в разделе «Введение заголовочного стиля (элемент STYLE)»
Н2.curs {font-size:16pt;
font-style:italic}
Как видим, в состав класса входят не все элементы одного типа (Н2), а только те, кото-
рые форматируются одинаковым стилем. В то же время одному и тому же классу могут
принадлежать разнотипные HTML-элементы. Допустим, вы хотите задать отображение
разных элементов (абзацев Р, блоков DIV и т.д.) на желтом фоне. Для этого в список
стилей вводится CSS-правило с точкой перед именем класса, но без указания названия
элементов, например,
.bgyellow {background-color:yellow}
Селектор .bgyellow обозначает класс, а выражение в фигурных скобках - определе-
ние стиля, которое будет относиться к любому элементу класса bgyellow. Принадлеж-
ность HTML-элемента этому классу должна быть указана в атрибуте class, например:
<DIV class="bgyellow">
<Р class="bgyellow">
<SPAN class="bgyellow">
Селекторы, относящиеся к любому элементу документа, в спецификации CSS2 принято
называть универсальными селекторами.
Классам можно присваивать произвольные имена, но лучше зада-
вать имена, косвенно указывающие на набор и значения стиле-
вых свойств. Например, для класса блоков, отображаемых на
желтом фоне, вместо абстрактного имени block лучше ис-
пользовать имя yellowblock или просто yellow.
Все элементы с атрибутом class, имеющиеся в документе, будут отображены с приме-
нением стиля, который задается селектором класса. Понятно, что имя класса должно
совпадать со значением атрибута class.
Селекторы id
При разработке Web-страницы часто возникает необходимость изменить стиль только
одного элемента (не затрагивая стилей других однотипных элементов). Проще всего это
сделать следующим образом. Задайте с помощью селектора id индивидуальный стиль,
и этот стиль будет автоматически присвоен конкретному элементу, помеченному иден-
тификатором id.
Например, чтобы выделить красным цветом текст абзаца, обозначенного идентификато-
ром id= "pari", можно воспользоваться следующим CSS-правилом:
Листы стилей
73
#red {color:FFOOOO}
Нужный элемент абзаца должен содержать одноименное значение атрибута id:
<Р id="red">3TOT абзац будет отображен красным шрифтом</Р>
Как известно, особенность атрибута id заключается в уникальности его значения. Дру-
гими словами, в одном документе этот атрибут с определенным значением может встре-
чаться только один раз.
Признаком селектора id является символ перед именем. Се- sySfc
лектор id применяется в пределах тела документа body для S
: задания индивидуального стиля оформления конкретного эле-
: мента. В этом состоит его отличие от селектора класса. eqgasz’’
Обратите внимание, что значения атрибутов class и ide тегах HTML записываются в
одинарных (' )или двойных кавычках ("). Селектор класса и селектор id в листе стилей
указываются без кавычек.
Стилевые свойства
Итак, вы уже имеете представление о том, как формируются листы стилей. Основой соз-
дания листов стилей является определение стилевых свойств и назначение их селекто-
рам. В спецификации CSS имеется более 50 различных свойств, полный их перечень вы
сможете найти по адресу: http://www.w3.org/style/.
Значения свойств
Напомним, что в определении стиля (см. раздел «Как записывается стиль») указываются
наименования свойств и их значения. Различают числовые и символьные значения
свойств.
Числовые значения применяются для задания размеров, например, ширины и высоты
блока, размера шрифта, толщины рамки, межстрочных интервалов и т.д. Значение
выражается десятичным числом, за которым обычно следует размерность. Размер-
ность записываются после числа без дополнительного пробела, например, 8pt, 1cm,
2.5in, 130%. В случае отрицательного значения перед числом ставится знак минус
(например -15рх).
Числовые значения могут выражаться в абсолютных или относительных единицах
(Табл. 3.1):
✓ абсолютные значения задают точный размер элемента и приводятся в стандартных
единицах измерения длины, например, в дюймах, сантиметрах или миллиметрах;
✓ относительные значения определяют размер элемента относительно другого
элемента. Например, ширина изображения может выражаться в процентах отно-
74
ГЛАВА 3
сительно ширины блока, в который вложен рисунок, или относительно размера
окна браузера. Межсимвольный интервал часто задается в единицах ет ширины
символа основного шрифта (буквы «т»). Другие единицы относительных значе-
ний приведены в Табл. 3.1.
Табл. 3.1. Единицы измерения значений свойств
Условное обозначение Наименование единицы измерения Пример
Абсолютные единицы
in ДЮЙМ width:.25in
cm сантиметр height:1.5cm
mm миллиметр margin-left:12mm
pt пункт (lpt= l/72in) font-size:16pt
pc пик (lpc = 12pt) line-height:1.2pc
Относительные единицы
px пиксел left:200px
em ширина буквы «т» letter-spacing:0.3em
ex высота буквы «х» font-size:2ex
% процент width:150%
Символьные значения состоят из букв латинского алфавита или из комбинаций букв,
цифр и специальных символов. Форма записи определяется стандартом CSS. Символь-
ные значения присваиваются многим стилевым свойствам, например, свойствам шриф-
тов font-family (гарнитура шрифта) и font-style (стиль вывода шрифта), свойст-
ву текста text-align (выравнивание). Другим примером использования символьных
значений являются свойства цвета color и background-color, значения которых
задаются в символьном формате RGB-модели (см. раздел «Цветовая модель RGB и фор-
маты описания цвета» главы 2). Отметим, что в CSS для описания цвета применяются и
другие форматы RGB-модели, которые не поддерживаются в HTML: десятичный фор-
мат (например, rgb(12 8,0,128)) и процентный формат (например,
rgb (50%, 0,50%)).
Свойства шрифтов
Свойства, вводимые листами стилей, условно можно разбить на группы (например,
группа свойств текста или группа свойств шрифтов). Мы ограничимся рассмотрением
свойств, которые наиболее часто используются разработчиками Web-страниц.
В CSS предусмотрено множество свойств для управления шрифтами (задание гарниту-
ры, размера, начертания и т.д.). Эти свойства можно назначать вместе со свойствами,
определяющими цвет шрифта, фон, отступы, межсимвольное расстояние. Рассмотрим
кратко только свойства шрифтов.
Листы стилей
75
✓ font-family - задает гарнитуру шрифта, которая будет использована для вывода
текста. Значением этого свойства может быть название конкретного шрифта (напри-
мер, Arial) либо название семейства шрифтов. В спецификации CSS предусмотрены
следующие семейства: serif (например, Times New Roman, Bodoni), sans-serif
(например, Arial, Futura, Helvetica), cursive (например, Caflisch Script, Zapf-
Chancery), fantasy (например, Alpha Geometrique, Western), monospace (напри-
мер, Courier New). При определении свойства font-family можно указывать спи-
сок шрифтов, разделенных запятыми, аналогично тому, как это делается при задании
атрибута face (см. раздел «Выбор гарнитуры шрифта (атрибут face)» главы 2);
✓ font-size - определяет размер шрифта. Значение размера может быть задано
в абсолютных единицах (например, 1 Opt, 8mm, 2in), в процентах от основного шриф-
та (например, 130%), а также с помощью размерных выражений. К таким выражени-
ям относятся: хх-small (сверхмелкий), х-small (очень мелкий), small (мел-
кий), medium (средний), large (крупный), х-large (очень крупный), хх-
large (сверхкрупный), larger (крупнее), smaller (мельче);
✓ font-style - задает стиль вывода символов. Возможны следующие значения этого
свойства: normal (обычный), italic (курсив) и oblique (наклонный);
✓ font-weight - назначает вес или степень «жирности» шрифта. Для этого исполь-
зуются целые числа из диапазона от 100 до 900 с шагом 100 единиц. Однако чаще
применяют ключевые слова: bold (жирный), bolder (более жирный) и lighter
(более тонкий);
✓ font-variant - указывают вариант начертания текущего шрифта. Для этого
свойства браузеры поддерживают только два значения: small-caps (отображение
малыми прописными буквами) и normal (не влияет на отображение).
Приведем примеры задания свойств шрифта:
Р {font-family: helvetica, arial)
STRONG {font-size: 150%)
DIV.mono {font-family: monospace;
font-size: larger;
font-variant: small-caps}
Кроме рассмотренных выше свойств шрифтов, имеется еще одно - font. Это «обоб-
щающее» свойство шрифта, в котором может быть указано значение любого атрибута
шрифта (font-family, font-size, font-style и т.д.). Для этого значения
свойств упорядочиваются в виде последовательности (см. раздел «Сокращенная форма
записи» настоящей главы).
Наименования свойств не чувствительны к регистру символов. На-
пример, записи font-style и Font-STYLE будут интерпретированы
браузером одинаково как свойство шрифта. Однако обычно исполь-
зуют строчные символы, как принято в спецификации CSS.
76
ГЛАВА 3
Свойства текста
Понятно, что задать шрифт - еще не значит определить внешний вид всего текста. Необ-
ходимо также указать свойства, отвечающие за межстрочный интервал, расстояние между
словами и буквами и т.д. Эти свойства, называемые свойствами текста, определяются
для абзацев и даже для всего документа, то есть задаются на уровне блоков (Р, DIV,
BODY). Но можно их задавать и для отдельных слов или нескольких букв, то есть на уров-
не строковых элементов (SPAN, STRONG и др.). Как и при рассмотрении шрифтовых
свойств, кратко перечислим свойства текста, предусмотренные спецификацией CSS.
✓ letter-spacing - устанавливает расстояние между буквами (межсимвольный ин-
тервал). По умолчанию этому свойству присваивается значение normal. Разработчик
может указать расстояние в любых абсолютных единицах (см. Табл. 3.1);
✓ word-spacing - устанавливает расстояние между словами. Аналогично letter-
spacing значением этого свойства по умолчанию считается normal. Иные значе-
ния могут быть заданы в абсолютных единицах (например, Юрх, 2mm);
✓ text-indent - задает отступ первой строки абзаца («красную строку»). Это свой-
ство применяется к блокам, и его значение выражается в абсолютных единицах (на-
пример, 4mm, 1cm, 20pt и т.д.) либо в процентах от ширины блока (например, 5% или
10%). По умолчанию значение свойства text-indent равно нулю. Если этому
свойству присвоить отрицательное значение, то вместо абзацного отступа получим
выступ первой строки;
✓ text-align - задает горизонтальное выравнивание для текста, размещенного
внутри элемента (например, Р или DIV). Это свойство принимает значения: center
(по центру), left (влево), right (вправо) и justify (по ширине). По умолча-
нию текст выравнивается по левому краю. Эффект выравнивания особенно заметен
при большом размере шрифта и малой ширине окна браузера;
✓ vertical-align - устанавливает расположение текста и рисунков по вертикали
относительно базовой линии. Свойство может принимать, например, следующие зна-
чения: baseline (выравнивание по базовой линии, принимается по умолчанию),
sub (выравнивание по линии нижнего индекса), super (выравнивание по линии
верхнего индекса);
✓ line-height - определяет межстрочный интервал. Значение этого свойства мож-
но задавать в абсолютных единицах (например, 16pt, 3mm), в процентах (130%), а
также количеством строк (например, 1.7 или 3).
В качестве примера совместного использования свойств текста и шрифтов приведем
HTML-код страницы, содержащей блочные и строчные элементы с различными значе-
ниями параметров форматирования.
<HTML>
<HEAD>
<Т1ТЬЕ>Свойства шрифтов и текста</Т1ТЬЕ>
</HEAD>
<BODY>
Листы стилей
< Р style="font-family:Helvetica Cyr; font-size:12pt;
font-style:italic">
Абзац, который воспроизведен курсивным
шрифтом Helvetica, имеющим размер 12pt.
< Р style="font-family:Helvetica Cyr; font-size:larger;
font-variant:small-caps”>
Этот абзац воспроизводится шрифтом Helvetica,
имеющим размер larger и начертание small-caps.
< Р style=”font-weight:bold”>
Это пример набора формулы, имеющей
верхний и нижний индексы: S
<SPAN style="vertical-align:sub">
result
</SPAN>
= Ax
<SPAN style="vertical-align:super">
2</SPAN>.
< P style="font-weight:bold; text-indent:12mm">
Данный абзац имеет отступ 12 мм,
текст отображается полужирным шрифтом
<SPAN style="letter-spacing:3pt">
Times New Roman
</SPAN>,
причем название шрифта набрано с разрядкой
– межсимвольным расстоянием 3pt.
< Р style="font-size:large; line-height:9pt">
Этот абзац демонстрирует стилевые возможности
по отображению klaquo;наехавших&гадио; строк.
Размер шрифта large, межстрочный интервал 9pt.
</Р>
<BRxBR>
< Р style="font-size:12pt; text-indent:-15mm;
line-height:20pt; margin-left:15mm">
Данный абзац имеет межстрочный интервал 2Opt
и отображается шрифтом 12pt.
Первая строка имеет klaquo;выступ&гадио;15 мм.
Чтобы этот «выступ&гадио;
поместился в окно браузера,
для блока Р задано левое поле 15 мм.
</BODY>
</HTML>
78
ГЛАВА 3
На Рис. 3.2 показано, к каким эффектам приводит данное назначение стилей. Здесь
нами использованы уже описанные стилевые свойства. Новым свойством является
только margin-left, которое задает левое поле для последнего блока абзаца Р.
Свойства, определяющие поля блоков, будут рассмотрены позже.
Рис. 3.2. Примеры задания стилевых свойств шрифта и текста
Свойства цвета и фона
Для работы с цветом и фоном в спецификации CSS1 предусмотрено несколько свойств.
Эти свойства позволяют легко задавать различные цвета шрифтов, а также создавать
в документе области с различными цветами фона и фоновыми изображениями. Перечис-
лим свойства цвета и фона.
✓ color - устанавливает цвет шрифта. Простым примером задания красного цвета
шрифта для абзаца является тег
<Р style="color:red">
✓ background-color - задает цвет фона, на котором выводится элемент.
По умолчанию это свойство имеет значение попе. Часто свойство
background-color используется совместно со свойством color, определяю-
Листы стилей
79
щим цвет текста. Следующие два тега задают цвет olive для фона всего
документа и цвет yellow для первого абзацного блока:
<BODY style="background-color:olive">
<P style="color:yellow">
Отметим, что употребление стилевого свойства background-color в данном слу-
чае эквивалентно использованию атрибута bgcolor для элемента BODY. Вместо
названия свойства background-color в листах стилей можно указывать его со-
кращение background, например, style= "background:red";
✓ background-image - определяет вставку фонового изображения. Значением этого
свойства является URL рисунка, например, следующее CSS-правило
.род {background-image: url(myfig.jpg);
задает для элементов класса род фоновый рисунок, хранящийся в файле
myfig.jpg. Если изображение прозрачное, то через него будут видны нижние объ-
екты страницы. Чтобы этого не происходило, совместно с рассматриваемым свойст-
вом задается цвет фона (например, white);
✓ background-repeat - назначает повтор фонового рисунка. Это свойство приме-
няется, если размер рисунка меньше видимой области элемента. Если вы хотите, что-
бы рисунок повторялся по горизонтали и по вертикали, задавать свойство
background-repeat не требуется (оно по умолчанию имеет значение repeat).
Для повторения рисунка только по горизонтали выбирается значение repeat-х,
только по вертикали - repeat-у, а для отключения повторения - значение по-
repeat.
Приведем пример создания фонового изображения без повторения (Рис. 3.3, а) и
изображения, которое выкладывается с повторением по горизонтали (Рис. 3.3, б). Кроме
рисунков, в документе определен однородный желтый фон.
Рис. 3.3. Создание фоновых изображений:
а - свойство background-repeat: no-repeat;
б - свойство background-г epea t: repea t -x
80
ГЛАВА 3
Странице с одним фоновым изображением, показанной на Рис. 3.3, а, отвечает следую-
щий код:
<HTML>
<HEAD>
<Т1ТЬЕ>Фоновый рисунок</Т1ТЬЕ>
<STYLE type="text/css">
Hl{color:red}
BODY {background-image:url(telecom.jpg);
background-color:yellow;
background-repeat:no-repeat}
</STYLE>
</HEAD>
<BODY>
<Н1>Пример фонового изображениж/Н1>
</BODY>
</HTML>
Код документа с фоновыми рисунками, повторяющимися вдоль оси х, отличается от при-
веденного только заменой значения свойства background-repeat на repeat-x.
Свойства блока
Текстовые HTML-элементы можно представить в виде прямоугольных блоков. К таким
элементам относятся Р, DIV и даже тело документа BODY. Для них в CSS предусмотрена
специальная группа свойств, которая позволяет задавать поля, границы, отступы, разме-
ры блока. Рассмотрим по отдельности каждое из свойств блока.
✓ margin - это ключевое слово обозначает набор свойств, определяющих каждое из
четырех полей вокруг блока. В набор входят свойства margin-top (верхнее поле),
margin-right (правое поле), margin-bottom (нижнее поле), margin-
left (левое поле). К свойствам поля относится также и margin, позволяющее
одной строкой задать значения всех четырех полей. Значения полей выражаются
в абсолютных числах (например, 50pt, 10em) или в процентах от ширины блока
(например, 70%). Возможно значение auto, при котором браузер сам подбирает
оптимальное поле;
✓ border - обозначает набор свойств отображения границы элемента. Различают
свойства border-style (управление выводом границы), border-width (шири-
на границы), border-color (цвет границы). Свойства границ могут применяться
не только к блочным элементам, но и к строчным элементам (например, SPAN). При
этом строчный элемент автоматически превращается в блок, отделенный от осталь-
ного текста пустыми строками;
Значениями свойства border-style являются dotted (граница из точек),
dashed (пунктирная граница), solid (обычная сплошная граница), double
Листы стилей 81
(двойная линия), groove («утопленная» линия границы), ridge (выпуклая грани-
ца), insert (объект, «вдавленный» в страницу), outset (выпуклый объект).
Ширину границы (свойство border-width.) можно задавать как в абсолютных
единицах (например, Зрх), так и с помощью ключевых слов: thin (тонкая),
medium (средняя) и thick (толстая).
Цвет границы (свойство border-color) определяется символьным названием цве-
та, шестнадцатеричным кодом #RRGGBB, в десятичном формате (например,
rgb (56,2 8,18)) или процентном формате (например, rgb (25%, 30%, 70%));
✓ padding - определяет просвет между содержимым блока и границей. Для каждой
границы имеется свое свойство: padding-top, padding-right, padding-
bottom и padding-left. Значение свойства задается в абсолютных единицах (на-
пример, 1cm, 5mm, 10pt);
✓ width и height - задают соответственно ширину и высоту блока без учета отсту-
пов, границ и полей. Эти свойства указываются в абсолютных единицах (mm, cm, pt
и т.д.), а ширину можно задавать также в процентах. Когда речь идет о текстовом
блоке, высоту можно вообще не определять, при этом свойству height присваива-
ется значение по умолчанию - auto. Если при абсолютной единице отсутствует раз-
мерность (например, weight: 100), то считается, что размер указан в пикселах. От-
метим, что свойства width и height наиболее естественно использовать для
форматирования изображений;
✓ float - определяет размещение текущего элемента по горизонтали по отношению
к внешнему элементу. Например, если это свойство задано для рисунка IMG, за кото-
рым следует текстовый блок, то float будет задавать обтекание рисунка текстом.
Свойство float принимает значения left (размещение элемента слева), right
(размещение элемента справа) и попе (отсутствие обтекания при размещении эле-
мента вдоль левой границы документа);
✓ clear - отменяет действие свойства float. Если, например, было задано разме-
щение рисунка вдоль левой границы с обтеканием текстом, то значение
clear: left отключит это обтекание. Аналогично применяется значение
clear: right для элемента, размещенного вдоль правой границы. Отключить обте-
кание по обеим сторонам можно значением both.
В качестве примера рассмотрим форматирование страницы, на которой размещен
рисунок (Рис. 3.4). Зададим обтекание рисунка, записав следующий код:
<HTML>
<HEAD>
<Т1ТЬЕ>Свойства float и clear</TITLE>
<STYLE type="text/css ">
#figl {float:left; margin-right:3mm; margin-top:3mm)
#podpis {clear:both)
</STYLE>
</HEAD>
82
ГЛАВА 3
<BODY>
<Р>
Значительно более совершенная модель персонального ком-
пьютера была разработана в 1976 г. двумя молодыми амери-
канцами Стивом Возняком и Стивом Джобсом.
<А href="applehist.html" title="История компьютеров Арр1е">
<IMG SRC="apple.gif" ID="figl"></A>
<P>
Свой компьютер они назвали Apple и быстро развернули его
производство и продажу. Через пару лет количество заказ-
чиков на ПК стало исчисляться сотнями и тысячами.
<Р ID="podpis"><1>Компьютер Apple !!</!>
<Р>
Персональные компьютеры быстро совершенствовались. В
1976 г. для них была разработана операционная система
СР/М. Эта система позволила запускать одни и те же про-
граммы на различных моделях 8-разрядных компьютеров.
</BODY>
</HTML>
Здесь в листе стилей задано обтекание изображения (идентификатор ID="figl"),
причем зазор между текстом и границами рисунка определяется свойствами margin-
right и margin-top. Обтекание для подрисуночной подписи (ID="podpis") от-
меняется свойством clear:both. Строка подписи при этом располагается ниже
изображения. На Рис. 3.4 показан внешний вид данной страницы.
Рис. 3.4. Пример задания обтекания текстом
Листы стилей 83
Рассмотрим другой пример форматирования текста (Рис. 3.5), в котором эффект объ-
емности шрифта создается за счет наложения отображения букв, смещенных друг
относительно друга.
Рис. 3.5. Создание эффекта объемного текста
Приведем HTML-код страницы, содержащей «объемный» текст:
<HTML>
<HEAD>
<Т1ТЬЕ>0бъемные символы</Т1ТЬЕ>
<STYLE type="text/css">
.string {margin-top: -38px;
margin-left: 8px;
color: red;
font-size: 28px;
font-family: Arial Black)
.shadow {color:darkred;
margin-left:lOpx;
font-size:28px;
font-family:Arial Black)
</STYLE>
</HEAD>
<BODY>
<Н2>Примеры создания объемных 6yKB</H2xHRxBR>
<DIV class="shadow" style="color:gray; font-
style: italic">
SGML</DIV>
<DIV class="string" style="color:silver; font-
style: italic">
84
ГЛАВА 3
SGML</DIV>
<DIV class="shadow">
HTML</DIV>
<DIV class="string">
HTML</DIV>
<DIV class="shadow" style="color:blue">
JavaScript</DIV>
<DIV class="string" style="color:lightblue">
JavaScript</DIV>
</BODY>
</HTML>
Свойства списков
Листы стилей позволяют управлять отображением списков: задавать гарнитуру, размер
и цвет шрифта, выбирать вид маркеров (кружок, квадратик, рисунок и т.д.).
Мы рассмотрим свойства, предназначенные для форматирования маркеров списков:
list-style-type, list-style-image, list-style-position. Сокращенная
форма записи этих трех свойств имеет вид list-style.
✓ list-style-type - задает маркеры для упорядоченных (нумерованных) и не-
упорядоченных (маркированных) списков. Набор допустимых значений свойства
list-style-type включает 22 значения, многие из которых пока еще не поддер-
живаются распространенными браузерами. Поэтому остановимся только на часто ис-
пользуемых значениях:
square - маркер в виде квадратика □;
circle - кружок О;
disc - затемненный кружок • (значение по умолчанию);
decimal - десятичные числа, начиная с 1;
lower-roman - строчные римские цифры, например, i, ii, iii;
upper-roman - прописные римские цифры, например, I, II, III;
lower-latin или lower-alpha - строчные латинские буквы, например, а, b, с);
upper-lat in или upper-alpha - прописные латинские буквы, например, А, В, С;
попе - маркер не отображается;
✓ list-style-image - задает маркер в виде картинки (изображения). Например,
правило UL {list-style-image :url ("mymarker. gif") } устанавливает для
маркеров изображение, которое хранится в файле mymarker .gif;
✓ list-style-position - устанавливает позицию маркера в строке списка. Зна-
чение этого свойства обычно задает дополнительный отступ перед каждой строкой
списка. Вы можете применять два значения: outside (маркер отображается за пре-
делами области строки списка) или inside (маркер находится внутри области спи-
ска). По умолчанию принимается значение outside.
Листы стилей
85
Дадим некоторые пояснения относительно использования первого из перечисленных
свойств - list-style-type. Это свойство можно применять ко всему списку сразу
.в составе элементов OL или UL) или к отдельным строкам (в теге <Ы>). Например,
список с нумерацией строк с помощью строчных римских цифр задается тегом
<OL style="list-style-type:lower-roman">
дли CSS-правилом
UL {list-style: lower-roman}
Для выделения отображения отдельной строки списка можно воспользоваться встроен-
ным стилем. Например, тег
<LI style="list-style-type:circle">
адает отдельную строку, маркированную кружком о.
Приведем пример использования стилевых свойств при оформлении маркированного
.лиска (Рис. 3.6):
<HTML>
<HEAD>
<Т1ТЬЕ>Стили списка</Т1ТЬЕ>
<STYLE type="text/css">
UL {list-style-position:inside;
list-style-image:url("Newz.gif");
color: red;
font-size: 20px;
font-family: Arial Black}
</STYLE>
</HEAD>
<BODY>
<Н2>Пример оформления списка с помощью
стилей</Н2><НЕ><ВР.>
<UL>
<LI>ApxMB</LI>
<LI>PaccbiHKa</LI>
<В1>Подписаться</В1>
</UL>
</BODY>
</HTML>
86
ГЛАВА 3
Стили списка - Microtoft Internet Ex pi* г er
E
j Файл Прагма Вид Избранное Сервис ^правка
Пример оформления списка с помощью стилей
Архив
Рассылка
- Подписаться
4?) Готово
Мои компьютер
Рис. 3.6. Оформление маркированного списка
Другие группы стилевых свойств
Кроме рассмотренных выше свойств стилей, в спецификации CSS имеются и другие,
реже используемые свойства. Среди них назовем, прежде всего, свойство display, ко-
торое определяет отображение элементов документа. Обычно это свойство используется
со значением попе, отключающим вывод элемента на экран. Другие значения этого
свойства позволяют превратить абзац в строчный элемент (значение inline), преобра-
зовать строчный элемент в блок (значение block), заставить элемент «вести себя» как
список (значение list-item). Однако подобные преобразования затрудняют анализ
страницы Web-разработчиками и редко идут на пользу.
В CSS имеется группа свойств пользовательского интерфейса, в которую входит, на-
пример, cursor. Данное свойство определяет форму указателя мыши, которую он при-
нимает при наведении на форматируемый элемент. Перечислим лишь некоторые значе-
ния этого свойства: hand (рука), crosshair (перекрестие), move (перекрестие со
стрелками, отвечающее возможности перемещения объекта), e-resize и w-resize
(горизонтальные оконтуренные стрелки), n-resize и s-resize (вертикальные окон-
туренные стрелки), ne-resize и nw-resize (наклонные оконтуренные стрелки),
help (стрелка со знаком вопроса).
Мы не рассмотрели также группу свойств таблиц, которые могут быть использованы
при форматировании Web-страниц, представляемых таблицами. Более подробную ин-
формацию об этих и других свойствах вы можете найти в Приложении Б.
Листы стилей
87
Внешние листы стилей
Внешние листы стилей записываются в отдельных файлах и применяются для оформле-
ния набора HTML-документов. Использование внешних листов стилей позволяет еди-
ным образом оформлять множество Web-страниц и даже сайтов. Удобство внешних сти-
лей заключается также в том, что автор Web-страниц может изменять стили, не затраги-
вая содержания документов.
CSS-файлы
В рассматриваемой технологии собственно описание стилей хранится в отдельном фай-
ле, который имеет расширение .css (для стилей CSS) или .jss (для стилей JSSS -
JavaScript Style Sheet, разработанных компанией Netscape). Такой файл является обыч-
ным ASCII-файлом (как и HTML-файл). Для обращения к файлу внешних стилей ему
присваивается имя, например, firmstyle .css.
Содержательная часть CSS-файла состоит только из листа стилей. Для пояснений в эти
файлы могут включаться комментарии. Количество правил, описываемых в файле сти-
лей, может быть любым.
Приведем пример CSS-файла:
P.red {font-weight:bold; color:red)
SPAN {font-style:italic; font-size:14pt)
.yellowbg {background-color:yellow; font-family:arial}
Как видим, CSS-файл не содержит каких-либо заголовков или конечных элементов.
Обращение к внешнему листу стилей (элемент LINK)
Основным инструментом подключения к HTML-документу внешних листов стилей
является одиночный тег <LINK>. Этот тег располагается в заголовочной части
HEAD. В состав тега <LINK> входит ряд атрибутов, из которых три являются обяза-
тельными - это:
✓ type=" text /css" - указывает браузеру, что применяется текст формата CSS.
✓ href - задает URL файла внешнего листа стилей. Если CSS-файл располагается
в том же каталоге, что и текущий документ, то указывается только имя файла,
например, firmstyle.css.
✓ rel="stylesheet" - определяет отношение между текущим документом и объ-
ектом ссылки href. Значение stylesheet указывает на то, что элемент LINK ус-
танавливает связь с внешним листом стилей.
Допустим, CSS-файл с именем mainst. css размещен в папке Styles сайта
?.ww. generaledu. org. Для обращения к внешнему листу стилей достаточно в текст
форматируемого документа вставить элемент LINK:
88
ГЛАВА 3
<HTML>
<HEAD>
<Т1ТЬЕ>Название страницы*:/TITLE>
<LINK rel="stylesheet"
href="http://www.generaledu.org/Styles/mainst.css"
type="text/css">
</HEAD>
<B0DY>
<!--Содержимое документа -->
</BODY>
</HTML>
Один элемент link устанавливает связь только с одним CSS-
файлом. Для обращения, например, к трем файлам, содержащим
листы стилей, в HTML-документ необходимо ввести три
:> элемента link.
Еще раз о записи CSS-правил
Рассмотрим теперь некоторые приемы, которые упрощают запись и чтение листов стилей.
Построчная запись стилевых свойств
Напомним, что при записи стилевых правил можно применять символы пробела, табу-
ляции и перевода строки. Это облегчает чтение CSS-правил, содержащих множество
свойств. Например, вместо CSS-правила, записанного в одну строку:
Н2.blue{color:blue;font-family:arial;text-align:right}
лучше воспользоваться записью с построчными определениями свойств:
Н2.blue{color:blue;
font-family:arial;
text-align:right}
Такая запись листа стилей наглядно представляет определяемый набор свойств и помо-
гает проверять наличие открывающейся и закрывающейся фигурных скобок.
Сокращенная форма записи
Некоторые свойства имеют сокращенную форму записи, которая позволяет авторам на-
значать сразу несколько свойств с помощью одного ключевого слова. Ранее отмечалось,
что такая форма записи возможна, например, для свойств шрифтов (font-family,
Листы стилей
89
font-size, font-style и т.д.). Значения свойств записываются после ключевого
слова font и упорядочиваются в виде следующей последовательности:
font: font-style font-variant font-weight font-size/line-
height font-family
Значения свойств в сокращенной записи приводятся списком с одним разделительным
символом - пробелом, например:
DIV {font: italic small-caps bold 14pt/18pt serif}
Здесь два свойства, записанные через косую черту, указывают на размер шрифта
(font-size) и межстрочный интервал (line-height) соответственно. Если в со-
кращенной записи отсутствует какое-либо значение, то пропущенное свойство принима-
ет значение по умолчанию.
Комментарии
Листы стилей могут содержать текстовые комментарии, которые вводятся в код анало-
гично тому, как это делается в сценариях JavaScript (см. раздел «Комментарии» главы 9).
Начало комментария отмечается косой чертой со звездочкой (/*), а конец - звездочкой
с косой чертой (*/). Между этими символами размещается любое текстовое сообщение,
например:
/* Это лист стилей, оформленный отдельным файлом */
Когда браузер в листе стилей встречает указанные символы, он игнорирует текст, за-
ключенный между ними.
Комментарии часто вставляются в качестве первой строки файла с описанием сти-
лей. Они используются также для временного отключения правил или свойств из
листа стилей. Например, чтобы не изменять запись стилевого правила в целом, вы
можете закомментировать некоторые свойства:
Н2{font-size:llpt;
/*font-family:arial;
font-style:italic;
color:green*/}
В этом случае к элементам Н2 будет применено только определение размера шрифта.
Группирование селекторов и определений
Если отображение элементов задается одинаковыми CSS-правилами, то целесообразно
выполнить группирование селекторов. Например, листы стилей
НЗ {font-family:sans-serif}
Н4 {font-family:sans-serif}
Н5 {font-family:sans-serif}
90
ГЛАВА 3
и
НЗ,Н4,Н5{font-family:sans-serif)
будут одинаково интерпретированы браузерами. Поэтому все элементы НЗ, Н4 и Н5
в документе будут отображены шрифтом без засечек.
Группирование определений производится путем перечисления определений с разделе-
нием точкой с запятой. Например, следующая компактная запись CSS-правила:
Н2{font-size:llpt;
line-height:12pt;
font-family:arial ;
font-style:oblique)
эквивалентна более подробному листу стилей:
Н2{font-size:llpt)
Н2{line-height:12pt}
Н2{font-family:arial)
H2{font-style:oblique)
у Ггруппирование селекторов выполняется путем их перечисления
через запятую, а группирование определений - с разделением
точкой с запятой.
Псевдоклассы и псевдоэлементы
В CSS принята модель форматирования элементов с учетом их позиции в структуре до-
кумента. Но такая модель не позволяет достичь некоторых специальных эффектов, на-
пример, задать определенный стиль для первой строки в текстовом блоке. Для формати-
рования фрагментов документа, которые не описываются специальными тегами, в CSS
вводятся псевдоэлементы и псевдоклассы. Их введение расширяет возможности листов
стилей.
Стили ссылок
С помощью псевдоклассов можно легко назначать стиль гиперссылок. В этом случае
стилевые правила применяются к элементу привязки А. В спецификации CSS преду-
смотрены следующие псевдоклассы ссылок.
✓ link - применяется для отображения ссылок, которые не посещались. Например,
правило
A:link{color:blue)
устанавливает синий цвет для таких ссылок.
Листы стилей 91
✓ visited - выделяет посещенные ссылки. К примеру, правило
A: visited{color:yellow}
назначает желтый цвет для ссылок, активизировавшихся при данном посещении
страницы.
Псевдоклассы гиперссылок интерпретируются браузерами только применительно
к гиперссылкам, поэтому допустимо опускать якорный тег в назначении стиля.
Например, две формы записи стиля
A: link{color:blue}
:link{color:blue)
Зудут интерпретированы браузером одинаково.
Отличительным признаком псевдокласса является двоеточие, при-
меняемое как разделитель после обозначения типа элемента.
При записи псевдоклассов ссылок допускается опускать название
элемента а. Если в HTML-документе имеется лист стилей
с псевдоклассами ссылок, то все ссылки документа будут
отображаться по заданным правилам.
Динамические псевдоклассы ссылок
Для выделения гиперссылок в зависимости от действий пользователя на Web-странице
применяются динамические псевдоклассы.
✓ active - устанавливает стиль отображения активных гиперссылок; например,
правило
A:active{color:green}
приводит к отображению зеленым цветом ссылки, на которой пользователь щелкнул
мышью;
✓ hover - определяет отображение ссылки при наведении на нее указателя мыши.
Например, правило
A:hover{color:green;font-weight:bold}
задает смену цвета ссылки на зеленый с одновременным увеличением «жирности»
шрифта;
✓ focus - применяется для задания особенностей отображения полей ввода данных
(см. главу 7 «Формы»).
92
ГЛАВА 3
Как уже отмечалось, обозначение якоря А в записи динамических псевдоклассов можно
опускать.
Стили фрагментов текста
Псевдоэлементы применяются для назначения стилей определенным фрагментам в за-
висимости от их позиции в структуре документа. В CSS введено два псевдоэлемента.
✓ first-line - предназначен для задания стилевого правила первой строки текста.
Этот псевдоэлемент применяется только к блокам (Рис. 3.7);
✓ first-letter - применяется для задания стиля первого символа (например,
в строке). Этот псевдоэлемент позволяет воссоздать на Web-странице типографский
прием буквицы (Рис. 3.7).
Рис. 3.7. Примеры применения псевдоэлементов
HTML-код примера, показанного на Рис. 3.7, имеет следующий вид:
<HTML>
<HEAD>
<Т1ТЬЕ>Псевдоэлементы</TITLE>
<STYLE type="text/css">
DIV:first-line {font-style:italic;
font-weight:bold)
P {font-size:12pt;
line-height:12pt}
P:first-letter {font-size: 200%;
font-style:italic;
font-weight:bold;
float:left}
Листы стилей
93
</STYLE>
</HEAD>
<BODY>
<НЗ>Примеры отображения первой строки и первой буквы
с использованием псевдоэлементов</НЗ><НК><ВЕ>
<DIV>B данном предложении, содержащем псевдоэлемент
<CODE>first-line</CODE>, только первая строка
отображается полужирным курсивом.
</DIV>
<HR><BR>
<Р>ПЕРВАЯ буква в этом абзаце отображается полужирным
курсивом, а ее размер в два раза превышает остальной
шрифт. Данное форматирование задается с помощью псев-
доэлемента
<CODE>first-letter</CODE>.</Р>
</BODY>
</HTML>
Наследование и каскадирование
Применение CSS к отображению HTML-документов основано на правилах наследова-
ния и каскадирования.
Правила наследования свойств
Напомним, что HTML-документы имеют иерархическую структуру. В вершине этой
структуры находится элемент HTML, который содержит дочерние элементы HEAD и
BODY. Те, в свою очередь, включают элементы следующего уровня. Например, элемент
HEAD содержит TITLE и STYLE, а элемент BODY включает Нх, Р, DIV, IMG и мно-
жество других. Каждый из элементов Р или DIV может содержать дочерние элементы
(SPAN, IMG, I, В и т.д.). Какие стили будут иметь дочерние элементы, если присвоить,
например, стиль элементу BODY или DIV? Ответ на этот вопрос дается правилами на-
следования свойств.
Прежде всего, отметим, что дочерние элементы наследуют свойства, установленные для
родительского элемента. Для всех HTML-элементов родительским является элемент
BODY. Поэтому, например, CSS-правило
BODY {color: blue; background: yellow}
будет определять цвет шрифта и фона для всех остальных элементов документа. В этом
случае элемент
<DIV>ToBapbi и услуги от <1>компании KDK</I></DIV>
94
ГЛАВА 3
будет отображен шрифтом синего цвета на желтом фоне. Элемент I унаследует от
BODY цвет шрифта и фон, а также дополнительно будет выделен курсивом.
Другой пример наследования стилей был приведен в начале настоящей главы, в разделе
«Определение встроенного стиля (атрибут style)». Для блока DIV встроенный стиль,
задающий шрифт семейства serif коричневого цвета, наследовался всеми вложенны-
ми элементами.
Вообще говоря, наследуемыми является большинство свойств листов стилей (за некото-
рыми исключениями). Поэтому вы можете назначать стили, начиная с родительских
элементов, постепенно спускаясь к вложенным элементам более низких уровней.
Селекторы потомков
При разработке Web-страниц нужно помнить, что применение правил наследования сти-
лей может быть проблематичным в некоторых моделях браузеров и в случае HTML-
документов со сложной структурой. Поэтому для надежного отображения вложенных
элементов лучше задать точное применение стилевых свойств. Это делается с помощью
селекторов потомков, называемых также контекстными селекторами.
В HTML-документе любой дочерний элемент может быть задан путем указания его ро-
дительских элементов. Дочерние элементы называются также потомками, а родитель-
ские элементы - предками. Например, элемент заголовка таблицы CAPTION является
потомком элемента-предка TABLE.
Селекторы потомков предназначены для сопоставления стилевых правил HTML-
элементам соответственно порядку их вложения с родительские элементы. То есть се-
лектор потомков присваивает стиль элементам с учетом их размещения в структуре
документа.
Селектор потомков состоит из нескольких селекторов типа (см. раздел «Виды селекто-
ров»), Например, CSS-правило
TABLE TH BIG {color: blue)
назначает отображение синим шрифтом только тех элементов BIG, которые расположе-
ны в ячейках заголовков (элементы TH) таблиц (элементы TABLE). CSS-правило с селек-
тором потомков применяется к элементу, который записан последним (правым) в селек-
торе. В приведенном примере - это элемент BIG.
Обратите внимание, что в селекторе потомков между наимено-
ваниями типов элементов ставится пробел. Если в этом селек-
торе ошибочно поставить запятые, то стилевое правило будет
применено ко всем элементам, которые указаны перед определе-
нием (см. раздел «Гоуппирование селекторов и определений»).
Листы стилей
95
Каскады стилей
Рассмотрим концепцию каскадирования, которая является ключевой в листах стилей.
Именно с этой концепцией связано название Cascading Style Sheets (каскадные листы
стилей).
Когда браузер подготавливает документ к отображению, он производит поиск стилевых
свойств (например, font, color и т.д.). Возможны случаи, когда значение какого-либо
свойства для отдельного элемента определяется одновременно несколькими листами
стилей. Это так называемые ситуации конфликта значений, в которых браузеру необхо-
димо выбрать одно значение из множества значений свойств и применить его к конкрет-
ному элементу.
Например, стили заголовков Н2 могут быть назначены четырьмя источниками:
✓ внешним листом стилей с CSS-правилом:
Н2{font-family:courier; font-size:14pt; color:red)
✓ заголовочным стилем с селектором типа:
Н2{font-size:20pt; color:blue)
1/ встроенным стилем:
<Н2 style="font-size:17pt; color:green">
✓ CSS-правилом с селектором потомков (см. раздел «Селекторы потомков»):
TABLE Н2{font-size:15pt; font-style:arial; text-align:left}
Как видим, в этом примере будут конфликтовать значения размера шрифта и цвета.
Чтобы разрешить конфликты между стилями, вводятся определенные правила каскади-
рования или приоритета, которым следует браузер при выборе стилевых значений. Эти
правила можно сравнить с водопадом, в котором вода при падении проходит по не-
скольким ступеням (уровням). Каждый уровень свойств характеризуется своим приори-
тетом, начиная от самого верхнего и кончая самым низким приоритетом. При анализе
документа браузер сортирует все значения, приписываемые каждому элементу, и для
отображения элементов применяет значения с более высоким приоритетом.
Приоритеты стилей
Если при отображении создаваемых вами документов встречаются конкурирующие источ-
ники стилей, помните следующее правило. Наиболее низким приоритетом обладает стиль
браузера. За ним в порядке возрастания приоритета следует стиль, заданный пользователем.
Наиболее высокий приоритет задается разработчиком Web-страниц.
Кроме этого, существует схема приоритетов внутри самого Web-документа. Перечислим
возможные источники стилевой информации в документе, расположив их в порядке
убывания приоритета.
96
ГЛАВА 3
✓ Атрибут style. Свойства, присваиваемые атрибутом style, имеют самый вы-
сокий приоритет. Свойства, заданные с помощью этого атрибута, отменяют лю-
бые назначения стиля с помощью контейнера <STYLE> или внешнего листа сти-
лей. Поэтому в примере предыдущего раздела (с четырьмя конфликтующими
CSS-правилами) отображение элемента Н2 будет выполнено зеленым шрифтом
размером 17pt;
✓ Селекторы потомков. Приоритет CSS-правил с селекторами потомков на одну сту-
пень ниже, чем у атрибута style. Если свойство элемента не установлено атрибу-
том style, то для отображения этого элемента браузер применит значение, заданное
CSS-правилом с селектором потомков. Запишем для примера HTML-файл:
<HTML>
<HEAD>
<Т1ТЬЕ>Приоритеты стилей</Т1ТЬЕ>
<STYLE type="text/css">
BODY Н2 {font-family:Arial;
font-size:15pt;
text-align:right
color:red}
</STYLE>
</HEAD>
<BODY>
<H2> Пример приоритета встроенного стиля по сравнению с
селектором потомков </Н2> <HR><BR>
<Н2 style="font-family:Courier New;
font-size:17pt;
text-align:center;
color:green">
Текст заголовка</Н2>
</BODY>
</HTML>
В этом случае текст нижнего заголовка Н2 (Рис. 3.8) будет отцентрирован и ото-
бражен зеленым шрифтом Courier New размера 17pt (значение шрифта Arial размера
15pt с выравниванием по правому краю, заданное для верхнего заголовка селекто-
ром потомков, отменяется атрибутом style).
Листы стилей
97
Рис. 3.8. Отображение заголовков, отформатированных стилями разных приоритетов
Селекторы типа. Селекторы типа имеют приоритет на одну ступень ниже, чем
селекторы потомков. Если значение стиля не указано ни селектором потомков, ни
атрибутом style, то браузер применит значение, заданное селектором типа;
✓ Наследуемые свойства. Наследуемые свойства имеют приоритет на три ступени
ниже, чем у атрибута style. При отсутствии значения, объявленного селектором
типа, для отображения элемента браузер применит свойство и его значение, за-
данные для ближайшего элемента-предка. Это справедливо только для наследуе-
мых свойств;
✓ Начальные значения. Самым низким уровнем приоритета обладают начальные
значения (принимаемые по умолчанию). Если в документе используются свойст-
ва, которые не приобретаются «на правах наследования» или вообще не опреде-
лены, то браузер применит к ним начальные значения. Эти значения установлены
для каждого свойства, и приведены в спецификации CSS. Иногда они выбираются
самим браузером, как в случае свойства font-family. По умолчанию Internet
Explorer отображает основной текст гарнитурой Times New Roman.
Отметим также, что если конфликтующие значения устанавливаются разными CSS-
правилами с одинаковым приоритетом, то к элементу будет применен стиль, кото-
рый указан последним в листе стилей. Например, если для отображения абзацев
имеются всего два CSS-правила:
Р {color:green; font-family:arial)
P {color:red)
то абзацы текущей страницы будут отображены красным шрифтом Arial (а не зеленым).
98
ГЛАВА 3
Чтобы установить стилевые свойства по умолчанию, вы може-
те их задать для элемента body. Например, согласно CSS-
правилу body {font-style:italic) текстовое содержимое
документа будет по умолчанию отображаться курсивом.
Таким образом, концепция каскадирования заключается в применении значений свойств
соответственно приоритету источника стилей. Для отображения элемента браузер выби-
рает то значение свойства, которое соответствует более конкретизированному (локаль-
ному) CSS-правилу.
Слои и позиционирование элементов
В предыдущих разделах было описано множество стилевых свойств, с помощью которых
определяются параметры разметки HTML-документа. Однако среди них вы не найдете
свойств, которые позволяют выполнять точную (с точностью до пиксела) компоновку Web-
страницы, содержащей множество элементов. Задачи компоновки сложных страниц стало
возможным решать с разработкой спецификации CSS1, в которой предусмотрены возмож-
ности позиционирования элементов.
Если позиционируемым элементом является DIV, то можно говорить об отдельном слое
в документе. Связано это с тем, что элемент DIV может размещаться на странице независи-
мо от других элементов, перекрываясь с ними. Складывается впечатление, что содержимое
элемента DIV (текст, рисунки) располагается как бы в отдельном слое документа.
Если в браузере Internet Explorer слои реализуются с помощью
элементов div, то в браузере Netscape для слоев предусмотре-
ны специальные элементы layer и ilayer. Последние имеют
атрибуты, допускающие абсолютное позиционирование, то
есть размещение слоев согласно определенным координатам.
Свойство position
Обычно элементы Web-страницы позиционируются относительно предыдущих элемен-
тов в коде HTML. Мы будем рассматривать свойство position, которое позволяет вы-
полнять позиционирование элемента независимо от предшествующего кода или, говоря
другими словами, отдельно от потока документа. Спецификацией CSS1 предусмотрены
следующие три значения для свойства position:
✓ static - отвечает размещению объектов в том порядке, в котором они встречаются
в коде документа. Значение static используется по умолчанию;
✓ absolute - элемент с этим значением свойства position помещается в видимую
область, а сама область имеет определенные координаты, которые не зависят от рас-
положения других элементов. Вместе с перемещением видимой области перемещает-
Листы стилей
99
ся и содержимое. Если внутри видимой области какой-либо элемент получает коор-
динаты, выходящие за пределы области, то этот элемент не показывается;
✓ relative - элемент с данным значением свойства position имеет координаты,
которые вычисляются относительно его исходного положения в документе, то есть
положения, которое занимал бы элемент, если бы позиционирование не было задано.
Координаты видимой области задаются с помощью обычных декартовых координат.
Началом координат для абсолютно позиционированного элемента является верхний ле-
вый угол документа. Поэтому координаты (х,у)элемента выражаются значениями
свойств left и top соответственно. Пара значений (0,0) отвечает расположению
элемента в начале координат. Увеличение значения х смещает элемент вправо вдоль
оси абсцисс, а увеличение у - означает смещение вниз вдоль оси ординат.
Значения координат left и top могут выражаться в допустимых для листов стилей
величинах:
✓ в пикселах, например, lef t: ЮОрх (если единица измерения не указана, то едини-
цей считается пиксел);
✓ в пунктах, например, top: 6 Opt;
✓ в процентах (например, left: 30%; top: 50%), причем проценты вычисляются
относительно ширины (width) и высоты (height) родительского элемента (если
для родительского элемента указан размер, скажем, width:auto, то нельзя
пользоваться процентным выражением для величины left дочернего элемента);
Если определение свойств left и top отсутствует, элемент располагается в потоке
документа, то есть он находится в том месте страницы, как и при отсутствии свойства
position.
Абсолютное и относительное позиционирование
(значения absolute и relative)
Поясним на примерах значения absolute и relative свойства position, которые
мы теоретически описали выше. Допустим, некий рисунок back. gif нужно разместить
в точке (250, 100) окна браузера. Для этого можем записать:
<IMG SRC="back.gif" STYLE="position:absolute;
left:250; top:100">
В этой записи указана только точка размещения левого верхнего угла рисунка и не
указаны размеры рисунка. В этом случае в документ будет вставлен рисунок исход-
ных размеров. Чтобы задать иные размеры, необходимо определить свойства
width, height. Значения этих свойств могут выражаться в тех же величинах, что и
свойства left и top.
100
ГЛАВА 3
>? Если вы желаете сохранить пропорции ширины и высоты <
х? элемента, достаточно указать только одно из свойств width и о
height либо указать значение одного свойства, а для другого v
л записать значение auto. ва&ааг*
1....._______________________________
Приведем возможные записи атрибута стиля, в которых однозначно определяются раз-
меры элемента в документе, отличные от исходных размеров:
STYLE="position:absolute; left:250; top:100; width:160"
STYLE="position:absolute; left:35pt; top:80pt; height:20%"
STYLE="position:absolute; left:250; top:100; width:160;
height: aujto"
STYLE="position:absolute; left:50%; top:15%;
width:auto;height:12 Opt"
STYLE="position:absolute; left:250; top:100; width:200;
height: 120"
В случае позиционирования рисунка первые четыре записи будут сохранять пропорции
рисунка, а последняя запись - может искажать их.
Мы рассмотрели определение свойства позиционирования с помощью встроенного сти-
ля элемента. Однако такой подход может напоминать «стрельбу из пушки по воробьям»,
поскольку мощное стилевое свойство position разумнее применять в листах стилей
CSS, а не в отдельных элементах. Соответствующие примеры, которые мы приводим по
ходу изложения, имеют, скорее, иллюстративный, чем практический характер.
Рассмотрим еще один пример - задачу относительного позиционирования элемента
<IMG>. Пусть рисунок включен внутрь блока <DIV>, и требуется задать расположение
рисунка в этом блоке. Будем считать что, внешний элемент <DIV> имеет ширину
520 пикселов и смещен относительно рабочей области окна браузера на вектор (100,
50). Далее, пусть рисунок смещен относительно <DIV> на величину (0, 50). Запи-
шем перечисленные условия на языке CSS и оформим документ в виде:
<HTML>
<HEAD>
<Т1ТЬЕ>Позиционирование элементов</Т1ТЬЕ>
</HEAD>
<BODY>
<DIV STYLE="text-align:justify; position:absolute;
left:100; top:50; width:520; background:lightcyan" >
Данный текст размещен в области шириной 520 рх и
имеет абсолютное позиционирование. Рисунок
(«стрелка&гадио;) позиционирован относительно
текста
<IMG SRC="back.gif" STYLE="position:relative; left:0;
top:7 0">
</DIV>
</BODY>
</HTML>
Листы стилей
101
В результате документ в окне браузера будет иметь вид, показанный на Рис. 3.9, а. Обра-
тите внимание, что позиция рисунка вычисляется относительно последнего символа тек-
ста. Межстрочное расстояние для последней строки браузер увеличил в соответствии
с высотой рисунка. То есть, как отмечалось ранее, координаты элемента, имеющего ат-
рибут position: relative, вычисляются относительно положения, которое он за-
нимал бы в отсутствие этого атрибута
Измените в элементе IMG значение атрибута позиционирования рисунка
с relative на absolute, и вы увидите разницу между относительным и абсо-
лютным позиционированием (Рис. 3.9, б). Во-первых, при тех же значениях
left: 0; top:70 рисунок будет иметь «абсолютные» координаты внутри внеш-
него блока <DIV>, то есть будет выровнен по левому краю текста и смещен относи-
тельно верхнего края текста на 7 Орх. Во-вторых, последняя строка текста будет вы-
ведена с обычным межстрочным интервалом.
а
<1 Готово Мой ьом-ыэтер
б
Рис. 3.9. Позиционирование рисунка: а-относительное (position: relative);
б-абсолютное (position:absolute)
102
ГЛАВА 3
' Отметим, что задание свойства width для элемента <div>
<> фиксирует ширину текстового блока. При уменьшении размера
>< окна браузера ширина блока не меняется и текст не приводится
< в соответствие с новым размером окна. В результате в окне
браузера может появиться горизонтальная полоса прокрутки.
Размещение текстовых блоков в документе
Допустим, вам "нужно в определенном месте документа разместить текстовый блок (на-
пример, эпиграф). Для этого можно в принципе пользоваться элементами таблиц HTML.
Однако более гибким и эффективным средством компоновки документа является свой-
ство позиционирования элемента position. Покажем, как с помощью этого свойства
можно разместить на странице эпиграф
<DIV STYLE="position:absolute;
left:50%; top:50px; width:auto; height:auto;
background:peachpuf f">
...так кто ж ты, наконец?<ВИ>
— Я – часть той силы, что вечно хочет зла<ВЯ>
и вечно совершает благо.<BR>
<Р STYLE="text-align:right; font-style:italic">
Гете. «Фауст&гадио;
</P>
</DIV>
Отображение этого отрывка из «Фауста», являющего эпиграфом к известному роману
Михаила Булгакова, показано на Рис. 3.10.
Рис. 3.10. Пример позиционирования текстового блока
В списке стилевых свойств элемента <DIV> фигурирует свойство height: auto, кото-
рое отвечает автоматически подбираемой высоте размещаемого текста. Это свойство, а
также width:auto, можно было бы не добавлять, так как auto является значением,
принятым по умолчанию.
Листы стилей 103
Разместим теперь на странице, кроме эпиграфа, последующий текст романа «Мастер и
Маргарита». Для текста также введем элемент DIV, причем зададим в листе стилей аб-
солютное позиционирование для всех элементов DIV (свойство position:
absolute). Значения же координат left, top определим в стиле каждого элемента.
Другие компоненты листа стилей, надеемся, понятны без объяснений.
<HTML>
<HEAD>
<Т1ТЬЕ>Мастер и Маргарита</Т1ТЬЕ>
<STYLE TYPE="text/css">
DIV {position:absolute}
P {text-indent:2em}
.author {text-align:right; font-style:italic;
color:darkblue}
.heads {text-align:center; color:brown}
</STYLE>
</HEAD>
<BODY>
<DIV STYLE="left:50%; top:50px; height:auto;
background:peachpuff">
...так кто ж ты, наконец?<ВИ>
— Я – часть той силы, что вечно хочет зла<ВК>
и вечно совершает благо. <BR>
<Р CLASS="author">Гете. «Фауст&гадио;</Р>
</DIV>
<DIV STYLE="left:ЗОрх; top:180px">
<H1 CLASS="heads">Часть перваж/Н1>
<H2 CLASS="heads">Глава 1</H2>
<H3 CLASS="heads">НИКОГДА HE РАЗГОВАРИВАЙТЕ
С НЕИЗВЕСТНЫМИ/Н3>
<Р>В час жаркого весеннего заката на Патриарших прудах поя-
'лось двое граждан. Первый из них – приблизительно соро-
слетний, одетый в серенькую летнюю пару, – был маленько-
: роста, темноволос, упитан, лыс, свою приличную шляпу пирож-
:м нес в руке, а аккуратно выбритое лицо его украшали сверхес-
; отвенных размеров очки в черной роговой оправе. Второй
'.lash; плечистый, рыжеватый, вихрастый молодой человек в за-
селенной на затылок клетчатой кепке – был в ковбойке,
заных белых брюках и черных тапочках.</Р>
<Р CLASS="author">
(М. Булгаков. &1адио;Мастер и Маргарита&гадио;)</Р>
</DIV>
</BODY>
HTML>
104
ГЛАВА 3
При наборе текстов в рассмотренных примерах использованы известные вам символь-
ные примитивы двойных кавычек (« и »), а также коды &mdash (длин-
ное тире) и &ndash (короткое тире). Внешний вид полученной Web-страницы показан
на Рис. 3.11.
Рис. 3.11. Оформление текста с двумя позиционированными блоками
Мы рассмотрели простые средства позиционирования текстовых блоков. Тем не менее,
приведенные примеры показывают, что этих простых средств оказывается достаточно
для макетирования книг или статей. В следующих разделах мы займемся более разви-
тыми возможностями позиционирования элементов и компоновки Web-страниц.
Визуальные эффекты
С помощью приемов позиционирования вы можете получать простые визуальные эффекты:
вырезание области страницы, задание порядка расположения слоев, скрытие элемента.
Вырезание области (свойство clip)
Абсолютно позиционированный элемент располагается в некоторой прямоугольной об-
ласти. В CSS1 предусмотрено частичное отображение этой области или, другими слова-
ми, «вырезка». Вырезание области выглядит аналогично тому, как на изображение на-
Листы стилей
105
кладывается лист непрозрачной бумаги с прямоугольным отверстием. Часть изображе-
ния, видимая через отверстие, представляет собой область вырезки.
Свойство clip применяется только к позиционированным элементам со свойством
position:absolute. Область вырезки представляет собой прямоугольник, который
привязан к левому верхнему углу абсолютно позиционированного элемента. Для опре-
деления вырезки используется следующая запись значений свойства clip:
clip:rect (top right bottom left)
Аргументы top, right, bottom и left задают координаты прямоугольника вы-
резки, Причем допускаются отрицательные значения аргументов top и left. Чтобы
лучше представить смысл всех четырех аргументов, рассмотрим следующие случаи.
✓ Совместим левые верхние углы элемента и области вырезки (top=0, lef t=0),
а координаты правой и нижней границ вырезки (right и bottom) положим
равными ширине и высоте позиционированного элемента (width и height).
Тогда на экране будет отображаться весь элемент, то есть фактически вырезка
будет отсутствовать',
S Допустим, координаты top и left выходят за границы позиционированного
элемента, то есть значение top области вырезки больше суммы координат top и
height элемента и (или) значение left вырезки превышает сумму left и right
элемента. В этом случае вырезка не будет перекрываться с видимой областью пози-
ционированного элемента, и область вырезки будет пуста.
Л
" Если вы хотите, чтобы какая-либо координата области вырезки
i совпадала с координатой позиционированного элемента, устано-
$ вите для нее значение auto. Например, отсутствию вырезки
:> отвечает значение свойства clip:rect (0 auto auto 0).
Применим свойство clip к элементу <DIV> в рассмотренном ранее примере эпиграфа
(Рис. 3.10). Подберем значение bottom прямоугольника вырезки таким образом, чтобы
на экране отображались только первые две строки (Рис. 3.12, а). Этому случаю будет
отвечать следующее определение элемента <DIV>:
<DIV STYLE="position:absolute;
left:50%; top:50px; height:auto; background:peachpuff;
clip:rect (0 auto 46 0)">
...так кто ж ты, наконец?<ВК>
— Я – часть той силы, что вечно хочет зла<ВЕ>
и вечно совершает благо.<BR>
<Р STYLE="text-align:right; font-style:italic">
Гете. «OaycT» </P>
</DIV>
106
ГЛАВА 3
а
б
Рис. 3.12. Пример обрезки области: а-свойство clip:rect (0 auto 46 0);
б-свойство clip: rect (100 auto auto 150)
На соседнем Рис. 3.12, б показано, как отобразить на экране только последнюю строку
эпиграфа. В этом случае область вырезки должна определяться значениями clip: rect
(100 auto auto 150).
Обработка содержания за пределами видимой области
элемента (свойство overflow)
Итак, размеры видимой области позиционированного элемента задаются свойствами
left, top, width и height. Однако не всегда элемент может разместиться в преде-
лах, заданных этими параметрами. Поэтому необходимо определить, как будет отобра-
жаться содержание, которое выходит за пределы видимой области. Для этого предназна-
чено свойство overflow, принимающее одно из следующих четырех значений:
✓ visible - отображает все содержание элемента, даже за пределами установленной
ширины (width) и высоты (height);
✓ hidden - отображает содержание только внутри установленной видимой области;
часть элемента, выходящая за пределы области не показывается;
Листы стилей
107
✓ scroll - добавляет к отображаемому элементу полосы прокрутки независимо от
того, помещается ли содержание элемента в отведенную ему область или нет;
✓ auto - добавляет полосы прокрутки только по мере необходимости.
Таким образом, устанавливая значение visible, мы как бы убираем границы элемента, в
то время как значение hidden аналогично введению свойства clip:rect (0 х у 0)
(см. предыдущий раздел), в котором х и у отвечают соответственно ширине и высоте
элемента. Особенно привлекательными выглядят значения scroll и auto, которые позво-
ляют создавать плавающие кадры с полосами прокрутки, однако без тех осложнений, кото-
рые сопутствуют созданию подобных объектов с помощью фреймов.
Проиллюстрируем использование свойства overflow на примере создания позициони-
рованного элемента <DIV>, содержание которого не умещается в отведенную видимую
область*:
<HTML>
<HEAD>
<Т1ТЬЕ>Свойство overflow</TITLE>
</HEAD>
<BODY>
<Н2>Использование свойства
<SPAN STYLE="font-
family : courier11 >overf low: visible</span>
</H2>
<DIV STYLE="position:absolute;
left:30; top:100; width:330; height:160;
background:peachpuff;
overflow:visible">
<PRE>
С ужасом в город вбежали, как олени младые, трояне
Пот прохлаждали, пили и жажду свою утоляли,
Вдоль по стене на забрала склонялся; но аргиняне
Под стену прямо неслися, щиты к раменам приклонивши.
Гектор же в оное время, как скованный гибельным роком,
В поле остался один перед Троей и башнею Скейской...
</PRE>
<Р STYLE="text-align:right; font-style:italic">
Гомер. «Илиада&гадио;</P>
</DIV>
</BODY>
</HTML>
’ Здесь в качестве примера выбран отрывок из поэмы Гомера, который вы вряд ли встретите в
реальных Web-страницах. Однако стих с большой длиной строки нам подходит для иллюстрации
применения свойства overf low.
108
ГЛАВА 3
На Рис. 3.13 показаны различные варианты отображения элемента <DIV> в зависимости
от значений свойства overflow.
Использование свойства overflow: visible
. ••w Г Г -рол КАК ОвКИ Тро !•»
3-'-» Про» хяг^АПК, пнях х тожяу свою утоднлх,
таз ле»» мя забрала с»»окя. «j ж> вргяпяпе
стяну пряма нее-аж-к «ях к рккекяя ггухклаи-»• •
-»тор жч в око в «*» как скомжкы» г//>еяъ--а рс,«
• воле .«млея глия *ро Трй»А я башне» к йакок .
- Няиа^а
4 Готово ___________________________________в Мой кхкх*р
Рис. 3.13. Отображение содержания за пределами
области позиционированного элемента:
а - значение vi sibl е; б - значение hi dden; в - значение au to; г- значение scrol 1
Задание расположения слоев (свойство z-index)
Если позиционированные элементы перекрываются, необходимо учитывать порядок
слоев, в которых они расположены. По умолчанию слои располагаются один под другим
в том порядке, в котором соответствующие элементы следуют в коде HTML. Однако
иногда нужно нарушить порядок расположения слоев, принятый по умолчанию. Для
этого применяется свойство z-index.
Свойство z-index принимает целые значения (включая отрицательные). Чем боль-
ше значение индекса, тем выше расположен элемент. Индекс 0 обычно присваивает-
ся элементу, содержащему другие вложенные элементы. Другие элементы, позицио-
нированные под ним, имеют отрицательные значения z-index. Те элементы, для
которых не задано свойство z-index, размещаются соответственно их положению
в коде страницы.
Приведем пример использования z-index в документе, содержащем несколько пози-
ционированных элементов: рисунок и текстовые блоки:
Листы стилей
109
<HTML>
<HEAD>
<Т1ТЬЕ>Размещение слоев с помощью свойства z-index
</TITLE>
<STYLE TYPE="text/css">
DIV.bl {position:absolute;
leftzllOpx; top:120px; width.-auto; heightzauto;
font-familyzarial; font-sizez38pt; colorzyellow;
z-indexz 3}
DIV.b2 {positionzabsolute;
leftz460px; topz80px; width;300; height:430;
background-color:brown;
font-size:40pt; colorzwhite;
text-alignz center; line-height z 35pt;
z-index:1}
#layer2 {position:absolute;
left:50px; top:50px; width:500; heightzauto;
z-index:2}
P.coll {position:absolute;
left:120px; top:207px; widthzauto; heightzauto}
P.col2 {position:absolute;
left:200px; top:150px; widthzauto; heightzauto}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="bl">
Курсы Web-дизайна
</DIV>
<DIV CLASS="b2">
<P CLASS="coll">
C <BR>
S <BR>
S <BR>
</P>
<P CLASS="CO12">
H <BR>
T <BR>
M <BR>
L <BR>
</P>
</DIV>
<IMG SRC="qwerty.gif" ID="layer2">
</BODY>
</HTML>
110
ГЛАВА 3
Согласно этому коду сверху располагается элемент <DIV> класса Ы (текст «Курсы
Web-дизайна»), под ним находится элемент с идентификатором layer2 (рисунок кла-
виатуры). Еще ниже - элемент DIV класса Ъ2 (цветной прямоугольник), который со-
держит вложенные блоки <Р> классов coll и со12 (текст «CSS» и «HTML»). Стра-
ница, описываемая данным кодом, показана на Рис. 3.14.
Рис. 3.14. Пример взаимного расположения слоев,
которое задается свойством z-index
На этом рисунке вы можете видеть все перечисленные пять позиционированных
элементов, причем для трех из них задан порядок расположения с помощью z- index.
Два элемента (абзацы coll и со12), для которых не задан индекс, являются дочер-
ними блока <DIV>. Эти элементы, содержащие вертикальный текст «CSS» и «HTML»,
наследуют свойства внешнего элемента <DIV>, а именно: размер и цвет шрифта
(font-size и color), выравнивание (text-align) и расстояние между строками
(line-height).
Вывод элемента на экран (свойство visibility)
Элемент, размещенный в документе, является по умолчанию видимым, если видим его ро-
дительский элемент. Но в случае скрытия родительского элемента скрытыми будут и дочер-
ние элементы. Например, скрытие элемента <BODY> спрячет все содержание документа.
Для изменения установок видимости, принятых по умолчанию, и управления отображе-
нием элементов на экране предназначено свойство visibility. Это свойство может
принимать следующие значения:
Листы стилей
111
✓ visible - выводит на экран элемент;
✓ inherit - наследует свойство visibility родительского элемента, то есть при
этом значении видимость данного элемента определяется видимостью элемента,
в котором он находится;
✓ hidden - элемент на экран не выводится.
Отметим, что независимо от значения свойства visibility в макете документа отво-
дится место для области вывода элемента. Например, в элементе
<РИЕ>Упали курсы национальных валют
следующих стран:<SPAN STYLE="visibility:hidden">Алжира, Ли-
вии, </SPAN>MapoKKO, Туниса.
</PRE>
вместо слов «Алжира, Ливии», входящих в контейнер <SPAN></SPAN>, будет отобра-
жено пустое место (Рис. 3.15).
Рис. 3.15. Пример скрытия элемента с помощью свойства visibility:hidden
Свойство visibility часто используется для управления видимостью элемента в дина-
мическом HTML (см. разделы «Мигающий» текст» и «Резиновый» текст» главы 14).
ГЛАВА 4.
Таблицы
Как известно, таблицы являются формой представления информации в виде строк и
столбцов. Они широко используются в печатных публикациях для иллюстрации описы-
ваемых данных. Средства для создания таблиц предусмотрены и в стандарте HTML (на-
чиная с версии 3.2). Однако в отличие от печатных таблиц, таблицы в Web-страницах
имеют не только иллюстративное назначение, они являются инструментом структуриро-
вания документов.
О роли таблиц в Web-документах
В таблицах на Web-страницах могут размещаться текстовые и числовые данные, в них
можно вставлять изображения и гиперссылки, они могут включать динамическое содер-
жимое. С помощью кода сценариев в таблицах возможно проведение различных вычис-
лений, которые по сложности могут не уступать вычислениям в электронных таблицах
типа Excel. Но основным достоинством HTML-таблиц, которое чаще всего используется
разработчиками, является возможность компоновки Web-страниц на основе заданной
табличной структуры.
Примеры Web-страниц с таблицами
Просматривая коды различных страниц в Интернете, вы наверняка обнаружите элементы
TABLE, которые формируют таблицы. Не удивляйтесь тому, что вы не видите рамку таблиц
на экране - в HTML можно отключать ее отображение. Структура таблиц (размеры строк и
столбцов, группирование ячеек) задает компоновку Web-страницы. На Рис. 4.1 представ-
лен фрагмент главной страницы известного сайта Amazon.com. HTML-код страницы
(его мы не приводим) содержит элементы четырех вложенных друг в друга таблиц,
причем сетка таблиц на экране не отображается.
Рис. 4.1. Фрагмент главной страницы сайта Amazon.com
Таблицы
113
Элемент таблицы table применяется в HTML-документах как
для табличного представления символьных и графических дан-
ных, так и для разбиения страницы на отдельные области, в ко-
торых располагается содержимое различных HTML-элементов.
Стандартом HTML предусмотрено, что в любой ячейке таблицы могут располагаться
текст, изображения, гиперссылки, формы, а также другие вложенные таблицы. Соз-
дав таблицу и заполнив содержимым ее ячейки, вы фактически устанавливаете по-
ложение содержимого ячеечных элементов на Web-странице. Например, в ячейках
таблиц, представленных на Рис. 4.1, расположены логотип сайта, баннер и элементы
интерфейса навигации.
Создание таблиц
Подобно спискам, таблицы HTML строятся по принципу вложения элементов, то есть
задается родительский элемент TABLE, определяющий таблицу в целом, и в него вкла-
дываются дочерние элементы. Каждая таблица должна начинаться тегом <TABLE> и
заканчиваться тегом </TABLE>:
<TABLE>
<!--Здесь размещается описание таблицы -->
</TABLE>
Состав таблицы по строкам и ячейкам задается с помощью следующих элементов:
✓ TR - элемент, формирующий отдельную строку;
t/ TD - элемент, определяющий содержимое ячейки данных;
✓ TH - элемент, задающий ячейку заголовка;
✓ CAPTION - элемент названия таблицы.
Среди перечисленных выше элементов нет таких, которые определяли бы содержимое
столбцов. Это связано с тем, что в HTML принята построчная модель описания табли-
цы, в которой последовательно задаются строки, начиная с самой верхней и заканчивая
последней нижней строкой.
С наружной стороны таблица ограничена внешней рамкой. Ячейки отделяются друг от
друга внутренними рамками. Как наружные, так и внутренние рамки могут быть видны
или не видны в окне браузера - это зависит от заданных свойств таблицы (см. раздел
(Задание общих параметров таблицы» данной главы). В HTML предусмотрены средства
для выделения в таблице отдельных групп строк и столбцов (см. раздел «Группирование
строк и столбцов»).
114
ГЛАВА 4
Строки (элемент TR)
Каждая строка таблицы начинается тегом <TR>, а заканчивается </TR>. Закрывающий
тег </TR> не обязателен, но его рекомендуется ставить для обозначения границы каж-
дой строки. Внутри каждого элемента TR размещается описание ячеек заголовков или
ячеек данных. Шаблон кода простой таблицы имеет вид:
<TABLE>
<TR><!--Первая строка таблицы--></TR>
<TR><!--Вторая строка таблицы--></TR>
<TR><!--Последняя строка таблицы--></TR>
</TABLE>
Ячейки (элемент TD)
Для описания содержимого отдельных ячеек таблицы предназначен парный тег <TD>.
Текстовое содержимое ячеек данных по умолчанию отображается шрифтом, заданным
в начальных настройках браузера.
Составим HTML-код небольшой таблицы, например, со списком адресов российских
чатов. Будем считать, что такая таблица состоит из четырех строк по две ячейки
в каждой:
<HTML>
<HEAD>
<Т1ТЬЕ>Пример таблицы</Т1ТЬЕ>
</HEAD>
<BODY>
<Н2>Российские чаты</Н2>
<TABLE border=1>
<TR>
<ТВ>Название чата</ТВ>
<TD>Aflpec</TD>
</TR>
<TR>
<TD>CynepMera4aT</TD>
<TD>http://smchat.ru/</TD>
</TR>
<TR>
<TD>Kny6 Аська</ТВ>
<TD>http://asya-club.ru/</TD>
</TR>
<TR>
<TD>RusTusovka</TD>
<TD>http://www.rustusovka.com/</TD>
</TR>
</TABLE>
</BODY>
<HTML>
Таблицы
115
Внешний вид таблицы, задаваемой этим кодом, показан на Рис. 4.2. Названия столбцов
таблицы вписаны непосредственно в ячейки первой строки.
Рис. 4.2. Пример таблицы, полученной с помощью элемента TABLE
Каждая строка таблицы в данном примере содержит одинаковое количество ячеек, а на-
чальный тег <TABLE> дополнен атрибутом border=l. Если бы атрибут border отсут-
ствовал, браузер отобразил бы таблицу без рамок.
Заголовки (элемент TH)
Для выделения текста в отдельных ячейках таблицы часто пользуются специальным те-
гом заголовка таблицы <ТН>. Заголовки можно вставлять в любом месте таблицы. Со-
держимое заголовка автоматически размещается по центру ячейки и отображается по-
лужирным шрифтом. Контейнер заголовка имеет вид:
<ТН>Содержимое ячейки заголовка</ТН>
£ Если вы хотите отобразить таблицу с пустыми ячейками, то
« в качестве неотображаемого содержимого элементов td или тн
| запишите примитив
Название (элемент CAPTION)
В предыдущих двух примерах название таблицы задавалось обычным заголовком Н2.
Однако в HTML предусмотрен специальный элемент CAPTION для введения в документ
названия таблицы. Элемент названия размещается после элемента TABLE до элементов
TR, TD ИЛИ ТН:
<TABLE border=l>
116
ГЛАВА 4
<САРТ10Ы>Юмористические Web-pecypcH</CAPTION>
<TR>
</TABLE>
По умолчанию название таблицы располагается над таблицей по центру и отображается
тем же шрифтом, что и содержимое ячеек данных (обычно это шрифт Times New
Roman). Но при желании вы можете изменить формат названия. Для этого тег
<CAPTION> дополняется следующими атрибутами.
✓ align - выравнивание названия относительно границы таблицы. Этот атрибут при-
нимает любое из четырех значений: left (выравнивание по левой границе, назва-
ние располагается над таблицей), right (выравнивание по правой границе), top
(название располагается над таблицей по центру) и bottom (название под таблицей
по центру);
✓ valign - выравнивание названия при размещении его над или под таблицей. Дело
в том, что атрибут align не выполняет выравнивания названия вправо или влево
при значениях top и bottom. Для такого выравнивания нужно применить оба ат-
рибута valign и align: атрибут valign будет задавать расположение названия
над или под таблицей, а атрибут align - определять его выравнивание по левой или
правой границе таблицы, например:
<CAPTION valign="bottom" align="right">
Этот тег формирует название под таблицей и выравнивает его по правой границе
таблицы. Атрибуты align и valign поддерживаются только браузером Internet
Explorer;
✓ style - устанавливает свойства стиля, относящиеся к тексту названия.
Задание общих параметров таблицы
Рассмотренный ранее пример таблицы (Рис. 4.2) выводится на экран с учетом настроек,
заданных по умолчанию, например, с выравниванием таблицы по левому краю окна и
отображением содержимого гарнитурой Times New Roman. Но вы можете самостоятель-
но назначить размер шрифта, его гарнитуру или задать иное выравнивание таблицы.
Среди многочисленных свойств таблицы можно выделить общие свойства, относящиеся
ко всей таблице в целом, и свойства содержимого таблицы. К первой группе свойств
относятся ширина таблицы, параметры рамок (цвет, толщина) и другие. Содержимое
таблицы может характеризоваться, например, гарнитурой и цветом шрифта. Очевидно,
каждое из этих свойств устанавливается атрибутами соответствующих элементов.
Таблицы 117
Ширина таблицы (атрибут width)
Ширина таблицы - это параметр, общий для всех ее строк, и поэтому задается он в теге
<TABLE> атрибутом width. Значение ширины может быть установлено как в пикселах,
так и в процентах (от полной ширины окна браузера). Например, тег
cTABLE width=300>
задает таблицу с шириной всех строк, равной 300 пикселам. Для построения таблицы
шириной, например, 55% окна вам достаточно записать такой тег
cTABLE width="55%">
Задание ширины в процентах имеет то преимущество, что строки таблицы будут, как
правило, полностью отображаться в окне браузера (без прокрутки).
Выравнивание таблицы в документе (атрибут align)
Для назначения положения таблицы относительно боковых границ окна браузера при-
меняется атрибут align тега <TABLE>. Этот атрибут может принимать одно из трех
значений: left (размещение таблицы вдоль левого края документа; это значение зада-
ется по умолчанию), center (центрирование) и right (размещение таблицы вдоль
правого края документа). Например, таблица шириной 25% от размера окна браузера,
расположенная вдоль правого края страницы, задается следующим HTML-кодом:
<HTML>
<HEAD>
<Т1ТЬЕ>Выравнивание таблицы</Т1ТЬЕ>
</HEAD>
<BODY>
cTABLE border="l" width="25%" align="right" >
<TR><TD>Mara3MH</TD></TR>
<TRxTD>Hauiw bo3moxhoctm</TDx/TR>
<TRxTD>HaiM планы</ТОх/ТЕ>
<TRxTD>Kop3HHa</TDx/TR>
<TR><TD>PerncTpauzx/TDx/TR>
<TR><TD>IloMOmb</TDx/TR>
</TABLE>
</BODY>
</HTML>
Отображение таблицы согласно этому коду показано на Рис. 4.3. Подобную таблицу
можно использовать как элемент навигации по Web-сайту.
118
ГЛАВА 4
Рис. 4.3. Пример таблицы, размещенной вдоль правого края страницы
Текстовое содержимое каждой ячейки по умолчанию центрируется по вертикали и вы-
равнивается по левому краю ячейки (Рис. 4.2, Рис. 4.3). Вы можете установить собствен-
ный стиль выравнивания для всех ячеек таблицы.
Для горизонтального выравнивания текста в таблице удобно пользоваться стилевым
свойством text-align, оформив его в виде встроенного стиля. Допустимые значения
указанного свойства такие же, как и для атрибута align. Например, тег
<TABLE style="text-align:right">
задает выравнивание по правому краю рамки.
Вывод внешней рамки (атрибут border)
Если в элементе TABLE отсутствует атрибут border (либо он равен нулю), браузер
создаст таблицу без видимой рамки (границы). Таблицы без рамок часто используются
для позиционирования различных компонентов страницы (Рис. 4.1).
Если атрибут border указан, то есть дескриптор таблицы имеет вид
<TABLE border>
то таблица будет отображена с внешними и внутренними границами в виде двойной ли-
нии толщиной 1 пиксел. Для задания иной толщины внешней границы нужно указать
числовое значение атрибута border, например, тег
cTABLE border=10>
определяет таблицу с внешней границей 10 пикселов и линиями внутренних границ
1 пиксел (Рис. 4.4).
Таблицы
119
Рис. 4.4. Таблица с атрибутом границ border=l О
Атрибут border позволяет управлять отображением всех ра-
? мок таблицы, однако с его помощью можно установить толщину
линий только внешней рамки. Значения этого атрибута задают-
ся в пикселах.
Параметры внешних и внутренних границ
(атрибуты frame и rules)
Атрибут border позволяет управлять отображением рамки таблицы в целом (по прин-
ципу «есть рамка - нет рамки»). Более гибкие средства задания рамки предоставляют
атрибуты frame и rules. С их помощью можно убрать внешнюю рамку, оставив
внутренние границы, или задать отображение, например, только горизонтальных границ.
< Атрибуты frame и rules могут по отдельности или вместе
; входить в состав тега <тавье>. Однако, чтобы они влияли на
.< отображение рамок, необходимо дополнить указанный тег ат-
рибутом border с ненулевым значением.
Определение внешней рамки
Рассмотрим атрибут frame, который в составе тега <TABLE> определяет отображение
только внешней рамки и может принимать следующие значения:
✓ border (или box) - устанавливает все линии внешней рамки;
✓ void - внешняя рамка не отображается вообще;
✓ above (или below) - выводит только верхнюю (или нижнюю) границу таблицы;
120
ГЛАВА 4
✓ hsides - выводит только верхнюю и нижнюю линии рамки;
✓ vsides - выводит только левую и правую линии рамки;
✓ lhs - устанавливает только левую линию рамки;
✓ rhs - устанавливает только правую линию рамки.
Особенности отображения внешних рамок покажем на примере документа, содержащего
таблицы с различными значениями атрибута frame:
<HTML>
cHEAD>
<Т1ТЬЕ>Атрибут frame</TITLE>
<STY^E>
TABLE{font-size:13pt; margin-top: 20}
TD{width:100; text-align:center; font-family:Courier
New}
.eq{width:3 0; text-align:center}
</STYLE>
</HEAD>
<BODY>
<Н2>Возможные значения атрибута frame</H2>
<TABLE border=0 width=100% >
<TR>
cTDxTABLE border=4 frame=" border ">
<TRxTD>frame< /TDxTD с 1 ass = " eq" >=c /TD><TD>border</TD>
</TRx/TABLEx/TD>
<TD><TABLE border=4 frame="box">
<TR><TD>frame</TDxTD class = "eq">=</TDxTD>box</TD>
c/TRx/TABLEx/TD>
<TDxTABLE border=4 frame="void">
<TR><TD>frame</TDxTD class=" eq">=</TDxTD>void</TD>
< / TRx / TABLEx / TD>
</TR>
<TR>
cTDxTABLE border=4 frame=" above ">
<TRxTD>frame</TDxTD class= "eq">=</TD><TD>above</TD>
</TRx/TABLEx/TD>
cTDxTABLE border=4 frame= "below">
<TR><TD>frame</TDxTD class = "eq">=</TDxTD>below</TD>
</TRx/TABLEx/TD>
cTDxTABLE border=4 frame="hsides">
cTRxTD>framec/TDxTD class="eq">=c/TDxTD>hsidesc/TD>
c/TRx/TABLEx/TD>
c/TR>
cTR>
cTDxTABLE border=4 frame="vsides">
cTRxTD>framec/TDxTD class= "eq">=c/TDxTD>vsidesc/TD>
Таблицы
121
< /TR>< /TABLEx /TD>
cTDxTABLE border=4 frame=" lhs" >
<TRxTD>framec/TDxTD class="eq">=</TD><TD>lhs</TD>
< /TR>< /TABLEx /TD>
cTDxTABLE border=4 frame=”rhs">
<TRxTD>frame</TDxTD class="eq">=</TD><TD>rhs</TD>
< /TR>< / TABLEx /TD>
</TRx/TABLE>
с/BODY>
<HTML>
Здесь таблицы отформатированы с использованием стилей CSS, их внешний вид в окне
Internet Explorer показан на Рис. 4.5. В окне браузера Netscape все таблицы будут ото-
бражаться с одинаковой внешней границей border=4, поскольку стилевые свойства
таблиц этим браузером не поддерживаются.
Рис. 4.5. Примеры отображения внешней рамки в Internet Explorer
при различных значениях атрибута frame
Определение внутренних границ (атрибут rules)
Отображением внутренних границ таблицы управляет атрибут rules, входящий в со-
став тега <TABLE>. Этот атрибут может принимать следующие значения:
✓ попе - все линии, образующие внутренние рамки, не отображаются;
✓ groups - отображаются горизонтальные границы между группами строк и столб-
цов (см. раздел «Группирование строк и столбцов»);
✓ rows - определяется отображение только горизонтальных линий между строками;
✓ cols - устанавливается отображение только вертикальных линий между столбцами;
✓ all - все внутренние рамки таблицы отображаются.
122
ГЛАВА 4
Приведем пример документа, в котором содержатся таблицы, отформатированные
атрибутом rules, принимающим различные значения.
<HTML>
<HEAD>
<Т1ТЕЕ>Атрибут rules</TITLE>
<STYLE>
TABLE{ font-size:13pt;
margin-top:20;
text-align:center;
fon-t-family:Courier New}
</STYLE>
</HEAD>
<BODY>
<Н2>Возможные значения атрибута rules</H2>
<TABLE width=100%>
<TR>
<TD> cTABLE border=4 rules="none">
<TR><TD>rules</TD><TD>=</TD><TD>none</TDx/TR>
<TRxTD> </TD><TD>nnn<TD> </TDx/TR>
<TRxTD>rules</TDxTD>=</TDxTD>groups</TDx/TR>
</TABLEx/TD>
<TD> <TABLE border=4 rules="rows">
<TRxTD>rules< /TDxTD>=< /TDxTD>rows< /TD>< /TR>
<TR><TD> </TD><TD> </TD><TD> </TD></TR>
<TRxTD>rules</TDxTD>=</TD><TD>rows</TDx/TR>
</TABLEx ZTD>
<TD> <TABLE border=4 rules="cols">
<TRxTD>rules</TD><TD>=</TDxTD>cols</TD></TR>
<TR><TD> </TD><TD> </TDxTD> </TDx/TR>
<TRxTD>rules</TD><TD>=</TD><TD>cols</TDx/TR>
</TABLEx/TD>
<TD> cTABLE border=4 rules="all">
<TR><TD>rules</TDxTD class= "eq">=</TD><TD>all</TDx/TR>
<TRxTD> < /TDxTD
с 1 as s=" eq" > < / TDxTD> < / TD> < / TR>
<TR><TD>rules</TDxTD class="eq">=</TD><TD>all</TDx/TR>
</TABLEx/TD>
</TR>
</TABLE>
</BODY>
<HTML>
Отображение этого документа в окне браузера Internet Explorer показано на Рис. 4.6.
Таблицы
123
Рис. 4.6. Примеры таблиц с различными значениями атрибута rules
Ширина границ таблицы (атрибут cellspacing)
Границы таблицы по умолчанию отображаются двойной линией, причем расстояние
между линиями (зазор) равно 2 пиксела. Если вы хотите изменить величину зазора
в двойной линии, необходимо тег <TABLE> дополнить атрибутом cellspacing
(в переводе - расстояние между ячейками). Значение этого атрибута, которое задается
положительным целым числом, определяет толщину двойной линии границ.
Расстояние от содержимого ячейки до рамки
(атрибут cellpadding)
В HTML предусмотрен атрибут cellpadding, задающий расстояние в пикселах от
содержимого ячейки до рамки (Рис. 4.7). Этот атрибут применяется в составе тега
<TABLE>. По умолчанию значение cellpadding устанавливается равным 1 пикселу.
В качестве примера действия атрибута cellpadding приведем две таблицы, содержа-
щиеся в следующем HTML-документе:
<HTML>
<HEAD>
<Т1ТЬЕ>Атрибут cellpadding</TITLE>
<STYLE>
TABLE {font-size:12pt)
</STYLE>
</HEAD>
<BODY>
<Н2>Таблицы с различным расстоянием
от содержимого до границы ячейки</Н2>
cTABLE border=l>
124
ГЛАВА 4
<TR><TD>Be3 атрибута</ТВ>
<TDxCODE>cellpadding</CODEx/TDx/TR>
</TABLE>
<TABLE border=l cellpadding=30 style="margin-top:30">
<TR><TD>C атрибутом</ТВ>
<TDxCODE>cellpadding=30</CODEx/TDx/TR>
</TABLE>
</BODY>
</HTML>
Внешний вид этого документа в окне браузера Internet Explorer показан на Рис. 4.7. Об-
ратите внимание, что размеры ячеек и самих таблиц в этом примере не заданы. Поэтому
фактические расстояния между границами ячеек и текстом в них обусловлены только
действием атрибута cellpadding.
Рис. 4.7. Примеры использования атрибута cellpadding
Форматирование строк и ячеек
Рассмотренные выше свойства относились к таблице в целом, но часто возникает необ-
ходимость задать специальное форматирование для ячеек строки. Для этого предусмот-
рены атрибуты тега <TR>. Например, размеры ячеек строки устанавливаются знакомы-
ми вам атрибутами width (ширина) и height (высота).
Выравнивание содержимого
По умолчанию содержимое всех ячеек выравнивается по левому краю каждой ячейки (за
исключением заголовков, для которых установлено выравнивание по центру). Для зада-
ния иного вида выравнивания в теги <TR> или <TD> вводятся атрибуты align, прини-
мающие, как обычно, значения left, right, center и justify. Например, теги
Таблицы
125
<TR align="right">
<TD align="center">
определяют соответственно выравнивание содержимого всех ячеек строки (тег <TR>)
по правой границе ячеек и выравнивание содержимого конкретной ячейки (тег <TD>)
по центру.
С помощью атрибута valign вы можете задавать выравнивание содержимого
по вертикали. Этот атрибут применяется с такими значениями: top (выравнивание
по верхнему краю ячеек), bottom (по нижнему краю ячеек), middle (центрирова-
ние по вертикали) и baseline (выравнивание всех элементов строки по общей
базовой линии). Например, тег
<TR valign="middle">
назначает центрирование по вертикали содержимого ячеек строки. А смещение к верх-
нему краю ячейки устанавливается тегом:
<ТН valign="top">
Для выравнивания текста в ячейках строки можно воспользоваться стилевым свойством
text-align. Оно принимает такие же значения, что и атрибут align. Например, тег
<TR styles"text-align:right">
назначает центрирование текста для всех ячеек данной строки. Аналогично можно за-
дать стиль для выравнивания текста в конкретных ячейках.
В качестве примера приведем код документа (Рис. 4.8), в котором имеется таблица с по-
лезной информацией о единицах длины, используемых стандартом CSS. Выравнивание
в ячейках таблицы задается с помощью листа стилей:
<HTML>
<HEAD>
<Т1ТЬЕ>Выравнивание содержимого ячеек</Т1ТЬЕ>
<STYLE>
TABLE {font-size:llpt)
.num {width:80; text-align:center}
.unit {width:130; text-align:center}
.rel {text-align:right}
CAPTION {font-family:arial)
</STYLE>
</HEAD>
<BODY>
<TABLE border>
<САРТ1ОЫ>Единицы длины, предусмотренные в CSS</CAPTION>
<TR> <ТН>Номер строки</ТН>
<ТН>Название</ТН>
<ТН>Обозначение</ТН>
<ТН>Соотношения</ТН></ТР>
<TR> <TD class="num">l</TD>
126
ГЛАВА 4
<ТВ>Дюймы (inches)</TD>
<TD class="unit">in</TD>
<TD class="rel">1 in = 2.54 cm</TDx/TR>
<TR> <TD class="num">2</TD>
<ТВ>Сантиметры (centimeters)</TD>
<TD class="unit">cm</TD>
<TD class="rel">1 cm = 10 mm</TDx/TR>
<TR> <TD class="num">3</TD>
<ТВ>Миллиметры (millimeters)</TD>
<TD class="unit">mm</TD>
<TD class="rel">l mm = 0.1 cm</TDx/TR>
<TR> c.TD class="num">4</TD>
<TD>IIyHKTbi (points) </TD>
<TD class="unit">pt</TD>
<TD class="rel">1 pt = 1/72 in = 0,353 mm</TD></TR>
<TR> <TD class="num">5</TD><TD>IlHKM (picas) </TD>
<TD class="unit">pc</TD>
<TD class="rel">l pc = 12 pt = 4.333 mm</TDx/TR>
</TABLE>
</BODY>
</HTML>
Puc. 4.8. Пример выравнивания содержимого в ячейках таблицы
В этом примере содержимое строки заголовков по умолчанию выровнено по центру.
Содержимое столбцов номера строки и обозначений также центрировано. Для столбца
соотношений между единицами измерения выбрано выравнивание по правой границе.
Заметим, что выравнивание содержимого ячеек может быть задано разными тегами, и
поэтому такие инструкции могут противоречить друг другу. Например, значения
свойств выравнивания, задаваемые тегами
cTABLE style="text-align:right">
<TR style="text-align: justify">
<TD style=*text-align: center">
Таблицы
127
для конкретного элемента TD конфликтуют между собой. Чтобы однозначно устанав-
ливать выравнивание, в HTML для таблиц приняты приоритеты наследования (см. раз-
дел «Наследование свойств выравнивания»).
Задание ширины и высоты
При создании Web-страниц часто возникает необходимость установления линейных
размеров (высоты и ширины) компонентов таблицы. Для задания высоты в тегах <TD>,
<ТН> и <TR> предусмотрен знакомый вам атрибут height. Ширина элементов <TD> и
<ТН> определяется атрибутом width. Целочисленные значения этих атрибутов задают
размеры в пикселах. Например, ячейка данных высотой 30 и шириной 70 пикселов зада-
ется тегом
<TD height=30 width=70>
В элементах TD и TH вместо устаревших атрибутов height и width рекомендуется
применять атрибут style со свойствами height и width. Например, тег
<ТН style="height:25; width:150">
устанавливает высоту ячейки заголовка 25 пикселов и ширину - 150 пикселов.
Отметим, что при изменении ширины одной ячейки меняется ав-
томатически ширина всего столбца таблицы. Аналогично задание
высоты ячейки устанавливает фактически высоту строки. еУЙР
Текст, превышающий по длине заданную ширину ячейки, автоматически переносится на
следующую строку той же ячейки. Чтобы расположить текст в одну линию, вы можете
дополнить теги <ТН> и <TD> атрибутом запрета разрыва строки nowrap (либо стиле-
вым свойством white-space: nowrap).
Объединение ячеек таблицы
Все рассмотренные нами ранее примеры таблиц имели в каждой строке одинаковое ко-
личество ячеек. Но иногда приходится создавать таблицы, в которых смежные ячейки
должны быть объединены. Достигается это использованием в начальных тегах <ТН>
или <TD> следующих атрибутов.
✓ rowspan - предназначен для объединения ячеек смежных строк. Значение атрибута
задает количество объединяемых ячеек. Например, начальный тег ячейки заголовка
<ТН rowspan=3>
устанавливает объединение трех ячеек;
128
ГЛАВА 4
✓ col span - назначает объединение ячеек смежных столбцов. Количество объеди-
няемых ячеек устанавливается значением этого атрибута; например, для формирова-
ния одной ячейки данных из трех ячеек смежных столбцов надо записать тег
<ТН colspan=3>
Если вы хотите объединить ячейки, расположенные в смежных строках и столбцах, то
дополните тег <TD> или <ТН> сразу двумя атрибутами rowspan и col span. На-
пример, образование одной ячейки, расположенной на пересечении двух строк и трех
столбцов назначается контейнером
<TD rowspan=2 colspan=3>
При объединении ячеек столбцов и строк их количество равно
произведению значений атрибутов rowspan и col span, а не их
сумме. Так в последнем примере количество объединяемых ячеек
равно шести (2x3=6).
Рассмотрим пример HTML-документа, в котором таблица имеет объединеннные ячейки:
<HTML>
<HEAD>
<Т1ТЬЕ>0бъединение ячеек</Т1ТЬЕ>
</HEAD>
<BODY>
<Н2>Магазин "Школяр" предлагает учебники:</Н2>
<TABLE border>
<TRxTH> Предмет*:/ТНхТН>Раздел</ТН>
<ТН>Классы</ТН></ТИ>
<TRxTD гом5рап=5>Математика</ТВхТБ>Арифметика</ТВ>
<TD>l– 4</TDx/TR>
<TRxTD>Anre6pa</TD><TD>5– ll</TDx/TR>
<TR><TD>reoMeTpnx/TD><TD>7– 11</TD></TR>
<TR><TD>Tpi/iroHOMeTpnx/TD><TD>10Scndash; 11</TD></TR>
<TRxTD colspan=2>
<1>Количество наименований: 1090</Ix/TD></TR>
<TRxTD rowspan=4><t>H3MKa</TDxTD>MexaHHKa</TD>
<TD>5– 7</TD></TR>
<TRxTD>3neKTpn4ecTBO</TDxTD>7– 9</TDx/TR>
<TRxTD>OnTMKa</TD><TD>10– 11</TD></TR>
<TRxTD colspan=2>
<1>Количество наименований: 457</Ix/TDx/TR>
</TABLE>
</BODY>
</HTML>
Таблицы
129
На Рис. 4.9 представлено отображение этого документа в браузере Internet Explorer.
Таблица имеет две объединенные ячейки «Математика» и «Физика», которые полу-
чены из смежных ячеек одного столбца. Имеются также две ячейки «Количество на-
именований...», полученных объединением двух смежных ячеек одной строки.
Рис. 4.9. Пример таблицы, содержащей объединенные ячейки
Цвет в таблицах
Рассмотрим возможности задания цвета для элементов таблицы: фона, рамок, строк,
ячеек, заголовка и т.д.
Фон
Цвет фона в таблицах определяется атрибутом bgcolor (см. раздел «Управление
цветом шрифта и фона Web-страницы» главы 2). Применение этого атрибута к таб-
лицам имеет некоторые особенности. В зависимости от того, какой из тегов
s<TABLE>, <TR>, <ТН> или <TD>) вы дополните атрибутом bgcolor, получится
четыре варианта задания цвета: фона всей таблицы, фона строки, фона ячейки заго-
ловка или фона данных. Например, тег
cTABLE bgcolor="red">
назначает красный фон всей таблицы, а желтый фон ячейки данных задает тег
<TD bgcolor="yellow">
130
ГЛАВА 4
Вы можете воспользоваться каскадными стилевыми свойствами для назначения цвета
фона. Например, тег
cTABLE style="background-color: aqua">
отображает содержимое всех ячеек таблицы на бирюзовом фоне.
Следующий пример иллюстрирует применение атрибутов цвета к элементам таблицы:
<HTML>
<HEAD>
сТ1ТЕЕ>Цвет элементов таблицыс/Т1ТЕЕ>
cSTYLE type="text/css">
TABLE {font: bold' llpt Arial;
text-align:center;
background-color:#ff99ff;
color:blue}
TR {background-color:aqua}
</STYLE>
</HEAD>
<BODY>
сН2>Задание цветов для элементов таблицы</Н2><ВЕ>
cTABLE cellspacing=12 width=550 border=5>
<TR>
<ТВ>Цвет фона всей табли-
цы</ТЕ><ТЕ>фиолетовый</ТЕ></ТЕ>
<TR>
сТЕ>Цвет фона строк с/ТЕ>сТО>бирюзовыйс/ТВ>с/ТЕ>
<TR>
<ТВ>Цвет линий рамки (по умолча-
нию) </TD><TD>cepbri4</TD></TR>
<TR>
<ТВ>Цвет шpифтa</TD><TD>cиний</TD></TR>
</TABLE>
</BODY>
</HTML>
Внешний вид этого документа показан на Рис. 4.10.
Таблицы
131
Рис. 4.10. Задание цветов фона таблицы, строк и обрамления
Цвет внешней рамки
Чтобы выделить цветом внешнюю рамку таблицы, нужно в тег <TABLE> ввести атрибу-
ты bordercolor и border. Значение bordercolor выбирается из таблицы имено-
ванных цветов либо задается в числовом шестнадцатеричном формате (см. табл. 2.3).
Например, таблица будет отображена с зелеными рамками, если записать тег
<TABLE bordercolor="green" border=5>
при этом толщина внешней рамки будет равна 5 пикселам, а внутренних рамок -
1 пикселу.
Цвет внутренних границ
Цвет внутренних границ, как и цвет внешней рамки, устанавливается атрибутом
bordercolor. Однако этот атрибут помещается в теги <TR>, <ТН> или <TD>.
Например, тег
<TR bordercolor="FF0000">
задает красные границы всех ячеек строки, а синие границы ячеек заголовков опреде-
ляются тегом
<ТН bordercolor="00FF00">
«Объемная» рамка
В HTML рамке таблицы можно придать объемный вид. Такой эффект достигается за
счет разных цветов верхней и нижней линий, образующих рамку. Напомним, что рамка
132
ГЛАВА 4
таблицы образуется двойными линиями. Если принять, что таблица освещается со
стороны верхнего левого угла экрана, то внешняя рамка имеет освещенную (верхние
и левые линии) и затененную (нижние и правые линии) части, в то время как для
внутренних рамок все наоборот - освещены нижние и правые линии, а затемнены
верхние и левые линии.
Создание «объемной» таблицы выполняется двумя атрибутами bordercolordark
(определяет цвет затененной части рамки) и bordercolorlight (задает цвет осве-
щенной части рамки). Например, тег
cTABLE bordercolordark="brown" bordercolorlight="yellow"
border=5>
задает внешнюю рамку толщиной 5 пикселов, причем верхняя и левая части границ бу-
дут желтыми, а правые и нижние части - коричневыми.
Если атрибуты bordercolordark и bordercolorlight ввести в состав тегов
<TR>, <тн> или <TD>, то у вас появится дополнительная возможность оттенить внут-
ренние границы ячеек.
Группирование строк и столбцов
Для расширения возможностей форматирования таблиц в HTML 4.0 предусмотрено
группирование строк и столбцов. Группирование позволяет присваивать каждой группе
элементов общие свойства (например, выравнивание, гарнитуру и размер шрифта и т.д.).
Группы строк (элементы THEAD, TFOOT и TBODY)
Для удобства форматирования содержимого таблицы можно разбить ее на заголовоч-
ную, основную и нижнюю части. Сами названия указанных частей говорят об их распо
ложении в таблице. На Рис. 4.11 показан пример группирования строк таблицы. Дв,
первые строки - заголовочная часть, а последние две строки - нижняя часть таблиць:
Основная часть таблицы представлена группой из семи строк. Каждая часть таблиш
в нашем примере имеет свой фоновый цвет.
Построчное группирование в таблицах может осуществляться с помощью трех элементов.
✓ THEAD - определяет заголовочную часть таблицы. Начальный тег <ТНЕАГ
предшествует первой строке в таблице, а конечный тег </THEAD> можно пропус
тить (браузер сам определит конец заголовочной части таблицы, встретив начальна
тег основной или нижней частей таблицы). В элемент THEAD можно включать ш
сколько строк ячеек заголовков или данных;
✓ TFOOT - задает нижнюю часть таблицы. Обычно этот элемент применяется дг
форматирования последних строк таблицы, содержащих итоговые числовые даннь
(Рис. 4.11). Начальный тег <TFOOT> размещается непосредственно после элемент
THEAD, а конечный тег < /TFOOT> может быть опущен;
Таблицы
133
✓ TBODY - задает основную часть таблицы, которая состоит из элементов строк <TR> и
вложенных элементов ячеек и заголовков.
Рис. 4.11. Пример таблицы, состоящей из трех частей THEAD, TFOOT и TBODY.
Каждая часть представляет собой группу строк
Отметим, что в таблице может быть только один элемент thead и tfoot, но несколько
элементов TBODY. Пользуясь этими элементами, можно определенным образом сгруп-
пировать ячейки таблицы, что облегчит применение к ним стилей и сценариев.
Рассмотрим пример таблицы (Рис. 4.11), содержащей группы строк. Код соответствую-
щей Web-страницы имеет следующий вид:
<HTML>
<HEAD>
<Т1ТЬЕ>Группы строке/TITLE>
e/HEAD>
<BODY>
<Н2>Пример таблицы с элементами THEAD, TFOOT и
TBODY</H2>
cTABLE width=450 border style="font-family:Arial;
font-size:llpt; text-align:center">
cTHEAD style="background-color:yellow">
< TR style="font-size:13pt; font-weight:bold">
< TD со1зрап=2>Количество посетителей за неде-
лю</TD> </TR>
< TR style="font-style:italic; text-align:center">
<ТВ>День недели</ТО><ТВ>Количество</ТВх/ТН>
</THEAD>
134
ГЛАВА 4
<TFOOT style="font:italic bold; color:white;
text-align:right; background-color:brown">
<TR><TD>MToro</TDxTD>866</TH></TR>
<TR><TD>b том числе CTyfleHTOB</TD><TD>251</TDx/TR>
</TFOOT>
cTBODY style="text-align:right;
background-color:lightyellow">
<TR><TD>rioHe де л ь ник</TD><TD> 10 б < / TD></TR>
<TRxTD>Btophmk</TD><TD>212</TDx/TR>
<TR><TD>Cpena</TDxTD>133</TDx/TR>
<TRxTD>4eTBepr</TD><TD>145</TDx/TR>
<TRxTD>IlHTHMiJ,a</TDxTD>121</TDx/TR>
<TRxTD>Cy66OTa</TDxTD>99</TDx/TR>
<TR><TD>BocKpeceHne</TDxTD>50</TDx/TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
В этом примере элементы THEAD, TFOOT и TBODY дополнены атрибутом стиля style.
К другим допустимым атрибутам этих элементов относятся:
✓ атрибуты горизонтального и вертикального выравнивания (align и valign), кото-
рые принимают стандартные значения; подробнее о допустимых значениях атрибу-
тов выравнивания вы можете узнать в пункте «Выравнивание содержимого» данной
главы;
✓ атрибуты id и class для назначения стиля (подробнее см. главу 3 «Листы стилей»);
✓ атрибут title, предназначенный для формирования всплывающей подсказки;
✓ атрибуты lang и dir задания языка и направления чтения документа (см. раздел
«Прочие вопросы подготовки текста» главы 2).
Группы и подгруппы столбцов
(элементы COLGROUP и COL)
В предыдущем разделе мы рассмотрели группирование строк. Для столбцов в HTML
тоже предусмотрена возможность группирования, но с помощью элемента COLGROUP
который вкладывается в родительский элемент TABLE. Конечный тег </COLGROUP;
можно опустить.
Количество столбцов, объединяемых в группу, их ширина и стиль отображения содер-
жимого ячеек определяются следующими атрибутами тега <COLGROUP>:
✓ атрибут span задает количество столбцов в группе; например, тег
<COLGROUP span=5>
Таблицы 135
назначает группу из пяти столбцов; по умолчанию (когда атрибут span отсутствует)
группа состоит только из одного столбца;
✓ атрибут width назначает ширину каждого столбца группы; его значение вы можете
определить в пикселах;
✓ атрибуты align, valign и style определяют форматирование содержимого
ячеек.
На Рис. 4.12 представлено отображение таблицы, отформатированной с применением
элементов COLGROUP. По оттенкам фона ячеек можно заметить, что в этой таблице вы-
делено две группы столбцов: первая группа - это столбцы 1 и 2, а вторая группа -
столбцы 3-6, начиная с третьей строки.
Рис. 4.12. Пример создания групп столбцов с помощью элементов COLGROUP
Представленная таблица формируется в следующем HTML-документе:
<HTML>
<HEAD>
<Т1ТЬЕ>Группирование столбцов</Т1ТЬЕ>
<STYLE>
TABLE {text-align:center)
TD {height:120; width:80}
</STYLE>
</HEAD>
<BODY>
<Н2>Пример группирования столбцов таблицы</Н2>
136
ГЛАВА 4
<TABLE border>
<САРТ10П>Периодическая система
элементов Д.И. Менделеева (фрагмент)</CAPTION>
<COLGROUP span=2 style="background-color:#ff99ff">
<TRxTD>3<BRxB>Li</BxBR>JIHTnit</TD>
<TD>4<BR><B>Be</B><BR>BepwiMH</TD>
<TD>5<BR><B>B</B><BR>Bop</TD>
<TD>6<BR><B>C</B><BR>yrnepofl</TD>
<TD>7<BRxB>N</B><BR>A3OT</TD>
<ТО>8<ВР><В>0</В><ВР>Кислород</ТВх/ТВ>
<TRxTD>ll<BRxB>Na</B><BR>HaTpj4fi</TD>
<TD>12<BRxB>Mg</BxBR>MarHHft</TD>
<TD>13<BR><B>Al</BxBR>AnroMHHwfi</TD>
<TD>14<BRxB>Si</BxBR>KpeMHwi4</TD>
<TD>15<BR><B>P</В><ВР>Фосфор</TD>
<TD>16<BR><B>S</B><BR>Cepa</TDx/TR>
cCOLGROUP span=4 style="background-color:#00ffff">
<TRxTD>19<BRxB>K</BxBR>Kannir</TD>
<TD>2 0<BRxB>Ca< / В><ВВ>Кальций</TD>
<TD>21<BR><B>SC</В><ВЕ>Скандий</TD>
<TD> 2 2 <BRxB>Ti< /ВхВВ>Титан< /TD>
<TD>23<BRxB>V</BxBR>BaHaflHM</TD>
<TD> 2 4 <BRxB>Cr < / BxBR>XpoM< / TDx/TR>
</TABLE>
</BODY>
</HTML>
Для выделения отдельного столбца в элементе COLGROUP вы можете воспользоваться
одиночным тегом <COL>. Этот тег можно вложить в элемент COLGROUP и, тем самым,
разбить группу столбцов на подгруппы. Начальный тег <COL> дополняется рядом атри-
бутов, которые совпадают с атрибутами элемента COLGROUP, рассмотренными выше.
Чтобы показать возможности введения подгрупп столбцов, рассмотрим пример. Допус-
тим, в таблице на Рис. 4.12 нужно для химических элементов первой группы (первый
столбец) изменить фон ячеек и свойства шрифта. Для этого запишем два дополнитель-
ных тега:
✓ <COL style="background-color:#4444ff; color:f; font-
weight : bold" > - назначает стиль отображения первого столбца таблицы;
✓ <COL> - указывает, что второй столбец остается без изменений.
Оба тега необходимо вставить сразу после первого элемента COLGROUP. В результате
таблица приобретет вид, показанный на Рис. 4.13.
Таблицы
137
Рис. 4.13. Пример использования элементов подгруппы COL
При группировании столбцов таблицы помните, что элементы COLGROUP и COL под-
держиваются только браузером Internet Explorer. В браузере Netscape периодическая
таблица элементов, представленная на рисунках этого пункта, будет иметь совершенно
другой вид (Рис. 4.14).
♦‘-Периодическая систем.) - Netscape ваа
file Edit yiew Go Communicator Help
r 1 > Zr . z.r. ....Z . --------.—.
Периодическая система элементов Д И. Менделеева
(фрагмент)
3 I4 5 6 7 8
Li Ее В с N О
Литий Берилий Бор Углерод Азот Кислород
11 12 13 14 15 16
Fa Mg А1 Si В S
Натрий Магний Алюминий Кремний Фосфор Сера
19 20 21 22 23 24
К Са Sc Ti V Сг
Калий Кальций Скандий Титан Ванадий Хром
Просителе Done ||g[
Рис. 4.14. Игнорирование в браузере Netscape атрибутов форматирования таблицы
138
ГЛАВА 4
Наследование свойств выравнивания
В предыдущих разделах для выравнивания содержимого ячеек мы применяли атрибуты
align и valign непосредственно в элементах TH или TD. Но в HTML имеется более
естественный способ выравнивания, который состоит в наследовании дочерними
элементами свойств выравнивания родительского элемента.
Напомним, что по отношению к элементу TABLE дочерними являются TR, TH, TD,
THEAD, TFOOT, TFOOT, COL, COLGROUP. В каждом из них можно задать параметры вы-
равнивания. Однако при отображении содержимого какой-либо ячейки к нему будет
применяться свойство выравнивания с наиболее высоким приоритетом согласно приня-
тому в HTML порядку.
Значения атрибута горизонтального выравнивания align наследуются с учетом сле-
дующего порядка приоритетов (от высшего приоритета к низшему):
✓ наиболее высоким приоритетом обладают атрибуты, установленные внутри символьных
данных ячейки (например, если в ячейке размещен элемент абзаца Р, то к содержимому
ячейки будет применено выравнивание, установленное атрибутами элемента Р);
✓ атрибуты тегов <ТН> или <TD>;
✓ атрибуты элементов группирования столбцов (элементы COL и COLGROUP);
✓ атрибуты элементов строки или групп строк (элементы TR, THEAD, TFOOT, TFOOT);
✓ атрибуты элемента TABLE;
✓ самым низким приоритетом обладают значения атрибутов, установленные
по умолчанию.
Свойства вертикального выравнивания (или значения атрибута valign) для содержи-
мого ячеек наследуются практически в том же порядке, что и свойства горизонтального
выравнивания. Отличие в правилах наследования атрибута valign состоит лишь в том,
что значения этого атрибута в элементах строк или групп строк (элементы TR, THEAD,
TFOOT, ТЕООТ)имеют более высокий приоритет, чем значения в элементах группирова-
ния столбцов (элементы COL и COLGROUP).
Проиллюстрируем применение описанных выше правил приоритета к отображению таб-
лицы, в которой заданы свойства выравнивания в различных элементах. Рассмотрим
следующий HTML-код:
<HTML>
<HEAD>
<Т1ТЕЕ>Наследование свойства выравнивания</Т1ТЕЕ>
</HEAD>
<BODY>
<Н2>Пример наследования свойств выравнивания</Ь2>
cTABLE border width=300 style="text-align:center; font-
size: 12pt">
<THEAD>
<ТЕ><ТН>Цвет</ТН><ТН>Имя</ТНхТН>Код</ТНх/ТЕ>
Таблицы
139
</THEAD>
<TBODY align="left">
<TR>
<ТВ>Бирюзовый</TD>
<TD>aqua</TD>
<TD align="right">00f f f f </TDx/TR>
<TR>
<ТВ>Черный</TD>
<TD>black</TD>
<TD align="center" style="text-
align: right ">000000</TDx/TR>
<TR align="center">
<TD>Cmhiim</TD>
<TD>blue</TD>
<TD>OOOOff</TD></TR>
<TR>
<ТП>Розовый</TD>
<TD> f uchs i a</TD>
<TD align="right">ffOOff</TDx/TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
Внешний вид этого документа с заданными типами выравнивания содержимого таблицы
вы можете видеть на Рис. 4.15.
Рис. 4.15. Пример использования приоритетов свойств выравнивания
140
ГЛАВА 4
В данном примере общее выравнивание по центру задается на уровне элемента таблицы
TABLE (свойство стиля text-align: center). Это выравнивание применяется к час-
ти THEAD, однако отменяется в части TBODY атрибутом align= "left". Во второй
строке таблице («Бирюзовый») в последней ячейке кода задается выравнивание вправо.
Третья строка таблицы («Черный») внешне оформлена как вторая, однако выравнивание
вправо в ее последней ячейке получено не атрибутом элемента TD, а свойством с наибо-
лее высоким приоритетом - свойством текста ячейки (значение стиля text-
align: right). Следующая строка таблицы («Синий») отображается с учетом только
строкового атрибута align="center". Наконец, при отображении последней строки
(«Розовый») учитывается атрибут align="left" элемента TBODY и атрибут
align=" right" последнего элемента TD.
Компоновка таблиц и текста
Рассмотренные в этой главе приемы создания таблиц касались только представления их
границ и содержимого ячеек. Однако при компоновке Web-страницы необходимо учи-
тывать еще размещение таблиц относительно внешних элементов HTML-документа
(текста, изображений и проч.).
Если непосредственно в текст вставить элемент TABLE, таблица разорвет текстовую
строку. Вывод текста на экран будет продолжен ниже таблицы, начиная с ближайшего
левого поля, как показано на Рис. 4.16.
Рис. 4.16. Пример разрыва строки таблицей, вставленной в текст
Плавающие таблицы
Применение в теге <TABLE> атрибута align принципиально меняет характер взаимодей-
ствия элемента TABLE со смежным текстом. В этом случае таблица не разрывает строк, и
текст размещается вокруг таблицы. Получаемая таблица называется плавающей (Рис. 4.17).
Атрибут align может принимать, как известно, значения left, right и center.
Таблицы
141
Рис. 4.17. Пример «плавающей» таблицы
Вы можете воспользоваться и другим способом формирования плавающей таблицы - с
помощью стилевого свойства float (см. раздел «Свойства блока» главы 3). Это свой-
ство принимает одно из трех значений: left (таблица отображается слева от после-
дующего элемента), right (таблица справа от последующего элемента) и попе (отме-
на обтекания). Например, таблица в примере на Рис. 4.17 вводится следующим тегом:
cTABLE border styles"float:left;
margin-right:3mm; margin-bottom:3mm; text-align:center;
font-family:arial; font-weight:bold; color:white">
Напомним, что свойства margin-right и margin-bottom задают зазоры между
таблицей и текстом.
Прерывание обтекания текста вокруг таблицы
Если вам нужно прервать обтекание текста вокруг таблицы, можете использовать атри-
бут clear в элементах абзацев <Р> или разрыва строки <BR>. Этот атрибут принимает
значения lef t и right и both.
Ниже приведен листинг HTML-файла, содержащий пример прерывания потока текста
тегом <BR> с атрибутом clear:
cHTML>
<HEAD>
<Т1ТЬЕ>Прерывание обтеканияс/Т1ТЬЕ>
</HEAD>
<BODY>
сН2>Пример прерывания обтекания таблицы текстом</Н2>
cTABLE border align="right" width=120
style="color:white; text-align:center;
142
ГЛАВА 4
font-family:arial; font-weight:bold;
margin-left:3mm; margin-bottom:3mm">
<TR style="background-color:red"><TD>KpacHbM</td>
<TR sty1e="background-color:green"><ТВ>Зеленый</td>
<TR style="background-color:blue"><ТБ>Синий</td>
</TABLE>
Данная таблица формируется с использованием
свойства <KBD>align="right"</KBD> и обтекается текстом с ле-
вой стороны. После элемента <KBD><BR
с1ear="1е f t"></KBD>
<BR clear="right">
обтекание прекращается, а продолжение текстовой строки
размещается ниже таблицы.
</BODY>
</HTML>
Внешний вид этого документа показан на Рис. 4.18.
Рис. 4.18. Пример использования атрибута clear
для прекращения обтекания таблицы текстом
В спецификации HTML 4.01 атрибут clear определен как устаревший. Вместо него
рекомендуется применять листы стилей со свойством clear (см. раздел «Свойства
блока» главы 3). Это свойство может принимать следующие значения:
✓ попе - устанавливается по умолчанию и соответствует отображению последующе-
го элемента рядом с обтекаемой таблицей;
✓ left - пустое место остается справа от «плавающей» таблицы;
✓ right - пустое место остается слева от «плавающей» таблицы;
✓ both - последующий элемент отображается ниже «плавающей» таблицы.
ГЛАВА 5.
Г рафика и мультимедиа
на Web-странице
World Wide Web в первые годы своего существования служила для размещения сугубо
текстовой информации. Лишь с появлением браузера Mosaic стало возможным просмат-
ривать ресурсы, содержащие графические изображения. Появление изображений в Web
привело к резкому увеличению интенсивности потока данных через глобальную сеть.
Действительно, возможность размещать на Web-страницах различную графическую ин-
формацию многократно увеличило количество пользователей, заинтересованных в дос-
тупе к ресурсам Web. В настоящей главе мы рассмотрим способы добавления изображе-
ний, а также аудио- и видеоклипов, к создаваемым вами страницам.
Общие сведения о графике для Web
Изображения как объекты на Web-страницах заслуживают того, чтобы об их природе и
возможном использовании поговорить отдельно.
Об использовании графической информации
Использование изображений в Web-страницах, безусловно, улучшает восприятие
документов, однако чрезмерное увлечение графикой имеет отрицательную сторону.
Связано это в первую очередь с тем, что графические изображения довольно медленно
загружаются. Пользователь, обладающий не очень хорошим модемом или
подключенный к Интернету через плохую линию связи, может ждать окончания
загрузки изображений несколько минут. Понятно, что медленный вывод изображений на
экран будет его раздражать, и вряд ли он захочет повторно посетить такой Web-сайт.
Поэтому при использовании графики руководствуйтесь следующими рекомендациями.
✓ Количество графической информации, размещенной на Web-страницах, нужно сво-
дить к минимуму. Это касается как количества изображений, так и их размера.
✓ Необходимо использовать возможности по ускорению открытия страницы. Имеется
в виду предварительная загрузка уменьшенного варианта изображения, чересстроч-
ная развертка, а также альтернативный текст на случай отключения вывода изобра-
жений в браузере пользователя.
✓ При размещении большого количества изображений, придерживайтесь общего пра-
вила: крупные изображения должны находиться на страницах низшего уровня, по-
священных специальным и узким вопросам. На главной странице сайта должны при-
сутствовать только небольшие изображения.
Форматы графических файлов для WWW
Данные об изображениях хранятся в файлах графических форматов. Существует доста-
точно много форматов, обеспечивающих организацию графических данных (например,
144
ГЛАВА 5
BMP, EPS, GIF, JPEG, PCX, TIFF и множество других). Но посетитель вашей страницы
увидит графическое изображение лишь в том случае, если его браузер поддерживает
данный графический формат. Поэтому изображения создаются в тех форматах, которые
понимают большинство браузеров. К таким форматам относятся следующие:
✓ GIF (сокращение от Graphics Interchange Format - графический формат обмена), име-
ет расширение .gif;
✓ JPEG (сокращение от Joint Photographic Experts Group - объединенная группа экс-
пертов фотографии), имеет расширение .jpg или .jpeg;
✓ PNG (сокращение от Portable Network Graphics - переносимая сетевая графика), име-
ет расширение .png.
Формат GIF. Является стандартом для Web-графики, причем без потери качества дос-
тигается высокая степень сжатия. GIF обладает замечательными свойствами, которые
позволяют создавать прозрачные области на изображении и назначать воспроизведение
изображений в режиме чересстрочной развертки. С помощью этого формата в одном
файле можно хранить несколько изображений и создавать простые анимации. Восьми-
битовая схема кодирования цвета, принятая в GIF, ограничивает глубину цвета (всего
28=256 цветов). Поэтому в этом формате обычно сохраняются простые рисунки с не-
большим количеством цветов. Однако имеются некоторые формальные ограничения на
использование GIF, поскольку чрезвычайно эффективный алгоритм сжатия данных,
примененный в этом формате, защищен патентом.
Формат JPEG. Подобно формату GIF считается стандартом для Web-графики и обеспе-
чивает высокую степень сжатия. Поскольку в этом формате принята 24-битовая схема
кодирования цветов, в нем можно сохранять почти семнадцать миллионов цветов
(224=16777216) и получать высокое качество проработки деталей изображения. Этот
формат позволяет достичь компромисса между степенью сжатия и качеством изображе-
ния (с увеличением качества уменьшается степень сжатия и наоборот). JPEG часто при-
меняется для изображений с высоким качеством проработки деталей (например, фото-
графии или графика с большим количеством цветов).
Формат PNG. Этот формат обладает всеми возможностями формата GIF, а также рядом
дополнительных достоинств. Во-первых, PNG поддерживает очень «глубокий» цвет
(глубина цвета - 48 бит). Во-вторых, файлы PNG более компактны: в них выполняется
сжатие изображения по вертикали и по горизонтали. Наконец, данный формат не имеет
тех юридических сложностей, что формат GIF. Единственным недостатком PNG являет-
ся то, что этот формат пока поддерживается не всеми браузерами.
О возможных источниках изображений
и авторских правах
Известно несколько способов получения файлов с изображениями для будущих Web-
страниц. Мы ограничимся кратким перечислением этих способов и возможными по-
следствиями, а вы сами выбирайте, какой источник изображений вам больше по душе.
Первый способ является самым простым и заключается в простом копировании изо-
бражений из WWW. Казалось бы, в таком заимствовании нет никакого криминала, по-
скольку изображения в Сети вроде бы никому не принадлежат. Однако часто у понра-
Г рафика и мультимедиа на Web-странице
145
вившихся вам изображений есть владелец, который при их незаконном использовании
может потребовать через суд возмещения нанесенного ему ущерба. При этом не будет
учитываться аргумент вроде того, что вы не знали о принадлежности данного изображе-
ния кому-либо (действительно не на каждой картинке вы найдете значок авторского
права). Сам пользователь изображения несет ответственность за определение наличия
авторского права. Поэтому лучше использовать те изображения, на которые, как вы уве-
рены, отсутствуют авторские права.
\ \ ' - s чА \ 4 ч х ' ' . ч „ч ч .ч ? \ ; ч ' ч чч • ч
а'
:г Отметим, что обычно защищаются авторскими правами уни-
. кальные рисунки, изображения коммерческой направленности: ло-
;< готипы предприятий, элементы оформления, иллюстрации из
журналов и книг. Авторское право нельзя отменить внесением
< изменений в изображение, поскольку правом таким изменений об-
< ладает только владелец авторских прав.
Если вы заимствуете клипы из коллекций, всегда различайте клипы, предназначен-
ные для бесплатного распространения, и клипы, которыми могут пользоваться толь-
ко покупатели.
Копировать рисунок из WWW проще всего следующим образом. Щелкните правой
кнопкой мыши на изображении и выберите в контекстном меню команду Сохранить
рисунок как. В появившемся диалоге задайте имя файла и папку, в которой он будет
храниться, после чего нажмите кнопку Сохранить.
Вторым способом получения изображения на Web-странице является использование
гиперссылки. Напомним, что ссылка задается с помощью якорного элемента вида:
<А href="http://TravelDev.сот/Images/MiddleSeaAcuba.gif">
Вы прямо сейчас можете увидеть замечательный пляж Акуба
</А>
Подобный источник изображения имеет один недостаток: изображение становится не-
доступным, если изменился его URL.
Третий способ получения изображений для Web-страниц - это самостоятельное созда-
ние изображений. При этом результат будет зависеть от ваших навыков и вкуса, а посе-
тители по достоинству смогут оценить оригинальность вашего сайта. Изображения для
Web-страниц обычно создаются с помощью профессиональных графических редакто-
ров: Adobe PhotoShop, Corel Хага и других. Описание процесса создания таких изобра-
жений выходит за рамки настоящей книги.
Вставка изображения (элемент IMG)
Процедура вставки изображения на Web-страницу достаточно проста и выполняется
одиночным тегом <IMG>, который может быть размещен в любом месте элемента BODY.
При этом URL-адрес изображения задается значением атрибута src (название про-
исходит от слова source - источник). Данный атрибут относится в числу обязатель-
ных в теге <IMG>.
146
ГЛАВА S
Допустим, вы хотите разместить на странице картинку puzzle.gif с изображени-
ем «пазлов». Для этого сохраните файл с изображением в определенной папке (на-
пример, в той же папке, что и сам HTML-документ), а в документ введите тег <IMG
src= "puzzle. gif ">. Полный код документа может иметь вид:
<HTML>
<HEAD>
<TITLE>"Пазлы"</TITLE>
</HEAD>
<BODY>
<Н2>Вставка изображения</Н2>
<IMG src="puzzle.gif">
</BODY>
</HTML>
В результате вы получите на экране браузера картинку, показанную на Рис. 5.1. По
умолчанию браузер отобразит изображение, выровненное по левому краю страницы.
Рис. 5.1. Пример размещения изображения на Web-странице
Пустой элемент IMG, помимо атрибута src, может включать в себя ряд других ат-
рибутов. Перечень допустимых атрибутов тега изображения является одним из наи-
более длинных по сравнению с другими тегами. Далее мы рассмотрим наиболее
важные атрибуты элемента изображения.
Графика и мультимедиа на Web-странице
147
Размеры изображения (атрибуты width и height)
При подготовке страницы к отображению браузер учитывает размеры рисунков,
имеющихся на странице. По умолчанию используются действительные размеры
изображений, хранящихся в графических файлах. Эти размеры можно изменить
с помощью атрибутов width и height, значения которых определяют ширину и
высоту изображения.
£ Подготавливая содержимое страницы к загрузке, браузер созда-
;> ет ее «макет», в котором для изображений резервируются мес-
§ та определенных размеров. Если для изображений заданы значе-
§ ния атрибутов width и height, остальные элементы страницы
§ будут появляться на экране несколько быстрее.
Значения размеров изображения задаются обычно в пикселах, например,
width="133 " height="33 ". Можно также задавать ширину и высоту в процен-
тах относительно размеров внешнего элемента.
Приведем код документа, в который несколько раз вставлено одно и то же изобра-
жение с различными размерами:
<нтмъ>
<HEAD>
<Т1ТЬЕ>РаЗмеры рисунков</Т1ТЬЕ>
</HEAD>
<BODY>
<Н2>Задание размеров изображениж/Н2>
width="30" height="30"
<IMG src="puzzle.gif" width="30" height="30"><BR>
width="110" height="50"
<IMG src="puzzle.gif" width="110" height="50"><BR>
Размеры не заданы<1МС src="puzzle.gif">
</BODY>
</HTML>
На Рис. 5.2 показано отображение данного документа.
Размер первого изображения, вставленного в документ, составляет 30x30 пикселов, вто-
рого изображения - 110x50, а размер последнего изображения не задан (оно отобража-
ется в натуральную величину).
148
ГЛАВА 5
Рис. 5.2. Пример задания различных размеров изображения
Выравнивание изображения (атрибут align)
После вставки изображения у вас появится естественное желание отрегулировать еге
положение на странице. Для этого тег <IMG> нужно дополнить атрибутом align, ко-
торый определяет вид выравнивания рисунка относительно текста.
Для выравнивания по вертикали предусмотрены следующие значения атрибута align:
bottom - при вставке рисунка нижняя его граница выравнивается по нижнему краю
строки (это значение устанавливается по умолчанию);
✓ middle - середина изображения выравнивается по нижнему краю текстовой строки;
✓ top - верхняя граница изображения выравнивается по верхнему краю текста.
По умолчанию устанавливается значение bottom. Действие перечисленных выше атри-
бутов рассмотрим на примере следующего документа:
<HTML>
<HEAD>
<Т1ТЪЕ>Вертикальное выравнивание рисунков</Т1ТЬЕ>
</HEAD>
<BODY>
<BASEFONT size=4>
<Н1>Примеры вертикального выравниваниж/Н1>
<IMG src="chess.jpg" align="top"> - выравнивание строки
текста по верхнему краю рисунка
Г рафика и мультимедиа на Web-странице 149
(значение атрибута <CODE>align="top").</CODE><BR><BR>
<IMG src="teleph.jpg" align="middle"> - выравнивание
строки
текста по средине рисунка
(значение атрибута <CODE>align= "middle"). </CODE><BRxBR>
<IMG src="crystals.jpg" align="bottom"> - выравнивание
строки текста по нижнему краю рисунка
(значение атрибута <CODE>align="bottom").</CODE><BR>
</BODY>
</HTML>
На Рис. 5.3 показан внешний вид этого документа, содержащего три рисунка, задающих
различные виды выравнивания строки текста.
Рис. 5.3. Вертикальное выравнивание изображения и строки текста
В каждом из приведенных способов выравнивания вторая строка текста размещается
ниже рисунка. То есть атрибут align определяет выравнивание первой строки, но не
обеспечивает обтекание рисунка текстом.
Для выравнивания изображения по горизонтали в составе тега <IMG> может быть один
из следующих атрибутов:
✓ left - выравнивание изображения по левому краю страницы; при этом текст обте-
кает изображение справа;
✓ right - выравнивание изображения по правому краю страницы и обтекание текста
слева.
150
ГЛАВА 5
Приведем код HTML-документа, содержащего примеры указанных значений атрибута
align.
<HTML>
<HEAD>
<Т1ТЬЕ>Горизонтальное выравнивание рисунков</Т1ТЬЕ>
</HEAD>
<BODY>
<BASEFONT size=4>
<Н1>Примеры горизонтального выравнивания</Н1>
<IMG src="protocol.jpg" align="left">
Этот пример показывает выравнивание рисунка
по левому краю страницы, задаваемое атрибутом
<CODE>align="left"</CODE> элемента IMG.
Текст обтекает рисунок справа и
ниже рисунка выравнивается по левому краю.
<BRxBRxBRxBR>
<IMG src="communic.jpg" align="right">
В данном примере показано выравнивание рисунка
по правому краю страницы, задаваемое атрибутом
<CODE>align-"right"</CODE> элемента IMG.
При этом текст обтекает рисунок слева, а ниже рисунка
выравнивается по правому краю.
</BODY>
</HTML>
Внешний вид этого документа в окне Internet Explorer показан на Рис. 5.4.
Гирмзошл^нич ырмимкамме |«cfeioe - Маснм 411Штле1 (.мр... ваа
Файл Прав* а Она Избранное Сероне £прм*ка
-----------------------------------р
Примеры горизонтального
выравнивания
Этот пример покатывает выравниванию
рисунка по левому краю страницы,
задаваемое атрибутом align=”left"
элемента IMG. Текст обтекает рисунок
справа и ниже рисунка выравнивается по левому краю.
В данном примере показано
выравнивание рисунка по правому
краю страницы^ задаваемое атрибутом
align= "right* элемента IMG. При
этом текст обтекает рисунок слева, а ниже рисунка
выравнивается по правому краю.
Гитог-
Мои компьютер
Рис. 5.4. Примеры значений lef t и right атрибута align
Г рафика и мультимедиа на Web-странице 151
Если вы хотите, чтобы между рисунком и текстом был некоторый зазор, можно восполь-
зоваться атрибутами vspace, hspace или свойствами margin (см. раздел «Поля во-
круг изображения (атрибуты vspace, hspace и свойства margin)»).
Отметим, что изображения по характеру обтекания текстом напоминают плавающие
таблицы (см. раздел «Плавающие таблицы» главы 4). Такие изображения также называ-
ются плавающими. В нашем примере мы создали плавающие изображения с помощью
атрибута align, но для этой цели можно было бы использовать стилевое свойство
float и листы стилей (см. раздел «Свойства блока» главы 3).
Отключение обтекания рисунка текстом
Итак, если для выравнивания рисунка по левому или правому краю страницы использу-
ется атрибут align, то вокруг рисунка размещается последующий текст. Однако полная
«заверстка» рисунка текстом может не соответствовать вашему замыслу оформления
страницы. В этом случае можно установить запрет на обтекание с помощью тега разры-
ва строки <BR> и атрибута clear (см. раздел «Прерывание обтекания текста вокруг
таблицы» главы 4).
Рисунок в рамке (атрибут border)
Часто для выделения границ рисунков их очерчивают рамкой. Такая рамка задается ат-
рибутом border, значение которого определяет толщину рамки в пикселах. Обрамле-
ние рисунков выполняется черной линией, за исключением изображений-ссылок, рамки
которых отображаются установленным цветом гиперссылок (см. раздел «Представление
ссылки рисунком» главы 2).
Приведем пример обрамления рисунков границами разной толщины (Рис. 5.5).
Рис. 5.5. Назначение толщины рамки с помощью атрибута border
152
ГЛАВА 5
Поля вокруг рисунка (атрибуты vspace, hspace
и свойства margin)
Возможно, вы заметили, что после вставки рисунка непосредственно в текст или вставки
рисунка с использованием атрибута align текст как бы «липнет» к рисунку (см. ри-
сунки 5.4 - 5.6). Чтобы устранить этот дефект компоновки страницы, необходимо задать
свободное поле вокруг рисунка. Для этого можно использовать следующие атрибуты:
✓ hspace - задает ширину (в пикселах) пустого поля справа и слева от изображения;
✓ vspace - определяет размеры (в пикселах) пустого поля сверху и сниз\
изображения.
Например, тег
<IMG src="my_fig.gif" vspace=55 hspace=25>
означает, что сверху и снизу рисунка браузер оставит свободные поля размером
55 пикселов, а с правой и левой стороны рисунка - поля по 25 пикселов.
Для задания каждого из полей вы можете воспользоваться CSS-свойствами margin-top.
margin-right, margin-bottom и margin-left (см. раздел «Свойства блока»
главы 3).
Рассмотрим пример правильной компоновки страницы. Разместим на странице текст
и рисунок, задав при этом обтекание и поля вокруг рисунка согласно следующем}
коду:
<HTML>
<HEAD>
<Т1ТЬЕ>Задание полей</Т1ТЬЕ>
</HEAD>
<BODY>
<Н2>Пример обтекания рисунка и задания полей</Н2>
<HRxBR>
<IMG src="globe.jpg" width=25% align="left"
style="margin-right:30; margin-bottom:10">
<!- - Текстовое содержание страницы - ->
</BODY>
</HTML>
Изображение согласно коду будет размещено браузером по левому краю страницы
(Рис. 5.6). Текст, следующий в HTML-документе за элементом IMG, расположится
справа и снизу от рисунка с зазором, который определяется свойствами margin-
right и margin-bottom.
Г рафика и мультимедиа на Web-странице
153
З.шомме по«н.й MicioHrtl Internal Eaploier * (Астон раиота]
5Иайл Пр ок М_ид ИЧ^шное Сйжис Справки
Пример обтекания рисунка и задания полей
Интернет - это объединение множества сетей,
обеспечивающее распространение информационных потоков по I
всему земному шару. Например, поток информации, вошедший в
одну из локальных сетей, может пройти через десятки
корпоративных и региональных сетей и в результате попасть в
сеть, расположенную на другом континенте
Благодаря объединению сетей решается проблема удаленности "
компьютеров, обменивающихся информацией, а именно
компьютеры могут быть удалены другу от друга на огромные расстояния Более того,
можно сказать, что физические расстояния в Интернете не имеют особого значения, так
гак с точки зрения пользователя обмен информацией происходит одинаково как между
компьютерами , расположенными в разных полушариях, так и между компьютерами,
находящимися в соседних комнатах
Готово
Мой компьютер
Рис. 5.6. Пример размещения рисунка в документе с заданием свободных полей
Чтобы посетитель не скучал, пока загружается рисунок
Большие красочные изображения хорошо смотрятся на экране, но они долго загружают-
ся. Компания Netscape предложила компромиссное решение этой проблемы, которое
заключается в использование атрибута lowsrc. Этот атрибут указывает на графический
файл меньшего размера, который будет загружаться в первую очередь, а затем будет
загружен файл, указанный в атрибуте src.
Таким образом, тег <IMG> записывается с атрибутами src (задает URL файла с основ-
ным изображением высокого качества) и lowsrc (определяет URL изображения низко-
го качества). Например, согласно инструкции
<IMG src="figl.gif" lowsrc="figO.gif">
браузер сначала загрузит изображение из файла figO.gif, а затем - изображение из
файла figl.gif.
Альтернативный текст (атрибут alt)
Часто для ускорения загрузки Web-страниц пользователи в настройках своего браузера
отключают отображение рисунков. На месте отсутствующего рисунка вы можете раз-
местить текст, который будет пояснять смысл рисунка (так называемый альтернативный
текст).
Для реализации этой возможности нужно в тег <IMG> ввести атрибут alt. В качестве
значения этого атрибута подставляется альтернативный текст, который заключается
в кавычки. Например, если вы запишете элемент IMG в виде:
154 ГЛАВА 5
<IMG src="middlesea_acuba.gif" width="500" height="150"
alt="Прекрасный вид набережной курорта Акуба">
то в отсутствие отображения самого рисунка браузер выведет рамку, обозначающую
границы рисунка, и поместит в нее текст, заданный значением атрибута alt.
Некоторые другие атрибуты
Мы рассмотрели основные атрибуты элемента IMG. Отметим также другие часто упот-
ребляемые атрибуты:
✓ id и class - используются для назначения стиля и динамического управления
изображением;
title - формирует подсказку, всплывающую при наведении указателя мыши на
рисунок.
Изображения-ссылки
Как отмечалось ранее, в качестве начальных закладок ссылок могут использоваться не
только фрагменты текста, но и рисунки (см. раздел «Гиперссылки» главы 2). Рисунки-
закладки (другими словами, изображения-ссылки или графические ссылки) несколько
«оживляют» Web-страницы. Для создания такой ссылки достаточно в нужном месте до-
кумента установить якорь А с вложенным в него элементом IMG.
Приведем пример HTML-документа, содержащего графическую ссылку:
<HTML>
<HEAD>
<Т1ТЬЕ>Изображение-ссылка</Т1ТЬЕ>
<STYLE type="text/css">
BODY (font-size:18px)
IMG {margin-right:30; margin-bottom:10}
</STYLE>
</HEAD>
<BODY>
<Н2>Пример изображения-ссылки</Н2><НЕ><ВЕ>
<A
href="http://www.adobe.com/products/acrobat/readstep.html">
<IMG src="acrobat.jpg" width="100" height="28"
border="l" align="left">
</A>
Если на странице вы встретите подобную пиктограмму,
то щелчком мыши сможете загрузить Adobe Acrobat Reader.
</BODY>
</HTML>
Г рафика и мультимедиа на Web-странице
155
Рис. 5.7. Изображение-ссылка
Фоновые изображения (атрибут background)
Изображения, которые мы рассматривали до сих пор, размещались как отдельные
фрагменты в различных местах Web-страницы. Остальное пространство документа ок-
рашивалось в заданный цвет либо имело цвет рабочей области окна браузера. Однако вы
можете использовать в качестве фона всей страницы какое-либо изображение. Для этого
достаточно тег <BODY> дополнить атрибутом background. Значением этого атрибута
является URL файла, в котором хранится фоновое изображение.
Приведем пример записи тега основной части HTML-документа с фоновым рисунком:
<BODY background="phone.gif">
Выбирая фоновое изображение, обратите внимание на цвет и узор: светлые тона и «лег-
кие» узоры облегчают восприятие информации (Рис. 5.8, а), и, наоборот, темный цвет и
крупный узор быстро утомляют (Рис. 5.8, б).
а
156
ГЛАВА 5
б
Рис. 5.8. Примеры задания фонового изображения:
а -удачный фон; б - неудачный фон
Отметим, что на фоновом изображении вы можете разместить и таблицу или ее отдель-
ные ячейки. Для этого начальные теги <TABLE>, <TD> или <ТН> понадобится допол-
нить атрибутом с указанием URL фона (например, background- "phon. gif ”).
Прозрачные изображения
Изображения для Web-страниц подготавливаются обычно в графических пакетах (на-
пример, Adobe Photoshop). При этом можно получать интересные и необычные эффекты
Одним из таких эффектов являются прозрачные изображения, которые реализуются
с помощью графического формата GIF. В этом формате можно один из цветов сделать
прозрачным (он удаляется из изображения). Задавая прозрачный цвет для фона, можно
показать, что расположено под изображением.
На Рис. 5.9 представлены отображения прозрачных картинок и обычного изображения.
Рис. 5.9. Примеры обычного изображения и изображений с прозрачными областями
(первоначальное изображение имеет белый фон)
Графика и мультимедиа на Web-странице
157
Запишем HTML-код этого примера:
<HTML>
<HEAD>
<Т1ТЬЕ>Прозрачные изображения*:/TITLE>
<STYLE type="text/css">
BODY {font-size:18px;
background-image: url(phon.jpg)}
IMG {margin-right:30; margin-bottom:10;
width:230; height:100}
</STYLE>
</HEAD>
<BODY>
<IMG src="Bug.gif" align="left"><BR><BR>
– это обычное изображение, которое создано
на непрозрачном фоне
<BR clear="left">
<IMG src="Bugl.gif" align="left"><BR><BR>
– а это отображение картинки с прозрачным фоном,
через который виден фоновый узор страницы
<BR clear="left">
<IMG src="Bug2.gif" align="left"><BR><BR>
– пример прозрачного изображения, через которое
виден
фоновый узор страницы
</BODY>
</HTML>
Озвучивание Web-страницы
В последующих двух разделах книги мы рассмотрим вопросы, связанные с размещением
в Web аудио- и видеоматериалов.
О роли звука на Web-странице
Основные преимущества от использования звукозаписей в Web-страницах заключаются
в том, что они создают эффект присутствия (ощущения места действия) и не занимают
место на экране. Существуют сайты (к примеру, музыкальные), в которых использова-
ние звука просто необходимо.
Однако при размещении на страницах звуковых и вообще мультимедийных материалов
нужно учитывать, что они имеют большой объем и длительное время загрузки. Если
время загрузки при использовании обычных каналов связи превышает 10 секунд, реко-
мендуется указывать объем и формат загружаемого файла.
Загрузка звукозаписи занимает значительно меньше времени, чем загрузка видеофильма,
поэтому использование на странице звука вместе с фотографией часто предпочтитель-
158
ГЛАВА :
нее, чем вставка видео. Если вам нужно воспроизвести чью-то речь, можете сделать эт
щелчком на ссылке на звуковой файл.
Еще одним примером использования звука в интерфейсе Web-страниц является озвучь
вание некоторых событий: открытие окна, нажатие кнопки, щелчок по ссылке и т.д. Вс
обще качественные звуки улучшают общее впечатление пользователя от посещена
страницы и могут привлечь его на ваш сайт повторно.
Два способа обращения к мультимедиа-файлам
Все мультимедийные файлы создаются или обрабатываются в специализированны
приложениях и сохраняются отдельно от HTML-документов. Обратившись к этим фаг.
лам из документа, вы можете отобразить (или воспроизвести) их содержимое на Web
странице. Такое» обращение выполняется двумя способами: либо с помощью элемент;
привязки А, либо с применением специальных тегов.
Элемент привязки А. Напомним, что элемент А предназначен для задания ссылк’
на другой файл (в том числе и мультимедийный). Например, гиперссылка на видео-
файл MiddleSeaAcuba с расширением .avi, который продемонстрирует посети
телю вашей страницы пейзажи одного из средиземноморских курортов, назначается
таким элементом:
<А href="http://TravelDev.com/video/MiddleSeaAcuba.avi">
Вы прямо сейчас можете увидеть замечательные виды пляжей
Акуба
</А>
После щелчка по тексту гиперссылки, отобразится содержимое видео-клипа. Правило
определения URL конечной закладки мы уже рассматривали в разделе «Гиперссылки
главы 2. Эти правила, естественно, применимы и для ссылок на мультимедийные файлы.
Специальные элементы позволяют вставлять (внедрять) мультимедиа файл в содер-
жимое Web-страницы. В отличие от случая использования элемента привязки А, муль-
тимедийный материал загружается одновременно с содержимым всей страницы. Сред;
таких элементов различают стандартные элементы, включенные в HTML 4.0 г
HTML 4.01 (это элементы IMG, APPLET и OBJECT), а также элементы EMBED г
BGSOUND, введенные в «обращение» компаниями Microsoft и Netscape и поддерживае-
мые многими браузерами.
Форматы аудиофайлов
Звуковые эффекты создаются с применением звуковых (аудио) файлов. В WW\X
распространено большое количество форматов звуковых файлов, которые различа-
ются способами записи и областями применения. Наиболее распространены сле-
дующие форматы.
✓ AU (сокращение от AUdio format, в переводе означает «звуковой формат», имеет расши-
рение ,аи) - стандартный формат для 8-битового звука, который является одним из ста-
рейших звуковых форматов в Internet (первоначально разработан для UNIX). Размер зву-
ковых файлов AU относительно небольшой, однако качество звука невысокое.
Графика и мультимедиа на Web-странице 159
✓ WAV (сокращение от Waveform Audio, в переводе означает «звук в форме волны»,
расширение .wav) - стандартный формат цифрового аудио в системе Windows. Звук
этого формата воспроизводится одинаково во всех Windows-приложениях.
✓ MIDI (сокращение от Musical Instrument Digital Interface, в переводе означает «циф-
ровой интерфейс музыкальных инструментов», имеет расширение .midi или .mid) -
формат, который не связан с реальным звуком. Этот формат содержит просто запись
нот, коды музыкальных инструментов и прочую информацию, по которой синтезиру-
ется музыка.
✓ MP3 (полное название MPEG Audio Layer 3, файлы данного формата имеют расши-
рение .mp3). Формат MP3 применительно к звуку отличается высокой степенью сжа-
тия данных за счет некоторого ухудшения качества звука, не заметного на слух.
✓ RealAudio (в переводе означает «реальный звук», имеет расширение .га) - применяет-
ся для воспроизведения с повышенным качеством звучания. Файлы этого формата
поддерживают поток звуковых данных, то есть они могут воспроизводиться по мере
поступления данных, не ожидая окончания загрузки файла. Отметим, что файлы всех
перечисленных ранее форматов являются загружаемыми, то есть для начала воспро-
изведения они должны быть полностью загружены.
Звуковой фон (элемент BGSOUND)
Подключение звукозаписи в фоновом режиме - самый простой путь озвучить страницу.
Обычно этот прием применяется для приветствий или музыкального сопровождения.
Как только пользователь загрузит вашу страницу, начнется автоматическое воспроизве-
дение фонового звука. Поэтому учтите, что многих пользователей такой звук может
раздражать.
Для подключения звукового файла в фоновом режиме применяется элемент BGSOUND
с набором атрибутов.
✓ src - это атрибут, который задает URL-адрес звукового файла. Например, тег
<BGSOUND src="duet.mid">
задает однократное воспроизведение звукового файла duet. mid.
✓ loop - определяет, сколько раз будет воспроизводиться файл. Например, тег
<BGSOUND src="duet.mid" loop=5>
означает, что звуковой файл duet будет воспроизведен 5 раз. Отметим, что, если
loop=" infinite", звук будет повторяться до тех пор, пока пользователь находит-
ся на вашей странице.
✓ volume - назначает уровень воспроизведения звука; этот атрибут может принимать
числовые значения от-10000 доО. Обратите внимание, что можно только «при-
глушить» звучание, а увеличить уровень воспроизведения звука выше максимально-
го уровня (значение 0) нельзя.
160
ГЛАВА t
t/ balance - настройка стереобаланса. Значения этого атрибута выбираются из диап;
зона чисел от -10000 до 10000. Назначение любого крайнего значения (-10ОС
или 10000) приводит к звучанию только одного динамика. Введение тега
<BGSOUND src="duet.mid" loop=infinite volume=0 balance=0>
приведет к звучанию файла duet.mid с максимальным уровнем звука и нормаль-
ным стереобалансом. Звучание будет продолжаться от момента загрузки до тех пор
пока пользователь находится на данной странице.
Элемент BGSOUND был впервые введен компанией Microsoft и относится к элемента'
расширениям, которые не включены в состав спецификации HTML.
Внедрение аудио (элемент EMBED)
Звуковое сопровождение в фоновом режиме лишает посетителя страницы возможност;
управления звуком. Например, он не может выключить фон (вариант отключения звуко-
воспроизводящих устройств мы не рассматриваем). Управлять звуком можно, если н..
Web-страницу встроить аудиоплейер (Рис. 5.10). Делается это с помощью тег.;
<EMBED>, который в HTML-файле размещается в любом месте внутри элемента BODY.
Рис. 5.10. При внедрении аудио с помощью элемента EMBED
на Web-странице отображается окно проигрывателя Windows Media
Элемент EMBED был впервые введен компанией Netscape и поддерживается большин-
ством браузеров, в том числе и Internet Explorer. Однако консорциум W3C не включил
этот элемент в состав спецификации HTML 4.0.
Когда при анализе кода страницы браузер встретит тег <EMBED>, будет выполнена за-
грузка текстовой части документа и изображений, а затем - звукового файла. По окон-
чании загрузки звука в окне браузера появится панель проигрывателя с набором управ-
ляющих кнопок (Рис. 5.11), а затем начнется воспроизведение звука.
Графика и мультимедиа на Web-странице 161
Тег <EMBED> может дополняться следующими атрибутами.
✓ src - задает, как обычно, URL звукового файла, например:
<EMBED src="music.wav">
✓ width и height - устанавливают размеры панели управления проигрывателя (со-
ответственно, ширину и высоту); значения этих атрибутов указываются в пикселах
или в процентах (от полного размера окна). Например, тег
<EMBED src="music.wav" width="5%" height="5%">
позволяет уменьшить размер панели управления, оставив в окне браузера только
одну кнопку, запускающую звуковой файл.
✓ autostart - назначает возможные варианты включения воспроизведения звука.
Данный атрибут принимает значения false (включение звука пользователем) и
true (автоматическое начало воспроизведения сразу после загрузки страницы).
✓ hidden - используется для управления отображением панели проигрывателя. Зна-
чение true этого атрибута задает воспроизведение звука без отображения панели
проигрывателя, а значение false - вывод панели на экран.
Рассмотрим пример страницы, на которой отображается только панель управления,
с которой посетитель может управлять прослушиванием (Рис. 5.11):
<HTML>
<HEAD>
<Т1ТЬЕ>Внедренное аудио</Т1ТЬЕ>
</HEAD>
<BODY>
<Н2>Внедрение аудиофайла на Web-страницу*:/H2><HR><BR>
cEMBED src="misionera.wav" width="320" height="45"
autostart="false"
title="«Миссионеры&гадио;. Фернандо Бустамант">
</EMBED>
</BODY>
</HTML>
162
ГЛАВА
Рис. 5.11. Вывод на страницу панели управления воспроизведением звука
Для управления встроенным объектом вы можете также использовать атрибуты гори-
зонтального и вертикального выравнивания (align и valign), идентификаторы (id 1:
class), атрибут назначения стиля (style).
Вставка видео
С помощью уже рассмотренных элементов вставки изображений или аудиофайлов н_
Web-странице можно разместить видеоклип. Однако прежде чем делать это, нужно хо-
рошо подумать, поскольку объем видеоматериалов, как правило, очень велик.
Форматы видеофайлов
В Web применяется несколько стандартных форматов видеофайлов, к которым относят-
ся следующие.
✓ MPEG (Moving Picture Expert Group - «группа экспертов по движущимся изображе-
ниям», имеет расширение файлов .mpg или .mpeg) - предназначен для сжатия как ау-
дио, так и видеофайлов. Этот формат обеспечивает высокое качество и является сво-
его рода стандартом в цифровом видео. Однако файлы этого формата имеют боль-
шой размер, и работать с ними трудно;
✓ AVI (Audio Video Interleaved - «перемежающиеся аудио и видео», имеет расширение
.avi) - применяется в системе Windows для хранения и воспроизведения аудио- и ви-
деоданных. Файлы AVI часто встречаются в Internet;
✓ QuickTime (имеет расширения .mov или .qt) - наиболее популярный видеоформат,
разработанный компанией Apple. Этот формат имеет большое распространение
в Internet, не требует длительной загрузки по сети, обеспечен множеством модулей.
Прежде, чем разместить видеофайл на Web-странице, вы должны поэкспериментировать
со всеми этими форматами и определить, какой из них более подходит по качеству и
времени загрузки.
Г рафика и мультимедиа на Web-странице 163
Внедрение видео (элемент EMBED)
Простейшим способом размещения видео на Web-странице является внедрение видео
файлов с помощью тега <EMBED> (см. пункт «Внедрение аудио (элемент EMBED)»).
Форма его записи, атрибуты и допустимые значения атрибутов такие же, как и в случае
вставки аудиофайлов.
Например, если вы хотите внедрить в документ видео с именем flyover. avi, запиши-
те следующий тег:
<EMBED src="flyover.avi">
В результате загрузки видеофайла в окне браузера Internet Explorer появится панель
проигрывателя Windows Media с набором управляющих кнопок, и начнется воспроизве-
дение видеоклипа (Рис. 5.12).
Рис. 5.12. Web-страница с внедренным видеоклипом
Особенности Internet Explorer по воспроизведению видео
(элемент IMG)
Если вы рассчитываете на просмотр вашей страницы в браузере Internet Explorer, можете
для вставки видеоклипа воспользоваться известным элементом <IMG>. Для этого вместо
атрибута src в тег <IMG> нужно подставить атрибут dynsrc, значением которого
является URL видеофайла. Составим HTML-файл с видеоклипом, встроенным таким
образом:
<HTML>
<HEAD>
<Т1ТЬЕ>Внедрение видео</Т1ТЬЕ>
</HEAD>
<BODY>
164
ГЛАВА £
<Н2>Пример внедрения видео с помощью элемента
<C0DE>IMG</C0DEx/H2><HRxBR>
<IMG dynsrc="flyover.avi">
</BODY>
</HTML>
Отображение этого документа в Internet Explorer показано на Рис. 5.13. Заметим, что прг
внедрении видео с помощью элемента IMG панель управления проигрывателя на экран
не выводится (по умолчанию).
Рис. 5.13. Внедрение видеоклипа с помощью элемента IMG
При вставке видео с помощью элемента IMG вы можете использовать все допустимые
атрибуты, которые рассматривались в разделе «Вставка изображения (элемент IMG)»
Например, если в теге <IMG> указать атрибут src с адресом статического изображения:
<IMG dynsrc="flyover.avi"
src="statimg.gif"
alt="Baui браузер не поддерживает воспроизведение видео
в формате AVI">
то браузер Internet Explorer воспроизведет видеофайл flyover.avi. Браузер, который
не поддерживает атрибут dynsrc, выведет на экран альтернативное изображение из
файла statimg.gif. Альтернативный текст будет отображаться как всплывающая
подсказка.
Браузер Internet Explorer, кроме знакомых вам атрибутов элемента IMG, поддерживает
следующие специальные атрибуты.
✓ start - определяет момент начала включения клипа. Если присвоить этому атрибу-
ту значение fileopen, воспроизведение начнется сразу после загрузки видеофайла.
Если присвоить значение start= "mouseover", видео будет запущено при наведе-
нии на изображение указателя мыши;
Г рафика и мультимедиа на Web-странице
165
✓ loop - задает число воспроизведений видеофайла. Если значение этого атрибута
равно infinite (или -1), видео будет циклически повторяться все время, пока
пользователь находится на вашей странице;
✓ loopdelay - устанавливает время задержки (в миллисекундах) перед началом вос-
произведения;
✓ controls - управляет отображением панели проигрывателя (по умолчанию панель
управления не отображается).
Гиперссылки на видео
Процедура задания гиперссылки на видеофайл ничем не отличается от формирования
любых других ссылок. Например, следующий HTML-документ содержит ссылку на
видеофайл:
<HTML>
<HEAD>
<Т1ТЬЕ>Ссылка на видеоклип</Т1ТЬЕ>
</HEAD>
<BODY>
<НЗ>Пример ссылки на видео </H3><HR><BR>
Скоростной спуск
<А href="speed.avi">
<IMG src="ski.gif"
С1С1е="Для просмотра скоростного спуска щелкните по
пиктограмме. Продолжительность демонстрации 15 сек"х/А>
</BODY>
</HTML>
Заметим, что само по себе отображение гиперссылки не позволяет посетителю опреде-
лить, что при ее активизации произойдет загрузка видео. Поэтому обычно такие элемен-
ты привязки дополняются всплывающими подсказками. В подсказке желательно ука-
зать, какой мультимедийный материал получит пользователь и каково ожидаемое время
демонстрации. Полезными могут оказаться образцы для предварительного просмотра
(несколько кадров), расположенные рядом со ссылкой, а также краткая аннотация, опи-
сывающая содержание видеофайла.
ГЛАВА 6.
Фреймы
В предыдущих главах мы рассматривали возможности компоновки Web-страниц, кот<
рые допускали размещение в окне браузера только одного HTML-документа. В насто'
щей главе мы рассмотрим фреймы (от слова frame - кадр или рамка), которые позволяю
отображать в одном окне несколько документов. Фреймы разбивают окно на несколь»
независимых областей, причем в каждую из областей выводится отдельный документ.
Возможности фреймов
Внешне фрейм выглядит как прямоугольная область в окне браузера, которая может (н.
не обязательно) иметь границы или полосы прокрутки. Содержимое каждого фрейм,
определяется отдельным файлом и обновляется независимо от других фреймог
В область фрейма может выводиться любой HTML-документ, содержащий текст, изо-
бражения, таблицы и проч. Кроме того, фрейм может отображать документ, содержащий
другие фреймы.
Применение фреймов открывает широкие возможности по рациональному использованию
пространства окна браузера. Например, фреймы позволяют создавать фиксированные
области окна, которые не меняются при прокрутке содержимого страницы
В фиксированную область обычно помещают название Web-узла, логотип, панель поиска.
Фреймы часто используются также для организации навигации по сайту. Для этого е
один из фреймов загружается список гиперссылок. При щелчке на одной из ссылок
ее содержимое отображается в другом фрейме. В примере на Рис. 6.1 левый фрейм
представляет собой панель навигации, а правый фрейм отображает содержимое, на
которое указывает ссылка из левого фрейма.
Мы привели пример оформления начала романа «Двенадцать стульев» с помощью
фреймов. Сравните этот документ со страницей на рисунке 2.15, в которой для нави-
гации используются внутренние ссылки (см. раздел «Создание ссылок на объекты
текущего Web-узла» главы 2). Интерфейс документа на Рис. 6.1 оказывается более
предпочтительным, поскольку панель навигации с названиями глав постоянно при-
сутствует на экране и не смещается при прокрутке текста романа в правой части.
О том, как создать панель навигации, пойдет речь в разделе «Ссылки и навигация»
настоящей главы.
Возможность одновременной загрузки нескольких документов в одно окно браузера
сделала фреймы достаточно популярными среди разработчиков Web-страниц. Не все
браузеры обеспечивают возможность работы с фреймами, но Netscape (начиная
с версии 2.0) и Internet Explorer (версия 3.0 и выше) поддерживают фреймы в полном
объеме. Средства настройки параметров фреймов были стандартизованы консорциу-
мом W3C в спецификации HTML 4.0.
Фреймы
167
5 Дюе»»<ша.1и ciinueM Мкао Л! Ink-met Ex|4wei
BQ
Прлпкд О.цд Имрлиное Сервис Справка
Содержание
Глава 1 Безенчук и
«нимфы»
Гл а 2 Кончина
свой
Глава 3. «Зерцало
грешного»
Глава 4 Му<а
дальних странстви-
Глава 5 Великий
комбинатор
Часть первая. < таргородский лев
Глава 1. Безенчук и «нимфы»
В уездном городе N было так много парикмахерских заведений и бюро
похоронных процессий, что казалось, жители города рождаются лишь затем,
чтобы побриться, остричься, освежить голову вежеталем И сразу же умереть
А на самом деле в уездном городе N люди рождались, брились и умирали
довольно редко Жизнь города N была тишайшей Весенние вечера были
упоительны, грязь под луною сверкала как антрацит, и вся молодежь города
была до такой степени влюблена в секретаршу месткома коммунальников
что это мешало ей собирать членские взносы
Вопросы любви и смерти не волновали Ипполита Матвеевича
Воробьянинова, хотя этими вопросами по роду свое* службы он ведал с
девяти утра до пяти вечера ежедневно с получасовым перерывом для
завтрака
Глава 2. Кончина мадам Петуховой
Клавдия Ивановна лежала на спине» подсунув одну руку под голову Голова
ее была в чепце интенсивно абрикосового цвета, который был в какой-то
моде в каком-то году, когда дамы носили «шантеклер» и только начинали
танцевать аргентинский танец т*нго I
Глава 3. «Зерцало грешного»
Исповедав умирающую Клавдию Ивановну, священник церкви Фрола и |
Лавра, отец Федор Востриков, вышел из дома Боробьянинова в полном
ажиота» ей всю дорогу до своей квартиры щ ошел { ас сеян но глядя по_3
IЛ компьютер ______________
Рис. 6.1. Пример документа с фреймовой структурой
Отметим, что к недостаткам фреймов относится невозможность использования
кнопки Назад для перемещения между документами, открывавшимися внутри фрей-
ма. Еще одним недостатком является некорректное указание URL в строке адреса
браузера (URL не меняется с изменением документа, с которым ведет работу поль-
зователь внутри фрейма).
Создание фреймов
При составлении документа с фреймами вместо элемента BODY необходимо записывать
FRAMESET - элемент фреймовой структуры. Этот элемент с помощью своих атрибутов
задает набор фреймов, отображаемых браузером. То, что находится внутри каждого
фрейма, определяется элементом FRAME (см. пункт «Содержимое фреймов (элемент
FRAME)»). Рассмотрим простой документ, который имеет фреймовую структуру, пока-
занную на Рис. 6.2.
168
ГЛАВА €
Рис. 6.2. Пример вертикальных фреймов, разделяющих окно браузера на три части
HTML-код этого документа имеет следующий вид:
<HTML>
<HEAD>
<Т1ТЬЕ>Вертикальные фреймы</Т1ТЬЕ>
</HEAD>
<FRAMESET cols="20%,55%,*">
<FRAME src="lime.html">
<FRAME src="yellow.html">
< FRAME s rc ="cyan.html">
</FRAMESET>
</HTML>
Как видим из рисунка, отображение документа на экране состоит из трех частей - фрей-
мов (соседние фреймы разделены границами). Такое разделение пространства окна зада-
ется тегом <FRAMESET cols="20%, 55%, *">. В каждый фрейм выводится некоторое
содержимое, которое определяется одиночным тегом <FRAME>. Все элементы FRAME
располагаются внутри контейнера <FRAMESET>... </FRAMESET>. Первый элемент
FRAME в HTML-коде задает левый фрейм, второй элемент FRAME - средний фрейм и т.д.
Элемент задания фреймов FRAMESET
В HTML-документе с фреймами обязательно должен быть элемент FRAMESET, в кото-
рый могут вкладываться теги <FRAME> и <FRAMESET>.
Фреймы
169
Каждый элемент frameset формирует фреймы, относящиеся к
одному набору (или уровню). Чтобы задать фреймы с разными
свойствами (например, размеры или вид обрамления) применя-
ются вложенные фреймы (см. раздел «Вложенные фреймы» дан-
ной главы).
Web-страница с фреймами по горизонтали и по вертикали делится на определенное ко-
личество фреймов с заданной толщиной рамок. Эти свойства фреймов задаются атрибу-
тами начального тега <FRAMESET>, из которых главными являются cols и rows.
Атрибут cols
Количество вертикальных фреймов (фреймов-столбцов) и их размеры задаются значе-
ниями атрибута cols. В качестве значений используется список размеров каждого
фрейма, разделенных запятыми, например,
<FRAMESET cols="20%,55%,*">
Общее количество значений в списке равно количеству фреймов, описываемых дан-
ным элементом FRAMESET. Первое значение соответствует ширине крайнего левого
фрейма, а последующие значения относятся ко второму, третьему фрейму и т.д.
В приведенной выше записи ширина первого фрейма - 20% от общей ширины окна,
второго фрейма - 55%, а третьему фрейму отводится оставшаяся часть окна, то есть
25% (этот факт отмечается звездочкой *). В результате структура фреймов выглядит,
как показано на Рис. 6.2.
При желании можно задавать размер каждого фрейма, не употребляя символ ♦, напри-
мер, cols="10%,30%,60%". Можно также указывать размер в пикселах, например, тег
<FRAMESET cols="150,25%,*">
назначает разделение окна браузера на три вертикальных фрейма. Ширина левого фрей-
ма - 150 пикселов, ширина среднего фрейма - 25% ширины окна, а правый фрейм зани-
мает оставшуюся часть окна. Запишем другой пример:
<FRAMESET CO1S="1*,250,3*">
Этот тег назначает три вертикальных фрейма: средний фрейм имеет ширину 250 пиксе-
лей, крайние фреймы занимают всю оставшуюся ширину окна в соотношении 1:3.
Пользователь при желании может сам изменить размеры фрей-
мов. Делается это простым перетаскиванием мышью границы
между фреймами. Границы допускают перемещение, если в теге
<frameset> отсутствует атрибут noresize (см. раздел
«Фиксация размеров фрейма (атрибут noresize)»).
170 ГЛАВА 6
Атрибут rows
Атрибут rows назначает количество и размеры горизонтальных фреймов. Значением
этого атрибута является список размеров (аналогично значению атрибута cols). В по-
следовательности перечисляемых чисел или символов сначала указывается высота верх-
него фрейма, завершается список размером нижнего фрейма. Например, атрибут
rows="20%, *,30%" определяет деление окна браузера на три горизонтальных фрей-
ма: высоты верхнего и нижнего фреймов равны соответственно 20% и 30% от высоты
окна, а средний фрейм занимает оставшийся промежуток по высоте, то есть 50%.
Совместное использование атрибутов rows и cols
В теге <FRAMESET> можно одновременно указывать атрибуты rows и cols. При этом
каждый горизонтальный фрейм браузер разобьет на заданное вами число вертикальных
фреймов. Например, следующий HTML-код задает шесть фреймов (Рис. 6.3):
<HTML>
<HEAD>
<Т1ТЬЕ>Горизонтальные и вертикальные фреймы</Т1ТЬЕ>
</HEAD>
<FRAMESET rows="50%,*" cols="30%,*,30%">
<FRAME src="lime.html">
<FRAME src="yellow.html">
<FRAME src="cyan.html">
<FRAME src="white.html">
< FRAME s rc="aqua.html">
<FRAME src="red.html">
</FRAMESET>
</HTML>
Рис. 6.3. Документ, содержащий горизонтальные и вертикальные фреймы
Фреймы
171
В приведенном листинге присутствуют шесть тегов <FRAME>, определяющих с помо-
щью атрибута src содержимое фреймов (см. следующий раздел). Последовательность
записи элементов FRAME между тегами <FRAMESET> и </FRAMESET> определяет
положение фреймов в окне браузера. Первый тег < FRAME src =" 1 ime. html" > задает
содержимое левого верхнего фрейма. Последующие элементы FRAME задают второй и
третий фреймы верхней строки. Во вторую строку помещаются фреймы с четвертого по
шестой.
Верхние и нижние фреймы на Рис. 6.3 имеют одинаковую ширину. Это следствие одно-
временного применения в теге <FRAMESET> двух атрибутов rows и cols. Чтобы за-
дать разбиение на фреймы с разной шириной (или высотой), следует использовать вло-
женные фреймы (см. раздел «Вложенные элементы FRAMESET» данной главы).
Содержимое фреймов (элемент FRAME)
Итак, содержимое отдельного фрейма задается элементом FRAME, который указывает на
документ, загружаемый в область фрейма. Каждому фрейму отвечает свой одиночный
тег <FRAME>.
Если фрейм объявлен в теге frameset, но для него не сущест-
вует тега <frame>, указывающего на документ-источник, в со-
ответствующем фрейме появится сообщение «Невозможно
отобразить страницу».
URL-адрес начальной Web-страницы, загружаемой в область фрейма, устанавливается
с помощью атрибута src. В HTML не предусмотрено другого описания содержимого
фрейма (нельзя, например, содержимое фрейма задавать непосредственно в документе
фреймовой структуры или с помощью элемента привязки А), поэтому src - это обяза-
тельный атрибут тега <FRAME>. В качестве значения атрибута src можно указывать
адреса HTML-файлов, графических, аудио- или видеофайлов.
\ Если вы хотите, чтобы при начальной загрузке страницы какой-
> либо фрейм был пуст, загрузите в него пустую страницу с «те-
; лом»: <BODY></BODY>.
Вложенные фреймы
Вы познакомились с формированием на странице вертикальных и горизонтальных
фреймов одного уровня, которое выполняется с помощью одного элемента FRAMESET.
Более сложную структуру можно создать, если использовать элементы FRAMESET, вло-
женные друг в друга.
172
ГЛАВА 6
Пусть в родительском элементе FRAMESET содержатся два вертикальных фрейма, при-
чем один из них содержит, в свою очередь, три фрейма одинаковой высоты:
<HTML>
<HEAD>
<Т1ТЬЕ>Вложенные фреймы</Т1ТЬЕ>
</HEAD>
<FRAMESET cols="370,*">
<FRAME src="Spider.jpg">
<FRAMESET rows="*,*,*•>
<FRAME src="Ferr.html">
<FRAME src="Lamb.html">
<FRAME src="Jag.html">
</FRAMESET>
</FRAMESET>
Внешний вид этой страницы, созданной с помощью вложенных фреймов, показан на
Рис. 6.4.
Рис. 6.4. Пример Web-страницы с вложенными фреймами
Содержимое каждого фрейма в данном примере описывается кодом вида:
<HTML>
<HEAD>
<TlTLE>Jaguar photo</title>
</HEAD>
Фреймы
173
<BODY>
<H3>Jaguar X-type 3.0 Sport</H3>
<IMG src="Jaguar.jpg">
</BODY>
</HTML>
Безфреймовая версия страницы (элемент NOFRAMES)
Большинство популярных браузеров поддерживают фреймы, однако может так случить-
ся, что посетитель вашей страницы пользуется устаревшим браузером, который не вос-
производит содержимое фреймов. На этот случай создаются два варианта Web-страниц:
с фреймами и без фреймов.
В HTML предусмотрен специальный элемент NOFRAMES, который включает альтерна-
тивное содержимое вашей страницы. Если браузер поддерживает фреймы, то весь код
между тегами <NOFRAMES> и </NOFRAMES> будет проигнорирован. Те браузеры,
которые фреймы не поддерживают, пропускают все теги фреймов и отображают текст,
заключенный в контейнере NOFRAMES. Этот контейнер может быть, например, таким:
<NOFRAMES>
Ваш браузер не поддерживает фреймы. Откройте
<А href="filenoframes.html">бесфреймовую версию</А>
страницы.
</NOFRAMES>
Настройка фреймов
Внешний вид документа фреймовой структуры можно задавать с помощью атрибутов
элементов FRAMESET И FRAME.
Атрибуты элемента FRAMESET
Расположение и размеры фреймов, вид границ определяются атрибутами элемента
FRAMESET. Два главных атрибута этого элемента cols и rows вам уже известны, рас-
смотрим остальные атрибуты.
Толщина и цвет рамок (атрибуты border, bordercolor)
Если вы хотите задать толщину границ, разделяющих фреймы, воспользуйтесь атрибу-
том border. Этот атрибут, значение которого записывается в пикселах, помещается
в тег <FRAMESET>, например:
<FRAMESET rows="50%,*" cols="30%,*,30%" border=10>
Этот тег задает толщину рамок в 10 пикселов. При нулевом значении атрибута border
границы между фреймами будут отсутствовать.
174
ГЛАВА 6
Атрибут bordercolor позволяет управлять цветом границ между фреймами. Напри-
мер, bordercolor= "white" задает границу белого цвета, но это не означает, что
граница вообще не будет отображаться. На экране будет присутствовать узкая полоска
от тени рамки, как будто рамка приподнята над содержимым фреймов.
Стилевые свойства рамки
Фреймы относятся к блочным HTML-элементам, поэтому при работе с ними можно
применять стилевые свойства, вводимые атрибутом style (см. раздел «Свойства бло-
ка» главы 3). Перечислим свойства, с помощью которых вы сможете управлять внешней
рамкой.
✓ border-width - определяет толщину внешней рамки вокруг фреймов. Например,
встроенный стиль style= "border-width: thick" устанавливает отображение
толстой рамки с внешней стороны набора фреймов элемента FRAMESET;
✓ border-color - задает цвет внешней рамки. Например, стиль style=
"border-color: aqua" будет указывать браузеру на отображение рамки бирюзо-
вым цветом;
border-style - устанавливает стиль внешней рамки, например, атрибут
style=" border -style: double" задает отображение рамки в виде двойной
линии.
Допустим, в HTML-документ введен тег <FRAMESET> следующего вида:
<FRAMESET rows="50%,*" cols="30%,*,30%" border=10
bordercolor="blue" style="border-color:olive;
border-width:20; border-style:double">
При этом внешняя рамка будет отображаться двойной линией оливкового цвета толщи-
ной 20 пикселов, а внутренние рамки будут иметь голубой цвет и толщину 10 пикселов.
Отметим, что атрибут bordercolor и свойство border-color устанавливают цве-
товое оформление рамок и не влияют на цвет полосы прокрутки, который определяется
начальными настройками браузера.
Мы рассмотрели атрибуты элемента FRAMESET, относящиеся к оформлению границ
фреймов. В HTML 4.0 для FRAMESET предусмотрены также стандартные атрибуты
title (всплывающая подсказка), id и class (применяются при обращении к фреймо-
вой структуре и при назначении стилей).
Атрибуты элемента FRAME
Отображение отдельных фреймов определяется атрибутами элемента FRAME.
Отображение полос прокрутки (атрибут scrolling)
Если содержимое фрейма не помещается в отведенную ему область окна браузера, то
по умолчанию вдоль границы фрейма появляется полоса прокрутки. Вы можете с помо-
щью атрибута scrolling управлять выводом полос прокрутки.
Фреймы
175
Атрибут scrolling может принимать значения: yes (полосы прокрутки всегда
отображаются), по (не отображаются) и auto (это значение устанавливается по умол-
чанию и соответствует появлению полос прокрутки лишь в случае необходимости).
Фиксация размеров фрейма (атрибут noresize)
Как отмечалось ранее, пользователь может указателем мыши изменить ширину или вы-
соту фрейма. Если вы хотите зафиксировать размеры фрейма, нужно воспользоваться
атрибутом noresize. Введение этого атрибута в тег <FRAME> запрещает изменение
размеров фрейма.
При использовании атрибута noresize в элементе фрейма нужно учитывать, что за-
прет на изменение размеров касается как границ смежных фреймов, так и тех фреймов,
которые имеют границы, являющиеся продолжением границ нерегулируемого фрейма.
Чтобы лучше представить, о чем идет речь, обратимся к примеру, показанному на
Рис. 6.3. Введем атрибут noresize в тег первого фрейма «Lime»:
<FRAME src="lime.html" noresize>
В результате зафиксированными окажутся границы фрейма «Lime». Неподвижной бу-
дет также граница между фреймами «Cyan» и «Red», поскольку она является продол-
жением нижней границы фрейма «Lime».
Отображение рамки вокруг фрейма
Во всех приведенных ранее примерах каждый из фреймов был ограничен рамкой, кото-
рая устанавливается по умолчанию для элементов FRAME. Если вы хотите управлять
отображением рамок вокруг фрейма, воспользуйтесь атрибутом frameborder. Этому
атрибуту можно присваивать два значения: 0 (рамки не отображаются) и 1 (наличие
рамок между текущим и смежными фреймами). Последнее значение устанавливается
по умолчанию.
Свободные поля (атрибуты marginwidth, marginheight)
Спецификацией HTML предусмотрено управление свободными полями внутри фрейма,
то есть отступами содержимого фрейма от границ. Для этого используются атрибуты
marginwidth (отступ от левой и правой границы) и marginheight (отступ от
верхней и нижней границы). Например, свободные поля слева и справа размером
30 пикселов устанавливается атрибутом marginwidth=30, верхнее и нижнее поля
в 150 пикселов - атрибутом marginheight=150. Действие указанных атрибутов рас-
пространяется как на текст, так и на графику.
Ссылки и навигация
Как отмечалось в начале главы, с помощью фреймов можно создать удобную систему
навигации по сайту (см. Рис. 6.1). В одном фрейме размещаются ссылки на страницы
сайта, а в другом - содержимое самих страниц. Рассмотрим подробнее технологию соз-
дания подобных ссылок.
176
ГЛАВА 6
Целевые фреймы и элементы привязки
Чтобы при активизации ссылки выполнялась загрузка страницы в определенный фрейм,
этому фрейму (он называется целевым) нужно присвоить уникальное имя. Имена целе-
вых фреймов могут начинаться с любой строчной или прописной буквы латинского ал-
фавита. Имя присваивается атрибутом паше тега <FRAME>. Например, тег
<FRAME src="mydoc.html" name="гeport">
устанавливает, что содержимым фрейма report после начальной загрузки будет файл
mydoc. html.
Имя целевого фрейма должно быть указано в элементе привязки А через значение атри-
бута target, например:
<А href="doc2.html" target="report">Отчет</А>
При щелчке мышью по ссылке «Отчет» будет загружен файл doc2. html в целевой
фрейм report. Таким образом, применение ссылки с атрибутом target позволяет
открывать новый документ в конкретном фрейме.
Пример панели навигации
Вернемся к рассмотрению примера панели навигации, описанной в начале главы
(Рис. 6.1). HTML-код исходной страницы с фреймами приведен выше, в пункте
«Свободные поля (атрибуты marginwidth, marginheight)». Нам остается привести
код навигационного файла cont.html, который содержит ссылки и загружается в ле-
вый фрейм:
<HTML>
<HEAD>
<Т1ТЬЕ>Содержание poMaHa</title>
</HEAD>
<BODY>
<Н2>Содержание</Н2>
<A href="glavl.html" target="rightframe">
Глава 1. Безенчук и «нимфы&гадио; </A><BR><BR>
< A href="glav2.html" target="rightframe">
Глава 2. Кончина мадам Петуховой </A><BRxBR>
< А href="glav3.html" target="rightframe">
Глава 3. «Зерцало грешного&гадио; </A><BRxBR>
< A href="glav4.html" target="rightframe">
Глава 4. Муза дальних странствий</А><ВК><ВК>
< А href="glav5.html" target="rightframe">
Глава 5. Великий комбинаторе/А>
</BODY>
</HTML>
Фреймы
177
Файлы glavl, glav2,.., загружаемые в правый фрейм, имеют код, который не зависит
от фреймовой структуры.
Базовый фрейм (элемент BASE)
Итак, документ, на который указывает ссылка, загружается в целевой фрейм. Этот
фрейм определяется атрибутом target. Допустим, у вас есть файл, имеющий множест-
во ссылок, и вы хотели бы, чтобы все документы, соответствующие ссылкам, загружа-
лись в один и тот же фрейм. Чтобы организовать такую загрузку, не нужно записывать
атрибут target в каждый элемент привязки. Достаточно для этого воспользоваться
элементом BASE.
Напомним, что тег <BASE> применяется также для указания базового URL-адреса при
формировании относительных гиперссылок (см. раздел «Относительные ссылки
(элемент BASE)» главы 2). Этот тег размещается в заголовочной части HTML-файла.
Фрейм, в который производится загрузка по гиперссылкам, называется базовым фрей-
мом. Он задается значением атрибута target в одиночном теге <BASE>. Например,
файл навигации cont. html с несколькими элементами привязки можно записать коро-
че следующим образом:
<HTML>
<HEAD>
<Т1ТЬЕ>Содержание романа</Т1ТЬЕ>
<BASE target="rightframe">
</HEAD>
<BODY>
<Н2>Содержание</Н2>
< A href="glavl.html">
Глава 1. Безенчук и «нимфы&гадио;</AxBRxBR>
< A href="glav2.html">
Глава 2. Кончина мадам Петуховой</А><ВЕ><ВК>
< А href="glav3.html">
Глава 3. «Зерцало грешного&гадио;</A><BRxBR>
< A href="glav4.html">
Глава 4. Муза дальних странствий</АхВЕхВЕ>
< А href="glav5.html">
Глава 5. Великий комбинаторе/А>
</BODY>
</HTML>
Таким образом, задание базового фрейма позволяет только один раз в документе указать
конкретный фрейм загрузки ссылок, а не записывать его в каждом элементе привязки.
В приведенном выше примере базовым является фрейм rightframe.
178
ГЛАВА 6
Специальные целевые фреймы
Целевые фреймы для отображения документов можно назначать не только в зависи-
мости от их позиции в окне браузера (например, правый верхний фрейм). Специфи-
кацией HTML предусмотрена загрузка документов в новое окно или в тот же фрейм,
из которого была активизирована ссылка. Целевой фрейм определяется дополни-
тельными значениями атрибута target:
✓ target="_blank" - устанавливает загрузку документа в новое окно (Рис. 6.5);
✓ target="_sel‘f" - определяет загрузку нового документа в текущий фрейм, в
котором была активизирована ссылка;
✓ target="_p£rent" - задает загрузку документа в текущий родительский
фрейм, в котором посетитель страницы щелкнул на ссылке; если текущий фрейм
не имеет предков, это значение эквивалентно значению _self;
✓ target="_top " - документ будет загружаться в текущее окно браузера поверх
документа, в котором была выполнена активизация ссылки.
Перечисленные специальные значения атрибута target должны начинаться с сим-
вола подчеркивания.
Л Ист *«»има* - MfalOSOft Ыеапж« Е*"* « * о
нцд Избранное Сервис рфввка
Содержание
Механически^
счетные устройства
Первое поколение
ЭВМ
Второе поколение
Третье поколение
ЭВМ
Четверто г поколение
Q Готово
История вычислительной
техники
Механические счетные устройства
В 1833 г английский ученый Чарлз Бзбидл занимавшийся
составлением таблиц для навигации, разработал проект
аналитически машины* По его замыслу, зта машина дол . на
была быть гигантским арифмометром с программным
управлением В машине К«
арифметическое и запомни
что его машина была проо<
ней использовались далек
для запоминания разрядов
применялись зубчатые кол
Бэбид гу не удалось из-за «
“аналитическая машина* н
Лишь спустя 100 лет майи
инженеров. В конце 30-х
Рис. 6.5. Загрузка документа по ссылке в новое окно
Фреймы
179
На Рис. 6.5 показан пример структуры, состоящей из двух фреймов, причем левый -
фрейм навигации. При щелчке мышью по интересующей ссылке в область правого
фрейма выводится соответствующий документ, который также содержит некие
ссылки. В данном примере в правом фрейме имеется ссылка «аналитическая маши-
на». При щелчке мышью по этой ссылке выводится изображение машины и ее созда-
теля в отдельное окно браузера.
Изучив предыдущий материал настоящей главы, вы без труда сможете создать сис-
тему связанных ссылок, показанную на Рис. 6.5. Отметим только, что в файле, кото-
рый загружается в правый фрейм, якорный элемент должен представляться в виде:
<А href="beb.html" target="_blank">
"аналитической машины"</A>
где атрибут target="_blank" указывает на загрузку в новое окно файла
beb.html, определяемого атрибутом href.
Плавающие фреймы (элемент IFRAME)
Разместить фрейм в обычном HTML-документе (в пределах элемента <BODY>) можно с
помощью элемента IFRAME. Фреймы, создаваемые этими элементами, называются пла-
вающими. Впервые концепция плавающих фреймов была реализована компанией Micro-
soft в браузере Internet Explorer 3.0.
Имя элемента плавающего фрейма IFRAME происходит от сокращения английского
термина «inline frame» - строчный фреймы. Контейнер <IFRAME> может размещаться в
любом месте элемента <BODY>. Причем содержимое, размещенное между тегами
<IFRAME> и </IFRAME>, будет отображаться только браузерами, которые не поддер-
живают технологию плавающих фреймов.
Задание плавающего фрейма аналогично описанию элемента IMG (см. раздел «Вставка
изображения (элемент IMG)» главы 5). Поэтому мы кратко перечислим только допусти-
мые атрибуты тега <IFRAME>:
✓ src - задает URL-адрес загружаемого файла;
✓ width, height - определяют ширину и высоту плавающего фрейма;
✓ align - устанавливает выравнивание фрейма относительно окна браузера; возмож-
ные значения этого атрибута рассматривались в разделе «Выравнивание изображения
(атрибут align)» главы 5.
✓ marginwidth, marginheight, frameborder и scrolling - назначают раз-
меры свободных полей, вывод рамки фрейма и полос прокрутки (см. пункт «Атрибу-
ты элемента FRAME» настоящей главы);
✓ name - задает имя фрейма, используемое при определении целевого фрейма.
В отличие от обычных фреймов, размеры плавающего фрейма не могут быть изменены
посетителем страницы, поэтому в число допустимых атрибутов тега <IFRAME> не вхо-
дит noresize.
180 ГЛАВА Б
Приведем схему HTML-документа, содержащего плавающий фрейм:
<HTML>
<HEAD>
<Т1ТЬЕ>История вычислительных машин</Т1ТЬЕ>
</HEAD>
<BODY>
<Н2>Первое поколение ЭВМ</Н2>
<!— Содержимое основной части документа -->
<IFRAME name="One"
src="compmach.html" marginwidth=30
frameborder=l width=500 height=150 align="right"
frameborder=l>
</IFRAME>
<!— Содержимое основной части документа -->
</BODY>
Плавающий фрейм в этом документе имеет размеры 450x180 пикселов, содержит
по необходимости полосу прокрутки и выровнен по правому краю. Внешний вид
документа с плавающим фреймом показан на Рис. 6.6.
‘3 История ылис^1ел1Н М 'шин Micro oft Ini• irvt Ex< lorer Fl "•* 0
Файл Пр-чажа Рид Иэбр^»<юе Справка
Первое поколение ЭВМ
Резкий скачок & развитии вычислительной техники произошел в 40-х годах, после Второй мировой войны,
и связан он был с появлением качественно новых электронных устройств Это были электрон но-вакуумные
лампы, возможно, вы их видели в старых радиоприемниках Электрические схемы, построенные на этих
лампах, работали значительно быстрее, чем схемы на электромеханических реле Кроме того, значительно
возросло быстродействие вычислительных машин В результате релейные машины были очень быстро
вытеснены более производительными и надежными электронными вычислительными машинами (ЭВМ)
Применение ЭВМ значительно расширило круг решаемых задач Стали доступны задачи, которые раньше
просто не ставились, поскольку на арифмометрах они могли выполняться десятил тиями и веками
Первая ЭВМ создавалась в 1943 -
46 гг в США и называлась она
ЭНИАК (ENIAC - Electronic
Numerical Integrator and Calculator -
электрон но-числовой интегратор
и вычислитель) Эта машина
содержала около 18 тысяч
электронных ламп, множество
< ЭВМ раъъмчлшл
Характерными чертами ЭВМ. первою поколения являются применение
хпвктроиных ламп в цифровых схемах, большие габариты, а также трудоемкий
процесс программировакюг
ЭВМ второю поколения отличаются применением полупроводниковых
элементов и использованием алгоритмических языков программирования
электромеханических реле, причем ежемесячно выходило из строя около 2 тысяч ламп У машины ЭНИАК,
а также у других первых ЭВМ, был серьезный недостаток - исполняемая программа хранилась не в памяти
машины а набиралась сложным образом с помощью внешних перемычек
Мой компьютер
Рис. 6.6. HTML-документ, содержащий плавающий фрейм
В данном примере плавающий фрейм играет роль дополнительной области на Web-
странице, в которую выводится текст, поясняющий основное содержание документа.
ГЛАВА 7.
Формы
Наиболее впечатляющей возможностью World Wide Web является интерактивность.
Взаимодействие пользователя с вашим сайтом осуществляется, как правило, с помощью
форм. Формы - это простейший интерфейс для получения отзывов от пользователей, для
подачи заявок и оформления заказов и т.д.
О формах HTML
Каждому пользователю знакомы многочисленные элементы управления (кнопки, спи-
ски, текстовые поля, флажки, переключатели и проч.), встречающиеся в различных диа-
логах и окнах современных приложений. В документах Web также можно размещать
подобные элементы, превращая сухие и малоинтересные документы в интерактивные
страницы.
> Объединение логически связанных элементов управления в до-
$ кументе HTML называется формой. Формы являются основным
> средством HTML (начиная с версии HTML 2.0), предназначенным
< для ввода и обработки информации.
Некоторые элементы управления, входящие в формы (например, текстовые поля и спи-
ски), часто сравнивают с полями в обычных бланках, которые заполняются по принципу
«вписать-отметить нужное». Вспомните бланки-заявки на какой-либо товар, накладные,
расходные и приходные ордеры и т.д. Однако это сравнение справедливо лишь отчасти,
поскольку возможности элементов управления форм значительно шире возможностей
их бумажных аналогов.
Как происходит работа с формой? Посетитель сайта вводит в поля формы какие-
либо значения и щелкает на определенной кнопке. После этого введенная им инфор-
мация передается на сервер, где обрабатывается соответствующей программой -
обычно CGI-сценарием. Данные, введенные посетителем, претерпевают изменения,
и в зависимости от алгоритма сценария вы можете получить с сервера преобразован-
ную Web-страницу, можете отправить письмо по E-mail, ваш браузер может отобра-
зить результат поиска по ключевым словам и т.д. Подобная схема реализована
в многочисленных гостевых книгах, досках объявлений, поисковых машинах, в элек-
тронных конференциях, чатах. Самое сложное в этой схеме - работа CGI-сценария.
Однако начинающему Web-дизайнеру или Web-программисту вовсе не обязательно
знать, как эти сценарии работают. Можно просто воспользоваться какой-либо из су-
ществующих программ - в Интернете есть множество сайтов, предлагающих гото-
вые скрипты, как говорится, на все случаи жизни. Поэтому пока будем рассматри-
вать создание самих форм в рамках теговой модели HTML.
182
ГЛАВА 7
CGI - это аббревиатура от Common Gateway Interface (общий
шлюзовой интерфейс), которая обозначает протокол для взаи-
модействия внешних программ с Web-сервером. Программы, со-
ответствующие этому протоколу, называются CGI-
программами или CGI-сценариями.
Пример формы HTML
Для лучшего представления о формах HTML приведем пример формы, которая может
предлагаться посетителям электронного книжного магазина (Рис. 7.1). В этой форме
нужно заполнить поля, отвечающие фамилии и имени посетителя, указать образование и
ввести другие данные.
Рис. 7.1. Пример формы с информацией о пользователе
Представление формы на сервер выполняется при нажатии кнопки Подача запроса
(Submit), расположенной в нижней части формы. Рядом с этой кнопкой находится кноп-
ка Сброс (Reset), с помощью которой можно очистить поля формы. HTML-код для дан-
ной формы имеет следующий вид:
<HTML>
<HEAD>
<Т1ТЬЕ>Гостевая книга</Т1ТЬЕ>
</HEAD>
<BODY>
Добро пожаловать в Web-магазин "Мир книг"! <BR>
Просим сделать запись в гостевой книге.
<FORM method="post"
action="http://www.mirknig.ru/cgi-bin/guest01.pl ">
Формы
183
<PRE>
Фамилия, Имя: cINPUT type="text" name="fn" size=30>
Профессия: cINPUT type="text" name="prof">
Интересующий раздел: <SELECT name="theme">
cOPTION зе1е^ес1>Компыотерная
<0РТ10Ы>Детективы
<0РТ10№>Историческая
<0РТ10Ы>Любовные романы
<0РТ10Ы>Поэзия
</SELECT> </PRE>
Образование:<BR>
cINPUT type="radio" name="educ" value="yes"
checked>CpeflHee
cINPUT type="radio" name="educ" value="no"> Высшее
<Р>Ваш отзыв о нашем сервисе:<BR>
cTEXTAREA rows=3 cols=45 name="comm">
</TEXTAREA><BR>
cINPUT type="submit" name="sub" value="Отправить">
cINPUT type="reset" name="res"
value="Отменить">
c/FORM>
с/BODY>
c/HTML>
Теги и атрибуты, входящие в эту форму, нам предстоит разобрать в последующих разде-
лах данной главы.
Зачем нужны формы
Элементы управления будут отображаться браузером Internet Explorer, даже если они
размещены не в форме, а непосредственно на Web-странице. Поэтому возникает естест-
венный вопрос, так ли уж необходимы формы? Оказывается, что форма действительно
необходима, когда вам нужно отправить определенные данные (а не всю страницу) на
сервер. Кроме того, нужно учесть, что браузер Netscape отображает элементы управле-
ния только в том случае, если они содержатся внутри контейнера cFORM>. . . c/FORM>.
То есть для совместимости с Netscape элементы управления нужно вставлять в формы.
В одном документе Web может быть несколько форм. При этом не допускаются вло-
женные формы, то есть одна форма не может содержать ссылку на другую форму, даже
если обе формы находятся в одном HTML-документе.
Каждая из форм имеет свою область действия, благодаря чему все формы функциони-
руют независимо. Например, установка переключателей в одной форме никак не влияет
на положение переключателей в другой форме. Кроме того, несколько форм могут иметь
элемент с одним и тем же именем, скажем choice.
184
ГЛАВА 7
Задание формы (элемент FORM)
В HTML для создания формы применяется контейнер <FORM>, который может разме-
щаться в любом месте основной части документа. В документе может быть несколько
форм, причем каждая пара тегов <FORM> и </FORM> будет отвечать отдельной форме.
Запись кода формы с учетом допустимых атрибутов имеет вид:
<FORM name="имя_формы" action="URL" method="метод"
епсДуре="тип кодировки">
</FORM>
Ниже рассмотрим атрибуты, которые содержатся в теге <FORM>.
Имя формы (атрибут name)
Итак, в документе HTML каждая форма представляется отдельным элементом FORM.
Этим элементам с помощью атрибута name можно дать имена. В принципе присваи-
вать имена формам не обязательно. Однако имя необходимо, чтобы формой можно было
манипулировать из сценария.
v Стандарт HTML 4 рекомендует вместо пате использовать ат-
рибут id. Однако для поддержки вашей страницы наибольшим
/< числом браузеров лучше пользоваться одновременно двумя ат-
рибутами пате и id, присваивая им одинаковые имена.
Представление формы на сервер (атрибут action)
В атрибуте action содержится адрес URL, по которому будет представляться фор-
ма (при нажатии на кнопку Submit). Значением атрибута может быть просто E-mail,
но чаще - это указание на сервер, который занимается обработкой форм с помощью
CGI-программ.
Многие Web-мастеры помещают программы для обработки форм в специальную папку,
обычно называемую cgi-bin (сокращение от слов «CGI» и «binary» - двоичный код).
В результате обычный вид тега <FORM> с атрибутом action, может быть следующим:
<FORM action="http://www.earthweb.com/cgi-bin/s97r">
</FORM>
Атрибут action в данном случае означает, что браузер установит связь с сервером
www. earthweb. com и данные, записанные в форму, передаст для обработки в прило-
жение s97r, размещенное в папке cgi-bin.
Формы 185
Способ представления данных формы зависит от протокола, указанного в action, а
также от значений других атрибутов (method и enctype). Если в качестве значения
атрибута action указать обращение к электронной почте, например,
action="mailto:serg@ip.com.ru"
браузер автоматически отправит результаты, введенные в форму по указанному адресу.
Отметим, что атрибут action, как правило, присутствует в тегах <FORM>. Если же это-
го атрибута нет, то в качестве значения action подставляется URL самого документа.
Передача данных (атрибут method)
При создании формы вам необходимо указать, каким образом форма будет передаваться
на сервер, который фигурирует в значении атрибута action. Существует два метода
передачи информации: get или post. Используемый метод передачи вписывается
в атрибут method тега <FORM>.
Метод get
Метод get - более простой, он применяется по умолчанию и осуществляет передачу
данных в один этап. Чтобы представить, как он работает, вспомните обращение к тому
или иному ресурсу в Интернете. Вы вводите в адресную строку браузера URL (напри-
мер, http://www. mytest.ru/), после чего адрес переводится согласно протокола HTTP
в запрос серверу. Этот запрос и является запросом по методу get.
При отправке формы для обработки на сервер все происходит аналогично. Вы указывае-
те в атрибуте action адрес сервера, а также расположение и имя программного файла,
который будет производить обработку формы, например, http://www.mytest.ru/cgi-
bin/rep 10l.exe. Вместе с названием программы вам нужно передать значения параметров,
необходимых для работы программы. Эта информация добавляется после имени файла и
передается вместе с URL, например,
http://www. mytest.ru/cgi-bin/replO 1 .exe?Name=Ivanov&Age=32&Zodiak=Teletch
Единственное ограничение при таком способе передачи данных - это их объем (не более
тысячи символов) и алфавит (латинский, кириллица).
Метод get представляет оптимальную схему передачи в случае, когда для обработки
формы не требуется какого-либо дополнительного внешнего процесса. Примером может
быть поиск в базе данных. В течение одного сеанса связи обрабатывается запрос, сфор-
мулированный в форме, запускается процедура поиска и выдается отчет о результате.
Метод post
Этот метод используется, когда нужно передать большие объемы информации. Пе-
редача происходит как минимум в два этапа. Например, при обновлении базы дан-
ных браузер сначала устанавливает контакт с исполняющим сервером, указанным в
атрибуте action. Затем отдельной передачей происходит посылка дополнительных
сведений в базу.
186
ГЛАВА 7
< Для передачи небольших форм с короткими полями используйте
метод get. Если же нужно передать форму, имеющую много
длинных полей, укажите в атрибуте метод post. Используйте
: этот метод также в случае, если вы недостаточно осведомле-
ч ны о работе CGI-приложения на стороне сервера. Кроме того,
метод post имеет преимущества при работе с секретной ин-
- формацией, когда передача (например, номеров кредитных кар-
? точек) выполняется отдельными транзакциями. Понятно, что
.; ввод этих данных в строку вместе с URL, как в методе get, не-
приемлем.
Кодировка (атрибут enctype)
Прежде, чем передать данные из формы на Web-сервер, их необходимо закодиро-
вать. Кодировка производится обычно по тем же правилам, что и кодировка адреса
URL. Поэтому можно воспользоваться типом кодировки по умолчанию -
application/x-www-form-urlencoded. Тогда атрибут enctype в составе тега
FORM можете вообще не указывать.
Из других типов кодировки отметим text-plain (более подходит, когда используется
URL mailto в атрибуте action) и multipart/form-data (подходит при отправке
файлов).
Создание элементов управления
Для ввода данных на Web-странице могут располагаться различные элементы управле-
ния: текстовые поля, флажки, переключатели и проч. Если элементы управления разме-
щены внутри формы, то говорят о внутренних элементах управления. Для всех внутрен-
них элементов управления родительским является элемент <FORM>.
На Web-страницу элементы управления вводятся тегом <INPUT>, например, чтобы соз-
дать текстовое поле, достаточно в HTML-код ввести строку
cINPUT type="text" name="organization">
где type - атрибут, указывающий тип элемента управления (в данном случае "text"),
a name - атрибут имени.
Атрибуты тега <INPUT>
Как правило, внутри тега <INPUT>, помимо названных выше атрибутов type и name,
имеются и другие атрибуты. Перечислим атрибуты, которые чаще всего используются
при разработке Web-страниц.
~эрмы
187
i/ type - определяет тип элемента, предназначенного для ввода данных. Если этот ат-
рибут не задан, то считается по умолчанию, что тег <INPUT> описывает простое тек-
стовое поле. Все возможные типы элементов в формах HTML описываются ниже;
/ align - задает расположение элемента по вертикали. Возможные значения этого
поля такие же, как в случае атрибута align в теге <IMG>;
✓ checked - отвечает установке флажка или переключателя. Установленный флажок
или переключатель возвращает пару значений name/value при представлении
формы;
✓ name - определяет имя элемента, которое используется при передаче формы. Ука-
зывать атрибут имени необходимо для большей части элементов форм. Имя должно
быть уникальным для элемента или для группы логически связанных элементов;
S size - задает размер текстового поля в символах;
✓ maxlength - указывает максимальное число символов, которые могут быть введе-
ны в текстовое поле;
v' src - используется совместно с атрибутом type=IMAGE и задает URL нужного
изображения;
✓ value - определяет значение (текстовую строку или число) для элемента, задавае-
мого атрибутом type;
✓ tabindex - задание этого атрибута позволяет установить порядок перемещения
фокуса по элементам формы при нажатии клавиши Tab;
Возможны и другие атрибуты, на которых мы подробно останавливаться не будем.
Какие бывают элементы управления (атрибут type)
Итак, элемент управления вводится тегом <INPUT>, в то время как тип элемента задает-
ся атрибутом type. Перечислим возможные элементы управления, давая в скобках их
названия, совпадающие со значением атрибута type.
✓ Текстовые поля (text). Они называются иногда полями ввода или полями редак-
тирования. Это буквенно-цифровые поля, которые применяются для ввода данных
или получения информации от пользователя. На возможность ввода текста в поле
указывает мигающая вертикальная черточка - курсор. Если в поле имеется исходный
текст, то вы можете установить курсор в нужном месте щелчком мыши или с помо-
щью клавиш управления курсором.
✓ Поля ввода пароля (password). Это также текстовые поля, в которых вводи-
мые символы «забиваются» звездочками «*», скрывающими на экране содержи-
мое поля. По звездочкам пользователь может проверить количество введенных
символов пароля.
✓ Скрытые поля (hidden). Для передачи данных, рассчитанных вместе с формой,
часто используются скрытые текстовые поля.
188
ГЛАВА 7
✓ Многострочное текстовое поле (textarea). В HTML имеется возможность ввода
и отображения текста в отдельном прямоугольном поле, которое может иметь верти-
кальную полосу прокрутки. Такое отображение удобно в случае текстов, состоящих
из нескольких абзацев (перечней, реквизитов, инструкций и проч.).
✓ Поле выбора файлов (file). С помощью этого элемента, представляющего собой
поле ввода, оснащенное дополнительными кнопками, можно выбрать файл на диске
и включить его в форму для последующей пересылки на сервер. Эта возможность
весьма ценна при взаимодействии со службами технической поддержки, провайде-
рами, которые могут запрашивать файлы данных.
✓ Флажки (checkbox). Эти элементы, имеющие вид маленьких квадратиков, опреде-
ляют какой-либо выбор (включение или выключение какого-либо параметра). Пус-
тые квадратики означают, что параметр выключен, квадратики с галочкой - включен.
Несколько флажков могут объединяться в группу, которая будет отвечать набору па-
раметров для выбора. Флажок устанавливается щелчком мыши по квадратику либо
по надписи (если надпись связана с флажком элементом label).
Переключатели (radio). Их называют также кнопками выбора или радиокнопками
(Radio Buttons) из-за похожести принципа их действия на работу переключателя диа-
пазонов в радиоприемнике (вспомните механические переключатели различных
электронных устройств, в которых при нажатии одной из кнопок выталкивается ра-
нее нажатая кнопка). Переключатели имеют не менее двух положений и позволяют
выбрать одно (и только одно) положение.
✓ Кнопки. Это элементы управления, которые используются для представления формы
(кнопка submit), сброса данных формы (кнопка reset), создания эффектов для
кнопки (кнопка button).
✓ Списки (select). Эти элементы предоставляют пользователю список вариантов для
выбора. Существуют два типа списков: раскрывающиеся списки и списки с прокрут-
кой. В HTML предусмотрена возможность создания списка с множественным выбо-
ром, то есть списков, позволяющих выбрать более одного элемента. Прямое редакти-
рование содержимого списков невозможно.
✓ Надписи (label). Для создания надписей, связанных с элементами управления
(флажками, переключателями и др.), в Internet Explorer 4.0 и более поздних версиях
имеется тег <LABEL>. Этот тег позволяет включать элемент управления щелчком
мыши по надписи.
✓ Группы элементов (FIELDSET). Эти группы создаются для четкого разделения
страниц и форм на области связанного содержания. Например, целесообразно пере-
ключатели объединять в группу и обводить их рамкой.
Располагая элементы управления на форме, нужно учесть, что для макетирования форм
в HTML не предусмотрено каких-либо специальных инструкций. Поэтому размещение
элементов на форме и задание их размеров выполняется средствами HTML (например,
тегами <BR> и <Р>, а также средствами размещения текста).
Формы
189
Текстовые поля
Поскольку формы предназначены, прежде всего, для ввода текстовой информации, чаще
всего в формах используются текстовые поля. Они позволяют вводить имена, адреса,
краткие отзывы и проч.
Диалоговые текстовые поля
Поле для ввода одной строки текстовой информации задается значением text атрибута
type. Такое поле называется также диалоговым текстовым полем. Один из примеров
текстового поля вы встретили в начале раздела «Создание элементов управления». При-
ведем еще один простой пример:
<INPUT type="text" name="reply" size=15 maxlength=30>
Атрибут name идентифицирует элемент управления и набирается латинскими буквами.
Он может быть использован для передачи содержимого формы. Так, значения атрибутов
size и maxlength будут переданы на сервер под именем reply. Имя может также
обозначать группу логически связанных полей. Кроме того, значение атрибута name
может использоваться для ссылок на элемент в коде сценариев.
Поясним смысл атрибутов size и maxlength.
✓ size - определяет количество видимых (отображаемых) символов, то есть ширину
текстового поля. В браузере Internet Explorer по умолчанию принимается size=20;
✓ maxlength - задает максимально допустимое количество символов, которое поль-
зователь может внести в текстовое поле. Значение maxlength может превышать
size (по умолчанию maxlength не ограничено).
Если вы откажетесь от применения этих атрибутов, браузер по умолчанию использует
свои ограничения на количество вводимых символов. Чтобы вводимые данные одинако-
во интерпретировались разными браузерами, лучше все же определить указанные атри-
буты. При этом можете использовать любые значения, поскольку количественных огра-
ничений на size и maxlength не накладывается. Если вы определили значение
size, а количество вводимых символов превышает это значение, то текст будет автома-
тически сдвигаться влево. Ввод текста в поле прекращается, когда количество символов
превысило значение maxlength.
До сих пор мы рассматривали текстовые поля, в которых отсутствует начальное содер-
жимое. Чтобы при загрузке страницы в поле отображался какой-нибудь текст, нужно тег
<INPUT> дополнить атрибутом value, например,
<INPUT type="text" size=40 maxlength=40 value="MoM_naHHbie">
Значение атрибута value может состоять из букв или цифр, а также пробелов.
190
ГЛАВА*
Поле ввода пароля
Одной из разновидностей текстового поля является поле ввода пароля. В этом поле пг
вводе каждого символа на его месте отображается звездочка «*», скрывающая на экран;
содержимое поля. Поле ввода пароля создается тегом
<INPUT type="pas sword">
В этом теге можно указывать те же атрибуты (size, maxlength, value), что и в тег;
диалогового текстового поля.
Скрытые поля
В HTML определены такие объекты, как скрытые текстовые поля. Это поля, которые не
видны на странице и чаще всего вставляются в HTML-файл, когда необходимо передать
серверу данные, не откорректированные посетителем. Чтобы создать скрытое поле, дос-
таточно определить его тип с помощью значения hidden для атрибута type, например.
<INPUT type="hidden">
Все другие описания, рассмотренные нами для диалоговых текстовых полей, относятся
и к скрытым полям.
Поле выбора файлов
Этот тип полей, поддерживаемый в Netscape и Internet Explorer (начиная с версии 4.0).
позволяет пользователю выбрать файл на диске для пересылки его со своего компьютера
на сервер. Задается поле выбора файла с помощью значения атрибута type="file'.
В отличие от ранее рассмотренных полей, на форме вместе с полем ввода имеется кноп-
ка Обзор (Browse), как показано на Рис. 7.2.
Рис. 7.2. Поле выбора файла
Если нажать кнопку Обзор, то в последующем стандартном диалоге можно выбрать
дисковод и пересылаемый файл. Таким образом, файл можно задать двумя способами:
путем ввода непосредственно в текстовое поле имени файла и пути к нему либо путем
выбора файла из списка.
Запись формы выбора файла, показанной на Рис. 7.2 имеет следующий вид:
Формы 191
<FORM enctype="multipart/form-data" action="url"
method="post">
Введите имя файла:<BR>
cINPUT type="file" name="myfile" ><BR><BR>
cINPUT type="submit" value="Послать файл">
c/FORM>
В этот тег могут быть введены, как и в случае других текстовых полей, атрибуты шири-
ны поля size и максимальной длины maxlength текста. Атрибут начального содер-
жимого поля value обычно не используется.
г В отличие от других полей ввода, поле выбора файла работает
£ корректно лишь при методе пересылки post и формате кодиров-
\ KU "multipart/form-data".
Флажки
Флажки дают возможность с помощью одного щелчка мыши выбрать тот или иной па-
раметр в вашей форме.
Создание флажков (атрибут checkbox)
Для создания флажков используется тег ciNPUT>, в котором атрибуту type присваи-
вается значение CHECKBOX:
cINPUT type="checkbox'^
Для каждого флажка нужно ввести свой тег cinput> и задать его атрибуты:
✓ name - имя флажка или группы флажков;
✓ value - значение установленного флажка, считываемое при представлении
формы.
По умолчанию начальное положение флажка считается не установленным. Чтобы задать
начальное положение установленного флажка, надо дополнить тег новым атрибутом
checked. При представлении формы на сервер для установленных флажков считыва-
ются определенные значения согласно атрибутам value. Значением установленного
флажка является текстовая строка, заданная в этом атрибуте. Не установленные флажки
вклада в значения формы не дают.
Пример группы флажков
Приведем простой пример формы, содержащей группу флажков:
<FORM>
<Н2>Меню китайского ресторана</Н2>
192
ГЛАВА '
<НЗ>Сделайте заказ</НЗ>
<P><INPUT type="checkbox" name="menu" value="shark">
Акульи плавники<ВЕ>
<INPUT type="checkbox" name="menu" value="fish">
Рыбий желудок<ВИ>
<INPUT type="checkbox" name="menu" checked value="bat">
Летучая мышь<ВК>
<INPUT type="checkbox" name="menu" value="bamboo">
Ростки бамбука
</FORM>
После каждого тега <INPUT> имеется текст, поясняющий значение флажка («Ак; -
льи плавники», «Рыбий желудок» и др.). Внешний вид приведенной формы показа
на Рис. 7“.3.
1 Заказ - Microsoft Internet Explorer вя
Рис. 7.3. Пример группы флажков
После загрузки формы оказывается автоматически установленным флажок «Летуча-
мышь», поскольку для него указан атрибут checked (пусть это будет «хит» в данно*
ресторане). Пользователь может снять первоначально установленный флажок и устано-
вить другие флажки либо не установить ни один из флажков. Значения всех установлен-
ных флажков (атрибут value) будут переданы на сервер при представлении формы.
Связывание надписи с флажком (элемент LABEL)
В примере, рассмотренном в предыдущем разделе, надписи рядом с флажками был;:
созданы как простой текст. Если вы хотите, чтобы флажок устанавливался не толькс
щелчком непосредственно по квадратику флажка, но также щелчком по надписи, необ-
ходимо надпись связать с флажком. Делается это с помощью элемента LABEL, который
представляет собой текстовый контейнер. Например, для связи первого флажка из фор-
мы на Рис. 7.3 с надписью «Акульи плавники» нужно теги <INPUT> и <LABEL> запи-
сать в виде:
<INPUT type="checkbox" ID=11 name="menu" value="shark">
<LABEL fог=11>Акульи плавники</ВАВЕВ>
Формы
193
Обратите внимание, что в теге <LABEL> содержится ссылка на связанный элемент
управления с помощью атрибута for. Этому атрибуту ставится в соответствие индиви-
дуальный идентификатор id элемента управления на Web-странице.
Аналогично описанному способу переопределяются и другие надписи формы. Каждая из
полученных таким образом надписей реагирует на щелчок мыши, а также заключается
s прямоугольную пунктирную рамку в случае щелчка по опции.
Всплывающие подсказки (атрибут title)
Многие пользователи привыкли к тому, что при наведении указателя мыши на элемент
управления должна появляться всплывающая подсказка. Такой маленький сервис имеет-
ся и для элементов HTML при просмотре в Internet Explorer (начиная с версии 4.0).
Для создания всплывающей подсказки в тег <INPUT>, который задает элемент управле-
ния, необходимо добавить атрибут title. Снабдим для примера всплывающей под-
сказкой флажок, описанный в предыдущем пункте;
cINPUT type="checkbox" id="ll" name="menu" value="shark"
title="Щелкните здесь, если вы любитель чего-нибудь этакого">
-
Всплывающая подсказка появляется при наведении указателя
только на квадратик флажка. Расположение указателя мыши над j? рМфЦю
надписью такого эффекта не дает даже при наличии связи над-
писи с флажком (через элемент label). Isass&r1
Переключатели
Еще одним элементом управления являются переключатели, которые, как и флажки,
позволяют выбрать определенное значение параметра. Переключатели оформлены ана-
логично элементам CHECKBOX, но в виде кружков, и отличаются от флажков тем, что
в группе переключателей можно установить только один переключатель.
Создание переключателя (атрибут radio)
Для создания переключателя необходимо ввести тег
cINPUT type="radio">
Каждый переключатель вставляется в форму по отдельности, но все вместе они работа-
ют как одна группа. Для каждого переключателя необходимо задать атрибуты:
✓ паше - имя переключателя или группы (переключатели с одинаковыми именами
образуют группу);
✓ value - значение установленного переключателя, считываемое при представлении
формы.
194
ГЛАВА 7
В группе только один из переключателей может быть первоначально установлен. Чтоб;
переключатель был установлен сразу после загрузки формы, в его тег нужно ввести ат-
рибут checked. Если атрибут checked не присвоен ни одному из переключателе
группы, браузер при загрузке установит по умолчанию первый переключатель.
Каждому переключателю должно быть присвоено определенное значение (атрибут
value). При обработке формы на сервере будет отобрано значение установленного пе-
реключателя. Для пояснения значения каждого переключателя рядом с ним на фору с
отображается текст, задаваемый отдельно.
На Рис. 7.4 показан этот пример группы переключателей.
Рис. 7.4. Пример группы переключателей
Приведем соответствующий код:
<FORM>
<1>Где Вы собираетесь провести отпуск?</1>
<P><INPUT type="radio" name="rest" value="sea">
Ha Mope<BR>
<INPUT type="radio" checked name="rest" value="mount”>
В ropax<BR>
<INPUT type="radio" name="rest" value="cru">
В круизe<BR>
cINPUT type="radio" name=“rest" value="abr">
В загранпоездке
</FORM>
Первоначально в группе установлен переключатель, отвечающий варианту «В горах»
Если вы выберете другой вариант, например, «В загранпоездке», выделение с предыду •
щего переключателя будет автоматически снято. Когда форма будет представлена нз.
сервер, группа переключателей rest будет иметь только одно значение " abr".
Формы
195
Если созданные вами на форме переключатели требуют неко-
торых пояснений, то эти элементы можно снабдить всплываю-
щими подсказками. Осуществляется это с помощью атрибута
title, включенного в тег <input> (см. пункт «Всплывающие
подсказки» в разделе, посвященном флажкам).
Связывание надписей с переключателями
Как и в случае флажков, надписи можно связать с соответствующими переключателями
так, чтобы каждый переключатель устанавливался при щелчке по надписи. Покажем,
каким образом для этого нужно видоизменить приведенную выше форму (Рис. 7.4):
<FORM>
Где Вы собираетесь провести отпуск?
<P><INPUT type=radio ID=rl name=rest value="rom">
cLABEL FOR=rl>Ha MOpe</LABEL><BR>
cINPUT type=radio ID=r2 checked name=rest value="mount">
cLABEL FOR=r2>B ropaxc/LABEL>cBR>
cINPUT type=radio ID=r3 name=rest value="cru">
cLABEL FOR=r3>B Kpyn3e</LABEL><BR>
cINPUT type=radio ID=r4 name=rest value="abr">
cLABEL FOR=r4>B загранпоездкес/ЬАВЕЬ>
c/FORM>
Для связывания каждому переключателю должен быть присвоен индивидуальный иден-
тификатор, а все переключатели должны образовывать группу с определенным именем.
После выполненной корректировки формы пользователю не нужно будет точно целить-
ся указателем мыши в поле переключателя - достаточно щелкнуть мышью по надписи.
Таким образом, работа с элементами на формах HTML становится такой же комфорт-
ной, как с элементами управления, например, в диалоговых окнах Windows.
Кнопки
Наиболее распространенным элементом управления являются, пожалуй, кнопки.
С кнопками связывается ряд событий, из которых чаще всего используется щелчок ле-
вой кнопкой мыши. Рассмотренные выше элементы, флажки и переключатели, также
связаны с событием щелчка, однако для них щелчок меняет только состояние элемента,
в то время как щелчок по кнопке изменяет состояние, как правило, всей формы.
Создание кнопки (атрибут button)
Чтобы разместить на форме (или Web-странице) прямоугольную кнопку, необходимо
задать следующий атрибут:
cINPUT type="button">
196
ГЛАВА 7
Для формирования кнопки с надписью достаточно дополнить тег атрибутом value,
например,
<INPUT type="button" valuer"Пуск" name="start">
Шрифт надписей на кнопках определяется браузером.
Кнопки submit и reset
В HTML предусмотрены два типа кнопок, которые создаются без использования значе-
ния button. Это кнопки специального назначения: Подача запроса (Submit) и Сброс
(Reset). Кнопка Submit предназначена для запуска процедуры передачи формы на сер-
вер и формируется, например, тегом следующего вида:
<INPUT type="submit" value="Передача" name="trans">
Данный тег имеет атрибуты name и value. Этих атрибутов может и не быть, однако
их наличие позволяет браузеру после активизации кнопки отправить на сервер и пару
значений name/value. Если атрибут value отсутствует, то кнопка по умолчанию
имеет надпись «Подача запроса».
аи.
В версиях Internet Explorer 4.0 и выше кнопка submit может ра-
ботать как кнопка по умолчанию, то есть она активизируется FTHVA
при нажатии клавиши Enter (независимо от размещения в данный
момент фокуса на форме). свар"'
В форме можно применять несколько кнопок submit, но обязательно с разными име-
нами. Наличие имен кнопок позволяет программе обработки распознавать нажатую
пользователем кнопку.
Кнопка reset предназначена для приведения ф.ормы в начальное положение (сброс
всех введенных данных). Как и кнопка submit, она может иметь атрибут value,
определяющий надпись на кнопке. Если значение value не задано, то на кнопке
будет отображена по умолчанию надпись «Сброс». Тег кнопки reset может иметь
следующий вид:
cINPUT type="reset" value="Повторный ввод">
Если на форме находятся обработчики событий, связанные
с кнопками submi t и reset, эти кнопки должны быть размещены
в нижней части формы. Только в этом случае будут обрабаты-
1 ваться определенные элементы формы (на момент вызова об- А
, работника).
Формы 197
Кнопки с изображениями (атрибут type="image")
Стандарт HTML предоставляет возможность создавать на Web-страницах и формах раз-
личные пользовательские кнопки, в том числе, кнопки-изображения. Для создания кноп-
ки с изображением нужно ввести в тег <INPUT> атрибут type=" image" и задать URL
файла рисунка (атрибут src). Тег такой кнопки может иметь вид:
cINPUT type="image" src="rastr\handl2.gif"
align="top" name="result">
В этом примере указаны также атрибуты имени (name) и выравнивания изображения
относительно текста (align).
Многострочные поля (элемент TEXTAREA)
В текстовых полях, рассматривавшихся ранее, текст представлялся одной строкой. Снять это
ограничение позволяет элемент, называемый многострочным полем. Для создания подобно-
го текста нужно записать пару тегов <TEXTAREA> и </TEXTAREA>, задать атрибуты cols,
rows и ввести собственно текст. Текст должен быть разбит на строки нужным образом и
не должен содержать каких-либо специальных элементов HTML.
Приведем пример многострочного текста:
Чтобы приготовить раствор, выполните следующее. <BR>
cTEXTAREA name="recipe" cols=50 rows=4>
1.Высыпьте содержимое каждого пакета в отдельную емкость.
2 .Растворите каждый компонент в небольшом количестве воды.
3 .Влейте один раствор в другой и долейте воды до 1 литра.
</TEXTAREA>
Атрибуты cols и rows определяют соответственно ширину многострочного поля
(максимальное количество символов в строке) и высоту поля (число отображаемых
строк). Если весь текст не помещается в прямоугольную область поля, то появится вер-
тикальная полоса прокрутки (Рис. 7.5).
Рис. 7.5. Пример многострочного поля, созданного элементом TEXTAREA
198
ГЛАВА 7
Внутри тега <TEXTAREA> может размещаться также атрибут wrap, управляющий пере-
носом слов. Этот атрибут имеет следующие допустимые значения:
✓ wrap=" of f" - запрет автоматического переноса; при этом сохраняются переносы,
определенные автором;
✓ wrap="virtual" - перенос слов при отображении браузером, а серверу введен-
ные данные передаются одной строкой;
✓ wrap= "physical" - сохраняется перенос слов как при отображении браузером,
так и при передаче серверу.
Кроме перечисленных атрибутов, в <TEXTAREA> возможен обычный атрибут name -
имя, присваиваемое для обработки содержимого поля на сервере.
Списки
Выбрать какую-либо из опций позволяют флажки и переключатели. Однако, при большом
количестве опций набор флажков или переключателей может занимать на экране немало
места. В этих случаях для отображения многочисленных опций более подходят списки. Соз-
дание различных списков в документе HTML уже рассматривалось нами ранее (см. раздел
«Списки» главы 2), однако природа этих списков была текстовой. Сейчас мы остановимся на
списках, с помощью которых можно организовать взаимодействие пользователя с Web-
документом.
Типы списков
В HTML существует несколько разновидностей списков, которые предоставляют пользова-
телю варианты для выбора:
✓ раскрывающийся список, представляющий собой однострочное поле с треугольной
стрелкой, которая раскрывает список;
✓ поле-список, в котором на экран выводится заданное число строк; для просмотра всех
строк список может быть снабжен полосой прокрутки.
✓ список с множественным выбором, позволяющий благодаря полосе прокрутки просмат-
ривать все позиции списка и выбирать одновременно несколько позиций.
Примеры этих списков показаны на Рис. 7.6. Код соответствующей Web-страницы мы рас-
смотрим ниже.
Определение списков (элементы select и options)
Для создания списков используется контейнер <SELECT>, внутри которого содержатся
элементы <OPTIONS>. Именно эти элементы представляют каждую позицию списка.
Обратим ваше внимание, что позиции в списке часто также называются элементами
(приносим извинения за англоязычную литературу, в которой любят слово «element»).
В дальнейшем мы также позицию списка будем называть элементом списка, отличая ее
от элемента HTML.
Оормы
199
Рис. 7.6. Типы списков, создаваемые элементом SELECT
Приведем код страницы, содержащей три различных списка (Рис. 7.6).
сHTML-
<HEAD>
<Т1ТЬЕ>Списки</Т1ТЬЕ>
c/HEAD>
<BODY>
сН2>Примеры списковс/Н2>
<FORM name="searchform">
cSELECT name="prodl">
cOPTION value="0">«ЕМ-радио&гадио;
cOPTION value="1">«Радио-Континент&гадио;
<OPTION value="2">« Paflno-llIaHCOH»
</SELECT> - раскрывающийся cnHCOKcBR>cBR>
<SELECT name="prod2" size=3>
cOPTION value="O">KHMrM
cOPTION уа1ие="1">Видео
cOPTION value="2">Аудио
cOPTION value="3">Бумага
cOPTION value^'4'^Канцелярия
c/SELECT> - поле-списоксВЕ>сВР>
cSELECT name="prod3" size=4 multiple>
cOPTION value="0">Антивирусы
cOPTION value="l">ApxHBaTopbi
cOPTION value="2">rpa$HKa 3D
cOPTION value="3">Издательские системы
cOPTION value="4">MaTeMaTH4ecKne пакеты
200
ГЛАВА ‘
</SELECT> - список с множественным выбором<ВЕ><ВЕ>
</FORM>
</BODY>
</HTML>
Здесь в элементе SELECT использованы следующие атрибуты:
✓ name - присваивает имя элементу SELECT, которое предназначено для обработка
поля на сервере;
✓ size - указывает количество строк, которые одновременно отображаются браузер»»:
в списке. Если атрибута size в описании тега нет, то формируется однострочное
поле (поскольку по умолчанию size=l), а весь список имеет вид раскрывающегос
списка. Если заданное значение size меньше числа позиций в списке, то списо:
отображается вместе с полосой прокрутки;
multiple - включает режим выбора нескольких элементов из списка (в режиме
принятом по умолчанию, можно выбрать только один элемент).
Итак, каждый список помещается в контейнер <SELECT>. . .</SELECT>. Внутри это-
го контейнера содержатся теги <OPTION>, отвечающие отдельным элементам списка
Теги <OPTION> могут иметь атрибуты selected и value. Атрибут SELECTED по-
зволяет установить начальное выделение в списке. Его действие подобно атрибут*
checked установки начального положения флажка или переключателя в составе тегос
<INPUT type="checkbox" checked> или cINPUT type="radio" checked»
Если атрибут selected не установлен ни для одного тега <OPTION>, то в начально*
состоянии в списке не будет выделенных элементов. Пользователь может переназначит.-
выделение, установленное атрибутами SELECTED.
В окне браузера отображается содержание тегов <OPTION>, однако обратно на сервер
отправляется не это содержание, а значения атрибутов value. Отправке подлежат атри-
буты элементов списка, выделенных пользователем. Если же для выделенного элементе
атрибут value отсутствует, на сервер будет отправлен весь текст, приведенный после
тега <OPTION>.
Оформление списков с помощью свойств стилей
Итак, вы знаете, как создавать списки и как управлять списками с помощью атрибутов,
относящихся к элементам SELECT и OPTION. Если вы хотите сделать более привлека-
тельным отображение элементов списка, можете воспользоваться свойствами стилей
(см. главу 3 «Листы стилей»).
Приведем пример атрибута стиля, который может вам пригодиться при оформлении
списков. Чтобы задать цвет фона элемента списка и шрифт, определите встроенный
стиль типа:
<OPTION style="background:red; color:white" value="0">
Книги
</OPTION>
В этом случае элемент списка будет выведен белым шрифтом на красном фоне.
Формы
201
Группирование элементов управления
(теги <FIELDSET>, <LEGEND>)
Чтобы страница (или форма) имела законченный вид, элементы должны быть распреде-
лены по группам. Для создания группы в HTML 4.0 предусмотрен тег <FIELDSET>.
С помощью этого тега элементы со связанным содержанием распределяются по груп-
пам. Например, в форме счета могут быть три группы: адрес отправки, данные о товаре,
реквизиты для расчетов. Группа обычно создается с помощью следующих тегов:
<FIELDSET>
<LEGEND>JlereHfla группы элементов</ЬЕСЕЫВ>
</FIELDSET>
Теги <LEGEND> вводят надпись, которая помещается в разрыв рамки, обрамляющей группу.
Рассмотрим как пример группирование элементов на странице «Анкета» (Рис. 7.7).
Рис. 7.7. Группирование связанных элементов управления
Приведенной схеме группирования отвечает следующий код:
<FIELDSET>
<LEGEND><bHO< /LEGEND>
Фамилия: <INPUT type="text" name="subj" ID="surn">
Имя: <INPUT type="text" name="subj" ID="nam">
Отчество: <INPUT type="text" name="subj" ID="patr">
</FIELDSET>
<FIELDSET>
<LEGEND>06pa3OBaHne</LEGEND>
<INPUT type="radio" value="yes" checked
name="educ" ID="ss">
Среднее
cINPUT type="radio" value="no" name="educ" ID="hs"> Высшее
</FIELDSET>
202
ГЛАВА 7
>> Заметим, что содержимое контейнера <FIELDSET> может быть
> любым, в том числе, пустым. Рамка группы может ограничивать
также один элемент или одиночную надпись.
Отправка формы
На машине клиента в форму, имеющую определенное имя, пользователь вводит инфор-
мацию, а именно: указывает значения всех элементов ввода на форме. Заполненная фор-
ма может быть отправлена на сервер для обработки содержащихся в ней данных, но мо-
жет быть обработана и на компьютере клиента.
Перед отправкой формы браузер выполняет кодирование пересылаемой информации,
чтобы обеспечить надежность и безопасность передачи (соответствующая процедура
декодирования должна поддерживаться на стороне сервера). На сервере полученная ин-
формация просматривается и обрабатывается с помощью CGI-сценария.
Результатом обработки может быть ответ, обычно это новая страница в формате HTML
(например, благодарность за присланную информацию или просьба заполнить отсутст-
вующие поля). Ответ пересылается с сервера, поддерживающего CGI, на компьютер
пользователя.
ГЛАВА а
Планирование и размещение
Web-сайта в Интернете
Изучив предыдущие главы книги, вы освоили основы языка HTML и его возможности
по созданию Web-страниц. Теперь вам предстоит из отдельных страниц сконструиро-
вать свой первый Web-сайт и разместить его в Интернете.
Планирование и создание сайта
Рассмотрим сначала этапы планирования сайта и создания его на жестком диске вашего
компьютера.
Предварительные этапы
Приступая к разработке своего сайта, нужно четко представить себе его назначение.
Обычно сайты создаются для того, чтобы заявить о себе или о своей организации, сооб-
щить о результатах работы или своих достижениях, наладить деловые связи, дать рекла-
му о товарах или услугах и проч.
Кроме назначения сайта нужно определить круг его потенциальных посетителей, то есть
аудиторию, на которую будет рассчитан ваш сайт. Будут ли это ваши люди различных
возрастов и профессий или люди, имеющие какой-либо специальный интерес к пред-
ставляемой вами информации. В какое время они будут посещать ваш сайт и на каких
языках они будут говорить? Какими браузерами они будут пользоваться?
Следующим этапом будет подбор материала. Не весь материал по тематике сайта, который
у вас имеется, стоит публиковать в Интернете. Нужно трезво оценить качество материала и
его интересность для посетителей. Отобранный материал разделите по темам - эти темы
определят разделы будущего сайта. Если материала по каждой теме набирается доста-
точно много, рассортируйте его по степени важности.
При планировании сайта, предназначенного для какой-либо организации, немаловаж-
ным является вопрос финансирования работ.
Разработка структуры сайта
Материалы, которые вы планируете опубликовать на сайте, нужно организовать в опре-
деленную структуру. Чаще всего для Web-сайтов выбирается древовидная структура
организации информации (Рис. 8.1, а, б). На верхнем уровне находится начальная стра-
ница сайта, с которой посетитель с помощью меню или ссылок может переходить на
страницы следующего уровня. Древовидная структура может состоять из нескольких
уровней подчинения.
Очень важно определить оптимальное соотношение между количеством уровней (глу-
биной корней или высотой дерева) и количеством вариантов выбора на каждом уровне
204
ГЛАВА 8
(шириной дерева). Если дерево окажется очень широким (при одном уровне иерархии
это плоская структура, Рис. 8.1, а), посетителю трудно будет ориентироваться в пред-
ставленной информации и удерживать в памяти множество вариантов выбора. Если же
уровней будет много, то посетителю придется долго «докапываться» до интересующей
его информации (Рис. 8.1, б). Для этого необходимо будет сделать множество щелчков
мышью и дождаться загрузки промежуточных страниц.
а
б
Рис. 8.1. Примеры структуры сайта: а-широкое дерево; б-узкое дерево
Чтобы облегчить путешествие вглубь сайта, на страницах верхнего уровня помеща-
ют ссылки, которые могут перевести посетителя сразу же к страницам нижнего
уровня. На глубоких страницах также могут размещаться ссылки для обратного пе-
рехода вверх по иерархическим уровням сайта.
Древовидная структура в своем строгом виде практически не применяется. Обычно
внутри нее существуют переходы, образующие петли, которые нарушают древовид-
ность. На основе дерева образуются сложные структуры практически всех крупных
узлов.
Иногда для узла вместо древовидной структуры целесообразно выбрать структуру
в виде простой цепочки (линейная структура). При этом переход с каждой страницы
может осуществляться только в двух направлениях: на следующую и на предыду-
щую страницы (Рис. 8.2, а). Для этого на страницах располагаются кнопки Вперед и
Назад, с их помощью легко организовать, например, просмотр разделов книги или
набора фотографий. На практике линейная структура применяется редко - в основ-
ном, когда смысл документа в середине цепочки не ясен или его получение не жела-
тельно без предыдущих документов. Линейная структура может сочетаться с раз-
личными ответвлениями и альтернативными переходами (Рис. 8.2, б).
Планирование и размещение Web-сайта в интернете
205
б
Рис. 8.2. Пример линейной структуры сайта: а - линейная цепочка;
б - линейная структура с ответвлением и альтернативным переходом
Посетитель составляет представление о структуре узла с помощью средств навигации-.
меню с выпадающими подменю, списков-ссылок и т.д. Благодаря средствам навигации
посетитель затрачивает минимум времени, чтобы найти то, что вы хотите ему показать.
От понятности системы навигации, продуманности ее элементов зависит, найдет ли по-
сетитель нужную информацию или уйдет, так и не разобравшись в лабиринте докумен-
тов. Поверьте, именно удобная навигация, а не красивые картинки, будут привлекать
посетителей возвращаться на ваш узел, на котором они легко найдут интересующий их
материал.
Сборка файлов Web-сайта
Cj Website
| Cj img
asbouthttnl
alenkacss
~ Л friends.html
nistoty html
index html
myspod html
Когда вы подготовили материалы и представили в виде схемы структуру будущего сай-
та, можете приступать непосредственно к разработке, то есть к составлению HTML-
кода. Именно этот этап работы над сайтом вы изучали в предыдущих главах данной
книги. В результате составления кода и подготовки графических, аудио- и видеомате-
риалов у вас должны быть на диске файлы Web-страниц, а также файлы внедренных
объектов (изображений и проч.).
Скопируйте все эти файлы в отдельную папку и назовите
ее, например, Website (Рис. 8.3). В этой папке должен
быть файл index.html, который будет представлять на-
чальную страницу сайта. Другие файлы папки Website
содержат HTML-код остальных страниц (файлы с расши-
рением .html), В рассматриваемом примере в папке Web-
site размещен также файл с расширением .css, который
содержит листы каскадных стилей (на начальном этапе
знакомства с HTML этот файл можно не создавать). Име-
на всех файлов должны быть набраны строчными латинскими буквами.
Рис. 8.3. Содержимое
папки сайта
В папке сайта желательно предусмотреть папку (в данном примере - img), в которой
будут храниться изображения в формате GIF или JPEG.
Если в процессе формирования папки сайта вы вносили изменения в имена файлов, про-
следите, чтобы соответствующие изменения были внесены и в код HTML страниц. По-
сле этого загрузите начальную страницу сайта в браузер (Internet Explorer или Netscape
Navigator) и убедитесь, что все переходы на другие страницы сайта работают, страницы
отображаются нужным образом, а рисунки выводятся на страницы. Если какая-либо
206
ГЛАВА 8
страница или рисунок не видны, то, вероятно, вы ошиблись в указании имен файлов.
Устраните эти ошибки и еще раз проверьте работу сайта.
Выбор Web-сервера
Итак, вы создали свой небольшой сайт. Теперь вам предстоит выбрать Web-сервер, на
котором этот сайт будет размещен. Напомним, что Web-cepeep занимается хранением,
поиском и обменом файлами в WWW. Например, когда клиент Web запрашивает файл
из WWW, программа браузера отправляет этот запрос на Web-сервер, на котором нахо-
дится данный файл. Сервер отыскивает файл на своих дисках и отправляет его компью-
теру-клиенту, от которого был получен запрос. Обмен информацией между клиентом и
Web-сервером происходит согласно протоколу HTTP - общему протоколу, определяю-
щему функционирование World Wide Web.
Наиболее распространенной программой Web-сервера является Apache Server, которая
работает быстро и допускает бесплатную установку (см. узел www.apache.org). Часто
используются также программы TomCat, Microsoft IIS, NCSA и др. С помощью одной из
таких программ свой Web-сервер может создать любая организация, школа и даже част-
ное лицо. Однако это не всегда оправданно, поскольку полноценный Web-сервер должен
иметь быстрое соединение с Интернетом (например, через выделенную линию) и дол-
жен работать круглосуточно. Поэтому проблему Web-сервера решают с помощью сто-
ронних организаций - фирмы вашего провайдера или специализированных фирм, зани-
мающихся хостингом.
Хостинг (от англ, слова hosting - совместное размещение) -
это размещение Web-сайта на оборудовании компании. Ресурсы т?
сервера и линии связи используются совместно множеством ^||у
клиентов. ЬмгУ*
При выборе стороннего Web-сервера руководствуются двумя основными критериями:
ценой и производительностью. У профессиональных разработчиков Web-сайтов выбор
определяется возможностями заказчика и сложившимися отношениями с компаниями,
владеющими Интернет-серверами.
Сейчас появляется все больше Web-серверов, осуществляющих бесплатный хостинг
(например, русскоязычные серверы www.chat.ru,www.narod.ru,www.boom.ru). Такие
серверы не требуют оплаты за поддержку Web-сайтов клиентов и существуют за счет
средств рекламодателей. Зарегистрированному клиенту предоставляется ограниченное,
но достаточно большое свободное пространство на диске сервера - от 5 до 50 Мбайт.
Этого объема вполне достаточно для размещения как небольшого, так и весьма солидно-
го сайта. Единственное обязательство, которое принимает на себя клиент бесплатного
Web-сервера - это размещение на своем сайте баннеров - маленьких броских изображе-
ний (часто анимированных), предназначенных для рекламы. Впрочем, согласия на
это у клиента, как правило, не спрашивают - баннеры вставляются и обновляются
без участия владельца сайта.
Планирование и размещение Web-сайта в интернете
207
Бесплатные Web-серверы имеют также ограничения по предоставляемому сервису:
они, как правило, не поддерживают современные Интернет-технологии PHP, JSP,
ASP и др. Однако свой сайт, содержащий обычные файлы HTML, вы сможете раз-
местить в бесплатной службе без особых проблем. К практическому рассмотрению
этого вопроса мы сейчас и перейдем.
Размещение Web-сайта в Интернете
Созданный вами сайт начнет «действовать», если вы его разместите на Web-сервере.
После этого посетители смогут «заходить» на ваш сайт и знакомиться с представ-
ленными в нем материалами. Для передачи файлов на Web-сервер существует не-
сколько возможностей, на которых сейчас остановимся.
Использование протокола HTTP
Рассмотрим наиболее простой способ размещения сайта - на одном из бесплатных
Web-серверов, например, www.boom.ru. На этом сервере пользователю предоставля-
ется удобный интерфейс для операций размещения и редактирования сайта, а также
до 50 Мбайт свободного места на диске.
При передаче файлов на бесплатный сервер используется протокол HTTP, то есть
протокол, с помощью которого осуществляется обычный обмен файлами в WWW.
Последовательность ваших действий по размещению Web-сайта должна быть
следующей.
> Подключитесь к Интернету и загрузите начальную страницу www.boom.ru.
> Щелкните на ссылке Регистрируйтесь и начинайте создание сайта. На следую-
щей странице нажмите кнопку Начать регистрацию, после чего загрузится страни-
ца для ввода ваших данных (Рис. 8.4).
> Введите имя своего сайта, например, “рп1145” (адрес сайта тогда будет иметь вид:
www.pnll45.boom.ru). Наберите также пароль и подтвердите его в нижнем поле. В
поле E-mail введите свой электронный почтовый адрес. На этот адрес вы получи-
те в дальнейшем письмо с подтверждением регистрации. В разделе Дополни-
тельная информация о пользователе наберите свои фамилию и имя, а также
псевдоним. В нижней части страницы имеется шестизначный номер. Введите
приведенный номер - он будет служить для защиты от автоматических регистра-
ций. После заполнения полей нажмите кнопку Отправить.
208
ГЛАВА 8
Рис. 8.4. Страница ввода регистрационных данных
> Введенные данные будут отправлены на сервер. Если имя вашего сайта не совпадает
с каким-нибудь уже существующим именем, появится новый диалог, в котором нуж-
но будет еще раз ввести имя сайта, пароль и E-mail (Рис. 8.5). После этого нажмите
кнопку Дальше. Если же введенное вами имя уже существует, то потребуется по-
вторный ввод данных на исходной странице.
Сайт |рп!145
Пароль
Ъоошхи
Дальше »>
Забыли пароль?
Введите свой E-mail
|licey@postm an.ru
Выслать пароль
Рис, 8.5. Ввод имени, пароля и E-mail
> В результате регистрации появится страница с приветствием и указанием адреса ва-
шего сайта (Рис. 8.6).
Планирование и размещение Web-сайта в интернете
209
CjjM. ж СЙЬРМ м1 Ru Cejrwc беспж» ж < о Mima-Microiut Inb.nat
яв и
Ф'йл Драта В.кл Избранно, Сервис Справка
,| Ддрес С hUp.//boo«. >ми4.ru/servletW<xk*hop$
f . лит
Здравствуйте, Alenka!
Ьаш - jftT pnll45.boom.ru
Редактирование страниц
Управление файлами
Голосование
Уважаемый пользователь!
В связи с участившимися случаями хулиганских рассылок с
предложениями выслать Ваши регистрационные данные под
различными предлогами якобы "администратору" сервиса ‘Мой
сайт©Ма|!.ги\ просим Вас не отвечать на подобные письма.
Письмо от Администратора может прийти только с адреса
boo гифе огр. mail.ru.
Письма злоумышленников пересылайте Администратору на
адрес Ьоотфеогр.mail.ru,
Быстрое создание страниц
► Главная страница
помощь
• Регистрационные
данные
» Редактирование реквизитов
» Удаление с игра и
регистрации
» Восстановление пароля
• Мой сайт
» Создание и редактирование
страниц по шаблонам
» Ссыпки
» Г остевая книга
LJ--------------------------------------------------------
< Здгр^арМсуж.Мр.//2171631.ГОе080ЛгпаЭя^498С?4960124 :]|И
Рис. 8.6. Страница с меню по управлению сайтом
> Справа, в верхней части страницы выберите ссылку Управление файлами, после
чего появится экран для выбора загружаемых файлов (Рис. 8.7). Нажмите верхнюю
кнопку Browse (Обзор) и в последующем стандартном диалоге найдите и укажите
первый загружаемый файл. Аналогично с помощью второй кнопки задайте второй
файл для загрузки и т.д. После задания всех файлов нажмите кнопку Загрузить.
ЗАГРУЗКА ФАЙЛОВ В ТЕКУЩУЮ ПАПКУ (свободно 52,428,600 байт)
Рис. 8.7. Страница загрузки файлов
> Подождите, пока пройдет загрузка файлов и появится страница содержимого катало-
га (Рис. 8.8), на которой будет приведен список файлов, скопированных на сервер.
Установите флажок слева от имени файла index.html и нажмите кнопку Сделать
главной.
210
ГЛАВА £
□ [еСОГ&МП)1 13601 17.07 ^004
□ summert.html 13601 17.07 2004
□ trovebuhtml 13601 17.07 2004
создать редактировать югмровать переместить переименовать сделать главной удаоть
Для того чтобы Вы увидели внесенные изменения, нажмите Ctrl+Shift+Refre$h
ЗАГРУЗКА ФАЙЛОВ В ТЕКУЩУЮ ПАПКУ (свободно 52,348.753 байт)
Рис. 8.8. Страница содержимого каталога
> На странице содержимого (Рис. 8.8) имеются дополнительные кнопки выбора загру-
жаемых файлов - это на случай, когда на сервер требуется передать более 6 файлов
эти файлы не поместились на первую страницу загрузки (Рис. 8.7).
> Создайте отдельную папку для файлов изображений, например, img. Для этого на-
жмите кнопку Создать (Рис. 8.8) и в следующем диалоге установите переключатель
Что создать ... каталог. Нажмите кнопку Создать.
> На следующей странице, которая аналогична странице на Рис. 8.8, вы увидите пикто-
грамму папки img. Сделайте на ней двойной щелчок. Откроется страница задания со-
держимого. Задайте нужные файлы и нажмите кнопку Загрузить.
В результате заданные вами файлы будут скопированы на диск Web-сервера. Если вь;
хотите отредактировать состав папок вашего сайта на сервере, можете использовать
кнопки на странице содержимого (Рис. 8.8). Например, для удаления какого-либо файла
поставьте рядом с ним галочку и нажмите кнопку Удалить. Подтвердите удаление
в следующем диалоге. Для перемещения файла нужно щелкнуть по кнопке Переместить
и затем задать целевую папку в последующем диалоге.
Теперь проверьте работу созданного вами сайта в Интернете. Для этого наберите адреа
нового сайта в окне браузера и внимательно просмотрите все Web-страницы, проверьте
все возможные переходы между ними.
Использование протокола FTP
Итак, чтобы разместить Web-сайт на сервере WWW, нужно просто скопировать файлы
в одну из папок сервера, предназначенных для вашего сайта. В предыдущем пункте был
рассмотрен вариант передачи файлов на сервер, при котором используется протокол
HTTP. Возможен еще один вариант пересылки данных - это протокол FTP, который
предназначен для обмена файлами между компьютерами, связанными между собой ло-
кальной или глобальной сетью (см. главу 12).
Планирование и размещение Web-сайта в интернете 211
FTP-клиенты и серверы
При использовании протокола FTP компьютеры взаимодействуют друг с другом по тех-
нологии «клиент-сервер». Файлы хранятся в центральном компьютере (FTP-сервере),
к которому подключены компьютеры распределенной сети (FTP-клиенты). Клиент по-
сылает на сервер запрос и получает в ответ требуемые ему файлы. Помимо «загрузки»
файлов на клиентский компьютер, возможна «выгрузка» файлов с компьютера клиента
на сервер. То есть FTP допускает двусторонний обмен файлами между сервером и кли-
ентом. Однако обмен между двумя клиентами, минуя сервер, невозможен.
Для осуществления FTP-обмена на компьютере-сервере должна быть установлена про-
грамма FTP-сервер, а на клиентских компьютерах - программа FTP-клиент. Последняя
может представлять как отдельную программу (например, известная программа
CuteFTP), так и модуль, встроенный в другие программы (например, FAR). Мы будем
рассматривать FTP-обмен с помощью программы-оболочки FAR, удачно сочетающей
функции файлового менеджера и FTP-клиента.
Размещение сайта с помощью программы FAR
Перед размещением сайта необходимо получить у владельца Web-сервера адрес URL,
логин (имя) и пароль. Далее действуйте по следующему сценарию.
> Подключитесь к Интернету и загрузите программу FAR.
> Нажмите клавиши Alt+Fl (F2) и выберите в выпадающем меню опцию FTP.
> На открывшейся панели программы FAR (Рис. 8.9) вы увидите список FTP-
соединений, установленных с данного компьютера. Если вы пользуетесь FTP впер-
вые, то данный список будет пуст.
c:\Program Files\Far
Name
Nam
ReadMe.txt
Register.frm
Register.txt
Restoresettings.bat
savesettings.bat
Uninstall.exe
Uninstall.1st
WhatsNew.txt
Addons
Plugins
Contacts.txt
Oescript.ion
Far.bat
Far.exe
Far.ico
rar_Site.txt
FarEng.hlf
FarEng.Ing
FarFAQ.txt
FarRus.hlf
FarRus.lng
File^id.diz
License.txt
License.xusSR.txt
►lugooc.rar
--------- Evaluation version --------
< up >17.11.0210:55
Li..- 691,798 bytes in 23 files
serMrEviewKM it
Host
BOOM
WILD
ftp.boom.ru
www.nnac.com.ua/usr/local/apache/
Evaluation version
0 bytes in 3 files
чепмо1
Delete
П
n
Puc. 8.9. Окно программы FAR, список ftp-с о един гний
> Нажмите клавиши Shift+F4, в результате чего появится диалог для задания FTP-
адреса (Рис. 8.10).
212
ГЛАВА 8
— — ——— — Enter ftp address
tp://user :password<ahost:port/chr
ftp://11се у:abcl23@ftp,pn1.com , ца I
User i swo i:
******
FTP escription:
! [ ] sk password directly before connecting
[ ave ] [ onnect ] [ Cancel ]
Рис. 8.10.. Диалог ввода FTP-адреса
> В верхнюю строку диалога введите согласно шаблону логин, пароль и URL сайта.
Логин и Пароль разделяются двоеточием, а пароль и URL - значком @. Вместо имени
сервера вы можете использовать его IP-адрес, например 195.230.142.115 (см. пример
на Рис. 8.9).
> Строкой ниже в диалоге (Рис. 8.10) наберите пароль (он будет забиваться звез-
дочками).
> Щелкните по полю Connect, после чего будет сделана попытка установить соедине-
ние с указанным вами FTP-сервером.
После соединения на панель FTP: программы FAR будет выведено содержание каталога
сайта, размещенного на Web-сервере (Рис. 8.11).
E:\Website
п
img
Istsepteirbcjr hunl
about.html
alenka.css
•cityolirnpiart.html
friends.html
history.html
hits.html
index.html
mysport.html
records.html
summert.html
travels.html
Name
Name
img
alenka.css
friends.html
history.html
index.html
mysport.html
Eval mat ion
_ < up
version ----------
> 08.02.03 11:53
Ь.— 134,636 rytes in 12 files
---- Evaluation version ——
< Up > 10.02.03 22:14
- 39,434 byt<s in 5 files ——
1
не р
userMnBriew E'Hdit
ору
1!
kenMov®4kFoidK)ce ехав опТмпОЩ» uit
82
Puc. 8.11. Отображение каталога сайта на Web-cepeepe (правая панель)
Редактирование Web-сайта
После того, как вы разместили свой сайт на Web-сервере, вы можете легко к нему обра-
щаться для редактирования содержимого (добавлять, удалять, обновлять файлы). Если
вы пользуетесь бесплатным хостингом (см. пункт «Использование протокола HTTP»), то
изменять файловый состав можно с помощью предусмотренного для этого интерфейса.
Примеры такого интерфейса приведены на Рис. 8.7, Рис. 8.8. Однако значительно удоб-
Планирование и размещение Web-сайта в интернете
213
нее и быстрее вы сможете вносить изменения в свой сайт, передавая ваши файлы по
FTP. Так, по крайней мере, поступают специалисты по разработке Web-сайтов.
Для внесения изменений в сайт подключитесь к Интернету и запустите программу
FAR. Затем откройте панель FTP, нажав клавиши Alt+Fl или Alt+F2 и выбрав опцию
FTP. Если редактируемый сайт имеется в приведенном списке (Рис. 8.9), наведите на
него курсор и нажмите Enter. Если же нужного сайта в списке нет, нажмите Shift+F4
и в появившемся диалоге (Рис. 8.10) наберите данные, необходимые для создания
нового соединения (см. выше). После этого программа FTP-клиента считает содер-
жимое каталога указанного вами сайта и выведет его на свою панель (Рис. 8.11). Те-
перь вы можете работать с каталогом сайта так, как будто он находится на диске ва-
шего компьютера. Пользуйтесь обычными приемами работы в Norton Commander и
FAR (см. главу 3), чтобы скопировать или удалить какие-либо файлы и каталоги.
После изменения файлового состава сайта не отключайтесь от Интернета, а загрузите
программу браузера и зайдите на редактируемый вами сайт. Просмотрите вниматель-
но, как отразились внесенные вами изменения на внешнем виде и работе Web-сайта.
Регистрация в поисковых системах, рейтингах
Поиск информации в Интернете выполняется пользователями обычно с помощью поис-
ковых систем. Существует множество таких систем, из которых наиболее популярны
Google, Yahoo, Яндекс, Апорт, Рамблер, FAST, AltaVista. Любая из этих машин призвана
собирать некие ключевые слова, характеризующие информацию, размещенную на узлах
в Интернете, а также должна отслеживать появление и исчезновение узлов, изменение
их содержимого («контента»).
Как работает поисковая машина
Физически поисковая система (машина) представляет собой комплекс из нескольких
компьютеров, каждый из которых выполняет свою работу. Например, Яндекс рабо-
тает на шести, а Рамблер - на трех Unix-серверах. Для сбора информации поисковая
машина рассылает по World Wide Web так называемых «пауков» (spider), которые
регулярно сканируют World Wide Web в поисках новых данных и новых Web-
страниц. Пауки читают новые страницы (в первую очередь, заголовочную часть) и
находят ссылки на еще не обследованные узлы. Прочитанный текст они передают
программам индексации, которые составляют из них словарь (индекс). Этот словарь
автоматически регистрируется в базе данных, содержащейся на определенном ком-
пьютере поисковой машины. Теперь, когда пользователь обращается к машине с за-
просом на поиск, она ведет поиск не по всей паутине WWW, а просматривает имею-
щиеся в ее распоряжении базы данных с помощью средств быстрого поиска. В итоге
пользователь всего через несколько секунд может видеть у себя на экране десятки и
сотни ссылок на узлы с запрашиваемой информацией.
214
ГЛАВА 8
Современные поисковые машины при составлении баз данных
выискивают узлы с высоким трафиком и классифицируют их по
степени убывания посещаемости. Поэтому, когда вы просмат-
риваете результаты поиска, на первых позициях часто оказы-
ваются наиболее известные и популярные узлы.
Краткий обзор средств поиска
Средства поиска условно делятся на поисковые машины, метапоисковые средства и
каталоги. Но в последние годы границы между ними все больше размываются. Пере-
числим русскоязычные поисковые машины, представляющие русскую часть Интер-
нета (Рунет).
✓ Яндекс (http://www.yandex.ru/) - эта поисковая машина была создана в 1996 году как
русская морфологическая приставка к американской системе AltaVista. В настоящее
время она стала лидером среди российских поисковиков. Яндекс ведет поиск во всей
русской части Интернета, включая домены ru, su, а также русскоязычные ресурсы в
других доменах. Ежемесячно портал Яндекс обрабатывает около 150 млн. запросов.
Для Яндекса характерно большое количество находимых ссылок, она является наи-
более результативной русскоязычной системой поиска.
✓ Рамблер (http://www.rambler.ru) - поисковая машина, которая начала работу в октяб-
ре 1996 года и на стартовом этапе содержала всего 100 тысяч документов. В первые
годы своего существования Рамблер с приемлемой степенью точности индексировал
весь русский Web. Однако сейчас объем обследуемых им ресурсов отстает от требо-
ваний времени. Кроме того, информация в базах данных обновляется недостаточно
оперативно. В результате поиск по ключевым словам приводит к небольшому коли-
честву ссылок, среди которых бывают неработающие ресурсы.
✓ Апорт (http://www.aport.ru/) - портал, включающий поисковую машину, которая ве-
дет поиск по ключевым словам и по фразам. Поисковая машина Апорт стартовала б
феврале 1997 года, к тому времени в ее базе был проиндексирован миллион докумен-
тов, хранящихся на 10 тысячах серверов. Апорт изначально учитывала морфологию
слов, в отличие, например, от Рамблера. Имеется проверка орфографии, система чув-
ствительна к строчным и прописным буквам, удобна для пользователей, имеет высо-
кое быстродействие.
Не секрет, что большинство поисковых машин находится в США и все они индексиру-
ют, в первую очередь, североамериканские ресурсы. Но многие из них претендуют на
статус международных и осуществляют поддержку десятков языков. Перечислим наи-
более мощные поисковые машины, которые исполняют запросы на русском языке и дос-
таточно полно отражают ресурсы русского Интернета.
✓ AltaVista (http://www.altavista.com/) - это многоязычная поисковая машина, которая была
запущена в 1996 году и в течение трех лет лидировала по объему индексируемой инфор-
мации и по предоставляемым сервисным функциям. Именно в этой машине был впервые
опробован ставший традиционным язык запросов с использованием знаков «+», «-», усе-
чение терминов с помощью знака «*» и задание поиска фраз с помощью кавычек. В на-
Планирование и размещение Web-сайта в интернете 215
стоящее время Alta Vista отражает содержимое свыше полумиллиона Web-страниц и
статей в телеконференциях.
✓ Google (http://www.google.com/) - очень развитая многоязычная поисковая маши-
на второго поколения, в которой пользователь может выбирать язык интерфейса.
В поле зрения Google находится почти 4 миллиарда Web-страниц. Многие поль-
зователи отмечают хорошее соответствие найденных с помощью Google страниц
заданной теме поиска.
✓ Yahoo! (http://www.yahoo.com/) - один из самых авторитетных поисковых узлов
во Всемирной паутине, который начал работать как каталог в начале 1994 году.
Сейчас портал Yahoo имеет множество сервисов, а также внушительного размера
каталог, который состоит из более, чем 25 тысяч категорий и отражает порядка
2 миллионов сайтов.
Задание ключевых слов
Прежде чем размещать свой сайт в Интернете, нужно позаботиться о том, чтобы он попал
в индекс поисковых машин. Для Web-страниц вашего сайта (желательно для всех) составьте
наборы ключевых слов, которые наиболее точно и полно отражают содержание каждой
страницы, и поместите наборы этих слов в специальные теги <МЕТА>.
<МЕТА> - это одиночный тег, который располагается в контейнере <HEAD> заголовоч-
ной части документа и предназначается для информирования серверов о вашей страни-
це. Название тега «МЕТА» связано с тем, что это тег метаинформации, то есть информа-
ции об информации. Теги <МЕТА> Moiyr иметь различные атрибуты, мы рассмотрим
сначала те из них, которые служат для объявления ключевых слов. Для включения клю-
чевых слов в базу данных «поисковиков» необходимо задать тег формата:
<МЕТА name="keywords" content^"Набор ключевых слов">
Например, начало Web-страницы с информацией о продаже компьютеров и комплек-
тующих может иметь вид:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<HTML>
<HEAD>
<TITLE>CompLand.ru - товары и цены компьютерных
фирм</TITLE>
<МЕТА name="keywords" contents"компьютер ноутбук модем
принтер кабель плата сервер монитор CRT LCD комплектующие
материнские платы процессоры память">
</HEAD>
Когда поисковый робот обнаружит ваш новый сайт в Интернете, он просмотрит содер-
жимое тегов <МЕТА> и включит указанные вами ключевые слова в свою базу данных.
Кроме того, для определения наиболее значимых слов робот просматривает заголовки
страницы (теги <Н1>, <Н2> и т.д.), и проверяет текст начала документа на соответствие
ключевым словам.
216
ГЛАВА 8
Старайтесь максимально точно составить список ключевых
слов в теге <мета>, будьте также внимательны при записи за-
головков - они должны соответствовать содержимому разделов.
Наиболее значимую информацию нужно размещать в начале
страницы.
Составление описания для поисковой системы
При отображении поисковой машиной ссылки на вашу Web-страницу вместе с заголов-
ком страницы выводится некий текст. Хорошо, если этот текст будет содержать описа-
ние страницы. Но для этого нужно в теге <МЕТА> атрибуту name присвоить значение
description, а в атрибуте content задать текст описания. Если не вводить эти атри-
буты, то при отображении результатов поиска будут показываться первые несколько
десятков символов страницы и контекст - фрагмент текста, содержащий слова запроса.
Для рассмотренной в предыдущем разделе Web-страницы о продаже компьютеров в
комплектующих описание можно ввести, например, следующим тегом:
<МЕТА name="description" сопЬепЕ="Цена на компьютеры и ком-
плектующие от 100 крупных торговых фирм">
Включение рисунков в результаты поиска
Если вы хотите, чтобы рисунки или фото с вашего сайта появлялись в результатах поис-
ка машинами типа Google или Yahoo, вам нужно снабдить их комментариями. Коммен-
тарий должен содержать описание рисунка и включать в себя ключевое слово, по кото-
рому будет выполняться индексация рисунка поисковой системой.
Рейтинг рисунка можно увеличить, если включить ключевое слово рисунка в название
<Т1ТЬЕ> и в теги заголовков <Н1> на странице, где размещен рисунок. Заполните так-
же атрибуты alt, которые выводят вместо рисунков поясняющий текст (см. раздел
«Альтернативный текст (атрибут alt)» главы 5).
Регистрация «вручную» в поисковых системах
и каталогах
Итак, будем считать, что вы привели свои страницы в соответствие с требованиями по-
исковых систем. То есть начало каждой страницы содержит наиболее важный текст
с основными формулировками и положениями; заголовки <Нх> точно отражают содер-
жимое каждого раздела; в тегах <МЕТА> размещены ключевые слова и описания, а все
рисунки снабжены лаконичными и точными надписями. Теперь можете приступать
к регистрации сайта в поисковых системах.
Напомним, что поисковые машины регулярно в автоматическом режиме выполняют
индексацию новых Web-страниц. Русскоязычные системы индексируют часть Интернета
на русском языке, например, пауки Яндекса сканируют сайты в доменах su, ru, am, az,
Планирование и размещение Web-сайта в интернете 217
by, ge, kg, kz, md, ua, uz. Серверы в других доменах вносятся в базу данных, только если
на них найден текст на русском языке. Если сайт автоматически не проиндексирован
(например, администратор счел его недостаточно интересным), то возможно внесение
его в базу данных по согласованию с администрацией поисковой машины. При этом
владелец сайта письмом обращается на определенный адрес (в Яндексе - это
addurl@yandex.ru).
Не секрет, что большая часть ссылок на ваш сайт обеспечивается поисковыми система-
ми, поэтому вы должны быть уверены, что сайт находится в их базах данных. Лучше, не
дожидаясь автоматической индексации, зарегистрировать свой сайт вручную. Большин-
ство систем предусматривают для этого стандартную бесплатную процедуру. Исключе-
ние составляют лишь некоторые системы (например, Google), в которых регистрация
платная. Опишем общую схему регистрации.
> Загрузите начальную страницу поисковой системы.
> При работе в Яндексе щелкните на ссылке Все службы и на открывшейся стра-
нице - на ссылке Добавить сайт. При работе в Рамблере щелкните на ссылке До-
бавить ресурс.
> - Откроется страница с приглашением зарегистрировать сайт (Рис. 8.12). Введите URL
сайта и нажмите кнопку Добавить.
Рис. 8.12. Начало регистрации сайта в системе Яндекс
> Если сайт еще не проиндексирован, вам будет предложено заполнить форму. Пример
такой формы для системы Рамблер показан на Рис. 8.13.
218
ГЛАВА 8
Рис. 8.13. Заполнение регистрационной формы
> Если сайт уже обрабатывался самой поисковой машиной, то вместо формы появится
сообщение о том, что данный ресурс уже проиндексирован (Рис. 8.14).
Рис. 8.14. Сообщение об индексации ресурса поисковой машиной Яндекс
Планирование и размещение Web-сайта в интернете
219
> Вы можете щелкнуть на ссылке Посмотрите на ваш URL с точки зрения Rndex.ru и
на открывшейся странице увидите данные: время отклика сервера, дату изменения
документа, тип кодировки.
> Если в сообщении (Рис. 8.14) щелкнуть на ссылке Доступны в Яndex.ru, то вы смо-
жете просмотреть все страницы сайта, проиндексированные системой.
Как быстро появятся ваши данные в поисковой базе после регистрации? В Яндексе
страницы появляются в базе обычно через неделю, а в Рамблере - через 2-4 недели.
Если в дальнейшем вы внесете изменения в ваш сайт, необходимо будет его перерегист-
рировать. Вообще, рекомендуется регулярно, примерно через месяц, производить пере-
регистрацию сайта. Однако поисковый робот может самостоятельно (автоматически)
находить новые и измененные документы.
Участие в рейтинге, установка счетчика
В Интернете существуют каталоги - рейтинги, в которых размещаются данные
о посещаемости сайтов. Каталог состоит из разделов (Политика, Спорт, Предприятия
и др.), причем в каждом разделе в вершине списка размещаются наиболее посещае-
мые сайты. Список того или иного раздела ограничивается несколькими сотнями или
тысячами сайтов.
Вероятнее всего, создав свой первый сайт, вы вряд ли попадете в рейтинг, однако имеет
смысл воспользоваться другим сервисом рейтингов - это установка счетчика на вашем
узле. Перечислим известные российские рейтинги, предоставляющие эту услугу.
✓ SpyLog (http://www.spylog.ru/);
✓ Rambler ToplOO (http://toplOO.rambler.ru/);
✓ Mail.Ru (http://top.mail.ru/);
✓ One.ru (http://www.ce.ru/);
✓ KMindex.ru (http://www.kmindex.ru/);
✓ HotLog (http://www.hotlog.ru/).
Опишем регистрацию в бесплатном рейтинге Mail.Ru (на других узлах она выполняется
аналогично).
> Загрузите начальную страницу рейтинга http://top.mail.ru/ и щелкните на ссылке По-
ставь у себя счетчик.
> На экране появятся Правила участия в рейтинге. Нажмите кнопку Зарегистриро-
ваться в рейтинге @Mail.Ru.
> На следующей странице выберите наиболее подходящую для вашего ресурса катего-
рию (Интернет, Отдых, Компьютеры и т.д.). Нажмите кнопку Далее ».
> Появится страница с формой (Рис. 8.15), которую вам предлагается заполнить. Вве-
дите в текстовые поля название сайта, адрес, E-mail, пароль и подтвердите пароль.
В раскрывающемся списке Категория выберите категорию, к которой можно отнести
сайт. После ввода данных нажмите кнопку Зарегистрироваться.
220
ГЛАВА S
г
pip ... u
РеЙТ...... М I . . iHCl i.itC . pCd Hi iOS it lift- i tE>, ГШ
CfH
ilp «ока
Вид
//top
lu/add
Ийбр HH3Q
http
'<] Готово
ГТ
Интернет
Puc. 8.15. Форма для регистрации в рейтинге Mail.ru
> На следующей странице появится сообщение, что счетчик для вашего ресурса
успешно зарегистрирован, и будет указан ID вашего счетчика. Нажмите кнопку
Выбрать счетчик ».
> Появится страница, на которой вы можете выбрать картинку для счетчика (Рис. 8.16).
На этой же странице нужно указать способ размещения (простой счетчик или
счетчик с применением JavaScript-сценария). Установите соответствующий пере-
ключатель и нажмите кнопку Получить код.
> Наконец, откроется страница с кодом счетчика, в котором будет присутствовать
ваш ID.
> Выделите код счетчика в текстовом поле и скопируйте его в буфер обмена (Ctrl+Ins).
Затем вставьте полученный код в документ (Shift+Ins), заранее определив место
счетчика на странице.
Планирование и размещение Web-сайта в интернете
221
Рис. 8.16. Выбор картинки для счетчика
Если вы выбрали простой счетчик (без сценария), то сможете отслеживать количество
визитов и уникальных посетителей за день, количество визитов по часам и дням недели,
количество возвратов на страницу.
Если же вами был выбран счетчик на JavaScript, то дополнительно вы сможете получать
информацию о страницах, с которых приходят на ваш сайт, и о системных настройках
ваших посетителей (разрешении экрана, глубине цвета и др.).
Мероприятия по раскрутке сайта
Под раскруткой сайта понимают ряд мероприятий, направленных на увеличение посе-
щаемости Web-сайта. Одни из таких мероприятий мы уже рассмотрели, это:
1. Составление списка ключевых слов и описания сайта в теге <МЕТА>. Но не
нужно думать, что эти меры сразу выведут вас на первые позиции по указанным
ключевым словам.
2. Регистрация в поисковых системах и каталогах. Вы можете дождаться автома-
тической индексации вашего узла поисковой машиной, но можете выполнить ре-
гистрацию вручную.
Кроме того, перечислим следующие меры по раскрутке сайта:
1. Размещение описания сайта в регулярных рассылках. Такие рассылки можно
найти на http://subscribe.ru, http://content.list.ru/cat_5.html и на http://maillist.ru.
222
ГЛАВА 8
В случае благоприятных обстоятельств описание вашего сайта увидят до ста тысяч
подписчиков этих рассылок. Составляя письмо модератору рассылки постарайтесь
отразить оригинальность вашего сайта, его отличие от аналогичных сайтов.
2. Обмен ссылками с другими сайтами. Нужно серьезно подойти к отбору узлов,
с которыми вы собираетесь наладить обмен. Обычно подбирают для обмена более
крупные и более посещаемые сайты, чем ваш собственный. Условия обмена ого-
вариваются отдельно.
3. Включение адреса сайта в сообщения почты. Этот прием может оказаться эф-
фективным, если вы участвуете в дискуссионных листах, регулярно рассылаете
почту.
4. Публикация на сайте собственных статей. Яркие и содержательные статьи рано
или поздно будут замечены в Интернете. Можете предложить разместить ваши
статьи в более крупных проектах с указанием ссылки на вас. Рекомендуется ста-
тью предварять небольшой аннотацией.
5. Баннерная реклама. Небольшая картинка (баннер), которая рекламирует вашу
страницу, размещается на как можно большем количестве чужих страниц. При
щелчке на баннере осуществляется переход на рекламируемую страницу. Сам
баннер представляет собой графический файл (обычно Gif-формата) с гиперссыл-
кой. Баннеры размещаются путем обмена, однако заниматься этим имеет смысл
только для более-менее раскрученных проектов. Если посещаемость вашего сайта
менее десятка человек в день, то показ баннеров вряд ли привлечет новых посети-
телей. Попытайтесь сначала поработать без показа баннеров.
Указанные мероприятия по раскрутке Web-узла различаются степенью эффективности,
быстротой проявления результатов, затратами времени. Однако они под силу даже на-
чинающим, а их систематическое выполнение в итоге обязательно приводит к росту по-
пулярности вашего узла.
Часть II.
Язык сценариев JavaScript
JavaScript - это один из основных языков разработки Web-страниц и
приложений для Web, который поддерживается всеми популярными
браузерами. Для просмотра Web-страниц, содержащих инструкции
JavaScript, пользователю не нужно устанавливать дополнительное
программное обеспечение. Он даже может не знать, написана ли
страница с использованием JavaScript или нет. То есть область при-
ложения языка JavaScript практически не меньше области приложе-
ния HTML, что так важно при просмотре ваших Web-страниц на
большом числе компьютеров.
Программный код JavaScript естественным образом внедряется в код
HTML и сохраняется в том же файле .html (или .htm), что и сам
HTML-документ. В процессе загрузки документа выполняется его
просмотр анализатором JavaScript, который сразу отрабатывает не-
обходимые инструкции, после чего готов к исполнению команд
пользователя. Применяя язык JavaScript в Web-страницах, вы можете
правильно организовать взаимодействие с пользователем в окне
браузера. Вообще, JavaScript необходим любому разработчику, ко-
торый хочет усовершенствовать свои страницы и ввести в них инте-
рактивные и динамические элементы. О больших возможностях
JavaScript и пойдет речь в настоящей части книги.
ГЛАВА а
Введение в JavaScript
Начальные понятия JavaScript
Язык JavaScript разработан компанией Netscape Communications и является языком сце-
нариев (от англ, script - сценарий). Этот язык призван был расширить возможност: ‘
HTML по переработке информации из форм и добавлению динамики на Web-страниць:
Название «JavaScript» связано с именем другого мощного языка программирования -
Java, который был создан фирмой Sun Microsystems. Однако JavaScript - это не то же.
что Java. Первоначально язык сценариев, который мы сейчас знаем как JavaScript, име-
новался LiveScript. Однако после успешного дебюта языка Java компания Netscape нача-
ла сотрудничать с Sun Microsystems. В результате их совместных усилий был создан
качественно новый язык JavaScript, синтаксис и семантика которого непосредственна
связаны с Java.
Часто язык JavaScript понимают как клиентский язык, то есть как язык, предназначен-
ный для работы на компьютере клиента-пользователя. Действительно, идея создания
JavaScript заключалась именно в возможности размещения на Web-страницах исполняе-
мого содержимого, благодаря чему можно было бы выйти за рамки «статического»
HTML, обеспечить взаимодействие с пользователем, управление браузером и т.д. Одна-
ко по мере своего развития JavaScript вышел за рамки отдельно взятого браузера и стат
выполнять также функции серверной части. Одним из первых примеров тому явилась
технология ASP (Active Server Pages) разработки Microsoft.
Отметим, что наряду с JavaScript существуют другие языки подготовки сценариев - это
VBScript (аббревиатура «VB» означает Visual Basic) и Jscript (своего рода альтернатива
языку JavaScript). Эти языки разработаны фирмой Microsoft, включены в браузер Internet
Explorer, однако в данной книге их мы не рассматриваем, поскольку они менее распро-
странены, чем JavaScript.
JavaScript - интерпретируемый язык
Как известно, для перевода текста программы на язык, понятный компьютеру, должна
существовать некая программная оболочка, называемая транслятором. Трансляторы бы-
вают двух видов: компиляторы и интерпретаторы. Компилятор преобразует исходный
код программы в машинный язык, кроме того, к полученному коду подключаются стан-
дартные процедуры, использованные программистом. В результате получается рабо-
тающая программа - ее называют рабочим кодом. Файлы таких откомпилированных
программ имеют расширение .ехе или .сот.
Другая разновидность трансляторов, которые используются в практике программирова-
ния, - это интерпретаторы. Интерпретаторы являются программами-посредниками,
которые читают команды из файла и переводят их на язык процессора не заранее, а не-
посредственно во время выполнения программы. Работу программы-интерпретатора
можно сравнить с работой синхронного переводчика, который выполняет перевод сразу
по мере озвучивания текста.
Введение в JavaScript
225
JavaScript является интепретируемым языком программирования, причем интерпретато-
ром выступает программа браузера (Internet Explorer или Netscape Navigator). Браузер
последовательно выполняет каждую строку кода JavaScript. Переход к следующей стро-
ке производится только после выполнения предыдущей.
Встраивание сценария в документ
На стороне клиента сценарий содержится в HTML-файле. Код сценария заключен между
тэгами <SCRIPT> и </SCRlPT>, которые могут быть размещены в любом месте
HTML-документа вслед за тэгами <HEAD> или <BODY>. В документе может быть не-
сколько сценариев, то есть несколько фрагментов кода, ограниченных тэгами
<SCRIPT> и </SCRIPT>. Обязательным условием является, чтобы эти фрагменты кода
не перекрывались. Сценарии будут исполняться в порядке их расположения в докумен-
те. Функции исполняются при обращения к ним обработчиков событий или при вызове
из других функций.
Внутри области, ограниченной тэгами <script> и </script>,
может размещаться только код сценария. Если в эту область
попадут тэги HTML, то браузер выдаст сообщение об ошибке.
В тэге <SCRIPT> обязательно нужно указывать язык сценария. Это необходимо, по-
скольку сценарий может быть написан на JavaScript или VBScript, и браузеру необходи-
мо сообщить с какого языка должен интерпретироваться сценарий. Язык указывается
с помощью атрибута language, который добавляется в тэг <SCRIPT>. Если использу-
ется JavaScript, открывающий тэг будет иметь вид:
<SCRIPT language="JavaScript">
В значении атрибута language необходимо указать номер версии JavaScript, если
в вашем сценарии использованы возможности новых версий языка. Например, инструкция
<SCRIPT language="JavaScriptl.5">
предотвратит попытки старых браузеров выполнить последующий сценарий.
Как пример, встроим в документ простейший сценарий. Запишем код HTML-документа,
при загрузке которого появится отдельное окно сообщения с текстом «Я сценарий
JavaScript»:
<HTML>
<BODY>
<SCRIPT languages"JavaScript">
alert ("Я сценарий JavaScript")
</SCRIPT>
</BODY>
</HTML>
226
ГЛАВА г
Наберите этот код в любом текстовом редакторе и сохраните как ASCII-файл с расши-
рением htm или html. Загрузите документ в окно браузера. Появившееся окно сообщение
«Я сценарий JavaScript» можете закрыть щелчком на кнопке ОК.
При составлении кода сценариев и их отладке удобнее пользоваться не связкой «редак-
тор-браузер», а специализированными приложениями подготовки документов Web (на-
пример, HomeSite). При этом, не покидая окна приложения, вы можете многократно за-
пускать код на исполнение, просматривать и редактировать документ.
Варианты размещения сценария
В предыдущем примере сценарий вставлен как единый блок в HTML-документ междл
тэгами <BODY> и </BODY>. Вообще возможны следующие случаи размещения сцена-
рия в HTML-документе:
✓ Размещение в теле программы (между тэгами <BODY>). В этом случае сценарий ис-
полняется при загрузке страницы в браузере.
✓ Размещение в заголовке документа (между тэгами <HEAD>). При таком размещении
сценарий не исполняется сразу при загрузке, а может использоваться как функция
другими сценариями.
✓ Размещение внутри тэга HTML (между угловыми скобками <...>). При этом сцена-
рий является обработчиком событий, для его записи не требуются тэги <SCRIPT>.
✓ Размещение в отдельном файле. Язык JavaScript допускает создание собственных
файлов с расширением .js. В этих файлах размещаются сценарии, которые вызыва-
ются по имени конкретного файла (имя файла записывается между тэгами
<SCRIPT>).
Константы, переменные, идентификаторы
В любой программе, в том числе в сценарии JavaScript, выполняются операции над ве-
личинами. Под величинами обычно понимаются константы, переменные и выражения.
Константой называется величина, которая в ходе выполнения программы не меняет
своего значения. Переменные, в отличие от констант, могут менять свои значения в про-
цессе выполнения программы. Под переменной в программировании понимается имено-
ванная область памяти (ячейки), которая хранит определенное значение.
Выражение представляет собой запись, которая может включать константы и перемен-
ные, а также знаки операций (арифметических, логических и т.д.). Выражения обычно
задают порядок действий над переменными и константами. Наиболее важно то, что
с помощью выражений производится обработка значений переменных, поскольку вряд
ли бы представляла интерес программа, оперирующая только с константами.
С каждой константой или переменной связывается определенное значение. Это зна-
чение либо присваивается самой программой, либо определяется в результате расче-
та. Например,
х = 10;
У = х - 3;
Введение в JavaScript 227
Имена переменных х, у называются идентификаторами, а символы «=» - операторами
присваивания. Слева от операторов присваивания записаны идентификаторы, а справа -
выражения. При записи операций присваивания нужно иметь в виду, что присваивание
будет выполняться только в том случае, если значения всех переменных в правой части
уже определены.
Имя переменной или константы называется идентификатором. При выборе идентифи-
каторов в JavaScript придерживаются тех же правил, что и в большинстве других языков
программирования (например, C++, Pascal):
✓ Идентификатор должен начинаться с буквы или с символа подчеркивания _ (этот
символ также считается буквой). Примеры правильной записи идентификаторов: дЗ,
Ь, korona, My_Function, _12х.
✓ Идентификатор может состоять из любых букв алфавита (строчных и прописных), а
также цифр (0 - 9) и символа подчеркивания. Записывая идентификатор, можете
пользоваться сколь угодно длинными сочетаниями букв и цифр.
✓ Идентификаторы не должны состоять из отдельных слов, разделенных пробелом.
Например, сочетание param 3 будет рассматриваться как имя переменной param,
за которым следует число 3. Кроме пробелов, не допускается использование в иден-
тификаторах дефиса (-), точки и других специальных символов.
✓ В языке JavaScript различаются верхний и нижний регистры букв. Например,
пользовательские имена ExtVar, Extvar, extVar и extvar будут отвечать
различным переменным. Однако неразумно выбирать имена, различающиеся
только регистром букв.
Л При выборе идентификатора старайтесь точнее описать со-
держимое переменной - это вам напомнит смысл тех или иных
? переменных, когда вы вернетесь к программе после длительного
% перерыва. Например, имена getList, currentYear или carPrice пред-
почтительнее, чем малоинформативные gL, cY или сРг.
Чувствительность JavaScript к регистру букв отличает этот язык от HTML, а также от
другого популярного языка сценариев - VBScript. В JavaScript все служебные слова
принято записывать строчными буквами, например, for, do, while, if, а не For, DO,
While или IF. Это же касается и записи событий: onclick, onload и т.д. Соблюдать
регистр букв необходимо, поскольку клиент может использовать браузер Netscape Navi-
gator. Менее чувствителен к регистру браузер Internet Explorer, для которого, например,
обработчики событий можно записывать как строчными буквами (onclick,
onload...), так и с использованием прописных букв (onClick, onLoad...). С другой
стороны ядро JavaScript, встроенное в браузер, в некоторых случаях продолжает разли-
чать строчные и прописные буквы. Так, если встроенные объекты Date и Math вы за-
пишите строчными буквами (date и math) или как-то иначе, Internet Explorer выдаст
ошибку сценария.
В версии Netscape Navigator 3.0 появилась возможность использования в идентификато-
рах символа $. Этот символ, который является законным и в Internet Explorer версий
выше 3.0, введен для совместимости идентификаторов с идентификаторами языка Java и
228
ГЛАВА 9
позволяет записывать имена в виде ВС$, l$Altair и т.д. Однако не рекомендуется
начинать идентификаторы символом $ или символом подчеркивания, так как эти сим-
волы применяются в библиотеках Java и это может усложнить отладку программы.
В JavaScript для обозначения символьных конструкций наряду с идентификатором ис-
пользуется термин лексема, обозначающий, как и в Java, блок информации в программ-
ном коде. При записи кода вы можете свободно использовать пробелы между лексема-
ми, знаки табуляции, новые строки (абзацы). Интерпретатор их просто не будет учиты-
вать. Однако, если вы вставите пробел внутрь лексемы (служебного слова, имени пере-
менной или функции, числа и т.д.), она разобьется на две лексемы с вполне вероятной
ошибкой. Например, поставьте пробел в средину числа 5678, и вы получите два числа 56
78 и синтаксическую ошибку.
Зарезервированные слова
В JavaScript существует определенное множество зарезервированных слов, то есть слов,
которые имеют особое значение в синтаксисе языка и не могут использоваться програм-
мистом в качестве идентификаторов. Зарезервированные слова обозначают операторы,
типы данных, функции и т.д. К словам, зарезервированным языком JavaScript, относятся
следующие: break, continue, delete, else, false, for, function, if, in, new,
null, return, this, true, typeof, var, void, while, with.
Помимо этих слов, существуют зарезервированные слова, которые заимствованы из
языка Java: abstract, boolean, byte, case, catch, char, class, const, de-
fault, do, double, extends, final, finally, float, goto, implements, im-
port, instanceof, int, interface, long, native, package, private, pro-
tected, public, short, static, super, switch, synchronized, throw,
throws, transient, try. Некоторые из этих слов (char, class, switch и др.)
имеют в JavaScript определенное значение. Остальные из перечисленных слов также не
следует использовать в качестве идентификаторов, поскольку они могут быть задейст-
вованы в будущих версиях языка JavaScript.
Приведем также список зарезервированных слов, которые являются именами встро-
енных объектов, событий, методов и т.д. К таким словам относятся следующие:
alert, anchor, area, array, assign, blur, boolean, button, checkbox,
clearTimeout, close, closed, confirm, Date, defaultstatus, document,
element, escape, eval, fileupload, focus, form, frame, frames,
function, getClass, hidden, history, image, isNaN, java, JavaArray,
JavaClass, JavaObject, JavaPackage, length, link, location, Math, mi-
meType, name, navigator, netscape, number, object, onblur, onerror,
onfocus, onload, onunload, open, opener, option, packages, parent,
parseFloat, parselnt, password, plugin, prompt, prototype, radio,
ref, reset, scroll, select, self, setTimeout, status, string, submit,
sun, taint, text, textarea, top, toString, unescape, untaint, valueOf,
window. Это еще далеко не полный перечень зарезервированных слов, в чем вы са-
ми убедитесь, изучая динамический HTML.
Введение в JavaScript
229
Разделители
Поговорим о символах, которые играют роль разделителей.
Точка с запятой
Инструкции кода JavaScript записываются в строки. Каждая новая строка начинается
с новой инструкции. Хорошим стилем при составлении программ на JavaScript считает-
ся, когда каждая инструкция заканчивается разделителем - точкой с запятой. Этот раз-
делитель обязателен между инструкциями, размещенными в одной строке, но не обяза-
телен в конце строки. Например, возможна запись
а = 3; col = "trend"
meter = sm*100
Таким образом, правила расстановки точек с запятой в JavaScript отличаются от правил
в С и C++, где точку с запятой необходимо ставить после каждого оператора:
а = 3; col = "trend";
meter = sm*100;
Точка, запятая
Точки используются для различного рода ссылок в иерархической структуре объектов
(см. главу 10 «Объектная модель JavaScript»). Например, document. forms означает
обращение к семейству форм документа. Через точку записываются свойства и методы
объекта, к примеру, document. createElement () (метод создания нового объекта
в документе) или elements . length (размер массива elements).
Запятыми отделяются друг от друга аргументы при записи функции. Список аргументов
заключается в круглые скобки. Например, fullData (х, 2, oblig) - функция трех
аргументов.
Скобки
Кроме указанных выше разделителей, в JavaScript используются как разделители три
типа скобок:
О О []
Круглые скобки () применяются в вычисляемых выражениях для задания определен-
ного порядка действий, для записи списка параметров функций, а также для обозначения
выражений в различных инструкциях (if, while, for,..), например,
if (alfa < 0)
Еще одним, часто используемым разделителем являются фигурные скобки {}. Фрагмент
кода JavaScript, ограниченный двумя фигурными скобками, называется блоком. Блок
обычно выражает группировку операторов. Блоки используются, например, в инструк-
циях условных операторов, операторов цикла и др. В определениях функций скобки {)
обозначают начало и конец тела функции:
230
ГЛАВА i
function Degr(x) {
x /= 2;
Degr = x*x*x;
}
Квадратные скобки [] используются в теле цикла for-in для обозначения свойств_
объекта (см. пункт «Оператор for-in»).
Комментарии
Для лучшего восприятия программы в ее текст разработчиком обычно вставляются не-
исполняемые фрагменты, которые называются комментариями. В JavaScript коммента-
рии оформляются в стиле C++ и С:
✓ Двойной «слэш» // обозначает комментарий, который начинается от знака слэша i
заканчивается концом данной строки. То есть знак // относится к однострочном;
комментарию.
✓ Текст, заключенный между символами /* и */, интерпретируется как комментарий
Такой текст может занимать более, чем одну строку (многострочный комментарий).
Приведем примеры комментариев:
Getta - "Nobody";// Присвоение переменной текстового значе-
ния .
/* Это комментарий,
который может занимать несколько строк
*/
//Это также пример многострочного комментария,
. //оформленного в виде нескольких строк,
//начинающихся с двойного "слэша".
Эти комментарии имеют силу только в коде JavaScript и не действуют в HTML. Напом-
ним, что в тексте HTML комментарии обозначаются дескрипторами <! — и -->. От-
крывающий дескриптор комментария <!-- распознается и в JavaScript, но как одно-
строчный комментарий. В то же время закрывающий дескриптор —> в JavaScript не
распознается.
Поддерживает ли ваш браузер язык JavaScript?
Впервые JavaScript был представлен в браузере Netscape Navigator 2.0 в 1995 г. Этот язык
поддерживается также всеми версиями Internet Explorer, начиная с Internet Explorer 3.0. Одна-
ко если вы пользуетесь каким-либо экзотическим браузером, вам не помешает проверить,
поддерживает ли он JavaScript. Сделать это можно с помощью простого сценария, в ко-
тором используются описанные выше особенности написания комментариев в HTML и
на JavaScript.
Отмеченный факт дает возможность составить простой сценарий-уловку, который опре-
деляет, поддерживает ли ваш браузер язык JavaScript. Выглядит этот сценарий как
Зведение в JavaScript
231
<SCRIPT language = "JavaScript">
<! —
document.write("Данный браузер знает JavaScript");
//-->
< /SCRIPT >
Все строки в этом сценарии, кроме комментариев, вам пока не знакомы - их мы разбе-
рем позже. А сейчас скажем только, что браузер какой-либо старой версии, не поддер-
живающей JavaScript, будет понимать фрагмент, заключенный между <! - - и -->, как
комментарий HTML. То есть для такого браузера этот фрагмент, фактически являющий-
ся инструкцией JavaScript, будет скрыт комментарием. Если же браузер поддерживает
JavaScript, то знак <! - - будет воспринят как однострочный комментарий, затем будет
выполнена инструкция вывода на экран сообщения “Данный браузер знает JavaScript”, а
следующая строка / /—> будет проигнорирована как комментарий JavaScript.
Описанный выше прием записи кода с использованием строк <! -
- и //—>, применяется в тех случаях, когда нужно скрыть
сценарий от браузеров, не поддерживающих JavaScript. Весь
фрагмент, заключенный между указанными строками, воспри-
нимается таким браузером как комментарий HTML
Escape-последовательности
В JavaScript часто используется символ обратного слэша «\», который в комбинации
с другими буквами позволяет определить непечатаемые символы. Например, как задать
в сценарии начало новой строки или новой страницы? Для этого существуют соответст-
венно комбинации \п и \f. Подобные комбинации в JavaScript с использованием об-
ратного слэша называются Escape-последовательностями. Приведем список Escape-
последовательностей, предусмотренных в JavaScript:
✓ \b - забой символа (эквивалентно клавише Backspace);
✓ \f - перевод страницы;
✓ \п - начало новой строки;
✓ \г - возврат каретки;
✓ \ t - табуляция (эквивалентно клавише Tab);
✓ \ \ - наклонная черта влево;
✓ V - одинарная кавычка;
✓ \ " - двойная кавычка.
232
ГЛАВА 9
Заметим, что Escape-последовательности имеют смысл только
в коде сценария и не приводят ни к каким действиям в HTML. Так,
комбинация \п в коде HTML новой строки давать не будет.
Типы данных
В процессе выполнения программы одни переменные могут принимать численные зна-
чения, другим переменным присваиваются значения текста, а некоторые переменные
могут быть логическими: true (истина) или false (ложь). Над числовыми перемен-
ными возможны арифметические операции, над текстовыми переменными - операция
конкатенации (объединения), над логическими переменными - операции логических И,
ИЛИ и др. Чтобы определить характер принимаемых значений и операции, выполняе-
мые над переменной, вводят типы данных: числовой, строковый, логический и другие.
В компилируемых языках (С, C++, Pascal) требуется строгое объявление типа данных
перед использованием переменных. В отличие от этих языков, в JavaScript объявления
типа не требуется. Тип данных определяется самим интерпретатором, а именно: тип за-
висит от значений, которые принимает переменная. Более того, одна и та же переменная
может менять свой тип при исполнении программы.
Числовой тип
В JavaScript используются целые числа (например, 3, -45, 2001) и числа с плавающей
запятой (например, 3.1415, -4.5, 0.89991). Обратим ваше внимание на то, что
в числах с плавающей запятой используется фактически не запятая, а десятичная точка.
Возможна запись чисел не только в десятичной системе счисления, но и в восьмеричной
и в шестнадцатеричной системах. Восьмеричные числа начинаются с цифры 0 или знака
минус, за которым следует 0 (к примеру, 017 или -0336). Шестнадцатеричные числа
должны начинаться с символов Ох либо со знака минус и последующих символов Ох,
например: 0x123, 0х34АВ, -0xFE12D.
Из приведенных правил следует, что при записи целых чисел в десятичной системе
нельзя начинать последовательность цифр с нуля. Первой цифре может предшествовать
только знак минус.
Числа с плавающей запятой могут быть представлены в экспоненциальной форме, кото-
рая вводится символами «е» или «Е» с последующим значением показателя, например,
1.33е-2 = 0.0133, 4.5Е+4 = 45000
Целочисленный показатель экспоненты может состоять из одной, двух или трех цифр.
Введение в JavaScript
233
Булевский (логический) тип
Данные этого типа могут принимать всего два значения: true и false. Например,
какое-либо выражение может быть истинным или ложным в зависимости от значе-
ний входящих в него аргументов. Это относится к выражениям, которые содержат
операции сравнения. Например, выражение 3<5 будет истинным, а 7=10 - ложным.
Одной из областей применения логического типа являются условные операторы и
операторы цикла (см. ниже).
Строковый тип
К часто используемым типам данных относится строковый тип. Строка - это последова-
тельность, составленная из символов кодовой страницы, установленной в компьютере.
Когда строку используют в выражениях, то заключают ее в двойные кавычки, например,
"Аллигатор" или "Ошибка ввода". Такие конструкции называются строковыми
литералами.
Возможно совместное использование двойных (") и одинарных (') кавычек. Символы,
заключенные в двойные кавычки, могут содержаться внутри строки, ограниченной оди-
нарными кавычками. Если же в строке встречаются одинарные кавычки, то ее лучше
заключить в двойные кавычки. Например,
'Это сценарий "Повторная игра"';
"That's good";
Чтобы одиночные кавычки (апострофы) не вызывали проблем с внешними кавычками,
можно пользоваться символом обратного слэша (см. раздел «Escape-
последовательности» данной главы).
Нулевой тип
Все рассмотренные выше типы данных определяют представления значений для опреде-
ляемых ими переменных. Однако существует еще один тип данных - нулевой, который
отвечает потере или отсутствию значения, то есть неопределенной переменной. Нулевой
тип обозначается ключевым словом null. Технически нулевой тип получается, когда
переменная в программе не получила определенного значения (числа, строки или логи-
ческого значения). Однако нужно помнить, что null - это не то же самое, что число 0.
Хотя при определенных обстоятельствах тип nul 1 может быть конвертирован в нуль.
Объявление переменных и отсутствие типизации
Несмотря на то, что переменные в JavaScript не нуждаются в типизации, хорошим сти-
лем в написании кода считается объявление переменных перед их использованием. Это
выполняется с помощью ключевого слова var, например,
var х;
var result;
var х, у, z0;
234
ГЛАВА •
Объявление переменной можно совместить с присвоением ей начального значения:
var к = 3 ;
Обратите внимание, что в приведенных примерах объявляется только переменная с по -
мощью слова var, однако не определяется тип данных. Переменная в JavaScript, в отли-
чие от таких строгих языков, как С, C++ и Java, может принимать значения любого тип;
(текстовое, числовое, булевское или нулевое). В связи с этим JavaScript называют «нет. -
пизированным» языком.
Отсутствие типизации в JavaScript имеет свой смысл. Дело в том, что преимущества о.
жесткого определения типов данных проявляются при написании, отладке длинных г
сложных программ, какие обычно составляются на компилируемых языках С или С+-.
Сценарии JavaScript наоборот, как правило, коротки и исполняются интерпретатором
Это позволяет упростить синтаксис языка.
Поскольку отсутствуют определения типов, в программе на JavaScript совершенно за-
конными могут быть следующие друг за другом инструкции, например, такого вида;
х = "March";
х = 3;
То есть одна и та же переменная может изменять свой тип (в данном примере: с тексто-
вого на числовой).
Операции
Любые действия в программе выполняются с помощью некоторого множества операций,
которые записываются с помощью выражений. Выражение состоит из операндов
(элементов данных и других выражений), а также из знаков операций и круглых скобок.
Например, в выражении Ь+с-10 величины Ь, с и константа 10 являются операндами,
а «+» и «-» - знаками операций. В простейшем случае выражение может состоять из
одной переменной или из одной константы. Круглые скобки используются по тем же
правилам, что и в алгебре, с целью управления порядком вычислений.
В JavaScript (как и в языках C++ и Java) в зависимости от количества участвующих опе-
рандов различают следующие типы операций:
✓ унарные операции, в которых участвует один операнд (например, взятие обратного
знака величины: -а);
✓ бинарные операции, которые выполняются над двумя операндами (например, ариф-
метические операции сложения, умножения и т.д.);
✓ тернарная операция, которая комбинирует три операнда; такой операцией является
условное выражение ?: (см. раздел «Условное выражение» данной главы).
Операции, предусмотренные в JavaScript, можно разбить на группы соответственно их
назначению:
✓ арифметические операции;
✓ операции сравнения;
Введение в JavaScript
235
✓ строковые операции;
✓ логические операции;
✓ побитовые операции;
✓ операции присваивания;
✓ смешанные операции.
Все операции характеризуются определенным приоритетом, то есть определенной последо-
вательностью их выполнения, когда они расположены в одном выражении (см. далее).
Арифметические операции
К арифметическим операциям относятся известные всем операторы сложения, вычитания,
умножения и деления (см. Табл. 9.1). Деление обозначается символом /, причем результа-
том деления является в общем случае число с плавающей запятой. Например, 3/2 даст
в результате 1.5. Этим операция / отличается от деления в языке Си, где символ / обо-
значает целую часть от деления (3 / 2 в Си возвращает значение 1, а не 1.5).
Для нахождения целой части от деления двух чисел а/Ь
.( в JavaScript используется функция Math, floor (a/b), опреде-
| ляемая для встроенного объекта: Math (см. раздел
X «Математические функции» главы 10).
Остаток от деления можно найти с помощью оператора %, например, 13%4 возвращает
1, а 3%4 дает 3. То есть % имеет такой же смысл, как и в С, C++, и совпадает с опера-
тором деления по модулю mod в языке Pascal.
Арифметическим оператором можно считать и унарный минус, который отвечает взя-
тию отрицательного значения операнда. То есть положительное значение величины кон-
вертируется в отрицательное значение и наоборот.
Табл. 9.I. Арифметические операции в JavaScript
Символ оператора Операция Пример Значение
+ Сложение 3+1.4 4.4
— Вычитание 3-1.4 1.6
* Умножение 2.1*3 6.3
/ Деление 3/8 0.375
% Остаток 5%2 1
— Унарный минус -3 -3
Все операнды, участвующие в арифметических операциях, должны быть числового типа.
236
ГЛАВА 9
Операции инкремента и декремента
Операции инкремента и декремента являются унарными операциями и отвечают соот-
ветственно увеличению и уменьшению значения на 1. Эти операции часто применяются
к переменным числового типа, которые меняют свои значения на 1, например, к счетчи-
кам циклов. Записываются эти операторы в виде i++, i-- или ++i, --i.
Заметим, что выражения i++ и ++i не идентичны (равно как не идентичны i— и --i).
Расположение оператора ++ (или --) относительно переменной определяет момент
выполнения операции инкрементирования (декрементирования). Справедливы сле-
дующие правила:
✓ Если операция записана перед операндом: ++i {префиксная форма инкремента),
то инкрементирование выполняется до вычисления текущего выражения;
✓ Если операция записана после операнда: i++ {постфиксная форма инкремента),
то инкрементирование выполняется после вычисления текущего выражения.
Например, в результате операций
i = 1;
k = ++i;
ink примут одинаковые значения, равные 2. Однако инструкции
i = 1;
k = i++;
приведут к значениям i = 2 и k = 1. Аналогичные правила имеют место и для опера-
ций декремента —.
Операции инкремента и декремента имеют более высокий приоритет, чем все арифме-
тические, строковые, логические операции и операции присваивания. Фактически перед
вычислением какого-либо выражения сначала выполняются операции инкремента и дек-
ремента (если они присутствуют в выражении). Однако нужно учитывать расположение
инкремента и декремента относительно операнда, то есть форму этих операций (пре-
фиксную или постфиксную).
Проиллюстрируем совместное выполнение декрементирования и арифметической опе-
рации двумя примерами. Пусть исходное значение i = 3, тогда после выполнения ин-
струкции
k = i —*3;
переменные i и к приобретут значения: i = 2, к = 9. Если же декремент располо-
жен перед операндом, то выполнение
к = --i*3;
при том же исходном i, что и в предыдущем примере, приведет к значениям: i = 2,
к = 6.
Введение в JavaScript
237
Операции сравнения
С помощью этих операций выполняется сравнение величин различных типов и возврат
значения true или false в зависимости от результата сравнения. Операции сравнения
часто используются при организации ветвлений в программах совместно с операторами
if и while. Предусмотренные в JavaScript операции сравнения приведены в Табл. 9.2.
Табл. 9.2. Операции сравнения в JavaScript
Символ операции Сравнение Пример Значение
= = Равно 2 == 3 false
1 = Не равно 2.1 != 2 true
< Меньше " а" < " Ь" true
> Больше 7 > 9 false
< = Меньше или равно Hgtl <= Н ga 11 true
>= Больше или равно "6" >= 5 true
Операция == возвращает значение true, когда сравниваемые выражения равны. Зна-
чение, возвращаемое другой, противоположной по смыслу операцией ! = , для этих вы-
ражений будет false. Участвовать в сравнении могут числа, строки, логические значе-
ния, массивы, объекты. При сравнении строковых значений учитывается расположение
символов сравниваемых строк в алфавите.
Поскольку JavaScript автоматически конвертирует данные в тип, который необходим по
смыслу выражения, возможно сравнение переменных различных типов. Например, вы-
ражение "3" == 3 будет возвращать значение true. Аналогично будут иметь смысл и
выражения true == 1 и false == 0, оба они будут возвращать значения true. В то
же время выражения false == 1 и true == 0 возвращают false. То есть
в JavaScript, как и в языке Си, значения true и false преобразуются в целые 1 и 0.
Строковые операции
К строковым операторам относятся операторы, которые выполняют действия над стро-
ками. Среди таких операторов уже рассмотренные операторы сравнения, с помощью
которых можно сравнивать значения двух строк. Сравнение выполняется посимвольно
по степени отклонения от алфавитного порядка. При этом используется алфавит табли-
цы ASCII и, согласно этой таблице, прописные буквы располагаются перед строчными
буквами (имеют меньшие значения). Некоторые примеры операций сравнения примени-
тельно к строкам даны в Табл. 9.2.
Еще одной строковой операцией является конкатенация (от англ, concatenation - сцеп-
ление, соединение). Эта операция объединяет в новую строку два текстовых значения и
обозначается, как и арифметическое сложение, символом +. Например, выражение
238
ГЛАВА 9
"c" + "d" даст результат "cd", записанный без пробелов. Слово "паровоз" можно
получить с помощью операции
"пар"+"о"+"воз"
Рассмотрим, как выполняется конкатенация, когда один из операндов строка, а второй -
число, например,
"10"+6
В выражениях такого типа JavaScript попытается преобразовать строку в число, то есть
результатом будет значение 106. Аналогичное преобразование выполняется в операци-
ях сравнения:
"1" < 2 // операция возвращает значение true
3 != "3" //результат сравнения - значение false
Однако выражения типа "ten" == 10 будут приводить к ошибке, поскольку "ten"
не преобразуется в число и, как следствие, оператор сравнения не может быть исполнен.
Логические операции
Значения логического типа допускают операции конъюнкции (логическое И - AND),
дизъюнкции (логическое ИЛИ - OR) и отрицания (логическое НЕ - not). Эти операции
в языках С, C++, Java и JavaScript обозначаются как
&& - логическое И
| | - логическое ИЛИ
! - логическое НЕ.
Операции И, ИЛИ, НЕ составляют так называемую булевскую алгебру, которую проще
всего описать с помощью приведенных ниже таблиц (в этих таблицах логические опера-
торы применяются к переменным а и Ь).
Логическое И Логическое ИЛИ
а В A&&b a В a| |b
true True true true True true
true False false true false true
false True false false True true
false False true false false false
Логическое НЕ
a !a
true False
false True
Введение в JavaScript 239
Из таблиц видим, что оператор && возвращает значение true лишь в случае, когда оба
операнда имеют значение true. При выполнении операции && сначала проверяется
значение первого операнда. Если оно равно false, то значение второго операнда даже
не принимается во внимание и результату операции присваивается false. Это обстоя-
тельство следует учитывать при записи выражений для операндов. Так, не следует вво-
дить во второй операнд операции инкремента и декремента - при значении false пер-
вого операнда эти операции не будут исполнены. То есть не рекомендуются записи вида
а && (Ь++ < 5)
или
а && (с -- < 0)
поскольку инкрементированное Ь и декрементированное с могут быть вычислены либо
нет, в зависимости от значения а.
Оператор логического ИЛИ возвращает значение true, когда один или оба операнда
(а, Ь) принимают значение true. Как и при исполнении оператора &&, сначала про-
веряется значение первого операнда а. Если оно равно true, то второй операнд Ь уже
не проверяется, а самой операции | | присваивается значение true. Поэтому во втором
операнде не следует применять вычисляемые выражения.
С оператором отрицания ! ситуация значительно проще: это унарный оператор, кото-
рый просто обращает значение своего единственного операнда: с true на false и
наоборот. В качестве операнда для ! можно использовать логические выражения,
например,
! (а && Ъ)
!(al && а2 || Ы && Ь2)
и т.д. При этом нужно учитывать приоритеты логических операций: сначала выполняет-
ся отрицание !, затем конъюнкция &&, а затем дизъюнкция | |. Кроме того, операторы
&& и | | левоассоциативны, то есть (а && Ь && с) означает (а && (Ь && с)).
В JavaScript (как и в языках С, C++, Java) наряду с логическими операциями сущест-
вуют побитовые операции, которые выполняются только над двоичными числами.
Четыре побитовых оператора (побитовое И - побитовое ИЛИ - |, побитовое ис-
ключающее ИЛИ - л и побитовое дополнение —) образуют булевскую алгебру
в битовом пространстве. Эти операторы аналогичны логическим операторам, кото-
рые были рассмотрены выше. Кроме того, имеются еще три оператора сдвига битов:
сдвиг влево (<<), сдвиг вправо (>>) и сдвиг вправо с заполнением нулями (>>>).
Названные побитовые операторы характерны для программирования низкого уровня,
и в сценариях JavaScript используются редко. Поэтому останавливаться подробно на
этих операторах мы не будем.
240 ГЛАВА 9
Операции присваивания
Операции присваивания, как и отрицание (! и -), инкремент (++) и декремент (—),
относятся к унарным операторам. В JavaScript наряду с простым присваиванием =, пре-
дусмотрено составное присваивание, которое совмещают с присваиванием какую-либо
арифметическую операцию (Табл. 9.3). Смысл этих операций очевиден из приведенной
таблицы. Отметим только, что операция += применима как к числам, так и к строкам,
например, в результате выполнения операций:
а = "Я люблю ";
а+= "пиво";
переменная а получит значение "Я люблю пиво".
Табл. 9.3. Составное присваивание в JavaScript
Символ оператора Операция Пример Значение
Присваивание значения х = 13.4 X = 13.4
* = Умножение и присваивание X *= у X = х*у
/= Деление и присваивание X /= у X = х/у
%= Остаток и присваивание X %= у X = х%у
4- = Сложение и присваивание X += у X = х+у
~ = Вычитание и присваивание х - = у X = х-у
Прочие операторы
В JavaScript имеются операции, которые нельзя отнести ни к одному из рассмотренных
выше типов. Среди них отметим, прежде всего, операцию условного выражения ? :. Она
введена в языки С, C++, Java, JavaScript в качестве удобной альтернативы условному
оператору if. Общий вид операции ?: не вполне соответствует ее обозначению (сим-
волы ? и : не стоят рядом):
expressionl ? expression2 : expressions
В записи операции участвуют три операнда (expressionl, expressions,..), то есть
?: является тернарной операцией. Первый операнд принимает булевское значение
(true или false), а второй и третий операнды могут принадлежать любому типу дан-
ных. Если значение expressionl равно true, оператор ?: возвращает значение,
вычисляемое выражением expressions. Если же значение первого операнда false,
то результатом выполнения тернарного оператора будет значение выражения
expression?. Например, оператор
х<1?1-х:х-1
возвращает значение 1-х, если х < 1, и значение х-1 в противном случае.
Введение в JavaScript
241
В языке JavaScript предусмотрены также операции, относящиеся к объектам, массивам,
функциям, типам данных и др. Некоторые из этих операций мы рассмотрим в соответст-
вующих разделах книги.
Приоритеты выполнения операций
Когда в одном выражении используется несколько операций, нужно помнить о при-
оритете их выполнения. Действительно, если в выражении отсутствуют круглые
скобки, то это не означает, что все операции будут выполняться справа налево или
наоборот. Интерпретатор JavaScript выполнит операции в порядке, соответствующем
их приоритету (в первую очередь выполняются более старшие операции). В Табл. 9.4
операторы JavaScript разбиты по группам приоритетов и приведены в порядке убы-
вания старшинства.
Табл. 9.4. Приоритеты операторов JavaScript
Г руппа Символ оператора Операция
0 Выбор свойства объекта
0 [] Выбор элемента массива по индексу
0 О Вызов функции
1 ++ Инкремент
1 — Декремент
1 1 Логическое НЕ
1 — Унарный минус (отрицание)
2 * Умножение
2 / Деление
2 % Остаток
3 4- Сложение чисел (конкатенация)
3 Вычитание чисел
4 <<, >>, >>> Побитовые сдвиги
5 < Меньше
5 < = Меньше или равно
5 > Больше
5 > = Больше или равно
6 = = Равно
6 1 = Не равно
7 & Побитовое И
8 л Побитовое исключающее ИЛИ
9 | Побитовое ИЛИ
10 Логическое И
11 | | Логическое ИЛИ
242
ГЛАВА j
Группа Символ оператора Операция
12 Условное выражение
13 = , *=' /=' +=, -= Присваивания
14 / Последовательность
Некоторые из приведенных в таблице операторов нами еще не рассматривались. Эт»:
касается групп 0 и 14.
Инструкции
С примерами инструкций JavaScript, вы уже успели познакомиться в предыдущих разде-
лах. Это инструкции присваивания, арифметические операции, объявления переменных
и др. В данном разделе мы рассмотрим более сложные инструкции, которые обычны для
языков высокого уровня.
Инструкции выбора
На практике часты ситуации, когда в программу необходимо ввести средство управле-
ния, организующее процесс ветвления при исполнении программы.
Операторы if, else
Допустим, в программе имеется некоторое условие, и если это условие выполняется,
нужно выбрать один фрагмент программного кода, а если не выполняется, то другой
фрагмент. Такой выбор во многих языках программирования реализуется с помощью
одного оператора if, имеющего вид
if (expression) series
где expression - выражение, которое может принимать значения true или false,
a series - серия операторов (или один оператор). Серия исполняется в случае, когда
значение выражения равно true, в противном случае series пропускается, и выпол-
нение программы продолжается с оператора, следующего за if.
Отметим, что в языке JavaScript обязательными являются
круглые скобки, стоящие после оператора if и заключающие
<< выражение. При отсутствии этих скобок на экран будет выведе-
'k но сообщение об ошибке.
В выражении могут использоваться операторы сравнения (Табл. 9.2), например, следующая
инструкция
if (denominator==0)alert("Деление на нуль!");
Введение в JavaScript
243
будет выдавать сообщение (Рис. 9.1) о делении на 0 при значении переменной
denominator равном 0. Возможны и более сложные выражения, в которых исполь-
зуются операторы сравнения и логические операторы, например,
if (denominator==0&&numerator==0)
alert("Значение дроби не определено!")
Выражение будет принимать значение true лишь, когда оба значения denominator
и numerator будут равны нулю. В этом случае на экране будет появляться сообщение
о том, что дробь, в которой одновременно знаменатель и числитель равны нулю, не име-
ет определенного значения.
Microsoft Internet Explorer
Деление на нуль!
ОК
Рис. 9.1. Окно сообщения о делении на 0
Условный оператор if может иметь дополнение в виде оператора else. Последний
задает серию, которая будет исполняться, когда выражение при условном операторе
принимает значение false. Общий вид инструкции if ... else следующий:
if (е) statementl else statement2
где серии statementl или statement2 исполняются в зависимости от значения
expression (true или false). Запишем пример вычисления дроби с использовани-
ем операторов if, else:
if (denominator==0)alert("Деление на нуль!")
else х= numerator/denominator
Более сложные ветвления можно организовать, вкладывая условные операторы друг в друга.
При этом могут получаться конструкции вида if (...){.. . }else{if (...){...}
else{...}}
или if (...) (if (...){.. . }else{. . .} }else{. . .}. Продолжая наш пример
вычисления дроби, запишем его с помощью вложенных условных операторов:
if (denominator==0)(
if (numerator==0)alert("Значение дроби не определено!")
else alert("Деление на нуль!")}
else х= numerator/denominator
С помощью вложенных операторов if можно создавать множественные ветвления,
однако в этих случаях удобнее воспользоваться предназначенным для этого оператором
switch (см. ниже).
244
ГЛАВА 9
Условное выражение
В JavaScript (как и в языках С и Java) существует операция ?:, называемая условным
выражением. Если вам нужно организовать простое ветвление, то с помощью этого опе-
ратора вы сможете записать инструкцию ветвления буквально в одну строку.
Рассмотрим пример, когда в зависимости от температуры на улице нужно вывести на
экран тот или иной комментарий. Можете для этого записать условное выражение:
х= (t>=30)?alert("В Москве жара!"):alert("Еще можно жить")
Здесь введена некоторая переменная х, поскольку значение условного выражения долж-
но быть чему-нибудь присвоено.
Оператор выбора switch
Условный оператор if обеспечивает ветвление только с двумя вариантами выбора.
Для организации множественного ветвления используется более мощный оператор -
оператор выбора switch. Этот оператор состоит из выражения (селектора) и списка
вариантов. Каждый из вариантов имеет константу выбора того же типа, что и селек-
тор (целое число, символ или строка). В JavaScript оператор выбора записывается
в следующем формате:
switch(expression){
case valuel: seriesl;
break;
case value2: series2;
break;
case valueN: seriesN;
break;
default: seriesD;
}
Схема работы оператора switch такова. Сначала вычисляется значение селектора
expression, следующего за словом switch. После этого выполняется серия, кон-
станта выбора которой (value) равна значению селектора. Следующий затем оператор
break означает выход из инструкции ветвления: выполнение программы возобновля-
ется с первого оператора, следующего за инструкцией switch.
Если ни одна из констант не равна текущему значению селектора, то исполняется серия,
стоящая после слова default. Часть default и связанные с нею инструкции в тексте
программы можно опустить. Тогда если среди констант селектора отсутствует нужное
значение, выполнение оператора switch ни к чему не приведет.
Введение в JavaScript
245
Не забывайте ставить оператор break в конце каждой секции
< case оператора выбора. Это предотвратит выполнение тех
> вариантов выбора, которые при данных условиях выполняться не
; должны.
Рассмотрим пример оператора выбора, с помощью которого на экран выводится сооб-
щение о выборе рубрики. Пусть в качестве селектора выступает переменная theme,
принимающая значения 1, 2, 3,4.
switch(theme){
case 1: document.wri te("Новости")
break
case 2:document.write("Финансы")
break
case 3 : document.write("Спорт")
break
case 4:document.write("Погода”)
break
default:document.write("Рубрика не выбрана")}
В этом примере использован метод write объекта document, обеспечивающий вывод
текста на Web-страницу (см. раздел «Свойства, методы, инкапсуляция» главы 10).
Инструкции циклов
При решении различного рода задач приходится неоднократно повторять одни и те же
вычисления. Повторяемые группы команд (серии операторов) принято называть цикла-
ми. Как и в языках C/C++, в JavaScript циклы записываются с помощью операторов трех
видов: while, do-while и for. Первый оператор представляет цикл с предусловием,
второй оператор - цикл с постусловием, а последний оператор - это цикл с параметром,
который можно отнести к циклам с предусловием.
В циклах с предусловием выражение, определяющее условие вы-
полнения цикла, вычисляется до исполнения операторов тела
цикла. В циклах с постусловием, наоборот, значение логического
выражения определяется после исполнения тела цикла.
Оператор while
Рассмотрим оператор while, который имеет наиболее простую структуру среди воз-
можных операторов цикла:
while (expression) {series}
246
ГЛАВА 9
Оператор while является оператором с предусловием, то есть перед каждым выполне-
нием тела цикла series вычисляется значение логического условия expression.
Если условие истинно, то выполняются действия цикла, после чего снова проверяется
expression. Цикл повторяется до тех пор, пока выражение expression возвращает
значение true.
В качестве примера приведем вычисление факториала, который, как известно, равен
N! =1*2*... N при N>=1, а при N=0 полагается 0! =1. Для N=10 будем иметь:
factor=l; i=l
while(i<=10){
factor*=I; i++}
Оператор while удобно использовать, когда число повторений цикла заранее не из-
вестно. Допустим, нужно просуммировать конечный ряд натуральных чисел: 1, 2, 3,
и найти наибольшее значение суммы, не превышающее 1000. На экран нужно вывести
количество слагаемых в сумме и значение суммы. Программу легче всего записать с по-
мощью оператора while:
summ = 0;i = 0 ;
while (summ <= 1000) {
i++; summ+=i}
document.write("Количество слагаемых равно "+(i-1),"<br>");
document.write("Сумма равна ”+(summ-i));
Результатом будет вывод на экран следующего текста:
Количество слагаемых равно 44
Сумма равна 990
Операторы цикла вычисляются, пока summ <= 1000. Однако последнее повторение
тела цикла оказывается лишним, поэтому на экран выводятся результаты предыдущего
прохода цикла (i - 1 и summ - i).
В приведенном примере при записи аргументов в инструкциях document .write ис-
пользована операция конкатенации +. Однако возможно использование списка аргумен-
тов, которые разделяются запятыми, например,
document.write("Сумма равна ", summ-i);
> . ч . . . . z- . . ... - ..................' .
< Если логическое условие цикла while никогда не приобретает
значения false, то цикл теоретически может выполняться бес-
конечное число раз. Практически бесконечный цикл приведет
У к зависанию браузера и потере управления им. Чтобы избежать
s появления бесконечных циклов, тщательно проверяйте наличие fer
'I условия выхода из цикла.
Введение в JavaScript
247
Оператор do-while
В этом операторе цикла, являющемся оператором с постусловием, логическое условие
продолжения цикла следует после тела цикла. Оператор do-while имеет синтаксис:
do {series}
while (expression)
После служебного слова do следует операторный блок series. Далее за словом while
стоит вычисляемое условие expression. Если после выполнения операторов блока
значение expression равно true, то блок вычисляется снова. Так продолжается до
тех пор, пока expression не окажется равным false. После этого вычисления цикла
прекращаются, и происходит переход к следующему оператору программы.
Чтобы легче было сравнивать различные операторы цикла друг с другом, приведем все
тот же пример вычисления факториала:
factor=l; i=l;
do {factor*=i; i++}
while(i<=4) ;
В операторах цикла do-while, как и в операторах while, следует избегать появления
бесконечных циклов.
Оператор for
Этот оператор цикла включает в себя переменную, называемую параметром цикла или
счетчиком цикла. Последнее название связано с тем, что этот параметр может прини-
мать значения, равные числу повторений цикла. Оператор for в JavaScript имеет такой
же формат, что и одноименный оператор в Java:
for (initialization; expression; modification) {series}
Инструкция начинается с ключевого слова for, за которым в скобках следует конструк-
ция, включающая в себя инициализацию параметра цикла и переменных
(initialization), логическое выражение (expression), изменение значения пара-
метра и переменных (modification). Тело цикла представляется обычно блоком опе-
раторов (series), обозначаемого фигурными скобками. Если тело цикла состоит из
одного оператора, фигурные скобки не нужны.
При исполнении оператора for сначала в выражениях initialization вычисляют-
ся начальные значения параметра цикла и, возможно, других переменных. Затем вычис-
ляется выражение expression, которое может иметь значение true или false.
Если значение выражения равно true, выполняется тело цикла series. Когда будет
выполнен последний оператор тела цикла, программа переходит к оператору
modification, вычисляет новые значения параметра и переменных, после чего опре-
деляется значение expression. Если выражение истинно, снова вычисляется тело
цикла. Если же выражение имеет значение false, выполняется переход к следующему
оператору программы. Таким образом, вычисления цикла продолжаются до тех пор, по-
ка значение выражения не окажется равным false.
248
ГЛАВА с
Рассмотрим использование инструкции for на примере вычисления значения фактс-
риала N!, Чтобы вычислить факториал 10 !, запишем оператор в виде:
factor = 1;
for (i = 1; i <= 10; i++) factor *= i;
Сделаем несколько замечаний относительно синтаксиса цикла for. Если в теле цикла
имеется только один оператор, то фигурные скобки могут отсутствовать. В части опера-
тора for, определяющие начальные значения переменных (initialization) и изме-
нение значений (modification), можно включать выражения не только для параметра
цикла, но и для вычисляемых переменных. Например, вычисление факториала и вывоа
значений на экран можно задать следующей инструкцией:
for(i = 1, factor =1; i < 10; i + + , factor *= i);
document.write(factor, "<br>");
Параметр цикла не обязательно должен инкрементироваться на 1, как в приведенных
примерах. Шаг изменения параметра может быть как целым, так и дробным, как поло-
жительным, так и отрицательным. Запишем оператор для вычисления суммы sum ряда
рациональных чисел: 1/2, 1, 3/2,.. п:
for (i = 0, sum=0; i<=n; i+=l/2, sum += i);
Таким образом, мы рассмотрели оператор цикла, в котором используется счетчик. Если
вы хотите организовать цикл без счетчика, то нужно обратиться к операторам while
или do, которые описаны ранее.
Оператор for-in и просмотр свойств браузера
Оператор for-in удобен при выполнени операций над элементами массивов, а также
над свойствами объектов. Хотя с объектами JavaScript вы начнете работать позже (начи-
ная с главы 10), мы все же кратко рассмотрим применение оператора for-in.
Конструкция for-in имеет следующий общий вид:
for (variable in object) {series}
Здесь variable обозначает имя переменной, либо элемент массива, либо свойство
объекта. Слово object обозначает имя объекта, a series - блок операторов, обра-
зующий тело цикла. Например, если вы хотите обратиться к свойствам объекта
navigator (этот объект отвечает браузеру), в заголовке оператора цикла нужно запи-
сать for (k in navigator), где индекс к будет пробегать свойства. Например, с по-
мощью оператора for-in выведем на экран все свойства браузера:
<script language="JavaScript">
for (k in navigator)
document.write(k+"="+ navigator[k]+"<br>");
</script>
В результате для браузера Internet Explorer 5.0 вы получите на экране следующий текст:
appCodeName=Moz iIla
appMinorVersion=0
Введение в JavaScript
249
appName=Microsoft Internet Explorer
appVersion=4.0 (compatible; MSIE 5.01; Windows NT 5.0)
cookieEnabled=true
cpuClass=x86
mimeTypes=
onLine=false
opsProfile=
platform=Win32
plugins=
systemLanguage=ru
userAgent=Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)
userLanguage=ru
userProfile=
Слева от знака «=» указано свойство объекта, а справа - его значение. Анализировать
список свойств здесь не будем, оставив его до времени рассмотрения объектной модели
браузера.
Оператор for-in весьма полезен при отладке сценариев. Если
применять его совместно с методом alert(), можно отображать
в сообщениях списки имен и значений всех свойств используемых
объектов.
Прерывание цикла
Выполнение цикла можно прервать с помощью оператора break, который размещается
в теле цикла. Этот оператор необходим, когда требуется прерывать вычисление тела
цикла при возникновении каких-либо ошибок или в случае появления некоторого значе-
ния переменной.
Обычно прерывание связывается с выполнением какого-либо условия. Приведем сле-
дующий пример прерывания:
i = 0;
while (true) {
document.write (i, "<br>");
if (i == 9) break;
i + + )
Здесь оператор while (true) реализует бесконечный цикл, при исполнении которого
выводится на экран последовательность чисел. Цикл прерывается оператором break
в случае, когда значение очередного числа равно 9. После прерывания производится
переход к следующему оператору программы.
250
ГЛАВА :
Прерывание итерации цикла
Допустим, вам нужно прервать выполнение не всего оператора цикла, а только выпол-
нение блока операторов при данной итерации цикла. Тогда воспользуйтесь операторе’
continue, который записывается внутри тела цикла.
Рассмотрим, как пример, вычисление суммы ряда натуральных чисел от 1 до 99, в коте
ром отсутствуют числа, кратные 5. Найти эту сумму проще всего следующим образом:
sunun=0;
for (i = 1; i<=99; i++) {
if (i%5 == 0) continue;
sunun += i}
document.write("Сумма равна ",summ) ;
Тело цикла при значениях i, кратных 5, выполняться не будет. В результате на экран
будет выведен текст "Сумма равна 4000".
Функции
В сценариях JavaScript, как и в программах на других языках программирования, широ-
ко используются функции.
Функция - это определенная заранее последовательность инст-
рукций, которая обозначается идентификатором и которая мо-
жет возвращать значение, присваиваемое идентификатору
функции.
Объявление функции
Использованию функции в программе должно предшествовать ее объявление, которое
имеет вид:
function name (argl, arg2,..) {series}
где function - служебное слово; name - идентификатор функции; argl,
arg2, . .- список аргументов функции, series - последовательность операторов,
которая составляет тело функции.
Имена функций (идентификаторы) принято в JavaScript записывать строчными буквами.
В качестве идентификаторов функций не следует использовать служебные слова, а так-
же слова, разделенные пробелами.
Список аргументов заключается в круглые скобки, и аргументы отделяются друг от дру-
га запятыми. Кстати, список аргументов может быть пустым. Однако круглые скобки ()
после идентификатора функции должны обязательно присутствовать, поскольку именно
они обозначают вызов функции.
Введение в JavaScript
251
За списком аргументов следуют операторы тела функции, которые обязательно заклю-
чаются в фигурные скобки. Этим синтаксис функции отличается от синтаксиса операто-
ров if, while и др., в которых фигурные скобки могут отсутствовать, если в последо-
вательности series имеется только один оператор
Инструкция return
Чтобы функция возвращала в сценарий какое-либо значение, в тело функции вставляет-
ся инструкция return. Например, объявление функции для вычисления площади пря-
моугольника выглядит следующим образом::
function rectangle (a,b) {
s = a*b
return s)
За ключевым словом return может следовать выражение. Для функции вычисления
площади прямоугольника можно записать выражение return a*b. Тогда определение
функции для площади упрощается:
function rectangle (azb) {
return a*b}
Напомним, что даже один оператор функции заключается в фигурные скобки. Точка
с запятой после выражения оператора не обязательны.
Когда интерпретатор JavaScript встречает инструкцию return, он прекращает выпол-
нение функции и возвращает значение функции в точку вызова. Вычисления прекраща-
ются, даже если за словом return следуют другие операторы. Если функция не содер-
жит ключевого слова return, то интерпретатор выполняет каждую инструкцию тела
функции и не возвращает никакого значения. В этом случае функция будет иметь неоп-
ределенное значение.
Приведем два примера функций, которые не возвращают значений:
function communic (а) {
if (а==0) alert ("Переменная а равна О")}
✓ функция, которая выводит на экран сообщение;
function interval () {
setTimeout('interval()',1000)}
✓ функция, которая регулярно через 1000 миллисекунд вызывает саму себя (подробнее
об этих функциях см. раздел «События таймера» главы 11).
>’ Если нужно прервать исполнение функции без возврата значения,
/ например, при выполнении какого-либо условия или наступлении
v события, запишите в месте прерывания ключевое слово return
; без последующего выражения.
252
ГЛАВА 9
Вызов функции
Для вызова функции нужно обратиться к ней по имени и записать оператор круглых
скобок (). В скобках могут быть указаны значения аргументов. Если в качестве ар-
гументов использованы выражения, то они будут вычислены и их значения будут
подставлены в функцию. Допустим, вы объявили функцию, которая выводит сооб-
щение с приветствием:
function Hellow (xname) {
alert ("Привет, " + xname)}
Перед выводом сообщения на экран в функцию Hellow (xname) будет подставлено
значение переменной xname.
Запишем сценарий, в котором три раза подряд будет вызвана функция Hellow () для
приветствия людей, которых вы укажете (например, Андрея, Лены, Марины):
<HTML>
<HEAD>
<Т1ТЬЕ>Приветствие</Т1ТЬЕ>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
function Hellow (xname) {
alert ("Привет, " + xname)}
Hellow ("Андрей");
Hellow ("Марина");
Hellow ("Лена");
</SCRIPT>
</BODY>
</HTML>
При загрузке документа появляется сообщение «Привет, Андрей». Щелкните на кнопке
ОК, после чего будет выведено следующее сообщение и т.д. После закрытия последнего
сообщения на экране останется страница HTML-документа. Выводимые сообщения из-
меняются вследствие того, что функция Hellow () вызывается всякий раз с новым зна-
чением аргумента. Присвоенные значения аргументов имеют силу, только пока выпол-
няется вычисление функции.
Мы привели пример сценария JavaScript, встроенного в тело HTML-документа. В сцена-
рии содержится объявление функции и инструкции ее вызова. Однако определение са-
мой функции лучше размещать в заголовке HTML-документа:
<HTML>
<HEAD>
<Т1ТЬЕ>Приветствие</Т1ТЬЕ>
<SCRIPT language="JavaScript">
function Hellow (xname) {
alert ("Привет, " + xname)}
</SCRIPT>
</HEAD>
Зведение в JavaScript 253
<BODY>
<SCRIPT language="JavaScript">
Hellow ("Андрей");
Hellow ("Марина");
Hellow ("Лена");
</SCRIPT>
</BODY>
</HTML>
Рассмотрим теперь использование выражений в качестве аргументов при вызове функ-
ций. Например, для функции вычисления среднего арифметического:
function aver (a,b) {
return (a+b)/2)
можно организовывать вызовы:
aver (11/3,2+3);
aver (c*d,7.2-3.6);
и другие подобные. Если функция возвращает значение, то ее идентификатор можно
использовать в более сложных выражениях. Например,
delta = aver (0.1,2.3) - aver (0.5,0.3);
В этом примере в каждую точку вызова функции aver интерпретатор будет подставлять
возвращаемое значение.
Функции преобразования типов данных
Как уже отмечалось, JavaScript в некоторых случаях автоматически преобразует одни
типы данных в другие. Это касается, например, операторов сравнения, в которых один
операнд представлен числом, а другой - текстом. Интерпретатор JavaScript старается
перевести текст в число, чтобы выполнить сравнение. Другим примером является
аргумент в часто используемом нами методе вывода на экран:
document.write {"Значение переменной х равно: " + х);
Числовое значение переменной х интерпретатор автоматически переводит в текст и вы-
полняет операцию конкатенации, после чего на экран может быть выведена строка типа
"Значение переменной х равно: 120.5".
Однако возможны случаи, когда нельзя полагаться на «здравый смысл» интерпретатора
и лучше преобразование типа данных задать в виде отдельных инструкций. В этих слу-
чаях могут пригодиться следующие глобальные функции:
✓ parselnt () - преобразование текста в целое число;
✓ parseFloat () - преобразование текста в число с плавающей запятой.
Эти функции считывают текст, размещенный в круглых скобках, и пытаются его преоб-
разовать в число. Примеры таких преобразований даны в Табл. 9.5.
254
ГЛАВА =
Табл. 9.5. Примеры преобразований типов данных
Аргумент parselnt() parseFloat()
"33 коровы" 33 33
"А было 33 коровы" NaN NaN
"0.5 литра молока" 0 0.5
"Всего 0.5 литра молока" NaN NaN
у. Если аргумент функции преобразования типов (parseint или
parseFloat) начинается не с числа, то функция возвращает
' значение NaN (от англ. «Not a Number»). Поиск числа выполняет-
V- ся с начала строки аргумента, а нечисловая часть аргумента
> отбрасывается.
Проверить возвращаемые значения функций, которые приведены в таблице, вы можете
с помощью инструкций вида:
xstring = "0.5 литра молока";
xnum = parseFloat(xstring);
document.write (xnum);
Итак, в данной главе вы изучили основные конструкции языка JavaScript, за исключени-
ем объектов и событий. Этим вопросам посвящены следующие две главы.
“ЛАВА 10.
Объектная модель JavaScript
□писание JavaScript, приведенное в предыдущей главе, является, по сути, описанием
процедурной части языка JavaScript. Именно эта часть языка оперирует с переменными,
типами данных, функциями и т.д. Однако JavaScript предназначен, прежде всего, для
манипулирования объектами, и в этом смысле он приближается к языкам объектно-
эриентированного программирования (ООП).
Общие сведения об объектах
Возможно, вы задаетесь естественным вопросом: что такое объект и что такое ООП?
Формальное определение объекта звучит примерно так: «объект - это фрагмент кода,
обладающий свойствами и методами». Это хорошая головоломка для неискушенного
читателя: один непонятный термин «объект» выражен через еще более непонятные
-свойства» и «методы». Не лучше ситуация и с определением ООП. Чаще всего можно
встретить такое толкование «объектно-ориентированное программирование - это мето-
дика анализа, проектирования и написания приложений с помощью объектов». Попро-
буем постепенно разобраться в этой терминологии.
В обыденной жизни объектами принято называть предметы материального мира: маши-
ны, здания, инструменты, книги и т.д. В языках программирования содержание объекта
несколько иное: это может быть информационная модель реального объекта, но может
быть модель, существующая только в абстрактном виде.
Объекту присущи определенные характеристики, называемые свойствами (или атри-
бутами). Например, объект «яблоко» характеризуется свойствами: вес, цвет, вкус и др.
По значению этих свойств вы можете один объект «яблоко» отличить от другого анало-
гичного объекта. Все объекты «яблоко» можно объединить в одну структуру, называе-
мую в языках ООП классом. Конкретные объекты, принадлежащие тому или иному
классу, называются экземплярами. Попросту говоря, экземпляр класса «яблоко» - это то
яблоко, которое вы держите в руках, или то яблоко, которое висит на дереве.
Язык JavaScript основан на экземплярах, и в нем не предусмотрено конструкций классов.
В связи с этим JavaScript нельзя, строго говоря, отнести к языкам ООП, каковыми явля-
ются, например, C++ и Java. Несмотря на это, объектная модель JavaScript оказывается
достаточной для полноценной работы с Web-страницами.
Свойства, методы, инкапсуляция
Объекты - это основная и центральная логическая единица, применяемая в ООП. Объек-
том можно считать фрагмент кода, например, строка:
si = "Эта строка может стать объектом";
является объектом. Объект-строка имеет свойства, например, символьный состав и дли-
ну. Свойство можно представить как отдельную переменную с именем, принимающую
отдельное значение.
256
ГЛАВА 1:
Свойства характеризуют состояние, в котором находится
'> объект. Чтобы сослаться на свойство объекта, нужно указать
к сам объект и через точку "." записать свойство. Имя свойства
/ должно быть идентификатором, не содержащим пробелов.
Например, ссылка на свойство «длина строки» будет выглядеть как
si.length
Вы можете следующим образом определить длину строки, присвоив ее значение новс
переменной lengthstr, и вывести значение длины на экран:
si = "Эта строка может стать объектом";
lengthstr = sl.length;
document.write("Длина строки равна:", lengthstr);
Обратите внимание, что последняя инструкция document .write содержит также
ссылку на объект. Однако в отличие от свойства sl.length, здесь имеются круглы:
скобки (), которые, как известно, означают вызов функции.
Функция, применяемая к объекту JavaScript, называется мето-
% дом. Методы отвечают действиям, которые можно совершить
над данным объектом. Подобно обычным функциям методы воз-
вращают значения.
В приведенном выше коде для объекта document вызывается метод write (), кото-
рый мы неоднократно использовали в примерах предыдущей главы. Этот метод в дан-
ном случае выведет на экран сообщение вида:
Длина строки равна:31
Таким образом, свойства и методы формируют одну неделимую сущность объекта. Ин-
формация о внутренней работе объекта скрывается от глаз программиста - в этом состо-
ит принцип инкапсуляции. Объект взаимодействует с программой только через свои
опубликованные свойства и методы. Инкапсуляция составляет одну из самых сильны*
сторон ООП.
Операции со свойствами
Как отмечалось выше, свойства представляют собой множество данных, которые харак-
теризуют объект. Имеются некоторые общие правила обращения к свойствам объектов.
Свойство отделяется от имени объекта разделителем точкой «.». Для чтения и записи
свойств используются следующие форматы записей:
✓ Чтение свойства объекта. Обратиться к свойству объекта и присвоить его значение
какой-либо переменной можно с помощью операции вида:
Объектная модель JavaScript 257
х = Math.PI;
✓ Запись значения свойства. Эта операция выполняется с помощью следующей инст-
рукции, имеющей, например, вид:
document.bgColor = "#30A6D8";
✓ Определение нового свойства. Если нужно задать новое свойство объекта, это
можно выполнить инструкцией, которая аналогична приведенной выше:
myobj.pro = xv;
где в левой части указывается свойство, а в правой - переменная, значение которой
будет присвоено свойству. Если считываемого значения свойства не существует (пе-
ременная в правой части не имеет значения), то определенное таким образом свойст-
во будет возвращать значение undefined (см. раздел «Значение undefined»).
✓ Перезапись свойства. Выполнить чтение одного свойства и записать его значение
в другое свойство можно, например, с помощью операции вида:
document.url = report.addr;
Встроенные объекты
Среди объектов, с которыми имеет дело Web-разработчик при создании страниц,
различают встроенные и пользовательские объекты. Сначала рассмотрим встроен-
ные объекты.
Объект Date
К встроенным объектам JavaScript относится упоминавшийся объект Date. Конст-
руктор и методы объекта Date позволяют для него определять не только текущие,
но и любые дату и время. Мы остановимся на основных операциях, выполняемых
над этим объектом.
Отображение текущих даты и времени
Объект Date в JavaScript создается оператором new и конструктором Date (). Про-
стейшая форма конструктора (см. раздел «Конструктор объектов» настоящей главы)
выглядит как
datetime = new Date();
Если аргумент в конструкторе отсутствует, то будет создан объект, представляющий
текущую дату и время. Запишите следующий фрагмент кода, чтобы проверить, что это
действительно так:
datetime = new Date(); //Создание объекта,
//представляющего текущие дату и время
258
ГЛАВА 10
document.write("Сегодня: ",
datetime.toLocaleString(),"<br>”);
Вторая строка этого фрагмента обеспечивает вывод на экран текста вида:
Сегодня: 26 марта 2002 г. 11:37:43
При этом используется метод toLocaleString (),преобразующий значение объек-
та Date в текст. Причем дата и время выводятся в формате регионального времен-
ного пояса.
Задание даты и времени
Если в конструкторе Date указать аргумент, то будет создан новый объект, содержащий
дату и, возможно, время. Таким образом, при создании объекта Date можно сразу за-
дать дату и время. Для этого используется один из следующих возможных форматов
записи:
datetime = new Date(2005, 08, 25); // Объект, представляющий
//дату «25 сентября 2005 г.», время «0:00:00»
datetime = new Date(2005, 08, 25, 9, 30, 0) ;//Объект,
//представляющий дату и время «9:30:00»
datetime = new Date("25 May, 2005, 7:00:15");//Объект,
//представляющий дату «25 мая 2005 г.» и время «7:00:15»
Если при создании объекта не использовать ни одного параметра, то, как уже говори-
лось, в объекте сохранятся текущие дата и время. Нумерация месяцев начинается с 0,
то есть январь - нулевой месяц.
Заметим, что в русифицированном браузере значение строки вида “25 Мау, 2001,
7 : 00:15” в определении объекта приводит к правильному переводу с английского на
русский при выводе на экран.
Операции над значениями объекта Date
Благодаря методам, определенным для встроенного объекта Date, над значениями объ-
екта возможен ряд операций. Это установка различных значений даты и времени, кон-
вертирование даты в строку, использование представления для регионального времени и др.
Приведем часто используемые методы объекта Date (см. Табл. 10.1).
Табл. 10.1. Методы объекта Date
Метод Операция
setDate() Задает день месяца
setMonth() Задает месяц (в диапазоне от 0 до 11)
setYear() Задает год
Объектная модель JavaScript
259
i Метод Операция
setTime() Задает время в миллисекундах, отсчитанное от 1 января 1970 г.
setHours(),setMinutes() , setSeconds() Задает время
getDate() Возвращает день месяца
getMonth() Возвращает месяц
getYear() Возвращает год
getTime() Возвращает время в миллисекундах, отсчитанное от 1 января 1970 г.
getHours(),getMinutes(), getSeconds() Возвращает время
toLocaleString() Преобразует значение объекта Date в строку в формате регионального времени
getTimeZoneOffset() Возвращает значение временного сдвига относи- тельно нулевого меридиана (при этом используются установки Windows)
Пример. Когда закончится полет?
В качестве иллюстрации использования методов объекта Date приведем такую задачу.
Пусть стартует космический корабль с точно известным временем полета. Вам нужно по
дате старта определить дату его возвращения. Допустим, время полета составляет
450 дней, а дата вылета - 31 августа 2002 г. Для вывода на экран даты прилета корабля
составим следующий сценарий:
<SCRIPT LANGUAGE="JavaScript">
start = new Date (2002, 07, 31); //Создание объекта,
//содержащего дату старта
start.setDate(start.getDate() + 450);//Определение дня
//приземления
document.write ("Корабль вернется "+start.toLocaleString());
</SCRIPT>
Результатом выполнения сценария будет вывод текста: "Корабль вернется 24
ноября 2003 г. 0:00:00".
В этой задаче мы ничего не говорили о времени. Это было бы правильно для пароходов
позапрошлого века, но время приземления космического объекта можно запланировать
с точностью до секунды. Попробуем это сделать и мы. Пусть точное время старта:
9:10:30, а полетное время: 450 суток и 22 часа 45 минут 20 секунд. Для определения
момента приземления мы используем методы манипулирования со временем:
260
ГЛАВА -
<SCRIPT LANGUAGE="JavaScript">
start = new Date (2002, 07, 31, 9, 10, 30);
start.setDate(start.getDate() + 450);
start.setHours(start.getHours() + 22);
start.setMinutes(start.getMinutes() + 45);
start.setSeconds(start.getSeconds() + 20);
document.write ("Корабль вернется " +
start.toLocaleString()) ;
</SCRIPT>
Если таким образом мы учтем время, то получим на экране уже другую строку: "Корабл;
вернется 25 ноября 2003 г. 7:55:50".
Объект Math
Этот объект JavaScript содержит математические функции и константы. Функции пред-
ставляются методами объекта, а константы - свойствами.
Константы
При написании программ удобно, когда под рукой имеется инструмент, обеспечивающий
вызов часто используемых математических констант. Таким инструментом в JavaScript яв-
ляются свойства объекта Math, которые связаны со следующими константами:
✓ Math. Е - основание натурального логарифма, равное 2.7183 (в этой записи и в по-
следующих приведены округленные значения с точностью до четырех знаков после
запятой);
✓ Ma th. LN2 - натуральный логарифм 2, равный 0.6931;
✓ Math. LN10 - натуральный логарифм 10, равный 2.3026;
✓ Math. LOG2E - логарифм е по основанию 2, равный 1.4427;
✓ Math.LOGlOE - логарифм е по основанию 10, равный 0.4343;
✓ Math.PI - число л = 3.1416;
✓ Math. SQRT1_2 - квадратный корень из 1/2, равный 0.7071;
✓ Math.SQRT2 - квадратный корень из 2, равный 1.4142.
Чтобы присвоить значение константы, нужно просто обратиться к соответствующему
свойству, например, х = Math.SQRT2 или а = Math.Pl. Обратите внимание, что
имена констант записываются прописными буквами. Если вы запишите имя
с использованием строчных букв, например, Math. Pi, то это будет считаться ошибкой.
Объектная модель JavaScript
261
Для иллюстрации вызова констант запишем функцию вычисления площади круга:
function circle(х) {
х * = x*Math.PI
return х;
}
Заметим, что для обращения к свойствам или методам Math не
нужно предварительно создавать объект Math, как в случае с
объектом Date (вспомните директиву new).
Математические функции
Перечислим основные методы объекта Math. В Табл. 10.2 даны форматы вызова мето-
дов и операции, которые можно выполнить с их помощью.
Табл. 10.2. Таблица методов объекта Math
Метод Операция
Math.ceil(х) Округляет x до ближайшего наибольшего целого числа;
Math.floor(х) Округляет х до ближайшего наименьшего целого числа
Math.round(x) Округляет х до ближайшего целого
Math.random() Генерация случайных чисел в диапазоне от 0 до 1
Math.abs(x) Возвращает модуль х
Math.cos(x), Math.sin(x), Math.tan(x) Возвращают значения тригонометрических функций
Math.acos(x), Math.asin(x), Math.atan(x) Возвращают значения обратных тригономет- рических функций
Math.exp(x),Math.log(x) Возвращают значения экспоненты и натурального логарифма
Math.sqrt(x) Возвращает квадратный корень из х
Math .min (xz y) Возвращает минимальное из двух чисел х, у
Math.max(x,y) Возвращает максимальное из двух чисел х, у
Math.pow(x,y) Возвращает значение степени ху
Как видим из таблицы, методы объекта Math имеют один или два аргумента. Значение,
возвращаемое методом, как и значение функции, можно непосредственно использовать
в выражениях. Проиллюстрируем применение методов некоторыми примерами.
262 ГЛАВА 1С
Пример. Генератор случайных чисел
Среди функций объекта Math имеется генератор случайных чисел: Math. random (;
Этот генератор «выбрасывает» случайные числа в диапазоне от 0 до 1. Умножая эт;
числа на какой-либо коэффициент, ими можно заполнить любой отрезок [а,Ь] на чи-
словой прямой. Определить качество генератора случайных чисел проще всего путе\.
вычисления среднего арифметического от некоторого (достаточно большого) набор;
случайных чисел.
Чему равно среднее от набора случайных чисел в интервале [0,1]? Очевидно, это зна-
чение должно равняться 1/2. Проверим это утверждение с помощью генератора случай-
ных чисел Math. random (). Составим сценарий, который будет вычислять арифмети-
ческое среднее для набора чисел {Хд.}:
Воспользуемся уже известным нам оператором цикла for (см. раздел «Оператор for»
главы 9), в котором число повторений цикла задается количеством чисел в наборе (п):
<SCRIPT LANGUAGE^"JavaScript">
n - 1000;//Задание количества случайных чисел
for (i = 0, av - 0; i < n; i + + , av += x/n) {
x = Math.random();//Генерация случайного числа
}
document.write ("Среднее для набора случайных чисел: ", av)
</SCRIPT>
Чем больше п, тем меньше значение среднего будет отклоняться от 0.5. Вы можете
поставить эксперимент, меняя значения п = 100, 1000, 10000 и так далее, пока
не заметите, что ваш компьютер начал медлить с ответом.
Если вы хотите, чтобы метод Math. random () давал случайные числа не в диапазоне
[ 0,1 ], а в произвольном интервале [ а, Ь], можете задать следующую функцию:
function genrand(а,b) {
return (а + (b-a) * Math. random О) ;
)
Эта функция возвращает случайное число в интервале от а до Ь. Например, чтобы при-
своить переменной х случайное значение из интервала [2,10], нужно в сценарий вме-
сте с определением функции записать инструкцию: x=genrand (2,10).
Для генерации случайных целых чисел в интервале [m,n] может пригодиться следую-
щая функция:
function numrand(m,n) {
return (m + Math.floor((n-m)* Math.random()));
}
Объектная модель JavaScript
263
Здесь, кроме метода Math.random(), использован метод округления Math, floor ().
Требуемые случайные целые числа получаются масштабным преобразованием случай-
ных чисел из интервала [0,1] (то есть умножением на (n-m)) и последующим округ-
лением до наименьшего целого числа.
Пример. Вычисление интегралов методом Монте-Карло
Применим теперь функцию Math. random () для вычисления определенных интегралов.
Из прикладной математики известен метод Монте-Карло, согласно которому определен-
ный интеграл можно вычислять несколько парадоксальным способом - с помощью рас-
чета подинтегрального выражения в случайных точках интервала интегрирования. При
этом работает приближенная формула:
а 1
где значения х, пробегают набор случайных чисел в интервале [а, Ь]. Чем больше слу-
чайных чисел участвует в расчете суммы, тем точнее получаемое значение интеграла.
Применим метод Монте-Карло к вычислению несложного интеграла:
1
F = j x2dx
о
для которого нам известен точный ответ: F=l/3. Запишем сценарий с оператором цикла
for:
<SCRIPT language="JavaScript">
integr = 0;
n = 2000
for (i=0; i<n; i++){
x = Math.random();
integr += x*x/n;
}
integr = Math.round(integr*100)/100; //Округление
//значения интеграла
document.write ("Значение интеграла равно: ", integr);
</SCRIPT>
В этом сценарии, помимо функции Math. random (), использована функция округле-
ния Math. round (). Введение последней отражает тот факт, что в найденном значении
точными являются лишь несколько цифр после запятой. Нетрудно проверить с помощью
данного сценария, что при увеличении п вы будете приближаться к точному значению
интеграла: 1/3.
264
ГЛАВА 10
Массивы
Ранее вы познакомились с объектами, которые позволяют сохранять данные любых ти-
пов: числовые, строковые, даты и т.д. Нами были также рассмотрены примеры встроен-
ных объектов (Date и Math). Теперь мы попробуем взглянуть на объекты с более об-
щей точки зрения.
Массивы в JavaScript
Еще одним типом объектов являются массивы, которые часто используются для обра-
ботки множества значений. Массивы были введены в JavaScript 1.1 для возможности
манипулирования самыми разными объектами Web-страницы: всеми ссылками данной
страницы, всеми картинками на данной странице, всеми апплетами, всеми элементами
формы и т.п.
Поясним сначала понятие массива, рассмотрев пример введения массива для координат
материальной точки (х,у, z). Обозначим совокупность этих координат одним иденти-
фикатором г и снабдим этот идентификатор индексом i (= 1, 2, 3). Теперь, если нам
нужно получить доступ к значениям координат, мы будем пользоваться операциями
присваивания типа:
X = г [ 1 ] ;
У = г [ 2 ] ;
z = г [ 3 ] ;
Здесь идентификатор г обозначает массив, а индексы в квадратных скобках - элементы
массива.
< Массив - это тип данных, который состоит из пронумерованных
X фрагментов данных. Фрагменты данных называются элемента-
/ ми массива, а номера, присваиваемые элементам, - индексами.
В структурированных языках (С, Pascal и др.), требующих объявления типов данных,
массив состоит из однотипных элементов. В рассмотренном выше примере элементы
массива г принадлежат к одному типу, так как все координаты принимают числовые
значения. Иная ситуация в «нетипизированном» языке JavaScript, в котором элементы
одного массива могут принадлежать различным типам. Например, элементам некого
массива examp можно присвоить следующие значения:
examp[0] = 2.713;
examp[1] = 4;
examp [12] = '' i vanov " ;
examp[13] = true;
Объектная модель JavaScript 265
Доступ к элементам массива обеспечивается оператором [ ], аналогично тому, как дос-
туп к функции получаем с помощью оператора (). Заметим, что в языке JavaScript (как
в С, C++ и Java) индекс первого элемента массива не 1, а 0. Например, элемент х [ 2 ]
является третьим элементом массива.
Еще одно отличие массивов в JavaScript от массивов в структурированных языках со-
стоит в том, что количество элементов массива может не быть фиксированным. В любой
.момент количество элементов в массиве можно изменить. Так, чтобы добавить новый
элемент в рассмотренный массив examp, достаточно задать его значение с помощью
операции присваивания:
examp[14] = 333;
В JavaScript не поддерживаются многомерные массивы, то есть массивы, зависящие
более, чем от одного индекса. Тем не менее, операции с многомерными массивами
возможны (см. ниже раздел «Многомерные массивы»).
Массивы как объекты
То, что было ранее сказано о массивах, относилось к массивам как к элементам данных.
Вы можете составить достаточно сложную программу, в которой массивы будут исполь-
зоваться просто как отдельный тип данных. Однако вы улучшите стиль ваших программ,
если будете учитывать, что массив может представлять собой объект так же, как объект
может быть массивом.
Массив создается аналогично тому, как создается объект. При этом можно использовать
два способа его создания: с помощью конструктора Object () и с помощью конструк-
тора Array().
Создание объекта-массива
Согласно первому способу для создания массива нужно сначала определить пустой
объект-массив, а затем задать его элементы, например:
xar = new Object ();
xar[0] = 2;
xar[1] = 5;
xar[7] = 1.5;
Здесь xar - имя массива, состоящего из 8 элементов. Наряду с элементами массива
можно задать свойства, например,
xar.property = 556;
xar.name = "Bob";
266
ГЛАВА i:
Конструктор Array
Для создания массива используют чаще другой способ: применение конструктор;
Array. Этот конструктор был введен в версиях Netscape Navigator 3.0 и Interne
Explorer 3.0. Например, для создания пустого массива а нужно записать инструкцию:
а = new Array();
Возможно задание массива с определением его элементов:
b = new Array(2,41,3.14,"als",22,"fil3");
Конструктор Array автоматически определяет свойство length - количество элемен-
тов массива. Так для определенных выше массивов а и Ь выражения:
a.length == 0
b. length == 6
имеют значение true. Поскольку в пустом массиве не определен ни один элемент, зна-
чение length равно нулю.
Операторы цикла при работе с массивами
Многие операции над элементами массива выполняются с помощью операторов цикла.
Ввод данных и суммирование элементов массива.
Простейший калькулятор
Воспользуемся оператором цикла для нахождения суммы элементов массива и вывода
ее на экран. Это можно сделать с помощью следующего простого кода (идентификатор
массива х):
sum = 0;
for (i=0; i<x.length; i++) sum +=x[i];
document.write ("Сумма элементов массива равна: ", sum);
Рассмотрим теперь операции, связанные с вводом данных в массив. Составим сценарий,
имитирующий работу калькулятора при вычислении суммы чисел. С клавиатуры после-
довательно вводятся числа, а затем при нажатии на клавишу «=» на экран выводится
значение их суммы.
Ввод данных реализуем с помощью оператора запроса window. prompt. Для автомати-
зации процедуры ввода применим оператор do-while:
х = new Array();
i = 0;
do {
num = window.prompt ("Введите число");
i f (num!="="){
num = parseFloat(num);
x[i] = num;
Объектная модель JavaScript
267
while(num!="=")
Здесь встроенная функция parseFloat () преобразует введенное текстовое значение
в число с плавающей запятой, которое затем присваивается элементу массива х.
После запуска сценария появляется диалог (Рис. 10.1) для ввода числа. Введите число
с клавиатуры и щелкните на кнопке ОК. Первое введенное число будет присвоено элементу
массива х[0]. Последует запрос на ввод следующего числа и присвоение его элементу
х[1] итак далее, пока вы не введете символ «=». Если после ввода символа равенства
щелкнуть на кнопке ОК или нажать Enter, формирование массива завершится.
Рис. 10.1. Диалог запроса пользователю
Дополним теперь сценарий вычислением суммы элементов массива. Используем для
этого оператор цикла for, в котором индекс будет пробегать значения от нуля
до х. length-1. Приведем листинг всего HTML-документа:
<HTML>
<HEAD>
<Т1ТЬЕ>Ввод и суммирование чисел</Т1ТЬЕ>
</HEAD>
<BODY>
<Н2>Ввод и суммирование элементов массива</Н2>
<SCRIPT language="JavaScript">
x=new Array();
i=0;
do {
num = window.prompt("Введите число");
if (num!="="){
num = parseFloat(num);
x[i]=num; i++;
}
}
while (num!="=");
sum = 0;
for (i=0; i<x.length; i++) {
sum +=x[i];
}
document.write ("Сумма элементов массива равна: "+sum);
</SCRIPT>
</BODY>
</HTML>
268
ГЛАВА 1Q
Значение суммы элементов массива будет выводиться на экран после ввода символа «=
и нажатия Enter (или кнопки ОК). Если в диалоге запроса вместо числа был введен ка-
кой-либо текст, то на экране после ввода «=» появится значение NaN.
Методы массивов
Поскольку массивы являются одновременно объектами, для них имеются несколько ме*
тодов, которые поддерживаются в Netscape 3.0 и в последних версиях Internet Explorer:
✓ Array. j oin() - преобразование всех элементов массива к строковому типу и по-
следующая конкатенация элементов;
✓ Array. reverse () - обращение порядка расположения элементов в массиве;
✓ Array. sort () - сортировка элементов массива.
Проиллюстрируем действие этих методов на примерах. Допустим, имеется массив, соз-
данный конструктором:
xar = new Array(11,12,13,14);
В случае преобразования к текстовому типу (метод Array, join) выполнение
инструкции
jar = xar.joinO;
приведет к созданию строки "11,12,13,14". В круглых скобках при обращении к мето-
ду задается разделитель между элементами массива, например,
jar = xar.join("+");
будет отвечать преобразованию к строке "11+12+13+14". Полученные таким образом
строки можно обратно преобразовать к элементам массива, если воспользоваться мето-
дом разбиения строки String. split ().
Обращение порядка элементов в массиве задается инструкцией вида:
xar.reverse() ;
При этом получаем массив с элементами: хаг[0]=14, хаг[1]=13, хаг[0]=12,
хаг[0]=11. Заметим, что метод Array.reverse()не создает нового массива,
а только переставляет местами элементы в существующем массиве. Последовательное
выполнение инструкций:
xar = new Array(11,12,13,14);
xar.reverse();
jar = xar.joinO ;
приведет к тому, что значением переменной j аг будет строка "14,13,12,11".
Объектная модель JavaScript 269
Сортировка элементов массива выполняется с помощью метода Array, sort (). Эле-
менты массива размещаются согласно алфавитному порядку составляющих символов.
Приведем следующий пример:
<SCRIPT language="JavaScript">
xar = new Array("Peter","Alice",2,"апрель",
"Brian",3, "Владимир");
xar.sort();
jar = xar.join;
document.wri te(j ar) ;
</SCRIPT>
В результате исполнения этого сценария на экран будет выведен текст:
" 2,3 , Alice, Brian, Peter, Владимир, апрель". Цифры размещаются впере-
ди буквенных символов, прописные буквы - перед строчными буквами, латинские
буквы - перед кириллицей. Так же, как и в случае обращения массива методом
Array. reverse (), при сортировке методом Array, sort () не создается новый
массив, а лишь меняются местами элементы исходного массива.
Многомерные массивы
Поскольку в JavaScript элементом массива может быть значение любого типа, в том чис-
ле и объект, можно в качестве элемента взять другой массив. Таким образом, многомер-
ный массив представляется как массив в массиве. Для доступа к элементам двумерного
массива нужно использовать дважды оператор [ ], например, xar [ i ] [ j ] представляет
собой j -й элемент одномерного массива, который вложен в элемент i одномерного мас-
сива хаг[].
В качестве примера рассмотрим формирование двумерной матрицы 3x3, вывод ее на
экран и нахождение суммы ее диагональных элементов (Рис. 10.2).
Рис. 10.2. Пример двумерной матрицы
270
ГЛАВА
<HTML>
<HEAD>
<TITLE>Matrix</TITLE>
</HEAD>
<B0DY>
<Н2>Построение двумерной матрицы ЗхЗ</Н2>
<SCRIPT language="JavaScript">
var mnum = new ArrayO; //Создание объекта Array
for (i=0; i<3; i++) { //Цикл по строкам
mnum[i]= new Array();//Создание массива - элементов
столбцов
for (j=0; j<3; j++) //Цикл по столбцам
mnum[i] [j]=3*i+j+l; //Задание значений элементов матрицы
}
diag=0;
for (i=0; i<3; i++){ //Вывод элементов матрицы на экран
for (j=0; j<3; j++)
document.write(mnum[i][j]+" ");
document.write("<br>");
diag+=mnum[i][i];//Суммирование диагональных элементов
}
document.write("Сумма диагональных элементов равна:
"+diag);
</SCRIPT>
</BODY>
</HTML>
Обратите внимание, как определяется многомерный массив с помощью вложенных цик-
лов и как выполняется обращение к элементам массива. Подобным образом можно
сформировать массив любой размерности.
Строки
В предыдущих разделах вам уже неоднократно встречались строки. Рассмотрим более
детально работу со строками как с объектами.
Создание объекта String
Вообще говоря, существуют два способа задания строки, которым отвечают следующие
две возможные инструкции:
text = "Это текст реферата";
text = new String("Это текст реферата");
То есть переменной (в данном случае text) можно просто присвоить текстовое значе-
ние, а можно создать объект типа String, пользуясь формальным синтаксисом
Объектная модель JavaScript 271
JavaScript. Как видим из второй записи, объект создается оператором new аналогично
типам Obj есt или Array.
Для создания строки в JavaScript можно пользоваться любым из приведенных выше спо-
собов: в обоих случаях это будет один и тот же объект.
Операции со строками
Конкатенация
Вам уже известна операция конкатенации, выполняемая с помощью оператора «+».
Запишем пример этой операции в случае нескольких строковых переменных. Пусть тре-
буется вывести на экран строку: «крака-крака-кракатау». Выполним это с помощью
строковых переменных:
<SCRIPT LANGUAGE = "JavaScript">
xl = "крака";
х2 = х1+"тау";
Х1 +=
xl += х1+х2;
document.write (xl) ;
</SCRIPT>
В приведенном примере создается строковый объект xl, значение которого используется
при создании другого объекта х2. В последующих операциях применяется оператор +=,
позволяющий добавлять текст к содержимому уже созданного объекта. Так, к содержимому
xl добавляется дефис «-», а затем к полученному значению xl добавляется то же значе-
ние xl и значение объекта х2. Полученный результат присваивается объекту xl и выво-
дится на экран.
% Если в операции конкатенации один из операндов является тек-
% стом, а второй - числом, то JavaScript автоматически преобра-
% зует число в текст и объединяет его со значением текстового
| операнда. Например, выражение “проба”+3 будет иметь значени-
% ем “пробаЗ”.
Возможен еще один способ выполнения конкатенации - это применение метода
concat (), предусмотренного для строковых объектов. Если вы хотите объединить
строку si со строкой s2, то можете для этого ввести в сценарий выражение
si. concat (s2). К примеру, инструкции
point = "Tambov"+3;
region = " Semashko";
adr = point.concat(region);
document.write(adr);
будут выводить на экран объединенную строку «Tambov3 Semashko».
272
ГЛАВА 10
Определение длины строки
Часто при работе со строковыми объектами приходится определять длину строки. Эта
можно сделать с помощью свойства length объекта типа String. Для использования
этого свойства в сценарии нужно, как обычно, записать имя объекта и после него через
точку - свойство length. Например, при выполнении операторов
prognoz="Сегодня снег с дождем";
size=prognoz.length;
переменной size будет присвоено значение длины строки prognoz, то есть число 21.
При подсчете длины строки учитываются пробелы.
Свойство х. length (где х - имя строки) имеет числовой тип данных, и поэтому оно
может использоваться в арифметических выражениях. Например, согласно инструкциям
point="Tambov"+3;
document.write (point.length+100);
на экран будет выведено число 107. Первая инструкция определяет строку point,
имеющую значение Tambov3, а при выполнении второй инструкции значение length
данной строки (то есть 7) увеличивается на 10 0 и выводится на экран.
Изменение регистра символов
Чтобы изменить регистр символов текста, можно воспользоваться одним из следующих
методов:
✓ t©Uppercase () - преобразование всех букв текста в прописные буквы;
✓ toLowerCase () - преобразование всех букв текста в строчные буквы.
В круглых скобках указывается имя строковой переменной, для которой выполня-
ется преобразование символов. Например, оператор
point.toUpperCase() ;
в случае, когда строка point имеет определенное ранее значение Tambov3, приведет
к отображению этой строки в виде TAMBOV3. Аналогично записывается и оператор пре-
образования символов в строчные.
Обратите внимание на отличия в синтаксисе операторов опреде-
ления длины строки и преобразования регистра. Поскольку length
является свойством, оператор записывается без скобок. В то же
время для методов toUpperCase() и toLowerCase () пустые
Объектная модель JavaScript 273
—--------w-------------------------------------------------------------
Извлечение части строки
Для строковых объектов в JavaScript предусмотрен метод substring (m,n), который
возвращает часть значения строки. В качестве параметров этого метода указываются:
✓ m - номер символа в исходной строке, с которого начинается извлекаемый фрагмент;
✓ п - номер символа исходной строки, который следует за последним символом
фрагмента.
Нумерация символов начинается с нуля, то есть первый символ исходной строки
имеет номер 0. Рассмотрим применение метода substring()K строке s, опреде-
ляемой значением:
s = "Регулятор ритма";
Оператор s.substring(0,2)будет возвращать значение «Ре», оператор
s. substring (4,9) - значение «лятор», а оператор s . substring (10,14) -
значение «ритм».
Один символ строки можно извлечь с помощью метода вида substring (N,N+1),
где N - номер символа. Однако проще пользоваться специальным методом
char At (N). В скобках необходимо указать номер N нужного символа в строке (нуме-
рация начинается с 0). Например, метод
s.charAt(2);
д ля строкового объекта s, определенного выше, возвращает значение «г».
Поиск текста
Весьма полезными методами для строковых объектов являются методы поиска
indexOf () и lastlndexOf (). Пользуясь этими методами, можно найти номер пози-
ции (индекс) какого-либо символа или расположение фрагмента текста в строке. Запись
метода indexOf () имеет следующий формат:
indexOf("fragment",n)
где первый параметр отвечает искомому фрагменту текста, а второй - номеру позиции,
с которой начинается поиск. Аналогично записывается и lastlndexOf (). Разница
между функциями indexOf () и lastlndexOf () заключается в том, что indexOf ()
возвращает индекс первого найденного фрагмента, a lastlndexOf () - индекс по-
следнего найденного фрагмента. Для обеих функций индекс фрагмента определяется как
номер позиции первого символа в найденном фрагменте.
274
ГЛАВА 10
В случае, когда просмотр ведется с начала строки, второй па-
S' раметр в методах indexofO и lastlndexOf() можно не ука- >•
<; зывать, То есть можно использовать обращения вида /1 '
indexOf ("text") или las tlndexOf ("text"). Метод indexofO £
< с одним параметром дает me же результаты, что и метод ушш** л
S searchO, также предусмотренный для выполнения поиска. <
' л .. . ч Ч X Z4 х у - х х . чх х ч s . s S'
Рассмотрим на примерах применение методов indexOf () и lastlndexOf (). Пусть
в строке s, имеющей значение «Регулятор ритма», нужно найти первую букву «р».
Для этого используем функцию
s.indexOf("р");
которая возвращает индекс первого найденного символа «р». В данном случае это будет
значение 8 (нумерация позиций начинается с 0). Первая прописная буква «Р» в строке
s не учитывается, поскольку имеет значение регистр символа, заданного в качестве па-
раметра метода. Третья буква «р» в строке s также не учитывается, поскольку
indexOf () возвращает значение номера позиции для первого найденного символа.
Чтобы найти третью «р», нужно сместить интервал поиска, задав метод в виде
s. indexOf ("р", 9). Отметим, что, изменяя условия поиска, можно найти все искомые
фрагменты.
Различие между функциями indexOf и lastlndexOf проще всего увидеть на приме-
ре той же строки s, если определить переменную
х = s.lastlndexOf("р") ;
Переменной х будет присвоено значение 10, то есть индекс последней буквы «р».
Приведем другие примеры поиска фрагментов текста для строки «Регулятор ритма»:
✓ s. indexOf (" егу") - возвращает 1;
✓ s. indexOf ("щ") - возвращает -1 (это значение возвращается всегда, когда ука-
занный фрагмент отсутствует в исходной строке);
✓ s. indexOf ("per") - возвращает -1 (указанный фрагмент при учете регистра от-
сутствует);
✓ s. indexOf ("р") - возвращает 9;
✓ s. lastlndexOf (" т") - возвращает 12;
✓ s. lastlndexOf ("ля") - возвращает значение 4, то есть такое же значение, что и
функция s . indexOf ("ля").
Пример. Определение количества вхождений символа в текст
Функции поиска, рассмотренные в предыдущем пункте, можно использовать для опре-
деления количества определенных символов в строковом объекте. Приведем листинг
Объектная модель JavaScript 275
Web-документа, в котором определяется количество букв, обозначенных переменной s,
в строке text:
<HTML>
<HEAD>
<Т1ТЬЕ>0пределение количества символов</Т1ТЬЕ>
</HEAD>
<BODY>
<SCRIPT language = "JavaScript">
text = "Это страница для лингвистов";
s = "и";
i = 0;
с = 0;
do (
n = text.indexOf(s,i);
C++;
i = n+1;
}
while (n!=-l);
document .write ("Количество символов ,,,+s+"'
равно: "+(с-1),"<br>");
</SCRIPT>
</BODY>
</HTML>
В этом документе определяется число вхождений буквы «и» в текст «Это страница
для лингвистов». Вы можете по своему усмотрению изменить обрабатываемый
текст и искомый символ, если переопределите переменные text и s.
Строковые массивы
Напомним, что в JavaScript массивы, в отличие от других типов данных, необходимо
объявлять перед их использованием. Это касается и массивов, элементами которых яв-
ляются строки. Например, объявление массива и присвоение значений его элементам
может выглядеть следующим образом:
dep = new Array(5);
dep[0]="Rostov" ;
dep[1]="Krasnodar" ;
dep(2]="Salsk";
dep[3]="Volgodonsk";
dep[4]="Taganrog";
Как и строковые объекты, массивы имеют свойство length, которое определяет коли-
чество элементов в массиве. Так оператор
num = dep.length;
присваивает переменной num значение 5.
276
ГЛАВА 1С
К строковым массивам применимы методы, рассмотренные ранее в разделе «Метода
массивов», в том числе, join () (конкатенация элементов массива^
reverse () (обращение порядка элементов), sort () (сортировка элементов). Здесн;
мы рассмотрим еще один метод, а именно, split (), который предназначен ща
разделения строки на составляющие. В качестве параметра в этом методе указывает-
ся символ, по которому производится разделение. Приведем сценарий, иллюстри-
рующий метод разделения:
<SCRIPT languages"JavaScript">
str = "Доломиты";
comp = str.split("о");
for(i=0;i<3;i++){
document.write (comp[i],"<br>");
)
</SCRIPT>
В этом сценарии строка «Доломиты» разделяется на составляющие по символу «о».
Фрагменты строки str после разделения присваиваются элементам массива comp:
comp[0]="Д";
comp[1]="л";
comp[2] ="миты" ;
Обратную операцию объединения элементов массива в строку можно выполнить с по-
мощью уже рассматривавшегося ранее метода j oin ():
str2=comp.join("о") ;
Объединение произойдет с добавлением буквы «о» между компонентами, в результате
чего переменной str2 будет присвоено значение «Доломиты».
Пользовательские объекты
Помимо встроенных объектов, в JavaScript могут существовать объекты, созданные са-
мим программистом, - это пользовательские объекты.
Конструктор объектов
Конструирование объектов в JavaScript начинается с задания функции, которая в даль-
нейшем определит множество подобных объектов или, другими словами, объектный
тип (аналог классов). Все объекты одного объектного типа будут иметь одинаковый
набор свойств, отличающихся значениями.
Функция, создающая и инициализирующая свойства нового объекта, называется конст-
руктором и записывается в виде:
хоЬj = new Obj ect();
Объектная модель JavaScript 277
Здесь xobj - имя создаваемого объекта, new - служебное слово, a Ob j ect - имя объект-
ного типа. В круглых скобках () задается набор конкретных значений аргументов. Однако
можно оставить одни круглые скобки, что будет отвечать созданию «пустого» объекта.
Примером создания объекта является конструктор вида
var currentTime = new Date()
Здесь функция-конструктор Date () порождает объект даты и времени (пустые круглые
скобки задают по умолчанию текущие дату и время).
Другой пример - конструктор вида
var xstr = new String("Товар");
Этот конструктор создает объект-строку (Сравните это выражение с инструкцией
xstr="Товар"; которая присваивает строковое значение переменной xstr и не созда-
ет объектного типа).
Итак, все объекты, которые могут быть созданы с помощью одной функции-
конструктора, образуют объектный тип. Создаваемые таким образом объекты
в JavaScript называются не классами, а типами. Связано это с тем, что язык JavaScript
не содержит классов и операторов для работы с классами, а имеет только концепцию
объектных типов.
Еще одним отличием JavaScript от языков ООП является то, что в JavaScript новый объ-
ект можно создать только с помощью оператора new, в то время как в Java и C++ новые
объекты могут создаваться через существующие объекты.
Удобно, когда создаваемому объектному типу присваивается имя, характеризующее со-
ответствующее множество, например, тип треугольников Triangle, тип окружностей
Circle, тип сотрудников Coworkers и т.д.
Пример. Создание типа прямоугольников
Определим функцию, которая позволит нам оперировать с прямоугольниками, как
с объектами (с таким же успехом мы можем выбрать пример множества окружно-
стей, множества треугольников, множества абонентов в телефонной книге и т.д.).
Определение функции, оперирующей с параметрами прямоугольников, запишем
в следующем виде:
function Rect(w,h){
this.width = w;
this.height = la-
this, square = w*h;
}
Здесь использовано ключевое слово this, обозначающее текущий объект. Новой функ-
ции мы присвоили имя Rect, которое начинается с прописной буквы (чтобы подчерк-
нуть аналогию с классами, которые в Java также пишутся с прописной буквы).
278
ГЛАВА 10
Функция Rect имеет два аргумента, в качестве которых естественно взять ширину
w и высоту h прямоугольника. В теле этой функции с помощью слова this опре-
делены свойства будущих объектов, например, width и height, которым при-
сваиваются значения ширины и высоты прямоугольника. Имеется также вычисляе-
мое свойство square, которое отвечает площади прямоугольника. В дальнейшем
с помощью этого свойства можно легко определять площадь любых прямоугольни-
ков, составляющих тип Rect.
В определении функции можно использовать свойства других объектов, например,
в тело функции можно ввести строку, определяющую длину диагонали прямоугольника:
this.diag = Math.sqrt(w*w+h*h);
Все объекты одного типа имеют одни и те же свойства. В состав свойств могут быть
включены также методы, которые можно применять к каждому объекту типа, но об этом
речь пойдет позже.
Рассмотрим созданный нами класс объектов-прямоугольников Rect и определим воз-
можный экземпляр объекта:
rl= new Rect(3,4);
Количество таких экземпляров (с различными шириной и высотой) теоретически
может быть бесконечно большим. Для каждого экземпляра, обрабатываемого про-
граммой, необходимо задать определение - конструктор объекта. Запишем простой сце-
нарий, в котором определяется суммарная площадь нескольких созданных объектов-
прямоугольников:
<SCRIPT language="JavaScript">
//Определение конструктора функции
//и задание свойств
function Rect(w,h){
this.width=w;
this.height=h;
this.square=w*h;
)
//Конструирование трех объектов-прямоугольников
rl= new Rect(3,4);
r2= new Rect(3,5);
r3= new Rect(1,5);
//Обращение к свойствам объектов
s=rl.square+r2.square+r3.square;
document.write ("Суммарная площадь прямоугольников равна:
", s) ;
</SCRIPT>
В результате работы этого сценария на экран будет выведено сообщение «Суммарная
площадь прямоугольников равна: 32».
Объектная модель JavaScript
279
Конструирование метода
Поскольку метод в JavaScript представляется функцией, конструирование метода - это
фактически задание новой функции. Однако, в отличие от обычного определения функ-
ции, эта функция должна быть связана с объектом, для которого создается метод. Связь
обеспечивается ключевым словом this.
Рассмотрим пример конструирования метода для вычисления длины диагонали прямо-
угольника (объекты-прямоугольники составляют класс Rect). Напомним, что диагональ
прямоугольника равна
д/Си’2 + Л2)
где w и h - ширина и высота прямоугольника соответственно. Значение диагонали бу-
дет возвращать выражение:
Math.sqrt(this.width*this.width + this.height*this.height);
где в качестве ширины и высоты подставлены свойства this. width и this. height,
определенные в функции Rect. Чтобы сконструировать метод, нужно записать всего
несколько строк кода:
function diag() {
return Math.sqrt(this.width*this.width +
this.height*this.height);
)
Из-за того, что в определение функции diag () вошли свойства, относящиеся к объекту
this, эта функция не может использоваться сама по себе для выполнения каких-то вы-
числений. Она должна находиться в сценарии вместе с функцией Rect.
Приведем листинг HTML-документа, содержащего метод diag ():
<HTML>
<HEAD>
<Т1ТЬЕ>Конструирование метода</Т1ТЬЕ>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
//Определение функции diag, которая используется в качестве
//метода для объектов Rect.
function diag() {
return Math.sqrt(this.width*this.width
+ this.height*this.height);
}
//Конструирование объектов Rect и их свойств.
function Rect(w,h){
this.width=w;
this.height=h;
280
ГЛАВА t
this.square=w*h;
this.diag=diag;
}
//Создание экземпляра и вызов для него метода.
var rl= new Rect(3,4);
d = rl.diagO ;
//Проверка результата.
document.write ("Диагональ прямоугольника равна: ",d);
</SCRIPT>
</BODY>
</HTML>
После загрузки этой страницы браузер выведет на экран сообщение «Диагональ прямо-
угольника равна: 5».
Пример. Использование объектов для хранения данных
Создаваемый метод не обязательно должен возвращать значение, он может выполнять
какую-либо последовательность действий. Допустим, вам нужно сконструировать ме-
тод, который выводит на экран определенную информацию. Пусть эта информация ка-
сается квартир, расположенных в многоэтажном доме, причем каждая квартира характе-
ризуется следующими свойствами:
✓ street -улица;
✓ floor -этаж;
✓ room - количество комнат;
✓ square -площадь;
✓ price -цена.
Мы создадим объекты Flat и определим метод, обеспечивающий вывод на экран по-
добной информации. Приведем полный листинг соответствующего документа HTML:
<HTML>
<HEAD>
<Т1ТЬЕ>Список квартире/TITLE>
<SCRIPT LANGUAGE="JavaScript">
//Определение метода вывода информации
function Screenlnf() {
al = this.street + "<br>\n";
a2 = this.floor+''эт. " + "/"+this.room+"K." + "/”
+this.square+"кв.m"+ "<br>\n";
a3 = this.price+" руб."+"<br>\n";
document.write(al,a2,a3,"<br>");
}
//Конструирование объектов Flat и их свойств.
function Flat(str,f1,rm,sq,pr){
Объектная модель JavaScript
281
this.street = str
this.floor = fl;
this.room = rm;
this.square > sq;
this.price = pr;
this.Screenlnf = Screenlnf;
}
</SCRIPT>
</HEAD>
<BODY>
<Н2>Продажа квартире/Н2>
<SCRIPT LANGUAGES"JavaScript">
//Создание объектов.
fl = new Flat("ул.Жукова", 2,3,69,95000);
f2 = new Flat("пр.Нефтяников",12,1,33,70000);
f3 = new Flat("ул.Южная",7,4,82,130000);
fl.Screenlnf();
f2.Screenlnf();
f3.Screenlnf();
</SCRIPT>
</BODY>
</HTML>
Вид этого документа показан на Рис. 10.3. Фактически с помощью объектов мы создали
небольшую таблицу для возможной базы данных.
Рис. 10.3. Отображение данных, содержащихся в объектах
282 ГЛАВА 10
Добавление свойств и методов (объект Prototype)
Отсутствие строго определения класса в JavaScript имеет свою положительную сторону,
а именно: к объектам динамически можно добавлять свойства и методы. Их количество
ничем не ограничивается.
Создавать новые методы и свойства можно с помощью объекта, называемого прототи-
пом (Prototype). Это специальный объект, который связан с конструктором функции
класса. Любое свойство, определенное для прототипа, становится свойством каждого
объекта, принадлежащего классу.
В качестве примера рассмотрим добавление нового метода в класс объектов-цилиндров
Cyl. Пусть это будет функция для вычисления объема цилиндра. Сценарий может вы-
глядеть следующим образом:
<SCRIPT language = "JavaScript">
//Конструирование объектов-цилиндров
function Cyl(r,h){
this.radius = r;
this.height = h;
}
//Определение функции, которая станет методом
//для объектов Cyl
function vol(r,h){
return Math.PI*r*r*h;
)
//Создание нового метода с помощью прототипа
Cyl.prototype.volume = vol;
//Определение экземпляра и проверка работы сценария
//на примере конкретного объекта-цилиндра
у = new Cyl();
document.write ("Объем цилиндра с радиусом основания 2
и высотой 3 равен: "+у.volume(2,3));
</SCRIPT>
Таким образом, инструкция, которая вводит новый метод, имеет следующий формат:
Cyl.prototype.volume = vol;
Эту запись нужно понимать так, что методу volume прототипа объекта Cyl присваи-
вается метод-функция vol. Новый метод добавляется к ранее определенным категориям
класса Cyl (свойствам radius и height). В результате для каждого экземпляра объ-
екта (в данном примере экземпляра у) можно использовать новый метод volume, что и
подтверждает пример.
Мы определили новый метод для класса Cyl. Аналогично можно добавить и свойство.
Например, строкой
Cyl.prototype.pi = Math.PI;
Объектная модель JavaScript
283
определяется свойство, возвращающее число л=3.141592653589793 для объектов Cyl.
Программа для вычисления объема цилиндра при этом несколько видоизменяется:
<SCRIPT language="JavaScript">
function Cyl(r,h){
this.radius=r;
this.height=h;
}
//Добавление свойства pi
Cyl.prototype.pi = Math.PI;
//Определение функции с использованием свойства pi
function vol(r,h){
return this.pi*r*r*h;
}
Cyl.prototype.volume=vol;
y=new Cyl();
document.write ("Объем цилиндра равен: ",y.volume(2,3));
</SCRIPT>
Пример. Создание метода для формирования списка
в документе HTML
Рассмотрим еще один пример добавления нового метода к объекту (в данном случае
к объекту String). Создадим метод, который будет добавлять записи в список HTML-
документа. Формирование списка будет происходить путем заполнения диалоговых
окон запроса (метод prompt ()). Полный листинг выглядит следующим образом:
<HTML>
<HEAD>
<Т1ТЬЕ>Формирование списка</Т1ТЬЕ>
<SCRIPT language = "JavaScript">
//Определение функции, создающей элемент <Ы> в коде HTML
function addlist(){
tagl = "<LI>";
textl = this.toString();
return tagl+textl;
)
//Добавление к строковому объекту метода,
//который преобразует строку в элемент <Ы>
String.prototype.rec = addlist;
</SCRIPT>
</HEAD>
<BODY>
<Н1>Формирование списка</Н1>
<UL>
<SCRIPT language="JavaScript">
284
ГЛАВА 10
/*Непосредственный ввод записей через окно диалога.
Нажатие на кнопку ОК продолжает ввод, а при нажатии
на кнопку Отмена ввод прекращается */
while(х!=null){
х = prompt("Введите элемент списка",
if (х!= null) document .write (x.recO);
}
</SCRIPT>
</UL>
</BODY>
</HTML>
В этом сценарии использован также специальный метод toString (), который не име-
ет аргументов и возвращает объекту значение строки (объект представлен ключевым
словом this).
Пример списка, сформированного с помощью приведенного сценария, показан на
Рис. 10.4. Названия опций списка вводятся через диалоговое окно prompt. Прекра-
щается ввод нажатием на клавишу Esc.
Рис. 10.4. Формирование списка с помощью объекта prototype
Функции как объекты
Каждый тип данных в JavaScript имеет оболочку в виде объектного типа. Это относится
не только к рассмотренным выше массивам и строкам, но и к функциям. Вспомним, что
новый объектный тип вообще создается с помощью функции-конструктора:
х = new Object();
Объектная модель JavaScript
285
Подобно другим типам, имеющим объектную оболочку, функциям приписываются
свойства и методы. Именно на них мы остановимся в настоящем разделе.
Свойства функции
Объект некоторой функции my_f unc имеет следующие два свойства:
✓ my_func. arguments - это свойство возвращает массив значений аргументов,
которые указаны в текущем вызове функции;
✓ my_func . caller - описывает функцию, которая вызвала данную функцию.
Поскольку свойству arguments соответствует массив значений аргументов, количест-
во аргументов функции можно определить как длину этого массива:
my_func.arguments.length.
; Отметим, что свойства arguments и caller принимают опре-
деленные значения только в ходе выполнения функции. Если по- /5
пытаться вывести эти свойства извне, им будут присвоены
значения null (см. раздел «Объект null» данной главы).
Поясним свойство arguments на примере функции вычисления площади прямо-
угольника:
function square(а,Ь) {
var ss=square.arguments[0]*square.arguments[1];
return ss
}
В теле этой функции обращение к аргументам выполняется не через их обозначения а и
Ь, а как к элементам массива arguments [ ]. Первый аргумент содержится в элементе
arguments [ 0 ], а второй аргумент - в arguments [ 1 ].
Локальные и глобальные переменные
В JavaScript предусмотрены два вида переменных: локальные и глобальные. Локальные
переменные используются только внутри данной функции. Глобальные могут использо-
ваться в любом месте программы. При объявлении переменных руководствуются сле-
дующими правилами:
✓ Для объявления локальной переменной внутри функции используется служебное
слово var.
✓ Для объявления локальной переменной вне функции используется простое при-
сваивание.
✓ Глобальные переменные объявляются по возможности в начале документа, чтобы их
можно было использовать в любом месте программы. Глобальная переменная вне
функции объявляется с помощью служебного слова var.
286 ГЛАВА 1:
Использование массива аргументов
Приведем пример, поясняющий свойства функции и смысл локальных переменных
В следующем документе с помощью функции vol () вычисляется объем тела (парал-
лелепипеда), причем vol () вызывает в процессе вычислений уже рассмотрение
функцию square ():
<HTML>
<HEAD>
<Т1ТЬЕ>0бъем тела</Т1ТЬЕ>
<SCRIPT language="JavaScript">
function square(a,b) {
//Сообщение о функции, вызвавшей square()
alert (square.caller);
var ss=square.arguments[0]*square.arguments[ 1 ] ;
return ss
)
function vol(a,b,c) {
var s=square(a,b);
var w=s * vol. arguments [2 ] ;
return w;
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
document.write("Объем параллелепипеда co сторонами 5,2,3
равен: "+vol(5,2,3));
</SCRIPT>
</BODY>
</HTML>
В функциях square () и vol () доступ к аргументам обеспечивается свойством
arguments, а в ходе выполнения square () определяется свойство caller, и на экран
выводится сообщение с описанием функции, которая вызвала данную функцию (Рис. 10.5).
Рис. 10.5. Пример использования свойства caller
Объектная модель JavaScript 287
Свойство arguments может оказаться полезным, когда имена аргументов не определе-
ны или меняются в ходе выполнения сценария. Существование массива arguments
также может быть использовано для проверки правильного количества аргументов.
Допустим, функция f f должна исполняться, когда количество аргументов составляет 4,
в противном случае она должна возвращать значение null. Такая проверка выполняется
с помощью простого кода:
function ff (a,b,c) {
if(ff.arguments.length!=4){
alert("В вызове функции содержится " +
ff.arguments.length
+ " аргумента, однако количество аргументов должно быть
4") ;
return null;
}
//Далее следует код, исполняемый в случае правильного
//количества аргументов
Специальные значения, функции, объекты
В завершение данной главы рассмотрим специальные значения и объекты, которые пре-
дусмотрены для случаев, когда интерпретатор не в состоянии обработать некоторые
данные. Имеются в виду случаи, связанные, в основном, с ошибками программиста; де-
лением на нуль, использованием в выражении неопределенных переменных, а также
чисел с плавающей запятой, значение которых превосходит максимально допустимое
в машинном представлении и т.д.
Infinity и NaN
Если при вычислениях значение числа с плавающей запятой выходит за границы, опре-
деленные форматом представления числа в компьютере, интерпретатор JavaScript выве-
дет на экран слово Infinity (в случае очень малых отрицательных чисел будет выве-
дено - Infinity). Это слово можно считать специальным числовым значением
в JavaScript.
Другим частым случаем при математических операциях является деление на нуль.
В этом случае результат вычисления выражения не определен и трактуется как ошиб-
ка. Выражению присваивается специальное значение Not-a-Number (сокращенно NaN).
Значение NaN нельзя сравнивать с другими значениями, кроме самого себя. Чтобы отра-
зить специфическое поведение NaN, в JavaScript введена специальная функция
isNaN (). Правда, эта функция не на всех платформах и браузерах работает корректно.
ГЛАВА 10
288
Объект null
Как отмечалось, null - это специальное значение, которое обозначает отсутствие ка-
кого-либо значения. В синтаксисе JavaScript null относится к типу объекта. Когда
в коде вам встречается объект null, вы можете считать, что он не содержит ни числа,
ни строки, ни логического значения. Однако, null - это не нуль.
Значение undefined
Это значение возвращается, когда в выражении использована несуществующая величи-
на, например, переменная, для которой не определено значение, или несуществующее
свойство объекта. Значение undefined может быть также результатом синтаксической
ошибки, например, пропущенного символа, в результате чего интерпретатор не может
правильно идентифицировать переменные, свойства, функции.
Нужно отличать undefined от значения null, хотя различие между ними является
весьма тонким (см. следующий пункт)
Различие между undefined и null.
Оператор typeoff
Если вы будете сравнивать undefined и null между собой, то результатом сравнения
окажется значение true. Например, выражение
extrem.name == null
будет возвращать значение true, если свойства паше у объекта extrem не существует
(чтобы сценарий вообще исполнялся, extrem предварительно должен быть объявлен
как объект). Значение true также будет возвращать результат сравнения:
extrem == null
если переменная extrem равна null.
Узнать, имеет ли переменная значение undefined или null, проще всего с помощью
оператора typeoff.
Оператор typeof - это унарный оператор JavaScript с весьма
необычной записью: одно ключевое слово без каких-либо специ-
альных символов. Результатом действия этого оператора на
операнд, который располагается следом за typeof, является
строка, указывающая на тип операнда (“number”, “string”,
“boolean”, ’’object", “function”, “undefined”).
Объектная модель JavaScript 289
Если значение переменной х1 не определено, то оператор
xl_type = typeof xl; //Возврат значения ” undefined”
присвоит переменной xl_type значение undefined. В то же время для значения
null оператор typeof приведет к значению «object»:
У = typeof null; //Возврат значения «object»
Приведенное в данном разделе описание специальных значений может вам пригодиться
на стадии отладки сценариев JavaScript.
ГЛАВА 11
Обработка событий
Очень важное место в программировании Web-страниц занимают события. Собын-
генерируются в результате действий пользователя (щелчков мыши, нажатия клавиш
ит.д.), а также изменений состояния окна либо документа (загрузка документа .
изображений, появление ошибки и проч.). Например, если пользователь щелкает кнсг,-
кой мыши на определенном элементе, наступает событие Click. Если же указатег:
мыши пересекает какую-либо ссылку, возникает событие MouseOver. При загруз-.
документа в окно браузера происходит событие Load.
Разрабатывая динамические Web-страницы, вы можете составить сценарий таким обра-
зом, что страница будет реагировать на некоторые из событий. Это делается с помощь:'
специальных программ, которые называются обработчиками событий. Программы об-
работчиков событий представляют собой фрагменты кода и обычно оформляются в впз.
функций. Обработчик событий, написанный на JavaScript, вводится в сценарий крайи.
просто - буквально одной строкой.
Напомним, что программный код HTML исполняется интерпретатором (браузеров
в порядке следования инструкций. Однако этот порядок может быть нарушен при воз-
никновении событий.
События и обработчики событий
Допустим, вы хотите, чтобы при щелчке на определенном абзаце документа появлялось
сообщение с указанием темы абзаца. Для этого в тег абзаца <Р> нужно вставить событие
onclick:
<Р onclick="alert('Аннотация'); " >
В данном примере с элементом Р связано событие onclick, которое обрабатывается
функцией alert (). Эта функция является обработчиком события.
Обратите внимание, что запись обработчика события в теге <Р> выглядит аналогично
заданию атрибута стиля (см. раздел «Определение встроенного стиля (атрибут style)»
главы 3). Действительно, как и в случае встроенного стиля, атрибуту-событию присваи-
вается определенное выражение в двойных кавычках. В данном случае это выражение
представляет собой функцию - обработчик события.
Вообще говоря, обработчики событий могут размещаться в различных частях документа:
✓ В HTML-тегах в виде атрибутов. Обработчики событий в этих случаях дополняют
возможности тегов;
✓ В сценарии, между тегами <SCRIPT> и </SCRIPT>. При этом обработчики собы-
тий входят в состав инструкций JavaScript;
Обработка событий 291
✓ В теге <SCRIPT>, что предусмотрено в Internet Explorer (но не в Netscape). В этом
случае обработчик событий используется совместно с атрибутами for и event
(см. раздел ^Атрибуты for и event» настоящей главы).
Далее рассмотрим модели событий и перечислим события, которые могут использовать-
ся разработчиком при создании динамических страниц.
Всплывание событий в DHTML
Каждый раз, когда вы делаете щелчок мышью или перемещаете мышь, меняете размеры
окна или загружаете страницу, операционная система генерирует сообщения. Эти сообще-
ния в рассматриваемых нами случаях помещаются в очередь сообщений браузера. Из оче-
реди сообщение доставляется соответствующему элементу, например, кнопке или гипер-
ссылке, и элемент генерирует событие. В динамическом HTML (Dynamic HTML или со-
кращенно DHTML) все элементы могут генерировать события, даже теги заголовков.
В основу модели событий в DHTML положено так называемое всплывание событий.
Событие, сгенерированное одним элементом, передается вверх по иерархической струк-
туре контейнеров, пока не достигнет уровня самого документа. Благодаря эффекту
всплывания событие можно обрабатывать на каждом уровне иерархии контейнеров.
Приведем пример, демонстрирующий всплывание событий в браузере Internet Explorer:
<HTML>
<HEAD>
<Т1ТЬЕ>Всплывание событий</Т1ТЬЕ>
</HEAD>
<BODY onclick="alert('Элемент BODY');">
<H2>Демонстрация всплывания событий</Н2>
BODY
<DIV onclick="alert('Внешний блок DIV');"
style="border-style:solid; width=330; height=150">
DIV
<DIV onclick="alert('Внутренний блок DIV');"
style="border-style:solid; width=200; height=100">
DIV<BR>
<SPAN onclick="alert('Элемент SPAN - низший уровень');"
style="border-style:solid; width=80; height=50">
SPAN
</SPAN>
</DIV>
</DIV>
</BODY>
</HTML>
Если вы щелкнете во внутреннем прямоугольнике (элемент SPAN), появится диалог,
показанный на Рис. 11.1. Последующие нажатия на кнопку ОК в диалогах приведут
к следующей цепочке сообщений: «Внутренний блок DIV» - «Внешний блок DIV» -
292
ГЛАВА '
«Элемент BODY». Эти сообщения отражают всплывание события onclick по иер:
хической структуре контейнеров.
Рис. 11.1. Пример, иллюстрирующий всплывание событий
Стандартные события DHTML
Каждое событие имеет имя, указывающее на соответствующее действие пользователя
Так, при щелчке кнопкой мыши на каком-либо элементе возникает событие click
а при нажатии и отпускании какой-либо клавиши - событие keypress. К именам собы-
тий принято добавлять префикс on, например, onClick и onKeyPress.
Имена событий в коде HTML обычно пишутся с прописной буквы
(onclick, onMouseDown и т.д.). Однако в языке JavaScript, который
£ чувствителен к регистру символов, нужно пользоваться строчны-
;> ми буквами. Чтобы события единообразно обозначались как в тегах
;< HTML, так и в сценариях JavaScript, мы будем использовать только
строчные буквы (onclick, onmousedown и т.д.).
Рассмотрим подробнее стандартные события DHTML (хотя это не вполне события
Dynamic HTML, поскольку некоторые из них поддерживаются обычными элементами
HTML и старыми версиями браузеров).
События мыши
Перечисляемые ниже события мыши поддерживаются большинством браузеров.
✓ onmousedown - событие, возникающее при нажатии любой из кнопок мыши;
✓ onmouseup - это событие противоположно onmousedown и возникает при отпус-
кании нажатой кнопки мыши;
Обработка событий
293
✓ onclick - событие, которое может быть использовано для исполнения функций,
когда пользователь щелкает мышью на каком-либо элементе. Это событие возникает
после генерации событий onmousedown и onmouseup. В Internet Explorer 4.0 собы-
тие onclick поддерживается практически для всех элементов, в то время как в Net-
scape - лишь для ограниченного числа элементов (гиперссылки, карты ссылок и др.);
✓ ondblclick - событие, происходящее при двойном щелчке мыши на элементе.
Двойной щелчок отвечает случаю, когда пользователь два раза нажимает левую
кнопку мыши в течение промежутка времени, определенного системой. Как и в слу-
чае onclick, событие двойного щелчка поддерживается почти для всех элементов
в Internet Explorer 4.0 и только для избранных - в Netscape;
✓ onmousemove - это событие отвечает произвольному перемещению указателя
мыши по документу (событие непрерывно генерируется при перемещении). Обра-
ботчики события onmousemove могут быть записаны почти для любого элемента
(в Internet Explorer 4.0 и Netscape 4.0);
✓ onmous eover - событие, возникающее при наведении на область данного элемента;
✓ onmouseout - событие, противоположное onmouseover. Оно отвечает удалению
указателя мыши из области данного элемента;
✓ onselectstart - событие, которое возникает каждый раз, когда пользователь начина-
ет выделять некоторую часть текста, являющегося содержимым данного элемента;
✓ onselect - событие, которое возникает следом за onselectstart во время
выделения текста, Оно отвечает расширению или сужению области выделения;
✓ ondragstart - событие, которое генерируется, когда пользователь наводит указа-
тель мыши на элемент (изображение, ссылку и др.), нажимает кнопку мыши и пыта-
ется перетащить элемент в другую часть документа.
Когда пользователь манипулирует мышью, существует некоторая очередность событий.
Первым наступает событие onmouseover, соответствующее наведению указателя мы-
ши на какой-либо элемент. За ним следует событие onmousemove, которое непрерывно
генерируется по мере перемещения указателя над элементом. Следующим событием мо-
жет быть нажатие кнопки мыши onmousedown и затем - отпускание кнопки onmouseup.
Можно записать следующую последовательность событий мыши, которые обычно возника-
ют при действиях пользователя: onmouseover - onmousemove - onmousedown -
onmouseup - onclick - ondblclick - onmouseout. Завершает последователь-
ность событий удаление указателя мыши с элемента onmouseout.
События клавиатуры
События, связанные с клавиатурой, позволяют определять момент нажатия или отпуска-
ния клавиши, и какая именно клавиша была нажата. Эти события поддерживаются
в Internet Explorer и стали поддерживаться в Netscape 4.0.
✓ onkeydown - событие, возникающее при нажатии клавиши. Код нажатой клавиши
возвращается свойством keyCode объекта event. Если использовать и другие
свойства этого объекта (altKey, ctrlKey и shif tKey), можно определять лю-
бую комбинацию клавиш, нажатых пользователем;
294 ГЛАВА 11
✓ onkeyup - событие, возникающее при отпускании предварительно нажатой кла-
виши. Данное событие возвращает то же значение свойства keyCode объекта
event, что и событие onkeydown;
✓ onkeypress - событие, которое возникает при нажатии и отпускании любой кла-
виши ANSI. Код клавиши возвращается свойством keyCode. Событие
onkeypress, как и предыдущие два события, чувствительно к регистру клавиши;
✓ onhelp - событие, генерируемое, когда пользователь нажимает клавишу F1, за-
прашивая справку. Действием по умолчанию для этого события является отображе-
ние встроенного файла справки. Это действие может быть отменено, если необходи-
мо отобразить, например, индивидуальный файл справки.
События объектов JavaScript
Перечень событий, возможных в интерфейсе Web-документа, будет неполным, если не
указать события для объектов JavaScript, поддерживаемых на стороне клиента.
События фокуса
К событиям объектов JavaScript относятся, прежде всего, события фокуса.
✓ onfocus - событие, которое возникает при активизации объекта щелчком мыши
или с помощью клавиатуры. Это событие поддерживается для объектов button,
checkbox, fileupload, radio, reset, select, submit, text, textarea и
window;
✓ onblur - событие для объекта, который потерял фокус. Кроме того, это событие
возникает при активизации другого приложения, окна или фрейма. Событие onblur
содержится в тех же объектах, что и событие onfocus.
В каждый момент времени активным может быть только один элемент, то есть событие
onfocus может возникать только в одном элементе.
<? Фокус могут получать только интерактивные элементы ввода $
Й (ссылки, кнопки, текстовые поля, списки и т.д.) и тело у
/ документа. Поэтому если вы щелкнете, например, на загонов- k
ке, событие onfocus получит сам документ, а не заголовок. f
События загрузки и выгрузки
В объектных моделях браузеров Internet Explorer и Netscape для отслеживания процессов
загрузки и выгрузки документа предусмотрены соответствующие события.
✓ onload - наступает, когда браузером проанализирован весь документ и загружены
все элементы;
Обработка событий
295
✓ onreadystatechange - наступает, когда документ или внедренный объект пере-
ходит в состояние завершения загрузки. Данное событие поддерживается только
в Internet Explorer, начиная с версии 4.0. Если требуется согласовать документ
с Netscape, вместо onreadystatechange приходится довольствоваться событием
onload;
✓ onunload - возникает при выгрузке документа;
✓ onbeforeunload - это событие предшествует событию onunload и дает
возможность проверить, действительно ли пользователь хочет покинуть документ.
Событие сопровождается появлением на экране запроса на подтверждение выхода
с текущей страницы.
Перечисленные выше события загрузки и выгрузки применяются к объектам window и
frame.
Способы связывания событий
Под связыванием событий понимается установление связи между функцией-
обработчиком события и объектом, к которому относится функция. Рассмотрим воз-
можные способы связывания, предусмотренные в JavaScript.
Введение событий в качестве атрибутов
Все стандартные события, перечисленные выше, поддерживаются в HTML и могут
быть вставлены в качестве атрибутов в элементы документа. Использование событий
как атрибутов позволяет устанавливать непосредственную связь между элементом
и его поведением.
Для примера установим связь между ссылкой в документе и событием onmouseover
(наведением указателя мыши на ссылку). Определим обработчик события, который при
наведении на ссылку будет выводить сообщение «Вы указали на ссылку»:
<А HREF="http://testhtm.сот/"
onmouseover="alert(1 Вы указали на ссылку');">
С этой ссылкой связано событие</А>
Отметим, что в этой записи текст сообщения выделен одинарными кавычками, посколь-
ку сам обработчик события заключен в двойные кавычки. Можно записывать кавычки
и наоборот: снаружи одинарные, а внутри - двойные.
Как отмечалось, события могут быть связаны с любым элементом документа HTML.
Проверим, что это действительно так на примере прохождения указателя через область
заголовка:
296
ГЛАВА 1
<HTML>
<HEAD>
<Т1ТЬЕ>Пример атрибутов событий</Т1ТЬЕ>
</HEAD>
<BODY>
<Н1 onmouseover="alert('Вы указали на заголовок');"
onmouseout="alert('Вы убрали указатель с заголовка
Это заголовок</Н1>
</BODY>
</HTML>
При наведении указателя мыши на заголовок появляется соответствующее сообщение ос
этом. Если в окне сообщения нажать кнопку ОК, на экране появится следующее сообще-
ние о том, что указатель убран с заголовка.
В обработчике событий можно использовать несколько операторов, разделив их точкой
с запятой, например:
cINPUT type=button value="Нажми меня"
onclick="alert('Примите поздравление’);
document.write('С днем рождения, Пух!')">
Кнопка сначала выведет окно сообщения, а затем появится текст в окне документа.
Таким образом, события легко связываются с элементами HTML посредством атрибутов.
Но такая связь имеет один недостаток: список связываемых событий ограничен набором
стандартных событий HTML. Если в страницу внедрен произвольный объект, то не все
его события могут быть реализованы через атрибуты.
Обработчики событий как функции
В примерах предыдущего пункта внутри тегов HTML использованы обработчики собы-
тий alert (), document .write () (вы уже знаете, что они представляют собой мето-
ды объектов). Обработчики оказываются доступными не из JavaScript-сценариев (как
полагается элементам JavaScript), а из тегов HTML.
Однако несколько операторов в обработчике события можно заменить одной функцией.
Причем использование функции более предпочтительно, поскольку в ней вы можете
задать выполнение более сложных операций, нежели в записи атрибута. Приведем сле-
дующий пример:
<HTML>
<HEAD>
<Т1ТЬЕ>Пример обработчика событий мыши</Т1ТЬЕ>
<SCRIPT>
function price() {
alert("Цена порции $1");
alert("Долго думаете! Цена возросла до $2");
Обработка событий
297
alert("Впрочем, как бы вы быстро ни отвечали, вам при-
дется заплатить $3!");
}
</SCRIPT>
</HEAD>
<BODY>
<Н2>Сделайте заказ</Н2>
<А HREF="minog.html"
onmouseover="price();">Миноги</А>
</BODY>
</HTML>
На Рис. 11.2 показан данный документ, в котором при наведении указателя мыши на
ссылку «Миноги» обработчик вызывает функцию price (). Эта функция содержит
несколько операторов, которые последовательно выводят на экран сообщения, вовле-
кающие пользователя в неизбежный диалог. Обратите внимание, определение функции
обработчика дано в контейнере <HEAD> документа HTML, и этому есть свои причины
(см. раздел «Асинхронность обработчиков событий»).
Рис. 11.2. Пример обработки события onmouseover
Приведем еще один пример функции - обработчика события. Мы показывали несколько
примеров на тему китайского ресторана, однако, еще не позаботились о создании при-
глашения в ресторан. Запишем соответствующую страницу в виде:
<HTML>
<HEAD>
<Т1ТЬЕ>Вход в ресторан</Т1ТЬЕ>
<SCRIPT LANGUAGE="JavaScript">
function hellow() {
greet.value="Добро пожаловать в наш ресторан!";
)
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
298
ГЛАВА 11
<Н1>Китайский ресторан "Янцзы"</Н1>
cINPUT type=text name="greet" size=40>
<BR><BR>
cINPUT type=button value= "Тук-Тук..." onclick="hellow() ">
c/CENTER>
</BODY>
c/HTML>
На этой странице (Рис. 11.3) имеется кнопка, с которой связано событие onclick.
При нажатии на кнопку вызывается функция hellow (), выводящая в поле greet текст
приветствия. Заметим, что атрибуту value текстового поля присваивается значение
через одноименное свойство объекта greet.
Рис. 11.3. Пример обработки события onclick
Динамическое связывание событий в сценарии
Когда обработчик события присутствует в элементе HTML, событие обрабатывается
в безусловном порядке. Если же вам нужно подключать обработчик события в зависи-
мости от выполнения какого-либо условия, то лучше воспользоваться возможностями
сценариев.
Рассмотрим простой пример связывания событий в сценарии. Пусть при щелчке пользо-
вателя на странице документа должно появиться сообщение с приветствием, причем
в зависимости от текущего времени должно меняться содержание приветствия
(до 10 часов - это «Доброе утро!», а после 10 - «Здравствуйте!»). Для этой цели мы ис-
пользуем объект Date и метод getHours (), возвращающий значение часа текущего
времени (см. раздел «Встроенный объект Date» главы 10). Код страницы может выгля-
деть следующим образом:
<HTML>
<HEAD>
<Т1ТЬЕ>Приветствие</Т1ТЬЕ>
</HEAD>
<BODY>
Обработка событий
299
<SCRIPT>
function goodmorn() {
alert("Доброе утро!");
}
function howdoyou() {
alert("Здравствуйте!");
}
now=new Date();
hour=now.getHours();
if(hour<10)
document.onmousedown=goodmorn
else
document.onmousedown=howdoyou;
</SCRIPT>
</BODY>
</HTML>
В этом примере событие onmousedown представлено как свойство объекта
document. Это возможно в объектной модели динамического HTML. Свойство объекта
динамически связывается с определенными функциями непосредственно во время вы-
полнения сценария. Для любого события (свойства) может быть назначен свой указа-
тель функции. Указатель функции назначается путем присвоения имени функции свой-
ству объекта.
Отметим, что при назначении указателя функции нужно
л использовать только имя функции. Круглые скобки и аргументы '?
: не нужны. Если же аргументы в назначении указателя ляЛ. л
i присутствуют, то будет вычислена функция, а свойству будет
» присвоено значение, возвращаемое функцией, но не указатель
i функции. При этом после вычисления, вероятней всего,
последует диагностика ошибки сценария. ;
У •
Поддержка указателей функций характерна для JavaScript. В VBScript указатели функ-
ций не поддерживаются, поэтому VBScript не может динамически генерировать обра-
ботчиков событий.
Асинхронность обработчиков событий
Из сказанного ранее вам известно, что обработчики событий порождают функции. Эти
функции могут быть как частью HTML-кода, так и могут определяться внутри сценария.
Но в любом случае функции обработчиков событий не исполняются немедленно браузе-
ром: их исполнение зависит от действий пользователя или от событий в документе.
Такое поведение обработчиков событий принято называть асинхронным.
Чтобы обработчик был немедленно исполнен после наступления события, соответст-
вующая функция должна быть определена до того, как ее вызвал обработчик. Для этого
300
ГЛАВА 11
функции определяются в теге <HEAD>. Контейнер <HEAD> всегда анализируется до того,
как браузер приступает к телу документа <BODY>.
Возможны ситуации, когда обработчик событий вызывается еще до окончания загрузки
и анализа Web-страницы. Например, пользователь, не дожидаясь окончания загрузки
страницы, может щелкнуть на гиперссылке или элементе формы. Поэтому Web-
страница должна быть спроектирована таким образом, чтобы обработчики не могли ма-
нипулировать с HTML-объектами, которые полностью не проанализированы и еще не
созданы на странице.
; Придерживайтесь простого правила: обработчик событий дол-
\ жен обращаться только к тем объектам, которые определены
до него. Например, кнопки Submit и Reset размещаются в нижней
части формы, что позволяет отправлять форму на сервер по-
еле того, как все элементы формы проанализированы и созданы.
Обработчики событий в теге <SCRIPT>
Как отмечалось ранее, связь событий с элементами HTML посредством атрибутов воз-
можна лишь для ограниченного набора стандартных событий HTML (см. раздел «Введе-
ние событий в качестве атрибутов» данной главы). От этого недостатка свободен более
общий механизм связывания, использующий расширения элемента <SCRIPT> и рабо-
тающий в Internet Explorer.
Атрибуты for и event
Альтернативный механизм связывания событий заключается в использовании атрибутов
for и event в теге сценария <SCRIPT>:
✓ Атрибут for задает имя или идентификатор (ID) элемента, для которого назначается
событие;
✓ Атрибут event указывает событие и набор параметров, которые могут быть пере-
даны событию.
Рассмотрим пример, в котором с помощью for и event выполнено связывание щелчка
мышью (onclick) с элементом документа - заголовком.
<HTML>
<HEAD>
<Т1ТЬЕ>Связывание с помощью атрибутов for и
event</TITLE>
<SCRIPT for="heading" event="onclick"
language="JavaScript">
alert("Вы щелкнули на заголовке");
</SCRIPT>
</HEAD>
Обработка событий
301
<BODY>
<!—Содержимое документа-->
<Н1 id="heading">Щелкните здесь</Н1>
<!—Содержимое документа-->
</BODY>
</HTML>
$ Обратите внимание, что имя события onclick в атрибуте
event набрано строчными буквами. В JavaScript нельзя набирать
имена встроенных событий с использованием верхнего регист-
ра. Что касается значения другого атрибута (for), то оно
« должно быть набрано точно так же, как id. В противном случае
(например, когда id="heading", a for= "Heading") событие об-
рабатываться не будет.
Если браузер не поддерживает связывание событий
в <SCRIPT>
Отметим, что браузер Netscape не поддерживает атрибуты for и event, то есть не за-
мечает эти атрибуты в теге <SCRIPT>. В результате код, записанный внутри тегов
<SCRIPT> и </SCRIPT>, выполняется независимо от наступления события. Чтобы
избежать исполнения обработчика событий как обычного сценария, установим флаг
atrSupport, значение которого будет меняться в браузере, игнорирующем атрибуты
for и event. В зависимости от значения флага будет исполняться (или нет) обработчик
событий. Схема сценариев может быть следующей:
<HTML>
<HEAD>
<Т1ТЬЕ>Проверка поддержки атрибутов for и event</TITLE>
<SCRIPT language="JavaScript">
//Установка начального значения флага
var atrSupport=true;
</SCRIPT>
<SCRIPT for="xxx" event="yyy" language="JavaScript">
//Если браузер анализирует атрибуты for и event,
//данный сценарий исполняться не будет
atrSupport=false;
</SCRIPT>
<SCRIPT for="heading" event="onclick"
language="JavaScript">
//Далее следует код обработчика событий,
//который исполняется, если значение флага true
if(atrSupport){
alert("Вы щелкнули по заголовку");
}
else {
302
ГЛАВА 11
//Если браузер не поддерживает синтаксис событий
//с атрибутами for и event, на экран будет
//выведено сообщение
alert("Данное событие ваш браузер не обрабатывает");
}
</SCRIPT>
</HEAD>
<BODY>
<Н1 id="heading"> Щелкните здесь </Н1>
<!—Содержимое документа-->
</BODY>
</HTML>
Как видим, с помощью атрибутов for и event получается не очень компактная схема
связывания событий, к тому же не реализуемая в Netscape. Однако в рамках этой схемы
можно использовать новые атрибуты JavaScript, которые еще не поддерживаются
в HTML. Еще одно преимущество атрибутов for и event мы рассмотрим в следующем
разделе.
Один обработчик событий для нескольких элементов
Выясним вопрос, как связать обработку одного события с несколькими элементами
страницы или формы, то есть с группой. Это можно сделать с помощью обработчика
событий, который будет определен для всех элементов группы.
Обратимся к примеру, описанному в разделе «Флажки» главы 7 (меню ресторана). Введем
обработчик, который при выборе каждого из пунктов меню будет выводить сообщение
с благодарностью за сделанный вами заказ. Запишем следующий код:
<SCRIPT for="menu" event="onclick()" language="JavaScript">
alert("Спасибо за заказ!");
</SCRIPT>
<FORM>
<Н1>Меню китайского ресторана</М>
<Н2>Сделайте заказ</Ь2>
<Р>
<INPUT type=checkbox name="menu" value="shark"> Акульи плав-
ники
<BR>
<INPUT type=checkbox name="menu" value="fish"> Рыбий желудок
<BR>
<INPUT type=checkbox name="menu" value="bat"> Летучая мышь
<BR>
cINPUT type=checkbox name="menu" value="bamboo"> Ростки бам-
бука
</FORM>
Обработчик события, заданный в сценарии, вызывается при щелчке на любом из
элементов группы с именем «menu».
Обработка событий
303
;< Отметим, что в VBScript подобная разделяемая обработка со-
V бытия была бы невозможна, поскольку в VBScript для запуска об-
> работника необходимо указать индивидуальный идентификатор
элемента, а не имя группы.
Использование объекта event
События клавиатуры и мыши (onkeydown, onkeypress, onmousedown и др.) позво-
ляют зафиксировать факт нажатия клавиши или кнопки мыши. Однако сама по себе эта
информация будет бесполезной, если для событий клавиатуры неизвестно к каким кла-
вишам они относятся, а для событий мыши неизвестно, какой элемент генерировал со-
бытие и какая кнопка мыши была нажата. Эти сведения можно получить только из ана-
лиза свойств объекта event.
Объект event появился в версии JavaScript 1.2 и сам является свойством объекта
window. Свойства объекта event предоставляют доступ к параметрам событий, на-
пример, event. scrElement позволяет идентифицировать элемент, который первым
сгенерировал событие. Чтобы узнать, например, тег элемента, к которому относится по-
следнее событие, достаточно определить свойство event. scrElement. tagName.
В последовательности событий для каждого экземпляра события устанавливается свой
объект event. Когда происходит очередное событие, объект event предыдущего со-
бытия сбрасывается.
Свойства объекта event
Свойства объекта event заключают в себе данные о произошедшем событии. Для этого
объекта предусмотрен следующий набор свойств:
✓ type - тип произошедшего события. Это свойство возвращает имя события симво-
лами нижнего регистра без префикса on, например, mousemove, click и т.д;
✓ target - целевой объект события (документ или ссылка);
✓ data - список перемещаемых данных в событиях перетаскивания;
✓ button - свойство, которое возвращает числовое значение, соответствующее
нажатой кнопке мыши: 0 - кнопка не была нажата, 1 - была нажата левая кнопка,
2 -правая кнопка, 3 - средняя кнопка;
✓ which - свойство, возвращающее код ASCII нажатой клавиши;
✓ ctrlKey, altKey, shif tKey - возвращают логические значения true, в случае,
если была нажата клавиша Ctrl, Alt или Shift соответственно. В противном случае эти
свойства имеют значения false;
304 ГЛАВА Г,
✓ screenX, screenY - горизонтальная и вертикальная координаты указателя мыш'
относительно экрана. Если нужны координаты относительно клиентской области о:- -
на, то используют свойства clientx и clientY. Для определения координат ука-
зателя, отсчитанных от левого верхнего угла страницы, используются свойств:
радеХ и pageY;
✓ layerX layerY - свойства, возвращающие координаты указателя мыши в ело:
Web-страницы. Координаты отсчитываются от левого верхнего угла слоя.
В следующем разделе рассмотрен пример использования свойств объекта event.
Определение событий мыши
Допустим, вы хотите создать сценарий, с помощью которого можно было бы опреде-
лить, какая кнопка мыши была нажата, и координаты указателя мыши в момент щелчка
Для этого воспользуемся свойствами объекта event, относящимися к событиям мыши
и запишем следующий код:
<SCRIPT for="document" event="onmousedown" LAN-
GUAGE="JavaScript">
if(event.button==l)
alert("Вы нажали левую кнопку мыши");
else
alert("Вы нажали правую кнопку мыши");
alert("Координаты указателя мыши X, Y: "
+ event.clientx + ", " + event.clientY);
</SCRIPT>
Отметим, что параметры состояния кнопок мыши инициализируются и обновляются до
возникновения события, благодаря этому вы будете получать сообщение о нажатой
кнопке в последнем событии. Информация о текущем положении указателя доступна
для всех событий мыши, поэтому можно написать аналогичный сценарий, в котором
обрабатываются наведение мыши на элемент, перемещение по полю документа и т.д.
События таймера
В JavaScript, кроме событий, которые наступают как реакция на действия пользователя,
существуют события, которые генерируются по истечении определенных промежутков
времени. Это события таймера или, как их еще называют, «timeouts».
О событиях, не зависимых от пользователя
События таймера используются, когда в сценарии JavaScript необходимо выполнить
операции согласно определенному расписанию, независимо от того, активен пользова-
тель или нет. Например, вам нужно запустить через определенное время задержки ка-
кой-либо фрагмент кода scriptcode. Для этого применяется метод
window. setTimeout (), имеющий следующий формат:
Обработка событий
305
var timer = setTimeout("scriptCode", delay);
где delay - время задержки. Переменная timer вводится с тем, чтобы сохранить зна-
чение, возвращаемое функцией setTimeout (). Это значение пригодится при удале-
нии созданного таймера (см. ниже). Впрочем, вводить переменную таймера не обяза-
тельно и можно ограничиться простой инструкцией
setTimeout("scriptCode", 2000);
где первый аргумент обозначает исполняемый сценарий, а второй - интервал времени,
выраженный в миллисекундах (1000 мс - 1 с). Сценарий scriptCode запускается ме-
тодом setTimeout () сразу по истечении заданного интервала времени - через
2 секунды. Причем повторный запуск scriptCode не предусмотрен. Как видим, в от-
личие от технологии обработки событий, излагавшейся ранее, события таймера не тре-
буют заранее определенных обработчиков событий.
Применение метода setTimeout () рассмотрим на простом примере. Допустим, вы
хотите, чтобы посетитель вашей Web-страницы после ее просмотра автоматически пе-
решел к просмотру следующей страницы. Добавьте к коду страницы простой сценарий:
<HTML>
<HEAD>
<Т1ТЬЕ>Страница с переходом</Т1ТЬЕ>
<SCRIPT language="JavaScript">
//Определение задержки открытия новой страницы
var change = 10000;
function pagenewO {
document.location="nextpage.htm";
)
</SCRIPT>
</HEAD>
<BODY onLoad="setTimeout ( 'pagenewO ' , change) ">
<1--Содержание документа-->
</B0DY>
</HTML>
По истечении 10 секунд после загрузки текущего документа автоматически будет вы-
полнен переход к новой странице nextpage. htm.
Периодические события таймера
В задачах анимации часто требуется, чтобы исполняемый код запускался периодически
через назначенный интервал времени (см. главу 14 «Динамические стили и анимация»).
С этой целью можно использовать метод setinterval (), который запускает повто-
ряющиеся события таймера. Формат записи setinterval такой же, как и
setTimeout:
var timer = setinterval("scriptCode", delay);
306
ГЛАВА *"?
Метод setinterval () впервые появился в браузерах Netscape Navigator 4.0 и Intern-
Explorer 4.0. Если вы создаете сценарий для браузеров более низкого уровня, то для ге-
нерации периодических событий таймера можете воспользоваться методе-
setTimeout (). Для этого применяется рекурсивный вызов исполняемого кода, то ест:-,
вызов из функции самой себя. Организуем, к примеру, вызов функции myFuncticr
каждые 100 миллисекунд.
my_function {
setTimeout("myFunction", 100);
}
Рекурсией называется какое-либо правило, которое позволяет
определить отношение между объектами через само определяе-
мое отношение. Самым простым примером является рекурсив-
ное определение факториала: п!=(п-1)!*п (считается 1!=1).
Удаление таймера
Чтобы удалить таймер (точнее, ожидаемое событие таймера), используют метод clear-
Timeout (). Приведем пример страницы, на которой создается таймер и через заданное
время таймер удаляется:
<HTML>
<HEAD>
<Т1ТЬЕ>Создание и удаление таймера</Т1ТЬЕ>
<SCRIPT LANGUAGE="JavaScript">
//Определение общей длительности работы таймера
var interval=10;
//Текущее время работы таймера
var intime=0;
function trans() {
if (intime==interval){
clearTimeout();
document.write("Таймер выключен");
)
else{
document.all.outcounter.innerText=intime+" ";
intime+=l;
setTimeout('trans()',1000);
}
}
</SCRIPT>
</HEAD>
<BODY onload="trans()">
Таймер работает
Обработка событий
307
<SPAN id="outcounter">
</SPAN>
секунд
</BODY>
</HTML>
После загрузки этой страницы на экране появляется сообщение: «Таймер работает
0 секунд». Количество секунд работы таймера постоянно обновляется. По истечении
10 секунд выводится текст «Таймер выключен».
В JavaScript может поддерживаться несколько событий таймера. При этом никаких проблем
не возникает, если использовать переменные таймера. Таймер создается инструкцией:
var timer = setTimeout("scriptcode", delay);
Для удаления данного таймера применяется метод
clearTimeout(timer);
В этой функции в качестве аргумента подставляется величина, возвращаемая методом
setTimeout или setinterval.
Задержка времени точной длительности
Параллельно с функциями setTimeout () и setinterval () могут выполняться дру-
гие процессы, что приводит к нежелательным накладкам и в итоге - к смещению по
времени событий таймера. По этой причине вы не можете с помощью этих функций за-
давать задержки времени точной длительности. Для получения таких задержек лучше
воспользоваться функциями встроенного объекта Date. Приведем для примера функ-
цию, дающую корректную задержку, которая определяется значением переменной
pause в миллисекундах:
function timedelay (pause) {
clock = new Date();
start = clock.getTime();
while (true) {
curr = new Date();
if (curr.getTime()- start > pause) break;
J
}
В функции имеется оператор цикла while, который обеспечивает задержку и исполня-
ется, пока разность между текущим временем и временем запуска функции не превыша-
ет времени задержки. Прекращение работы цикла обеспечивается оператором прерыва-
ния break (см. раздел «Прерывание цикла» главы 9).
Часть III.
Динамический HTML
ГЛАВА 12.
Управление окнами
Объектная модель браузера
Ранее мы рассматривали объекты языка JavaScript. Если браузер поддерживав
JavaScript, то он должен обеспечивать поддержку и объектов этого языка. Однако работ .
JavaScript в среде браузера целиком зависит от программы браузера и от принятой в не
объектной модели, которая отличается от модели объектов в JavaScript. В ней имеют;
новые объекты, которые не предусмотрены в JavaScript, к примеру, окно или документ
То есть объектная модель браузера шире, причем она строится по иерархическо.м;
принципу.
Dynamic HTML как спецификация объектной модели
Консорциум W3C (http://www.w3.org/dom) определяет Dynamic HTML как специфика-
цию открытой объектной модели, которая обеспечивает полный доступ к документу s?
позволяет свободно манипулировать всем документом и его содержимым. Все элементе
документа (и даже те, которые непосредственно не поддерживаются браузером) являются
программируемыми объектами, управляемыми событиями мыши и клавиатуры. Благо-
даря Dynamic HTML такие операции, как добавление содержимого, изменение какой-
либо части Web-страницы, не требуют обращения к серверу и перезагрузки страницы.
Таким образом, Dynamic HTML расширяет возможности традиционного (статического
HTML, ориентированного в основном на оформление страниц. Этот стандарт позволяем
создавать Web-страницы, которые могут в интерактивном режиме взаимодействовать
с пользователем.
Об истории Dynamic HTML кратко скажем следующее. Концепция интерактивных стра-
ниц сначала была определена компаниями Microsoft и Netscape как простая объектная
модель. Эта концепция была малоэффективной, дающей заметные преимущества лишь
при работе с формами. Апплеты Java и элементы управления ActiveX выполняли в ос-
новном операции, аналогичные текстовым. Такая ситуация сохранялась до разработки
Internet Explorer 4.0, в котором был применен более мощный прикладной интерфейс про-
граммирования (Application Programming Interface, API). Этот интерфейс, внедренный
также и в Netscape Communicator 4.0, позволяет изменять страницу уже после ее загруз-
ки. Например, вы можете с помощью специального приложения развернуть или свер-
нуть список содержания документа. При этом новое содержимое страницы будет выво-
диться на экран немедленно, без ее перезагрузки и в автоматически переформатирован-
ном виде.
Отметим, что стандарт Dynamic HTML, реализованный в Internet Explorer, является более
продвинутым, чем поддержка Dynamic HTML в Netscape Communicator. Поэтому в из-
ложении Dynamic HTML мы будем основываться на объектной модели IE.
Управление окнами 311
Иерархия объектов
Одной из замечательных особенностей языка JavaScript является то, что на стороне кли-
ента язык интегрирован с функциями браузера. Достигается это благодаря тому, что
объектная модель браузера строится по принципу совместимости с объектной моделью
JavaScript.
Все объекты браузера организованы в иерархическую структуру. Поскольку основные
функции браузера реализуются в окне приложения, в котором отображается сам HTML-
документ, центральным объектом иерархии является окно браузера. Оно представляется
объектом window; все другие объекты HTML рассматриваются как свойства этого объ-
екта. На основе window можно определить объекты, свойства и методы, необходимые
для полноценной работы с документами.
Объекту window подчинены объекты следующего уровня, которые можно разделить на
две группы (Рис. 12.1):
✓ объекты браузера (events, history, location, navigator и screen), предостав-
ляющие доступ к свойствам, методам и событиям, происходящим в окне браузера;
✓ объекты документа и фреймов (document и frames), позволяющие управлять
элементами документов и фреймов, загруженных в браузер.
Вторая группа объектов вместе с содержащимися в ней свойствами, методами и собы-
тиями образует так называемую объектную модель документа или сокращенно DOM
(Document Object Model).
Рис. 12.1. Иерархическая структура объектов браузера
Структура объектов браузера имеет один корень - объект window. Все остальные объек-
ты на стороне клиента существуют как компоненты других объектов, а те, в свою очередь,
подчинены текущему объекту window. Объект window содержит ссылки (прямые
или через другие ссылки) на все подчиненные объекты.
312
ГЛАВА 12
Точечная нотация
Экземпляр объекта window обладает рядом свойств: history, document, loca-
tion, name и др. Свойство, как известно, записывается через точку после имени объ-
екта (точечная нотация), например,
window.document
Свойству document в JavaScript отвечает объект document, связанный с объектом
window. Точечная нотация отражает подчиненность объектов: слева записывается ро-
дительский объект window, а справа от него через точку - дочерний объект
document. Запись схемы подчинения можно было бы продолжить. Так, объект
document обладает, к примеру, свойством forms [0] (массив форм), которое также
записывается через точку:
window.document.f orms[0]
Объект forms содержит, в свою очередь, дочерние объекты, например, elements []
То есть структуру подчинения можно продолжить.
Операции с окнами (объект window)
При работе браузера всегда существует объект window - это текущее окно. Тем не ме-
нее, вы можете создать еще одно или даже несколько окон, которые будут благополучно
уживаться в рамках принятой объектной модели. В один и тот же момент времени могут
существовать несколько объектов window. При этом возникает естественный вопрос,
к какому из этих объектов будет относиться ссылка window? В языке JavaScript считается,
что ссылка window всегда обозначает текущее окно, то есть окно документа, содержа-
щего исполняемый JavaScript-код. Обращаться к другим объектам window можно с по-
мощью имен, которые задаются при создании окна.
Создание нового окна браузера (метод open)
Чтобы создать новое окно, нужно применить метод window, open (). Типичные инст-
рукции, вводящие этот метод, имеют следующий вид:
window.open("URL","Namewin","Features");
либо
var win=window.open("URL","name","features");
Согласно первой записи создается новый объект window без возможности ссылки на него.
При использовании второй записи данные об объекте сохраняются в переменной win.
То есть можно сослаться на созданный объект, использовать его методы и свойства.
Управление окнами 313
При операциях в текущем окне в записи window, open () объект
верхнего уровня (window) можно не указывать. По этой же при-
чине ранее вместо полной записи метода window, alert () мы ‘
, использовали сокращенный вариант: alert (). ЙВр'*
Метод open () создает окно, которое относится к типу немодальных окон (см. разд.
«Работа с диалоговыми окнами» данной главы). В отличие от модальных окон
alert (), prompt (), confirmO, немодальные окна не зависят от текущего окна.
Программа в немодальном окне выполняется независимо от других окон.
Аргументы метода ореп()
Метод open () может иметь аргументы: open ("URL", "Namewin", "Features").
Перечислим их назначение:
✓ Аргумент "URL" обозначает URL документа, загружаемого в окне.
✓ Аргумент "name" вводит название окна. Имя окна Namewin будет присвоено свой-
ству name объекта win.
✓ Аргумент "features" обозначает список необязательных опций, которые разделены
запятой. В этом списке могут быть параметры размеров окна в пикселах (width и
height) и возможности изменения размеров границы окна (resizable), а также па-
раметров наличия панели инструментов (toolbar), меню (menubar), поля ввода ад-
реса (location), строки состояния (status).
Все указанные параметры в методе open () являются необязательными. Если опущен в спи-
ске параметров указатель URL, то в новом окне браузера будет открыта пустая страница.
Имя также можно не указывать, однако в этом случае нельзя будет использовать данное
окно в качестве целевого (target) для последующих документов. Наконец, если не зада-
ны параметры окна, используются значения параметров, принятые по умолчанию.
Приведем несколько примеров создания окон. Так, нижеследующий сценарий приведет
к созданию трех различных независимых окон:
<SCRIPT LANGUAGE="JavaScript">
var winl = open("","Copy");
var win2 = open("F:/Examp/About.html", "Version",
"width=200, height=150, toolbar=0, status=l, menubar=yes");
var win3 = open("www.rumber.com/Home.html","Session");
</SCRIPT>
Переменная winl будет содержать данные о пустом окне с именем Сору. В окно
с именем Version (объект win2) будет загружен файл F:\Examp\About.html, а
в окне Session (объект win3) будет открыта Web-страница
www.rumber.com/home.html. Для объекта win2 заданы размеры окна: width=200,
height=150, а также предусмотрены меню (menubar) и строка состояния (status).
314
ГЛАВА 12
Чтобы включить тот или иной элемент окна (toolbar, menubar, location,
status), используются значения параметров yes, 1 или само название элемента. Для
отключения элемента - значения по или 0. Например, для вывода панели инструменте-,
в окно можно использовать любую из следующих инструкций:
window.open"toolbar=l");
open" toolbar=yes");
open"toolbar");
Переключение между окнами (методы focus()n blur())
Если на экране открыто несколько окон, вы можете для переключения между ними вос-
пользоваться методом window, focus (). Окно, получившее фокус, будет отличаться
от других окон цветной подсветкой строки заголовка. Лишить окно фокуса можно с по-
мощью метода window. blur ().
Вызов метода focus () можно связать с выполнением соответствующего обработчика
событий - on focus (см. разд. «События фокуса» главы 10). При этом важно учиты-
вать, что событие on focus запускается, если фокус получает прежде не активизиро-
ванное окно. Если же окно активно, то при вызове метода focus () оно уже не будет
генерировать событие onf ocus.
Присвоение имени окну (свойство name)
Проще всего выполняются манипуляции с именем окна. Вообще говоря, все окна, созда-
ваемые в браузере, остаются без имени, пока оно им не присвоено с помощью специаль-
ной директивы - присвоения строкового значения свойству name объекта window.
Следующие пять строк приводят к одному и тому же результату, они присваивают имя
MyWin текущему окну:
window.window.name = "MyWin”
window.self.name = "MyWin"
window.name = "MyWin"
self.name = "MyWin"
name = "MyWin"
В этих записях использовано свойство self объекта window, которое возвращает
окно. Убедиться в том, что любая из директив присваивает имя MyWin, вы можете
с помощью пары строк в сценарии, например,
self.name = "MyWin";
alert(name);
которые в диалоге сообщения выведут имя окна «MyWin». Аналогично описанному спо-
собу присваивается имя фрейму.
Управление окнами
315
Свойство пате необходимо для определения окна, на которое ука-
зывает ссылка, или задания пункта назначения для результатов
v форм. По умолчанию пунктом назначения для ссылок и форм явля-
; ется текущее окно (или фрейм). Направление ссылок на опреде-
7 ленное окно осуществляется атрибутом targe t=windowName,
помещаемого в тег ссылки или элемента Form.
Перемещение окна браузеру (методы moveTo, moveBy)
Для перемещения текущего окна браузера в объекте window предусмотрено два
следующих метода:
✓ window. moveTo () - этот метод получает два параметра, отвечающих перемещению
левого верхнего угла окна в точку с заданными координатами. Например, метод
window.moveTo(100,200) переместит окно в положение, при котором левый
верхний угол окна будет расположен на расстоянии 100 пикселов от левой кромки эк-
рана и в 200 пикселов от верхней кромки экрана;
✓ window. moveBy () - этот метод осуществляет перемещение окна на заданное рас-
стояние, например, window. moveBy (10,5) переместит окно на 10 пикселов вправо
и на 5 пикселов вниз. Возможны как положительные, так и отрицательные значения
аргументов. Перемещение будет осуществляться при каждом выполнении метода.
Приведем как пример строку кода для выполнения перемещения методом moveBy () :
<INPUT type="button" value="Переместить"
onClick="window.moveBy(10,5);">
С помощью этой инструкции на экран выводится кнопка с надписью «Переместить».
При щелчке мышью по этой кнопке окно переместится на расстояние, указанное
в аргументах метода.
Изменение размеров окна (методы resizeTo и resizeBy)
Объект window позволяет изменять размер текущего окна. Для этого предназначены
два метода window. resizeTo () и window. resizeBy (), которые аналогичны ме-
тодам перемещения окна (см. предыдущий пункт).
✓ Метод window.resizeTo() приводит к изменению окна до указанных размеров.
Например, window.resizeTo (420,350) изменяет размер окна до 420 пикселов
в ширину и 350 пикселов в высоту.
✓ Метод window.resizeBy () дает приращения размеров окна на указанную величи-
ну. Например, window.resizeBy (20, -15)увеличивает ширину окна на 20 пиксе-
лов и уменьшает высоту на 15 пикселов.
316
ГЛАВА 12
Печать Web-страницы (метод Print)
Распечатать Web-документ можно с помощью кнопки Печать на панели браузера
Однако аналогичное средство имеется и в JavaScript, оно представлено методе’
window.print (). Например, разместим на Web-странице кнопку «Печать», ввели
в HTML-код строку
<INPUT type="button" value="Печать"
onClick=''window, print () ; ">
При нажатии этой кнопки будет появляться обычное диалоговое окно печати. Пользова-
телю предоставляется выбрать опции в этом окне и направить документ на печать. Беле:
же принтер к компьютеру не подключен, на экране появится сообщение о необходимо-
сти установить принтер прежде, чем напечатать документ.
Закрытие окна (метод close)
Окна, которые созданы методом open, могут быть закрыты методом close. Так, для
закрытия окна используются следующие записи:
window.close();
window.close(Namewin);
Первая из этих директив закрывает текущее окно, а вторая - окно с именем Namewin.
Отметим, что факт закрытия окна записывается в свойство closed объекта window.
Не правда ли, парадоксальная ситуация: окно закрыто, а его свойство еще существует?
Действительно, объект window после закрытия окна полностью не разрушается: свой-
ство MyWin.closed остается доступным (MyWin - переменная окна) и возвращает
значение true.
В случае закрытия последнего окна браузера требуется подтверждение этой операции
пользователем. Такая возможность предусмотрена специально, чтобы избежать «хули-
ганского» закрытия всех окон со стороны JavaScript-программы.
Информация о документе и окне браузера
(объект location)
Еще одним дочерним объектом window является объект location. Этот объект опре-
деляет точную ссылку (URL) на текущий Web-документ, загруженный в окно браузера.
Обратиться к location можно, к примеру, следующей строкой кода:
window.alert("URL данного документа: "+window.location);
которая выводит окно сообщения с указанием URL текущего документа.
Управление окнами
317
Свойства объекта location
Свойства объекта location предоставляют информацию о URL документа, а методы
объекта позволяют перезагружать документ и заменять текущий документ. Запишем
общий формат URL, используя обозначения свойств объекта location:
protocol://hostname:port/pathname?search#hash
Каждое из свойств объекта location является строкой для чтения/записи, которая
содержит одну или более составляющих URL. Изменение значений свойств объекта
location приводит к чтению нового URL браузером. Перечислим свойства объекта
location:
✓ protocol - свойство, которое отвечает типу ресурса; оно возвращает значения:
http: //, ftp: //, file:,mailto: ит.д.
hostname - свойство, содержащее имя хоста;
✓ port - свойство, представляющее номер порта;
✓ host - это свойство, которое возвращает значение hostname, после которого через
двоеточие указан номер порта (port);
✓ pathname - свойство, возвращающее путь к ресурсу;
✓ search - свойство, которое представляет строку поиска, включающую метку ?;
✓ hash - составляющая URL, которая включает метку закладки #; это свойство возвра-
щает имя якоря в HTML-файле;
✓ href - свойство, отвечающее полному URL.
К каждому из перечисленных свойств нужно обращаться с учетом положения объ-
екта location в иерархии объектов. Например, на свойство href можно сослаться
с помощью одной из следующих строк:
window.location.href
location.href
document.1inks[i].href
Аналогично выполняются ссылки на любое другое свойство location.
Получение данных URL
Допустим, нас интересует детальная информация о URL какого-либо документа. В этом
случае нужно воспользоваться свойствами объекта location. Приведем пример обра-
щения к этим свойствам:
<HTML>
<HEAD>
<TITLE>URL components</TITLE>
</HEAD>
318
ГЛАВА 12
<BODY>
<Н1>Свойства объекта location</hl>
<SCRIPT LANGUAGE="JavaScript">
window.alert("URL данного документа: "+window.location
+'\n'+
"Протокол: "+window.location.protocol +’\n’+
"Порт: "+window.location.port +'\n'+
"Хост: "+window.location.hostname +'\n'+
"Путь: "+window.1ocation.pathname +'\n’+
"Строка поиска: "+window.location.search +'\n'+
"Закладка: "+window.location.hash);
</SCRIPT>
</BODY>
</HTML>
Обратите внимание, что вывод полного URL здесь выполнен не с помощью свойства
href, а прямым обращением к объекту: window.location. Несколько странной на
первый взгляд кажется запись window. alert (. . .window. location. . .), в кото-
рой объект window содержит ссылку на свое свойство (location), то есть на самого
себя. Однако вспомним, что все использованные выше методы и свойства относятся
к одному и тому же объекту - текущему окну браузера. Поэтому window можно убрать
из всех ссылок, записав обращение к свойствам в более компактном виде, например,
"Протокол: "+location.protocol
Пример вывода значений свойств объекта location показан на Рис. 12.2.
[Microsoft Internet Explorer
URL данного докриента: hbc:///E:/Tech_WebZKoAbi/11/Свойства_СосаЬоп html
Протокол: hk*:
Порт*
Хост:
Путь: /ЕАГесЬ_\А/еЬ\Кадм\11\Свойства_ЬосаПоп html
Строка поиска.
Заключи а:
I * • 1
Рис. 12.2. Пример свойств объекта location
При указании URL используется прямая косая черта, в отли-
чие от обратной косой черты, применяемой при записи пути
к файлу. Поэтому при обращении к URL правильно, например, за-
писывать F:/Examples/about.html, а не F:\Examples\about.html.
Управление окнами
319
Перезагрузка и замена текущей страницы
(методы объекта location)
Объект location имеет два метода: reload () и replace(). Метод
reload () позволяет перезагрузить страницу, например, в случае изменения страницы.
То есть reload () в этом случае вызывает то же действие, что и нажатие кнопки Обно-
вить (Refresh) в браузере. Однако, если кнопка Обновить приводит к перезагрузке
лишь в случае, когда страница была изменена, метод reload () позволяет выполнить
перезагрузку даже в случае отсутствия изменений. Для этого при вызове метода исполь-
зуется булевский аргумент: reload (force). Если force принимает значение true,
перезагрузка производится в безусловном порядке, если же аргумент имеет значение
false, страница перезагружается лишь при наличии изменений.
С помощью второго метода, replace (url), можно заменить текущую страницу на
другую, указанную в аргументе url. Этот метод часто оказывается полезным для вы-
полнения переадресации на стороне клиента. Приведем пример документа, в котором
имеется сценарий запроса о замене текущей страницы:
<нтмъ>
<HEAD>
<Т1ТЬЕ>Замена страницы</Т1ТЬЕ>
</HEAD>
<BODY>
<!-- Исходная страница -->
<Н1>Пример замены текущей страницы</Н1>
<SCRI₽T>
if(confirm("Нужен ли прогноз погоды на сегодня?"))
location.replace("http://www.wheather.com/today.html");
</SCRIPT>
</BODY>
</HTML>
В этом примере после загрузки исходной страницы появится диалоговое окно с запро-
сом (Рис. 12.3). Если вы нажмете кнопку ОК, текущая страница будет заменена на но-
вую, указанную в качестве аргумента метода location. replace (). При нажатии на
кнопку Отмена или на клавишу Esc замены текущей страницы не произойдет.
Рис. 12.3. Запрос на замену текущего окна
320
ГЛАВА 12
При вызове метода replace о происходит замена элемента
объекта history. Поэтому имейте в виду, что переход к исходной
странице с помощью кнопки Назад после действия метода
replace () будет невозможен.
Управление строкой состояния
(свойства status, defaultstatus)
В нижней части окна браузера отображается строка состояния. Содержимое этой строки
можно задать с помощью свойств status и defaultstatus. Первое из этих
свойств (status) отвечает информации, которая отображается в строке состояния вре-
менно, а второе свойство (defaultstatus) - информации, которая отображается по
умолчанию, то есть сразу после открытия окна и до тех пор, пока свойство default-
status не изменится.
Пример. Изменение содержимого строки состояния
Проиллюстрируем использование свойств status и defaultstatus строки состоя-
ния на примере, показанном на Рис. 12.4.
Рис. 12.4. Пример изменения содержимого строки состояния
Листинг этого HTML-документа имеет следующий вид:
<HTML>
<HEAD>
<TITLE>Menu</TITLE>
</HEAD>
<BODY>
<Н2>Меню китайского ресторана</Н2>
<А HREF="minog.htm"
Управление окнами 321
onmouseover="window.status=‘Цена порции $3return true;">
Миноги</А>
<BR>
<А HREF="akula.htm"
onmouseover="window.status='Цена порции $5';return true;”>
Акульи плавники</А>
<SCRIPT>
window.defaultStatus="Сделайте заказ";
</SCRIPT>
</BODY>
</HTML>
По умолчанию в строке состояния отображается сообщение «Сделайте заказ». Если же вы
наводите указатель мыши на название блюда, в строке состояния появляется информация
о его стоимости, например, «Цена порции $5». В приведенном коде использован обработ-
чик события onmouseover (см. разд. «Стандартные события DHTML» главы 11).
Пример. Цифровые часы в строке состояния
Опишем создание цифровых часов, которые будут выводить информацию в строку
состояния. Чтобы построить часы, отображающие текущее время в часах, минутах и се-
кундах, можно воспользоваться следующим кодом:
<HTML>
<HEAD>
<Т1ТЬЕ>Цифровые часы в строке состояния*:/TITLE>
<SCRIPT>
//Функция добавления при необходимости предшествующего
нуля
function aheadO(х){
return(х<10)?"0"+х.toString():х;
}
//Функция отображения времени
function clock() {
//Определение даты и времени
var datetime = new Date();
var hour = datetime.getHours() ;
var minut = datetime.getMinutes();
var sec = datetime.getSeconds();
var time = aheadO(hour)+ aheadO(minut) +
':'+ aheadO(sec);
//Вывод времени в строку состояния
defaultStatus=time;
//Обновление содержимого строки состояния
setTimeout("clock()", 1000);
}
</SCRIPT>
322
ГЛАВА 12
</HEAD>
<BODY onload="clock();">
<Н2>Часы в строке состояниж/Н2>
</BODY>
</HTML>
Цифровые часы запускаются сразу после загрузки документа, поскольку в теге BODY
использован обработчик onload (см. пункт «События загрузки и выгрузки» главу 11).
Мы рассмотрели создание цифровых часов в строке состояния. В пункте «Электронные
часы (свойство innerText)» главы 13 разбирается пример часов, выводимых непо-
средственно в документ.
Переходы между Web-страницами
(объект history)
Выполнять переходы между Web-страницами, ранее просматривавшимися пользовате-
лем, позволяет объект history, который является одним из дочерних объектов окна
браузера, history представляет собой строковый массив только для чтения, состав-
ленный из URL открывавшихся страниц. Список элементов массива history соответ-
ствует содержимому Журнала в Internet Explorer или списку URL в меню Go браузера
Netscape.
Свойства и методы, применяемые для переходов
Доступ к информации о ранее отображавшихся страницах обеспечивается следующими
свойствами объекта history:
✓ history, current - содержит строку только для чтения, являющуюся адресом
(URL) текущего Web-документа;
✓ history.next - содержит значение URL документа, который открывался после
данного в списке загружавшихся документов; это свойство можно использовать лишь
после повторного открытия текущего документа;
✓ history. previous - содержит строку - адрес URL документа, который открывался
перед данным документом;
✓ history, length - определяет количество адресов в списке загружавшихся
документов (в течение текущего сеанса работы).
Приведем также перечень методов объекта history.
✓ go () - переход к ранее посещавшейся странице из списка history. В качестве аргу-
мента метода используется целое число (положительное для перехода вперед, отрица-
тельное для перехода назад). Например, до (- 2) приводит к переходу на две страницы
назад.
Управление окнами
323
✓ back () - отвечает переходу к предыдущей странице, то есть вызов этого метода
приводит к тому же результату, что нажатие кнопки Назад (Back) на панели браузера.
Использование метода back () эквивалентно записи
history.go(-1);
✓ forward () - выполняет переход вперед в списке посещавшихся страниц (аналогич-
но нажатию кнопки Вперед (Forward) в окне браузера). Вызов этого метода эквивален-
тен записи:
history.go(1);
Объект history позволяет лишь загрузить ресурс из своего
списка в окно браузера. Просмотреть адрес ресурса с помощью
этого объекта нельзя - для этой цели служит другой дочерний
объект window - это location, который рассмотрен ранее.
Создание кнопок Назад и Вперед
В создаваемые Web-страницы часто добавляются кнопки, позволяющие пользователю
легко перемещаться по списку открывавшихся документов. Для размещения этих кнопок
можно использовать методы объекта history, а в качестве самих кнопок - изображения,
заранее заготовленные в виде отдельных графических файлов. Приведем пример HTML-
документа, содержащего кнопки Назад и Вперед:
<HTML>
<HEAD>
<Т1ТЬЕ>Методы и свойства объекта History</TITLE>
</HEAD>
<BODY>
<CENTER>
<Н1>Кнопки <br>
Назад и Вперед</Н1>
< А href="javascript:history.go(-1);">
< IMG border=0 src="back.gif"></A>
< A href="javascript:history.go(1);">
< IMG border=0 src="forward.gif"></A>
<BR><BR>
cINPUT type="button" value="flnnHa списка History"
onclick="alert(history.length);">
</BODY>
</HTML>
На Рис. 12.5 показано, как выглядит эта страница в окне Internet Explorer. Обе кнопки
работают, когда текущей является не первая и не последняя открывавшаяся страница.
324
ГЛАВА 12
Рис. 12.5. Пример использования методов и свойств объекта history
Если вы хотите получить информацию о количестве записей в журнале, нажмите кнопку
Длина списка history. Затем в появившемся окне сообщения щелкните на кнопке ОК,
чтобы снова стали доступными кнопки перехода между страницами.
Работа с диалоговыми окнами
В рамках динамического HTML возможно создание нескольких типов окон. Выше было
рассмотрено создание окон браузера, которые работают независимо от текущего окна.
Такие окна называются немодальными.
Другие типы окон, к которым относятся различные диалоговые окна (диалоги),
обычно используются, когда пользователь должен сделать выбор для продолжения
работы в приложении. При вызове любого из диалогов работа приложения в теку-
щем окне останавливается, и браузер ожидает закрытия диалогового окна. Такие окна
называются модальными
Организация простых диалогов
(методы alert, confirm и prompt)
Простейшие диалоговые окна запросов и сообщений можно создавать с помощью мето-
дов объекта window. С двумя из этих методов (alert и prompt) вы уже знакомы по
примерам предыдущей главы, теперь мы рассмотрим их более подробно. Приведем пол-
ный перечень методов, отвечающих за вывод простых диалогов в текущее окно:
✓ alert () - отображает сообщение в простом диалоговом окне (Рис. 12.6, а), имеющем
одну кнопку ОК. Диалоги alert не прерывают выполнение программы, однако
alert - это именно тот тип назойливых сообщений, от которых пользователь обычно
рад избавиться;
Управление окнами 325
✓ conf irm (msg) - отображает в диалоговом окне (Рис. 12.6, б) вопрос msg, на кото-
рый нужно ответить «да-нет» (ОК или Отмена). Функция conf irm () возвращает
значение true, если нажата кнопка ОК, либо значение false при нажатии кнопки
Отмена. Таким образом можно организовать ветвление в программе;
✓ prompt () - отображает диалоговое окно с текстовым полем, в которое пользователь
должен ввести строку (Рис. 12.6, в). В диалоге имеются также кнопка ОК (возвращается
значение текстовой величины) и кнопка Отмена (возвращается значение null).
Методы confirm и prompt не возвращают какого-либо значения, пока пользователь
не закрыл диалоговое окно. Только после закрытия окна возможно продолжение работы.
На рисунке Рис. 12.6 приведены диалоги для Internet Explorer 5.x. Однако нужно иметь
в виду, что вид рассмотренных диалогов, вообще говоря, зависит от платформы компь-
ютера и от используемого браузера.
Приведем в качестве примера сценарий, в котором использованы три рассмотренных
метода вызова диалоговых окон:
<SCRIPT LANGUAGE="JavaScript">
//Этот сценарий описывает посещение клуба
alert('Клуб "Джос"');
var msg = "Являетесь ли Вы членом клуба?";
//Проверка условия членства в клубе
if(confirm(msg)) {
//Диалог для ввода имени
n = prompt("Ваше имя?", "") ;
//Приглашение в клуб
document.write ("Добро пожаловать, " +п+"!");
}
else
//Сообщение для посетителя, не состоящего в клубе
alert("Вам необходимо зарегистрироваться");
</SCRIPT>
Имя «Челентано», введенное в последнем диалоге (Рис. 12.6, в), будет использовано для
вывода в текущем окне строки приветствия «Добро пожаловать, Челентано!». Отметим,
что в данном примере объект window в записи методов alert, confirm и prompt
не указывается, поскольку эти методы относятся к текущему окну браузера.
Используйте для отладки составленного кода JavaScrip диалого-
вые окна alert(). Соответствующие инструкции расставля-
ются в различных местах сценария для вывода промежуточных
значений переменных, свойств объектов и т.д.
326
ГЛАВА 12
Microsoft Internet Explorer Щ ЕЯ
Microsoft Internet Explorer
Zl
Клуб "Джос1
Являетесь ли Вы членом клуба?
ок
(| Отмена
ОК
б
а
в
Рис. 12.6. Диалоговые окна - методы объекта window: a- alert ();
б- confirm (msg); в- prompt()
Создание индивидуального диалогового окна
Еще одним типом диалога, поддерживаемого в DHTML, является индивидуальное диа-
логовое окно. Такое окно, в отличие от описанных выше диалогов (см. Рис. 12.6), пред-
ставляет собой Web-страницу в формате HTML с заданными размерами и своим URL.
Определение окна (метод showModalDialog)
Индивидуальное диалоговое окно создается с помощью метода showModalDialog ().
Это окно является, естественно, модальным и требует для продолжения работы ответа
от пользователя. В индивидуальный диалог загружается файл HTML, однако диалог не
является копией окна браузера. Это всего лишь средство просмотра. Поэтому в диалого-
вом окне нельзя, например, выделить текст или перемещаться по ссылкам, как в окне
браузера.
Вызов метода showModalDialog в общем случае выглядит как
window.showModalDialog("URL","varToDialog","features") ;
Первый аргумент "URL" - это указатель файла, в котором содержится код диалогового
окна. Второй аргумент "varToDialog" отличается от соответствующего аргумента
метода open: он определяет переменную (может быть массив), которая передается в
диалоговое окно. Третий аргумент "features" - список параметров диалогового окна.
Однако этот список оформляется несколько иначе, чем список параметров обычного
окна браузера. Во-первых, параметры отделяются друг от друга точками с запятой.
Во-вторых, размер и положение диалогового окна определяются следующими свойствами:
Управление окнами
327
В аргументе " URL" указывается адрес файла, содержащего код диалога. Сокращение
"varToDialog" обозначает список передаваемых аргументов, a "features" - па-
раметры окна. В качестве параметров индивидуального диалогового окна обычно
используются следующие атрибуты.
✓ dialogwidth, dialogHeight - задают исходные ширину и высоту диалогового
окна в относительных единицах ет, например, dialogwidth: 25em;
✓ dialogLef t; dialogTop - исходное положение левой и верхней границ окна;
✓ font (шрифт по умолчанию для диалогового окна), font-family (гарнитура
шрифта), font-size (размер шрифта), font-style (стиль вывода символов). Все
эти свойства могут принимать те же значения, что и свойства CSS (см. пункт «Свойст-
ва шрифтов» главы 3);
✓ border - задает толщину границы диалогового окна путем присвоения значений
thick (толстая) или thin (тонкая);
✓ center - выравнивает диалоговое окно по центру экрана, это свойство может иметь
значения yes или по (или соответственно 1 или 0);
✓ maximize и minimize - определяют отображение кнопок разворачивания и свора-
чивания окна соответственно; этим свойствам могут присваиваться значения yes, по
(или 1,0);
✓ help - определяет наличие кнопки справки в строке заголовка (значение параметра
yes или 1) или отсутствие этой кнопки (значение по или 0).
Вызов метода showModalDialog, в котором указываются значения параметров, может
выглядеть следующим образом:
window.showModalDialog("datalog.html", "varToDialog",
"dialogwidth:30em; dialogHeight:2Oem; center:l; maximize;
border:thick");
При отсутствии параметров в списке features будут назначены параметры окна по
умолчанию. Если размер созданного окна недостаточен для размещения в нем содержи-
мого HTML-документа (файл, указанный в "URL"), то в окне автоматически появится
полоса прокрутки.
Метод showModalDialog не предусматривает создание в инди-
видуальном диалоговом окне таких элементов как панель инст-
рументов и строки меню. В модальных окнах, создаваемых мето-
дами showModalDialog и open, по умолчанию отображаются
только строка заголовка, строка состояния, кнопки Закрыть и
Справка.
328
ГЛАВА 12
Вывод информации в диалог
Рассмотрим пример создания диалогового окна, выводящего на экран некоторую ин-
формацию в виде многострочного текстового поля (Рис. 12.7).
Рис. 12.7. Пример диалога, созданного методом showModalDialog ()
Для вызова диалога введем соответствующий элемент в текущее окно браузера, напри-
мер, кнопку «О нас». Если нажать эту кнопку, появится создаваемое диалоговое окно
с информацией, например, о фирме. Приведем фрагмент кода этой страницы:
<HTML>
<HEAD>
<Т1ТЬЕ>Создание диалога</Т1ТЬЕ>
<SCRIPT LANGUAGE="JavaScript">
function ref() {
window.showModalDialog("about.html", "DialExamp",
"dialogwidth:25em; dialogHeight:18em");
}
</SCRIPT>
</HEAD>
<BODY>
<!- HTML-код страницы -->
<INPUT type="button" value="O нас" onclick="ref();">
</BODY>
</HTML>
HTML-код этого диалогового окна размещается в отдельном файле about.html, кото-
рый указан в первом аргументе метода showModalDialog:
Управление окнами
329
<HTML>
<HEAD>
<Т1ТЕЕ>Информация</Т1ТЬЕ>
</HEAD>
<BODY STYLE="background:lightgrey">
<CENTER>
<BR>
<H3 Информация о нас</НЗ>
cTEXTAREA rows=4 cols=40 name=comments>
Издательство "Web-Опус" организовано для продвижения в
Web всего лучшего, замечательно-прикольного и уникально-
необычного, созданного не руками маньяков и террористов,
а в головах наших авторов.
</TEXTAREA>
<BR><BR>
<INPUT type=button style="Width:15em" value="OK"
onclick="window.close()">
</BODY>
</HTML>
Для продолжения работы закройте диалог, щелкнув на кнопке ОК, и вы вернетесь в ис-
ходное окно браузера. Обратите внимание, что метод window.close закрывает диа-
логовое окно, а не окно браузера. Если же документ about. html у вас был открыт не
в отдельном окне, а в текущем окне браузера (командой Файл - Открыть), то при за-
крытии окна щелчком по кнопке ОК появится предупреждение о попытке закрытия фай-
ла самой Web-страницей.
Обмен данными между диалоговым окном и документом
Для ввода информации в HTML-документ можно использовать диалоговые окна. Если
требуется вводить небольшой объем данных, то можно воспользоваться простым немо-
дальным окном, вызываемым с помощью метода prompt. Однако для передачи множе-
ства значений в исходный документ более подходит индивидуальное диалоговое окно.
Это окно позволяет организовать обмен данными между пользователем и приложением.
В диалоге могут вводиться значения в поля ввода, выбираться опции из списка, устанав-
ливаться флажки и переключатели и т.д.
Пример. Приветствие Клуба знатоков
Представим, что вы оказались участником игры в клубе знатоков. Попробуем
смоделировать вход в клуб. Перед началом игры вам нужно в исходной Web-
странице (Рис. 12.8, а) нажать кнопку Ваше имя. В ответ появится диалоговое окно
(Рис. 12.8, б), в котором необходимо в текстовом поле набрать свое имя. После за-
крытия этого окна диалога щелчком по кнопке ОК, в исходном окне появится при-
ветствие игроку «Хорошей игры,..».
330
ГЛАВА 12
б
Рис. 12.8. Пример обмена информацией между диалоговым окном и исходным
документом: а - окно приложения; б - диалоговое окно
Приведем код исходного HTML-документа:
<HTML>
<HEAD>
<TITLE>Greeting</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function ref() {
xname=window.showModalDialog("dianame.html", "",
"dialogwidth:2Oem; dialogHeight:12em");
Greet.value="Хорошей игры, "+xname+"!";
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<Н1>Клуб знатоков</Н1>
Управление окнами
331
<INPUT type="button" value="Bame имя" onclick="ref();">
<BRxBR>
<INPUT type="text" id="Greet" size=30>
</CENTER>
</BODY>
</HTML>
Здесь метод showModalDialog указывает на файл dianame. html, содержащий код
диалогового окна:
<HTML>
<HEAD>
<Т1ТЬЕ>Имя</Т1ТЬЕ>
</HEAD>
<BODY style="text-align:center; background:lightgrey"
onunload="window.returnValue=login.value;">
<Н2>Введите имя</Н2>
<P>
<INPUT type="text" name="login">
<BR><BR>
cINPUT type="button" style="width:5em" value="OK"
onclick="window.close()">
</BODY>
</HTML>
Диалоговое окно после своего закрытия возвращает значение текстового поля
login. Возвращаемое значение содержится в свойстве window, returnvalue,
которое выступает как обработчик события onUnload.
Пример. Заказ в ресторане
Рассмотрим более сложный пример ввода данных через диалоговое окно. Пусть это
будет заказ экзотических блюд в китайском ресторане. Для выполнения заказа нуж-
но в исходном окне (Рис. 12.9, а), имеющем кнопку и два текстовых поля, нажать
кнопку Заказ. Затем в появившемся диалоге (Рис. 12.9, б) посетитель может устано-
вить флажки, отвечающие заказу, и нажать кнопку ОК. После этого в исходном окне
документа в текстовых полях появится информация о количестве заказанных блюд и
о сумме заказа.
332
ГЛАВА 12
а
б
Рис. 12.9. Пример ввода информации через диалоговое окно:
а - окно исходного документа после ввода информации; б - диалоговое окно
Сценарий исходного документа содержит определение массива цен, вызов диалогового
окна, заполняемого посетителем, и обработку данных, переданных из диалогового окна:
<HEAD>
<Т1ТЬЕ>Заказ</Т1ТЪЕ>
<SCRIPT language = "JavaScript">
//Определение массива price, содержащего цены блюд
var price = new Array();
price[0] = 1.5;
price[1] = 2.5;
price[2] = 2;
price[3] = 1;
Управление окнами
333
//Определение функции-обработчика события onclick кнопки
"Заказ"
function ref() {
/*Вызов метода showModalDialog для обмена информацией с
диалоговым окном. Первый аргумент метода указывает файл
zakaz.html, который отвечает содержимому диалога. Второй
аргумент отсутствует. Третий аргумент определяет набор
отображаемых элементов диалогового окна. Возвращаемое
значение диалогового окна передается массиву client.
*/
var client = new Array();
client = window.showModalDialog("zakaz.html",
"dialogwidth:15em;
dialogHeight:18em");
//Определение количества заказанных блюд и стоимости
заказа
var zakNumber = 0 ;
var zakSum = 0;
for(var i=0; i<4; i++){
zakNumber += client[i];
zakSum += client[i]*price[i];
)
Sum.value = zakSum;
Num.value =" Вы заказали "+zakNumber+" блюда";
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<Н2>Китайский ресторан</Н2>
<INPUT type="button" style="background:lightgrey"
value="Заказ"
onClick="ref() ; ">
<BR><BR>
<INPUT type="text" id="Num" size=25>
<BR><BR>
Сумма заказа, $:<BR>
<INPUT type="text" id="Sum" size=10>
</CENTER>
</BODY>
</HTML>
334 ГЛАВА 12
Приведем код диалогового окна, содержащегося в файле zakaz.html. Основные пояс-
нения дадим в комментариях:
<HTML>
<HEAD>
<Т1ТЪЕ>Меню</TITLE>
<SCRIPT language = "JavaScript">
/* Определение массива-индикатора zak. Элементы этого
массива принимают только два значения: 0 ("не заказано")
и 1 "заказано")*/
var zak = new Array{);
//Обнуление начальных значений элементов массива zak
for (var i=0; i<4; i++)
zak[i] = 0;
//Определение функции обработчика onclick кнопки OK
function outvalues() {
/* Определение возвращаемых значений (массива zak) и
закрытие диалогового окна
*/
window.returnvalue = zak;
window.close();
}
</SCRIPT>
</HEAD>
<BODY leftmargin=40 style="text-align:left;
background:lightgrey">
<BR>
<Н2>Меню </H2>
<НЗ>Сделайте заказ</НЗ>
<P>
<FORM name="menu">
<INPUT type=checkbox name="menuOptions" Акульи плавники<ВР> onclick="zak[0]=1">
<INPUT type=checkbox name="menuOptions" Рыбий желудок<ВР> onclick="zak[l]=1">
<INPUT type=checkbox name="menuOptions" Летучая мышь<ВР> onclick="zak[2]=1">
<INPUT /FORM> type=checkbox name="menuOptions" Ростки бамбука<ВВ> onclick="zak[3]=1">
cINPUT TYPE=button style="width:5em" value="0K"
onelick="outvalues()">
</BODY>
</HTML>
Управление окнами
335
При операциях с диалоговыми окнами помните два основных
свойства объектной модели окна, это: window.returnvalue
(возврат значений из диалогового окна в приложение) и
window. dialogArguments (передача данных из приложения
в диалоговое окно).
Обработка событий окна
Напомним, что к событиям окна относятся события, связанные с загрузкой и выгрузкой
документа. Рассмотрим обработку этих событий в динамическом HTML.
Событие onLoad для различных элементов
После анализа документа и его разметки браузер переходит к загрузке внедренных
элементов. Проследить последовательность загрузки различных элементов и всего до-
кумента можно с помощью события onload (см. пункт «События загрузки и выгрузки»
главы 11).
Для определения очередности наступления событий загрузки рассмотрим пример
документа, содержащего изображение. Установим обработчик события onload в тегах
<IMG> и <BODY>:
<HTML>
<HEAD>
<Т1ТЬЕ>Последовательность событий onload</TITLE>
</HEAD>
<BODY onload="alert('Наступление onload для BODY');">
<!-- Инструкции HTML-документа -->
<IMG src="puz.jpg" onload="alert('Наступление onload для
IMG');">
<!-- Инструкции HTML-документа -->
</BODY>
</HTML>
Обработчики событий onload будут захватываться по мере загрузки элементов
документа. Сначала всплывет сообщение «Наступление onload для IMG», которое
сигнализирует о том, что загружено изображение. После этого появится сообщение «На-
ступление onload для BODY», сигнализирующее о загрузке всего документа. Для объ-
екта window не существует элемента - прямого аналога в коде HTML (как, например,
для изображения). Однако по поведению элемента BODY можно сказать, что событие
onload для объекта window возникает, когда документ целиком проанализирован и
все его элементы (включая и все рисунки) загружены.
336
ГЛАВА 12
Проверка загрузки документа
Чтобы избежать обращения к какому-либо элементу HTML до окончания загрузки
документа, можно поступить следующим образом. Воспользуемся событием
onload объекта window, которое возникает, когда документ целиком проанализи-
рован и выполнена его начальная загрузка. В тег <BODY> (или в тег <FRAMESET>,
если речь идет о фрейме) введем обработчик событий onload (), для которого оп-
ределим новое свойство объекта window. Это свойство, назовем его isLoaded,
будет принимать значение true лишь в случае загрузки документа:
<BODY onload^"window.isLoaded=true;">
Теперь при запуске других обработчиков событий можно проверять значение
window. isLoaded с тем, чтобы быть уверенными, что документ полностью загружен
и все содержащиеся в нем объекты определены. Приведем пример такой проверки для
элемента button, построив документ по следующей схеме:
<HTML>
<HEAD>
<TITLE>3anycK обработчика с проверкой</Т1ТЬЕ>
<SCRIPT>
window.isLoaded=false;
//Любая функция обработчика события
function inform() {
alert("Документ загружен");
}
</SCRIPT>
</HEAD>
<BODY onLoad="window.isLoaded=true;">
<!-- Инструкции HTML-документа -->
<INPUT TYPE=BUTTON NAME=rest VALUE="Сведения о загрузке"
onClick="if(window.isLoaded)inform();">
<!-- Инструкции HTML-документа -->
</BODY>
</HTML>
Нажатие кнопки «Сведения о загрузке» будет обрабатываться лишь в случае значе-
ния window. isLoaded=true, то есть для загруженного документа. В принципе
подобные проверки значения флага window. isLoaded можно установить во всех
обработчиках событий, которые должны исполняться при условии полной загрузки
документа.
Управление окнами
337
Все сказанное выше справедливо для обработчиков событий, составленных на
JavaScript. Обработчики событий VBScript захватываются на последней стадии ана-
лиза, непосредственно перед переходом документа в состояние завершения загрузки.
Поэтому для них не требуется проверка окончания загрузки (кроме случаев обраще-
ния к другим документам).
£ Обработчик события onLoadO не поддерживается в устарев-
ших версиях Netscape Navigator (2.0 и старше). В версии Internet
$ Explorer 4.0 и выше имеется более мощный, чем onLoad (), обра-
ботчик события - это onReadystatechange(). Событие
\ readystatechange генерируется, когда изменяется состояние
s; страницы или объекта.
ГЛАВА 13
Управление документом
Объект document
В предыдущей главе мы рассматривали центральные объекты на клиентской стороне
JavaScript - это окна и фреймы. Уровнем ниже относительно window располагается
объект document (Рис. 12.1), который представляет Web-документ. То, что видит
пользователь в окне документа: текст, ссылки, рисунки, кнопки и проч., - все это
входит в состав объекта document. Эти составляющие документа представляются
в объектной модели как свойства document.
Свойства объекта document возвращают данные о документе: его URL, дате по-
следнего изменения, URL связанных документов, цветах текста и проч. Мощные ме-
тоды, которыми располагает этот объект, дают возможность программировать
элементы документа. Связывая с элементами документа определенные события и
записывая соответствующие сценарии, можно создать динамический документ, вид
которого будет зависеть от действий пользователя.
Иерархическая структура и ссылки на элементы
документа
Браузер ориентируется на определенную модель документа, причем объектные мо-
дели документа для Netscape и Internet Explorer существенно различаются. Мы будем
рассматривать в основном модель объектов Internet Explorer.
Структуру объекта document можно изобразить в виде схемы (Рис. 13.1). Из этой
схемы видим, что document содержит ряд семейств, свойств и методов, - они вы-
делены в отдельные столбцы.
На приведенном рисунке показаны только два верхних уровня иерархии, в то время как
структура продолжается и на более низкие уровни Так, в семействе images [ ] может
содержаться несколько элементов-рисунков, а семейство forms [ ] включает в себя до-
черние объекты elements []. Манипулирование различными компонентами Web-
страниц - это фактически манипулирование элементами разных семейств объекта
document. Поэтому очень важно знать, как получить доступ к нужному элементу в ие-
рархической структуре.
Каждый объект в иерархической структуре относится к тому или иному семейству.
Внутри семейства объекту присваивается порядковый номер (индекс) и может быть при-
своено имя (идентификатор). Порядковые номера записываются так же, как номера
элементов массива, например, images [ 0 ] (первый рисунок в документе) или
frames [ 1 ] (второй фрейм). Нумерация элементов семейств, как и нумерация в масси-
вах JavaScript, начинается с 0.
Управление документом
339
Рис. 13.1. Семейства объекта document
Чтобы получить доступ к объекту, нужно указать объект верхнего уровня, т.е.
document, и затем через точку записать путь по иерархической структуре к самому
объекту, например,
document.images[1]
document.forms[0].elements[2]
Здесь elements [ ] обозначает массив элементов формы forms [ 0 ]. Понятно, что мас-
сив elements [ ] может иметь и другое имя, выбранное разработчиком. Более того,
вместо обращения через порядковый номер элемента в массиве можно получить доступ,
используя идентификаторы элементов и массивов, например,
document.forms[0].originalButton
или
document.myForm.originalButton
340
ГЛАВА 13
Использование идентификаторов удобно, когда вы имеете дело с большим докумен-
том. В этом случае ссылки на элементы с помощью индексов массивов могут запу-
тать разработчика.
Запись ссылок на объект document
В предыдущем пункте мы разобрали, как осуществляется доступ к объектам, входящим
в структуру document. А как же обратиться к самому объекту document? Поскольку
этот объект подчинен window, ссылки на него выглядят просто как
window.document
Если же нужно сослаться на свойство документа, загруженного в окно браузера, то
можно записать:
window.document.title
- это ссылка на заголовок. Вместо window в этих обращениях может использоваться
имя окна.
< При ссылках на текущий документ родительский объект window
можно вообще не указывать, то есть для краткости записи вы
' можете обращаться напрямую к объекту document текущего
окна, например, document. title.
Семейства, свойства и методы
Семейства объекта document напрямую связаны с элементами документа. Так, семей-
ство all включает в себя все элементы, находящиеся в файле HTML, семейство
anchors содержит все закладки, applets - апплеты на языке Java, forms - HTML-
формы, имеющиеся в документе, и т.д.. Семейства, отображенные на Рис. 13.1, напри-
мер, frames или forms, присутствуют в объекте document всегда, независимо от
того, есть ли фреймы или формы в данном документе.
Семейства являются массивами с конечным числом элементов, причем количество
элементов в семействе определяется свойством length. Чтобы определить полное ко-
личество элементов в HTML-документе, можете ввести в сценарий следующую команду
alert(document.all.length);
Кроме семейств, объект document содержит свойства. Одно из них мы уже привели
выше - это свойство title, которое содержит строку-заголовок документа. Перечис-
лим остальные свойства document.
✓ location - возвращает унифицированный указатель ресурса (в Netscape синони-
мом этого свойства является URL);
Управление документом
341
✓ lastModified - строка, которая определяет дату и время последнего изменения,
внесенного в документ: дату и время последнего изменения возвращает также свой-
ство f il eModi f iedDate;
✓ f i 1 eCreatedDate - возвращает дату создания документа;
✓ fileUpdatedDate - возвращает дату последнего обновления файла сервером;
✓ cookie - возвращает список, содержащий пары имя-значение, cookie - это не-
большие массивы данных, сохраняемые браузером и связанные с определенной Web-
страницей или сервером. Свойство cookie позволяет считывать, создавать, моди-
фицировать и уничтожать указанные данные;
✓ referrer - возвращает URL ресурса, с которого был выполнен переход по гипер-
ссылке к данному документу;
✓ bgColor - свойство для чтения и записи, которое возвращает цвет фона документа;
этому свойству отвечает одноименный атрибут в теге <BODY>;
✓ f gColor - свойство, отвечающее цвету текста документа и представленное атрибу-
том text в теге <BODY>;
✓ linkColor - свойство для чтения и записи, которое отвечает цвету гиперссылки;
в теге <BODY> этому свойству отвечает атрибут link, который по умолчанию пола-
гается равным blue (#0000FF);
✓ alinkColor - свойство, возвращающее цвет активной гиперссылки и имеющее
эквивалент al ink в теге <BODY> (в Internet Explorer не поддерживается); по умолча-
нию свойство alinkColor возвращает значение red (#FFOOOO);
✓ vlinkColor - свойство, отвечающее цвету просмотренной гиперссылки и атрибу-
ту vlink в теге <BODY>; по умолчанию vlinkColor возвращает значение purple
(#800080).
Каждое из приведенных свойств принимает строковое значение. Помимо свойств,
объект document включает в себя ряд методов, позволяющих, например, динамиче-
ски выводить текст документа, открывать и закрывать документ (см. приведенный
ниже рисунок).
Вывод свойств объекта document
Возможно, вам будет интересно просмотреть строковые значения свойств текущего до-
кумента. Запишем код страницы, содержащей простой сценарий, который выведет на
экран сообщение с перечислением свойств документа:
<HTML>
<HEAD>
<Т1ТЬЕ>Свойства</Т1ТЬЕ>
<SCRIPT LANGUAGE^’JavaScript">
alert(document.title+1\n'+
document.location+'\n'+
342
ГЛАВА 13
document.bgColor+'\n'+
document.fgColor+'\n'+
document.linkColor+'\n'+
document.alinkColor+’ \n' +
document.vlinkColor+'\n'+
document.lastModified);
</SCRIPT>
</HEAD>
<BODY>
<!-- Содержание документа -->
</BODY>
</HTML>
На Рис. 13.2 показан пример выпадающего сообщения. Свойство document. location
записано как URL файла, размещенного на жестком диске, а в качестве свойств, от-
вечающих цветам документа, указаны значения, принятые по умолчанию.
Рис. 13.2. Пример значений свойств документа
При установке цвета нужно учитывать, что свойства докумен-
та (равно как и атрибуты тега <body>) имеют более низкий
приоритет, чем таблицы стилей. Поэтому, если цвет опреде-
лен в таблице стилей, назначения цвета с помощью свойств до-
кумента будут проигнорированы.
Работа с документом
В первых версиях браузеров (Internet Explorer 3.0 и старше) не было предусмотрено ка-
ких-либо средств, изменяющих отображение документа на экране. Такие средства в виде
методов write, writein, open и close появились в более поздних версиях. Эти ме-
тоды позволяют в ходе загрузки страницы или вследствие других событий сгенериро-
вать новый HTML-документ в том же текущем окне, в другом фрейме или в другом окне
браузера. То есть речь идет о создании нового потока HTML.
Управление документом
343
Методы write и writein
Одним из важных методов объекта document является, безусловно, метод write, ко-
торый позволяет динамически изменять содержание Web-страницы с помощью сцена-
рия. В предыдущих главах мы неоднократно пользовались методом write для вывода
в окно браузера нового содержания, указанного в аргументах метода. В следующей гла-
ве вы узнаете, как с помощью этого метода можно динамически генерировать содержа-
ние Web-страницы (см. раздел «Неоновый» текст» главы 14).
Метод write чаще всего используется для вывода текста в окно браузера, поскольку
аргументы этого метода конвертируются в строки перед их выводом.
Часто считают, что метод write может работать только с одним аргументом. Поэтому
при выводе нескольких аргументов применяют конкатенацию, например,
document.write ("X равно: ",+х);
Однако этому методу можно передавать более, чем один аргумент, при этом аргументы
конвертируются в строки. Благодаря этому возможны записи типа:
document.write ("Сегодня: ",
datetime.toLocaleString(),"<br>");
Метод writein аналогичен методу write, однако он присоединяет к концу выводи-
мой строки символ конца строки. Но, поскольку анализатор HTML-кода игнорирует раз-
рывы строк, при составлении сценария для HTML-документа можно пользоваться как
одним, так и другим методом, получая идентичные результаты.
Изменение содержания документа
(методы open, close, write)
С помощью комбинации методов write и open можно создавать новые документы
в других окнах или фреймах. Запишем простой код, который демонстрирует открытие
потока HTML в новом окне (метод open), вывод информации в новом потоке (метод
write) и закрытие потока (метод close):
<HTML>
<HEAD>
<Т1ТЬЕ>Поток в новом окне</Т1ТЬЕ>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
var NewWin=window.open("","Novost");
//Открытие потока в новом окне NewWin
NewWin.document.open();
//Вывод информации в новое окно
NewWin.document.write("Информация в новом окне");
//Закрытие потока в новом окне
344
ГЛАВА 13
NewWin.document.close();
</SCRIPT>
</BODY>
</HTML>
После загрузки этого документа будет открыто новое окно, в которое будет выведен
текст «Информация в новом окне».
Задание цветов фона и текста
(свойства bgColor и fgColor)
Напомним, что фоновый цвет окна можно установить с помощью атрибута bgColor
тега <BODY> (см. раздел «Свойства цвета и фона» главы 3). Однако вы можете задавать
цвет фона динамически, как отклик на то или иное событие. Для этого используется од-
ноименное свойство bgColor объекта document. С помощью другого свойства,
f gColor, возможно задание цвета текста в HTML-документе.
Составим сценарий, который позволит изменять цвета фона и текста. Новые значения
цвета будем вводить с помощью формы. Код HTML-документа может выглядеть сле-
дующим образом:
<HTML>
<HEAD>
<TITLE>Onpeделение Цветове/TITLE>
cSCRIPT LANGUAGES JavaScript ">
function selColor() {
document.bgColor=document.forms[0].beol.value;
document.fgColor=document.forms[0].teol.value;
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<Н2>Задайте цвета</Н2>
<FORM>
Цвет фона<ВЕ>
cINPUT type="text" name="bcol" size=10 value="">
<BR><BR>
Цвет текста<ВЦ>
cINPUT type="text" name="tcol" size=10 value="">
<BRxBR>
cINPUT type="button" value="0K" onclick="selColor()">
</FORM>
c/CENTER>
</BODY>
</HTML>
Управление документом
345
В два текстовых поля вводятся значения цвета, и после нажатия на кнопку ОК заданные
цвета будут присвоены фону и тексту документа. В результате Web-страница может
приобрести вид, показанный на Рис. 13.3, на котором фону присвоен красный цвет, а
шрифту - белый. Значения цвета можно вводить как в виде шестнадцатеричных чисел,
так и словами, например, для создания белого текста в текстовом поле пишется
#ffffff или white.
Рис. 13.3. Задание значений атрибутов bgColor и fgColor
В обозначениях свойств объектов следует придерживаться пра-
вил использования прописных букв, например, это касается
свойств bgColor, fgColor, HnkColor, alinkColor, vlinkColor. Если вме-
i сто прописной «С» написать строчную букву, соответствующая
; инструкция будет проигнорирована или будет выведено сообще-
ние об ошибке.
Задание цвета гиперссылок
(свойства linkcolor, alinkColor и vlinkColor)
Как известно, атрибуты link, al ink и vlink внутри тега <BODY> задают цвет гипер-
ссылок (см. раздел «Цвет ссылок» главы 2). В JavaScript этим атрибутам соответствуют
свойства linkcolor, alinkColor и vlinkColor объекта document. Обращение
к этим свойствам выполняется аналогично тому, как это делается для свойств bgColor
и fgColor. Например, для управления цветами ссылок вы можете в сценарии задать
функцию:
function setcolor(linked, alinkcol, vlinkcol) {
document.linkColor=linkcol;
document.alinkColor=alinkcol;
document.vlinkColor=vlinkcol;
J
346
ГЛАВА 13
С помощью такой функции можно динамически изменять цветовую схему гиперссылок.
Например, оператор setcolor ("green", "", "olive") задает исходный цвет ссы-
лок и цвет просмотренных ссылок.
Напомним, что в Internet Explorer вы можете задать только ис-
ходный цвет ссылки (свойство linkcolor) и цвет просмотрен- J»_
ной ссылки (свойство vlinkColor). Специальный цвет для ак-
тивной ссылки (свойство alinkColor) в этом браузере не пре-
$ дусмотрен.
Изменение заголовка документа (свойство title)
В строке заголовка окна HTML-документа обычно отображается содержимое тега
<TITLE>. Вы можете изменить содержимое строки заголовка, если воспользуетесь свой-
ством document. title., которое хранит заголовок текущего документа. Присвоив но-
вое строковое значение свойству document. title., вы измените заголовок.
Допустим, вы хотите, чтобы заголовок имел вид «Добро пожаловать, . . .», где
вместо многоточия должно подставляться имя посетителя. Для этого введите в сценарий
JavaScript соответствующую функцию def title () и запишите код документа в виде:
<HTML>
<HEAD>
<TITLE>Onpeделение заголовка</Т1ТЬЕ>
<SCRIPT LANGUAGES"JavaScript">
function deftitleO {
var gn=document.forms[0].guestname.value
document.title="Добро пожаловать, "+gn;
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<Н2>Измените заголовок</Н2>
<FORM>
Введите имя<ВЕ>
<INPUT type="text" name="guestname" size=10 value="">
<BR><BR>
<INPUT type="button" value="OK" onclick="deftitle()">
</FORM>
</CENTER>
</BODY>
</HTML>
В текстовое поле нужно ввести имя посетителя и затем нажать кнопку ОК. После этого
в строке заголовка документа появится нужная надпись (см. Рис. 13.4). Имя посетителя
Управление документом
347
хранится в свойстве guestname. value элемента формы и затем после события
onclick с помощью функции def title () имя выводится в строку заголовка.
Рис. 13.4. Пример задания заголовка документа
Даты
Иногда посетителю сайта бывает полезно знать, когда вносились последние изменения
в текущую Web-страницу. Исходя из этого, он может судить, насколько актуальна пред-
ставленная на странице информация.
Свойство document. lastModif ied дает информацию о том, когда документ моди-
фицировался последний раз. Запишите простой сценарий:
<SCRIPT LANGUAGE="JavaScript">
window.defaultStatus="Дата последнего изменения документа: "+
document.lastModified;
</SCRIPT>
Сразу после загрузки документа в строке состояния появится сообщение с указанием даты
последнего изменения документа, например, «Дата последнего изменения документа
10/15/2005 13:42:12».
Семейства элементов документа
Структура документа в объектной модели представляется набором семейств, показан-
ных на Рис. 13.1. С помощью семейств anchors, applets, frames, forms и других
обеспечивается доступ ко всем элементам HTML, содержащимся внутри документа. Для
программирования Web-страниц нужно правильно представлять взаимосвязь различных
элементов документа и способы доступа к ним. Этими вопросами мы займемся
в настоящем разделе.
348
ГЛАВА 13
Семейство all
Семейства, представленные различными HTML-элементами, являются, в свою очередь,
подмножествами семейства all. Это семейство включает все элементы данного докумен-
та HTML. Универсальность семейства all заключается в том, что набор свойств и мето-
дов этого семейства поддерживаются всеми другими семействами документа.
Количество элементов в документе (свойство length)
Самым простым и в то же время фундаментальным свойством семейства al 1 является
его размер. Для семейства all это свойство записывается как
document. all. length. Включим в HTML-документ сценарий, который выведет на
экран сообщение с указанием количества элементов в документе:
<HTML>
<HEAD>
<Т1ТЬЕ>Документ</Т1ТЬЕ>
</HEAD>
<BODY>
<!-- Содержание документа -->
<SCRIPT LANGUAGE="JavaScript">
alert(document.all.length);
</SCRIPT>
</BODY>
</HTML>
Для данного документа, содержащего в контейнере BODY только комментарий, будет
выведено сообщение с указанием числа 6. Нетрудно видеть, что это число складывается
из элементов: HTML, HEAD, TITLE, BODY, SCRIPT и комментария.
Оператор alert (document. all. length) выводит количество
элементов, расположенных перед сценарием, с учетом тега
<script>. Поэтому для подсчета полного числа элементов не-
обходимо сценарий размещать перед закрывающим тегом
</BODY>.
Доступ к элементам документа (метод item(), свойство tagName)
Проще всего доступ к элементам документа получить с помощью метода item().
В качестве аргумента этого метода указывается порядковый номер элемента или иден-
тификатор строки с атрибутом name либо с id элемента.
Чтобы просмотреть множество all, можете составить простой сценарий с оператором
цикла, который будет перебирать все элементы текущего документа, которые размеще-
ны до тега <SCRIPT>:
<SCRIPT LANGUAGES JavaScript ">
for(var i=0; i<document.all.length; i++)
Управление документом
349
alert(document.all.item(i).tagName);
</SCRIPT>
Для каждого i в операторе цикла выполняется сравнение i<document. all. length.
Поскольку номера элементов семейства all начинаются с нуля, порядковый номер по-
следнего элемента на единицу меньше величины document .all. length. Чтобы по-
лучить перечисление всех элементов, входящих в документ, необходимо сценарий по-
ставить в конец тела BODY.
Массив all [] состоит из именованных элементов, поэтому вместо обращения
к элементам через метод item () можно обратиться к ним напрямую:
document.all[i].tagName
Итак, мы рассмотрели ссылки на элемент по его порядковому номеру в массиве all [ ].
Возможны также ссылки, в которых используются атрибуты name или id. Вернемся для
примера к разделу «Изменение заголовка документа (свойство title)». Применим для
доступа к полю ввода guestname метод item, в котором в качестве аргумента запи-
сано имя поля:
document.all.item("guestname")
При обращении напрямую к элементу массива all [ ] можно записать:
document.all["guestname"]
Возможно также обращение к элементу массива через свойство семейства:
document.all.guestname
Подытожим сказанное в простом примере. Введем в HTML-документ раздела «Измене-
ние заголовка документа» следующий сценарий:
<SCRIPT LANGUAGE^'JavaScript">
alert(document.all.item("guestname").tagName);
alert(document.all["guestname"].tagName);
alert(document.all.gues tname.tagName);
</SCRIPT>
После загрузки документа на экран последовательно будет выведено три одинаковых
сообщения: «INPUT» - именно этот элемент имеет атрибут name="guestname". Отме-
тим, что приведенный выше сценарий должен размещаться после элемента INPUT.
Определение индекса элемента (свойство sourceindex)
Итак, для каждого документа браузер автоматически создает массив all [ ]. Доступ к
какому-либо элементу этого массива возможен как по порядковому номеру элемента,
так и по его имени. Однако порядковый номер элемента не всегда легко определить,
особенно, если документ велик. В этом случае удобным может оказаться свойство
350
ГЛАВА 13
sourceindex., которое возвращает значение индекса элемента в массиве all [ ].
Например, в следующем документе:
<HTML>
<HEAD>
cTITLE id=nazv>CBoiiCTBo sourceIndex</TITLE>
</HEAD>
<BODY>
<H1 id=zagl>OnpefleneHwe индекса элемента </Н1>
<SCRIPT LANGUAGE="JavaScript">
alert("Индексы элементов <TITLE> и <H1>:”
+nazv.sourcelndex+" и "+zagl.sourceindex);
</SCRIPT>
</BODY>
</HTML>
на экран будет выведено сообщение, что индексы элементов <TITLE> и <Н1> равны
соответственно 2 и 4.
Динамическое содержание документа
Ранее вы неоднократно встречались с методом document.write (), позволяющим ме-
нять содержание документа. В настоящем разделе мы рассмотрим другие способы ма-
нипулирования содержанием, которые обеспечиваются четырьмя свойствами
(innerText, innerHTML, outerText, outerHTML) и двумя методами
(insertAdjacentHTML, insertAdjacentText). Эти свойства и методы примени-
мы к любому элементу документа и предоставляют наиболее простые способы управле-
ния содержанием.
Свойства динамического содержания
Что означают слова «изменение содержания документа»? На языке HTML это значит,
что, во-первых, могут изменяться, добавляться или удаляться некоторые теги, а, во-
вторых, может меняться содержимое тегов. Такие изменения могут определяться с по-
мощью свойств innerText, innerHTML, outerText и outerHTML. Чтобы пояс-
нить каждое из этих свойств, рассмотрим простой элемент:
<DIV id=agr>3a£im4Te на этот cawT</DIV>
Свойство innerText представляет содержание элемента, то есть имеет значение
"Зайдите на этот сайт". Это нетрудно проверить с помощью скрипта:
<SCRIPT LANGUAGE="JavaScript">
alert(document.all.agr.innerText);
</SCRIPT>
Управление документом
351
Свойство innerHTML также представляет содержание элемента, но оно включает
HTML-разметку всех дочерних элементов. Рассмотрим документ с элементом <DIV>,
в который вложен элемент <SPAN>:
<HTML>
<HEAD>
<Т1ТЬЕ>Свойство innerHTML</TITLE>
</HEAD>
<BODY>
<DIV id=agr>Ecnw у вас есть время,
<SPAN style="font-weight:bold; color:blue">зайдите на этот
сайт
</SPAN>
</DIV>
<SCRIPT language="JavaScript">
alert(document.all.agr.innerHTML);
</SCRIPT>
</BODY>
</HTML>
В результате на экране появится сообщение (Рис. 13.5), в котором вы прочтете значение
свойства innerHTML для объекта agr.
Рис. 13.5. Сообщение, в котором указано значение свойства innerHTML объекта agr
Таким образом, свойства innerText и innerHTML - это внутренние свойства элемента
HTML. В отличие от них, внешние свойства outerText и outerHTML относятся ко все-
му элементу, а не к его содержанию. Так, для приведенного выше элемента <DIV> значе-
нием свойства outerHTML будет содержание элемента вместе с внешними тегами:
<DIV id=agr>Ecnw у вас есть время,<SPAN style="font-
weight :bold; color:blue">зайдите на этот сайт</8РАИ></В1У>
Другое внешнее свойство, outerText, возвращает то же значение, что и внутреннее
свойство innerText. Разница заключается в том, что эти свойства по-разному себя
ведут при присвоении им новых значений. Так, установив новое значение для
innerText, вы измените содержание элемента, в то время как установка нового значе-
ния для outerText заменит весь элемент новым текстом.
352 ГЛАВА 13
Исчезновение элемента (свойство outerText)
Различие между свойствами динамического содержания лучше всего изучать на приме-
рах. Рассмотрим операцию установки свойства outerText для HTML-элемента, в ре-
зультате которой удаляются теги самого элемента:
<HTML>
<HEAD>
<Т1ТЬЕ>Присвоение свойства outerText</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function change() {
document.all.agr.outerText=
"Вы заменили весь элемент заголовка данным тек-
стом" ;
}
</SCRIPT>
</HEAD>
<BODY>
<Н1 id=agr style="cursor:hand"
onclick-’change()'>Щелкните на этом заголовке
</Н1>
</BODY>
</HTML>
Щелчок на заголовке <Н1> в документе вызывает функцию change (), которая заме-
няет элемент <Н1> простым текстом. Если вместо outerText в функции changeO
использовать свойство innerText, теги заголовка будут сохранены, и оформление
текста останется прежним.
Замена элемента (свойство outerHTML)
Если на странице вам нужно обеспечить динамическую замену одного элемента другим,
для этого проще всего воспользоваться свойством outerHTML. Приведем простой
пример страницы, на которой имеются две кнопки: щелчок на одной из них приводит
к исчезновению кнопки и появлению на ее месте текста, а щелчок на другой кнопке при-
водит к замене кнопки на картинку:
<HTML>
<HEAD>
<Т1ТЬЕ>Замена кнопки</Т1ТЬЕ>
</HEAD>
<BODY>
<CENTER>
<Н2>Замена содержимого документа</Н2>
cINPUT type=button value="Информация”
onClick="this.outerHTML-
'Вы управляете содержимым документа’”>
<BR><BR>
Управление документом
353
<INPUT type=button value="Рисунок"
onClick="this.outerHTML=1<IMG згс=Такса.gif>'">
</CENTER>
</BODY>
</HTML>
Исходное содержание документа показано на Рис. 13.6, а. На соседнем рисунке (Рис. 13.6, б)
приведен вид документа после того, как нажаты обе кнопки.
Рис. 13.6. Пример замены кнопки на различные элементы документа:
а - исходный документ; б - документ после замены
Электронные часы (свойство innerText)
Ранее рассматривался пример создания цифровых часов в строке состояния (см. раздел
«Пример. Цифровые часы в строке состояния» главы 12). Теперь опишем часы, которые
выводятся в текстовый элемент <SPAN>. Содержимое этого элемента обновляется с по-
мощью свойства innerText каждые 1000 миллисекунд. Полный листинг HTML-
документа выглядит следующим образом:
<HTML>
<HEAD>
<Т1ТЬЕ>Электронные часы</Т1ТЬЕ>
<STYLE type="text/css">
#tictac {color:blue; font-size:110%)
</STYLE>
<SCRIPT LANGUAGE^’JavaScript">
function aheadO(x){
return(x<10)?"0"+x.toString():x;
}
function currClock(){
var time=new Date();
var hour=time.getHours();
var minut=time.getMinutes();
var sec=time.getSeconds()
354 ГЛАВА 13
return aheadO(hour)+":"+aheadO(minut)+":"+
aheadO(sec);
}
function tick(){
document.all.tictac.innerText=currClock();
}
</SCRIPT>
</HEAD>
<BODY
onUnload="if(null!=window.tmr)clearInterval(window.tmr);"
onload^"window.tmr=setInterval(1tick()',1000);">
<CENTER>
<Н2>Электронные часы</Н2>
<Р>Текущее время:
<SPAN id="tictac">
<SCRIPT LANGUAGE="JavaScript">
document.write(currClock());
</SCRIPT>
</SPAN>
</CENTER>
</BODY>
</HTML>
Для отображения текущего времени браузер должен быть версии не ниже Internet
Explorer 4.0. Страница в окне браузера показана на Рис. 13.7.
Рис. 13.7. Электронные часы. Пример обновления содержимого документа
с помощью свойства innerText
Управление документом
355
Создание элемента с помощью метода write()
Итак, вы уже представляете, как с помощью свойств динамического содержания созда-
ется теговая структура документа HTML. Воспроизведение полученной таким образом
структуры на Web-странице можно выполнить с помощью метода docu-
ment . write (). Приведем пример создания заголовка:
<HTML>
<HEAD>
<Т1ТЬЕ>Создание элемента</Т1ТЬЕ>
<SCRIPT language="JavaScript">
function buildElement(){
var tag="<H1>";
tag+="Текст заголовка";
tag+="</Hl>"
return tag;
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE^'JavaScript ">
document.write(buildElement());
</SCRIPT>
</BODY>
</HTML>
В этом документе решается простейшая задача создания заголовка <Н1>. В дальнейшем
мы будем пользоваться описанным способом для создания более сложного динамиче-
ского содержания.
Методы Adjacent
В JavaScript для динамического управления содержанием документа предусмотрены
методы insertAdj acentHTML и insertAdj acentText, которые предназначены
для вставки соответственно кода или текста в контейнеры HTML. Их удобно приме-
нять, когда необходимо вставить содержание, которое не повлияет на остальное со-
держание документа. Например, вы хотите изменить стиль определенных элементов
или добавить содержание при некотором событии.
Различные позиции вставки содержания
Рассматриваемые методы содержат два аргумента, например,
insertAdj acentHTML("argl", "arg2")
и аналогично записывается метод insertAdj acentText (). Первый аргумент
argl определяет место вставки содержания, а второй аргумент arg2 - собственно
356
ГЛАВА 13
содержание. Возможны четыре места вставки содержания и соответственно четыре
значения первого аргумента:
✓ beforeBegin - перед открывающим тегом;
✓ afterBegin - после открывающего тега;
✓ beforeEnd - перед закрывающим тегом;
✓ af terEnd - после закрывающего тега.
Различные значения argl проиллюстрируем следующим примером. Пусть на
исходной странице имеется один элемент - заголовок <Н2>. Составим сценарий,
который будет выполнять вставку контейнера верхних индексов <SUP> в различные
позиции относительно тегов заголовка <Н2>...</Н2>. Для удобства место вставки
будет отображаться текстом, содержащимся в контейнере <SUP> (значения аргумен-
тов argl и arg2 одинаковы). Результирующая страница будет описываться кодом:
<HTML>
<HEAD>
<Т1ТЬЕ>Первый аргумент в методе
insertAdj acentHTML</TITLE>
</HEAD>
<BODY>
<CENTER>
<H2 id=zag>MecTo вставки<ВИ>
изменить можно...
</H2>
<SCRIPT language="JavaScript">
zag.insertAdj acentHTML("beforeBegin",
"<SUP>"+"beforeBegin"+"</SUP>");
zag.insertAdjacentHTML("afterBegin",
"<SUP>"+"afterBegin"+"</SUP>");
zag.insertAdjacentHTML("beforeEnd",
"<SUP>"+"beforeEnd"+"</SUP>") ;
zag.insertAdjacentHTML("afterEnd",
"<SUP>"+"afterEnd"+"</SUP>");
</SCRIPT>
</CENTER>
</BODY>
</HTML>
Внешний вид полученной страницы можете видеть на Рис. 13.8.
Управление документом
357
Рис. 13.8. Примеры различных значений аргументов метода insertAdj acentHTML
Нетрудно заметить, что вставка элементов <SUP> с помощью приведенного выше сце-
нария эквивалентна следующему HTML-коду:
<SUP>beforeBegin</SUP>
<Н2>
<SUP>af terBegin</SUP>
Место вставки <BR>
изменить можно...
<SUP>beforeEnd</SUP>
</H2>
< SUP> af t erEnd</SUP>
Динамические сноски
При оформлении текстов на Web-страницах иногда применяются сноски, которые име-
ют вид цифр-надиндексов. Если щелкнуть мышью на номере сноски, ее текст выводится
в отдельное окно сообщения. Рассмотрим создание таких сносок.
Прежде всего, в HTML-документе выделим текст с помощью элементов <SPAN> и при-
своим этому классу имя "note", например,
<BODY>
<НЗ>3.Косидовский. «Когда солнце было богом»
<SPAN class="note">
Отрывок из книги, в котором речь идет об экспедиции Наполеона
в Египет в 1798-1801 гг.
</SPAN>
</НЗ>
Однако вместо текстовых блоков <SPAN> в документе должны отображаться только
номера сносок. Поэтому с элементами <SPAN> свяжем стиль, отключающий вывод бло-
ков на экран:
358
ГЛАВА 13
<STYLE type="text/css">
SPAN {display:none}
</STYLE>
Номера сносок будем отображать с помощью элементов <SUP>. Эти элементы вводятся
перед тегами <SPAN> с помощью метода insertAdjacentHTML, например,
insertAdjacentHTML("beforeBegin","<SUP>"+l+"</SUP>");
Для элементов номеров сносок <SUP> определим класс redhand, чтобы номера сносок
отображались одним шрифтом 10 пт красного цвета, а указатель мыши на них принимал
форму руки:
SUP.redhand {color:red; font-size:lOpt; cursor:hand}
В результате информация о стилях будет иметь вид:
<STYLE type="text/css">
SPAN {display:none}
SUP.redhand {color:red; cursor:hand}
</STYLE>
Займемся теперь созданием системы сносок. Исходным материалом для формирования
сносок на странице должен быть полный текст документа, в котором текст сносок отме-
чается только тегами:
<SPAN class="note">Текст chockh</SPAN>
Мы задали стили, чтобы текст сносок был невидимым, а номера сносок отмечались
красным цветом и изображением руки при наведении мыши. Теперь предстоит записать
функцию (назовем ее createNotes ()), которая будет автоматически создавать такую
систему сносок при загрузке документа. Инструкции этой функции должны выполнять
следующие действия:
> сформировать массив на основе блоков <SPAN>:
var arrspan=document.all.tags("SPAN");
> ввести в каждый блок <SPAN> элемент сноски <SUP>; это можно сделать с помо-
щью оператора цикла:
for(i=0; i<arrspan.length; i++) {
var elem= arrspanfi];
elem.insertAdjacentHTML("beforeBegin","<SUP>"+(i+1)+"</SUP>
") ;
}
> связать номер сноски с элементом <SPAN>; для этого определяется свойство
document.all[elem.sourceindex-1].connect=elem;
Управление документом 359
Свойство elem.sourceindex возвращает значение индекса элемента семейства
document. all [ ], который сгенерировал событие. Поскольку этим элементом факти-
чески является не элемент номера сноски <SUP>, а элемент <SPAN>, следующий за
<SUP>, значение индекса уменьшается на 1.
Результирующий код функции, формирующей сноски, имеет следующий вид:
function createNotes(){
var arrspan=document.all.tags("SPAN");
for(var i=0; i<arrspan.length; i++) {
var elem=arrspan[i];
if ("note"==elem.className) {
elem.insertAdjacentHTML("beforeBegin",
"<SUP CLASS=redhand>"+(i+1)+"</SUP>");
document.all[elem.sourceindex-1].connect=elem
}
}
}
Определим теперь функцию, которая будет выполнять обработку события
document. onclick и выводить текст сноски, если это событие - щелчок мышью на
номере сноски. Запишем функцию-обработчик в виде:
function alertNote(){
if("redhand"==event.srcElement.className)
if(null!=event.srcElement.connect)
alert(event.srcElement.connect.innerText);
}
В этой функции проверяется условие принадлежности элемента, сгенерировавшего со-
бытие, классу redhand, а также наличие объекта, связанного со сноской. Последняя инст-
рукция в alertNote () выводит текст сноски в окно сообщения.
Приведем полный листинг Web-страницы, содержащей сноски:
<HTML>
<HEAD>
<Т1ТЬЕ>Динамические сноски</Т1ТЬЕ>
<STYLE type="text/css">
SPAN {display:none}
SUP.redhand {color:red; font-size:lOpt; cursor:hand}
</STYLE>
<SCRIPT language="JavaScript">
function createNotes(){
var arrspan=document.all.tags("SPAN");
for(var i=0; i<arrspan.length; i++) {
var elem=arrspan[i];
if ("note"==elem.className) {
360
ГЛАВА 13
elem.insertAdjacentHTML("beforeBegin","<SUP
CLASS=redhand>"+(i+1)+"</SUP>");
document.all[elem.sourceindex-1].connect=elem
}
}
}
function alertNote(){
if("redhand"==event.srcElement.className)
if(null!=event.srcElement.connect)
alert(event.srcElement.connect.innerText);
}
window.onload=createNotes;
document.onclick=alertNote;
</SCRIPT>
</HEAD>
<BODY>
<H3>3.Косидовский. «Когда солнце было богом»
<SPAN class="note">
Отрывок из книги, в котором речь идет об экспедиции
Наполеона в Египет в 1798-1801 гг.
</SPANx/H3>
<Р>...Нельсону
<SPAN class="note"> Г. Нельсон - английский флотоводец,
вице-адмирале/SPAN>
не повезло: французский флот незамеченным пересек море и 2
июля высадился в Египте
<SPAN class="note">fleno в том, что воды Средиземного моря
контролировал в конце 18 в. флот Великобритании под командо-
ванием Нельсона</5РА№>
У пирамид произошла решающая битва с египтянами. Армии
Наполеона давала отпор 10-тысячная кавалерия бея
<SPAN class="побе">Бей - титул феодальной знати</5РАЫ>
Египта Мурада.
Мамлюки<БРАЫ с1азз="побе">Мамлюки - воины-рабы</ЗРАй>,
дворцовая гвардия бея, на резвых арабских скакунах выглядели
очень браво и воинственно; казалось, что они кривыми саблями
изрубят французских пехотинцев.
</Px/CENTER>
</BODY>
</HTML>
Результирующую Web-страницу вы можете видеть на Рис. 13.9, а. Всего в этом документе
имеется пять динамических сносок, текст которых выводится в окна сообщений
alert. На Рис. 13.9, б и Рис. 13.9, в показаны первые две сноски (1 и 2).
Управление документом
361
а
Microsoft Internet Explorer
Отрывок из книги, в котором р*-чь идет об экспедиции Наполеона в Египет в
1798-1801 гг.
ОК
Microsoft Internet Explorer П
Г Нельсон * английский Флотоводец вице адмирал
б
В
Рис. 13.9. Документ, содержащий динамические сноски:
а - внешний вид документа; б - текст сноски 1; в - текст сноски 2
Динамическое создание таблиц
В главе 4 рассматривалось создание таблиц в Web-документе с помощью обычной
HTML-разметки. В настоящем разделе мы остановимся на динамических способах по-
строения таблиц, в которых элемент <TABLE>, а также элементы строк и ячеек создают-
ся инструкциями сценария. Такие способы создания таблиц возможны только в браузе-
рах Internet Explorer, начиная с версии 4.0. Программа Netscape динамические операции
с элементом <TABLE> не поддерживает.
Построение таблицы
При программировании некоторых интерактивных игр, создании пользовательских диа-
логов часто возникает задача создания таблиц. Динамическую таблицу можно ввести на
страницу путем генерации нужного количества тегов <TR> и <TD>, оформив эту
362
ГЛАВА 13
процедуру с помощью операторов цикла for. Ниже записан код страницы, на которой
генерируется таблица заданного размера mxn (т - число строк, п - число столбцов):
<HTML>
<HEAD>
<Т1ТЬЕ>Построение таблицы</Т1ТЬЕ>
<STYLE type="text/css">
#tabElement TD{width:60px; height:6Opx)
</STYLE>
<SCRIPT language="JavaScript">
//Функция построения таблицы mxn в документе
function drawTable(m,n){
var tab="<TABLE border id=tabElement>";
//Задание тегов строк
for (var indR=0; indRcm; indR++){
tab+="<TR>";
//Задание тегов ячеек
for (var indC=0; indC<n; indC++)
tab+="<TD> </TD>";
tab+="</TR>";
J
tab+="</TABLE>";
//Возвращается значение переменной,
//описывающей теговую структуру таблицы
return tab;
)
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<Н2>Построение таблицы методом write()</H2>
<SCRIPT LANGUAGE="JavaScript">
document.write(drawTable(3,5));
</SCRIPT>
</CENTER>
</BODY>
</HTML>
Внешний вид таблицы 3x5, построенной описанным способом, показан на Рис. 13.10.
Фактическое число строк и столбцов в этом коде определяется значениями аргументов
в методе document .write (drawTable ()). В принципе можно задавать размер
таблицы динамически с помощью диалоговых окон запроса prompt. Надеемся, что при
необходимости вы сможете это сделать самостоятельно, введя соответствующие инст-
рукции в сценарий.
Управление документом
363
Рис. 13.10. Пример таблицы, построенной с помощью сценария
Если вас интересуют операции с построенной таблицей, необходимо обратиться к свой-
ствам и методам, поддерживаемым в JavaScript для элемента <TABLE>.
Свойства и методы элемента cTABLE >
Каждый элемент <TABLE> в HTML-документе является объектом, который обладает
наборами свойств и методов. Нам будут интересны те из них, которые можно применить
при построении таблиц.
Приведем основные сведения о массивах, образованных компонентами таблиц. Строки
таблицы (например, myTable) представляются массивом rows, который имеет размер,
определяемый свойством length:
var nrows = document.all("myTable").rows.length
Здесь переменная nrows возвращает количество строк в таблице. Индекс массива
rows [к] пробегает значения от 0 до (nrows-1).
Каждой строке rows [к] соответствует массив ячеек cells, который, в свою очередь
обладает размером
var ncells = document.all("myTable").rows[k].cells.length
Эта переменная возвращает количество ячеек в строке к. Заметим, что даже в случае
прямоугольной таблицы, где строки имеют одинаковую длину, необходимо указывать
в определении свойства rows [k] .cells, length индекс строки. Индекс массива
cells [m] пробегает значения от 0 до (ncells -1). Элемент вида
myTable.rows[k].cells[m]
представляет ячейку с координатами [k, т], то есть m-ю ячейку k-ой строки.
364
ГЛАВА 13
Индекс строки возвращается свойством rowindex, а индекс ячейки в строке - свойст-
вом cell Index. Например, фрагмент кода
var z = myTable.rows(1);
alert(z.rowindex);
var у = myTable.rows(1).cells(4);
alert(y.cellIndex);
выведет на экран сначала сообщение «1», а затем - «4».
Из методов элемента <TABLE> назовем те, которые могут быть использованы при ди-
намической генерации либо редактировании таблицы.
✓ insertRow (к) - вставляет в таблицу новую строку с номером к. При этом новый
элемент автоматически включается в массив rows;
✓ insertcell (m) - вставляет ячейку с номером m таким образом, что ячейки, рас-
положенные справа от ш, смещаются вправо. Вставленная ячейка сразу включается
в массив cells;
✓ deleteRow (k) - удаляет из таблицы строку к;
✓ deleteCell (ш) - удаляет из таблицы ячейку т. При этом ячейки, располагающие-
ся справа от удаленной ячейки, смещаются влево.
Рассмотрим, как пример, вставку в существующую таблицу новой строки с номером 2.
Для этого в сценарий необходимо сначала записать инструкцию:
myTable.insertRow(2);
Новую строку нужно заполнить ячейками, а в ячейки - ввести содержание. Это можно
сделать, например, с помощью следующих инструкций:
for(var j=0; j<nrows; j++) (
x=myTable.rows(2).insertcell(j);
x.innerText=" ";
}
Здесь nrows - количество ячеек в строке (в общем случае оно может не совпадать с
количеством столбцов в таблице). Свойству динамического содержания innerText
присвоен обычный пробел, чтобы ячейка вообще отображалась на экране.
Пользуясь методами insertRow() и insertcell () нетрудно реализовать динами-
ческую генерацию всей таблицы. Составьте такой сценарий в качестве упражнения.
Заполнение таблицы данными
Рассмотрим задачу создания таблицы и заполнения ее простым содержимым (крестиками,
галочками, единицами и т.д.), причем содержимое задается одиночными щелчками мыши.
Пусть нужно заполнить квадратную таблицу крестиками (аналогично тому, как это делается
при игре в «Морской бой»). Приведем листинг соответствующей Web-страницы.
Управление документом
365
<HTML>
<HEAD>
<Т1ТЬЕ>Карта выстрелов</Т1ТЬЕ>
<STYLE type="text/css">
TD {font-weight:bold)
#tabElement TD{width:30px; height:30px;
text-align:center; cursor:hand; font-size:12pt}
</STYLE>
<SCRIPT language^"JavaScript">
//Определение функции для построения таблицы
function drawTable(){
var tab="cTABLE border id=tabElement
onClick='doCross
for (var indR=0; indR<10; indR++){
tab+="<TR>";
for (var indC=0; indC<10; indC++)
tab+="<TD> < /TD>";
tab+="</TR>”;
}
tab+="</TABLE>";
return tab;
}
//Ввод в ячейку символа
function doCross(){
//Проверка события щелчка в ячейке таблицы
if("TD"==event.srcElement.tagName){
var shot=event.srcElement;
//Проверка того, что ячейка пуста
if(n "== shot.innerHTML)
shot.innerText="X";
}
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<Н2>«Морской бой»</Н2>
<НЗ>Карта выстрелов</НЗ>
<SCRIPT language="JavaScript">
document.write(drawTable());
</SCRIPT>
</CENTER>
</BODY>
</HTML>
С помощью щелчков мышью вы можете заполнить ячейки таблицы, как показано на
Рис. 13.11.
366
ГЛАВА 13
Рис. 13.11. Пример заполнения таблицы с помощью щелчков мыши
Содержимое ячейки с координатами (i, j) будет возвращаться свойством;
rows[i].cell[j].innerText
где j - номер ячейки в строке, который совпадает с номером столбца. Например, если вы
хотите подсчитать общее количество ячеек, заполненных символом «X», можете ввести
в сценарий функцию:
function quant(){
var n=0;
for (i=0;i<10;i++) {
x=tabElement.rows(i);
for (j=0; j<10; j++) {
if(x.cells[j].innerText=="X")
n+=l;
}
}
document.write("Количество заполненных ячеек: "+n);
}
Для вызова этой функции можно предусмотреть кнопку, которая нажимается после за-
полнения таблицы.
ГЛАВА 14.
Динамические стили и анимация
Напомним, что существует три возможных способа применения стилей в HTML-
документе (см. главу 3 «Листы стилей»). Это, во-первых, использование отдельного
списка стилей, оформленного в виде отдельного файла. Во-вторых, информация о сти-
лях может быть включена в виде листа стилей в контейнер <HEAD> HTML-документа.
И, в-третьих, сведения о стиле могут быть встроены непосредственно в тот элемент,
к которому данный стиль должен применяться. Соответственно этим способам добавле-
ния стилей различают и способы динамического управления стилями. В настоящем раз-
деле мы рассмотрим динамику стилей, основанную на использовании списков CSS.
Использование таблиц стилей открывает большие возможности для управления внеш-
ним видом и содержанием документа.
Управление стилями CSS
Код страниц, в котором применена динамика стилей CSS, как правило, весьма громоздкий.
Однако, как бы ни были запутаны списки стилей, действия, выполняемые в сценарии,
сводятся к простейшим операциям - это: получение информации о том или ином стиле
(параметре стиля) и переопределение стиля. Выполняются эти операции с помощью
стилевых свойств элемента.
Напомним, что большинство свойств в таблицах стилей образованы ключевыми слова-
ми, разделенными дефисом (font-size, text-align и т.д.). Однако в языковых
конструкциях JavaScript дефис может интерпретироваться как оператор. Поэтому в име-
нах свойств объектов дефис не употребляется, а для согласования их с именами свойств
CSS применяется следующее правило. Первое ключевое слово свойства CSS набирается
в нижнем регистре, а все последующие ключевые слова начинаются с прописной буквы
и записываются без дефисов и пробелов. Например, если нужно обратиться к свойству
letter-spacing, указывают имя letterspacing, а полная запись этого свойства
для объекта elementl будет выглядеть как
elementl.style.letterspacing
Определение стиля текста (свойство cssText)
Когда вы оперируете стилями отдельных текстовых элементов (<Р>, <SPAN> и т.д.),
весьма полезной оказывается информация о его стилевых свойствах. Эта информация
содержится в свойстве style.cssText. в виде строкового значения. Допустим, вы
определили элемент <SPAN>, который имеет следующие свойства стиля:
<SPAN id="elementl" style="font-size:8pt;
color:brown; cursor:hand">
<!-- Текст элемента -->
</SPAN>
368 ГЛАВА 14
Если обратиться к свойству cssText элемента elementl с помощью метода:
alert(document.all.elementl.style.cssText);
вы получите сообщение с указанием его стилевых свойств (Рис. 14.1).
Рис. 14.1. Вывод значения свойства cssText
Используя свойство cssText, вы можете определить стиль для одного элемента, а за-
тем скопировать этот стиль в другой элемент или даже в элемент, размещенный в дру-
гом документе. Проиллюстрируем это примером, в котором стиль абзаца, отображаемо-
го мелким шрифтом коричневого цвета, назначается другому абзацу. Для выполнения
этой операции пользователю достаточно навести на текст указатель мыши. Код соответ-
ствующей страницы записывается, например, в виде:
<HTML>
<HEAD>
<Т1ТЬЕ>Свойство cssText</TITLE>
</HEAD>
<BODY>
<P id=”Pinit" onmouseover=
"document.all.Pinit.style.cssText
=document.all.Pfin.style.cssText;">
Это абзац, шрифт которого может стать мелким.
</Р>
<Р id="Pfin" style="font-size:8pt; color:brown">
Наведите указатель мыши на верхний абзац,
<ВК>чтобы шрифт стал таким же мелким.
</Р>
</BODY>
</HTML>
Таким образом, свойство cssText позволяет динамически назначать стиль тому или
иному элементу документа. Однако, если требуется определить стиль для нескольких
элементов, лучше использовать листы стилей.
Семейство styleSheets
Листы стилей, которые присутствуют в документе или во внешних файлах, состав-
ляют семейство stylesheets. Первым элементом в этом семействе является пер-
вый лист стилей в документе. Порядок элементов в styleSheets совпадает с по-
Динамические стили и анимация
369
рядком следования листов стилей в документе. Если с документом связан внешний
лист стилей (в документе присутствует элемент <LINK>), он будет представлен послед-
ним элементом в семействе stylesheets. Допустим, определены листы стилей в сле-
дующем HTML-документе:
<HTML>
<HEAD>
<TITLE>Элементы семейства styleSheets</TITLE>
<STYLE id="yellSpan" type="text/css">
#listPrice {text-align:left; font-family:Arial,Sans-
serif }
SPAN {font-size:16pt; background:yellow; cursor:default}
</STYLE»
<STYLE id="blueDiv" type="text/css" disabled>
DIV {background:blue; display:none}
</STYLE»
<STYLE id="headers" type="text/css">
Hl.important {background:orange; letter-spacing:12pt)
</STYLE»
</HEAD>
<BODY>
<LINK id="extstyle" href="mystyle.css"
type="text/css" rel="stylesheet">
<SCRIPT language="JavaScript"»
numSheets = document.stylesheets.length;
for (i=0; icnumSheets; i++)
alert(document.stylesheets[i].id);
</SCRIPT»
<!-- Содержание документа -->
</BODY>
</HTML>
Согласно сценарию, содержащемуся в этом документе, на экран будут выводиться со-
общения с перечислением id листов стилей: yellSpan, blueDiv, headers. Послед-
ним будет пустое сообщение, отвечающее внешнему листу стилей ext style.
Свойства owningElement и styleSheet
Между объектами семейства styleSheets и объектами style и link имеется опре-
деленная связь. С одной стороны, объект листа стилей возвращается свойством
owningElement соответствующего элемента семейства stylesheets [i]. Убедить-
ся в этом вы сможете на приведенном выше примере HTML-документа (см. предыдущий
пункт). Введите в сценарий строку
alert(document.stylesheets[1].owningElement==
document.all.blueDiv);
370
ГЛАВА 14
и вы получите сообщение true. То есть действительно свойство
stylesheets [i] .owningElement возвращает соответствующий объект style.
Для внешнего листа стилей, подключаемого файлом mystyle.css, истинным будет
утверждение:
document.stylesheets[3].owningElement==
document.all.extstyle;
С другой стороны, доступ к элементам семейства stylesheets [ ] возможен через
свойство stylesheet объекта style или link. Например, для рассматриваемого до-
кумента диалоги
alert(document.all.yellSpan.styleSheet==
document.stylesheets[0]);
alert(document.all.extstyle.styleSheet==
document.stylesheets[ 3 ] ) ;
будут выдавать сообщения true. Таким образом, свойства owningElement и
stylesheet позволяют выполнять переходы от объектов style, link к элементам
массива stylesheets [ ] и наоборот.
Отключение листа стилей (свойство disabled)
Итак, объекты листов стилей содержатся в массиве stylesheets. Разработчик может
по своему разумению активизировать или отключать тот или иной лист стилей, устанав-
ливая атрибут disabled. Так, в приведенном ранее примере (см. раздел «Семейство
styleSheets») один из листов имел данный атрибут:
<STYLE id="blueDiv" type="text/css" disabled>
В результате, если атрибут disabled не будет отменен, таблица blueDiv не будет
участвовать в форматировании документа. Манипулировать значением атрибута dis-
abled мы сможем с помощью сценария, если вспомним, что указанному атрибуту отве-
чает свойство disabled объекта стиля. Например, для отключения листа
styleSheets [ 0], нужно записать инструкцию:
document.styleSheets[0].disabled^true;
И наоборот, чтобы активизировать лист styleSheets [0], необходимо сбросить зна-
чение tr-ue свойства disabled:
document.styleSheets[0].disabled=false;
Пример использования свойства disabled вы найдете в следующем разделе, в котором
рассмотрена возможность изменения режима отображения HTML-документа.
Динамические стили и анимация
371
Изменение уровня детализации содержания документа
Для больших Web-страниц с многочисленными заголовками хорошо предусмотреть
возможность переключения между различными режимами отображения. Эти режимы
могут различаться степенью детализации содержания. Например, в одном режиме могут
отображаться только заголовки, а в другом - весь текст документа.
Реализовать эту возможность лучше всего путем переключения между альтернативными
листами стилей. Этот способ более предпочтителен, чем, например, изменение самого
листа стилей. При использовании двух альтернативных листов документ будет проана-
лизирован только дважды: для одного листа стилей и для другого, альтернативного. Ес-
ли же вводить изменения непосредственно в лист, документ будет анализироваться вся-
кий раз при изменении стилей.
Мы приведем код документа, в котором применены два листа стилей, для которых
в сценарии изменяются значения атрибута disabled (см. предыдущий пункт):
<HTML>
<HEAD>
<Т1ТЬЕ>Переключение между режимами
отображения документа*:/TITLE>
<STYLE id="allCont" type="text/css">
#showT {display:none)
#showH {background-color:yellow; cursor:default}
</STYLE>
<STYLE id="onlyHeads" type="text/css" disabled>
#showT {background-color:skyblue; cursor:default)
ttshowH {display:none)
DIV {display:none)
</STYLE>
<SCRIPT language="JavaScript">
//Функция обработки нажатия кнопки "Показать только заголовки"
function showheads() {
document.stylesheets['onlyHeads'].disabled=false;
document.styleSheets['allCont'].disabled=true;
)
//Функция обработки нажатия кнопки "Показать весь текст"
function showtext() {
document.styleSheets['onlyHeads'].disabled=true;
document.styleSheets['allCont'].disabled=false
}
</SCRIPT>
</HEAD>
<BODY>
<Н1>Законы размножения</Н1>
<P style="font-size:larger; font-style:italic; color:blue">
Профессионалы о мнимой и реальной привлекательности
рынка полиграфических услуг
372
ГЛАВА 14
</Р>
<INPUT type=button id="showH" value="Показать только заголовки
onclick="showheads();">
cINPUT type=button id="showT" value="Показать весь текст"
onclick="showtext();">
<Н2>Тиражирование – почти не бизнес</Н2>
<ВГУ>Тиражирование или мини-полиграфия представляет собой
выпуск
небольших тиражей (от 50 до 3000 экз.). Достаточно продолжи-
тельное время этот бизнес оставался прибыльным даже при не-
больших стартовых вложениях.
</DIV>
<Н2>Умирающий бизнес</Н2>
<DIV>Han6onee массовый вид продукции, печатаемой шелкотрафа-
ретным
способом, – визитки. Для их производства не нужно
большого опыта,
а оборудование можно купить по цене от $50.
</DIV>
<Н2>Больше вложишь – больше получишь</Н2>
<В1У>Офсетную печать от других видов печати отличает способ-
ность
выпускать широкий спектр черно-белой и многоцветной печатной
продукции тиражами от 1000 экз. Однако и стоимость входа на
рынок услуг офсетной печати на порядок выше, чем в мини-
полиграфии .
</DIV>
</BODY>
</HTML>
Две таблицы стилей onlyHead и allCont задают два режима отображения документа.
На Рис. 14.2, а показан режим, при котором в окно браузера выводятся только заголов-
ки, а на Рис. 14.2, б - весь текст. Переключение между режимами производится с по-
мощью кнопки «Показать весь текст» или кнопки «Показать только заголовки».
Динамические стили и анимация
373
а
б
Рис. 14.2. Два режима отображения документа:
а - использование листа allCont; б- использование листа стилей onlyHeads
Анимация текста
Использование динамических стилей открывает широкие возможности в анимации тек-
стовых фрагментов на Web-странице.
374
ГЛАВА 14
Текст с меняющимся цветом
Наверняка при просмотре сайтов вам встречались фрагменты текста (слова, словосочета-
ния), отображаемые меняющимся цветом. Составим документ, в котором реализован этот
эффект путем манипулирования объектом стиля. Для текста с переменным цветом определя-
ется объект стиля, причем цвет текста задается значением свойства color этого объекта.
Периодическое изменение значения color осуществляется с помощью функции таймера
setinterval () (см. раздел «Периодические события таймера» главы 11).
Листинг документа, содержащего текст меняющегося цвета, выглядит следующим образом:
<HTML>
<HEAD>
<Т1ТЬЕ>Текст переменного цвета</Т1ТЬЕ>
<STYLE TYPE="text/css">
#changeColor{font-size:14pt; color:gray}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
//Функция, изменяющая цвет объекта
function flashcolor(){
//Определение объекта стиля
var elem=document.all.changeColor.style;
//Изменение свойства цвета
if (elem.color=="gray")
elem.color="red"
else
elem.color="gray"
}
//Периодический вызов функции flashColor(),
setinterval("flashcolor()", 500)
</SCRIPT>
</HEAD>
<BODY>
<SPAN ID="changeColor">
Текст меняющегося цвета
</SPAN>
</BODY>
</HTML>
На данной странице отображаются слова «Текст меняющегося цвета», цвет которых пе-
риодически становится то серым, то красным. Поскольку в сценарии использованы пе-
риодические события таймера setinterval (), а не setTimeout (), функция анима-
ции не содержит вызова самой себя. Период изменения цвета, выраженный в миллисе-
кундах, определяется значением второго ар!умента в setinterval ().
«Мигающий» текст
Если вы разобрали предыдущий пример, для вас не составит труда составить код сценария,
который реализует мигание текста.
Динамические стили и анимация
375
Средства Internet Explorer
Допустим, вы хотите создать эффект «мигания» некоторого текста, который в документе
заключен в контейнер SPAN. Для этого мы используем стилевое свойство visibility -
оно будет определять, является ли элемент видимым или нет.
<> Свойство visibility поддерживается только в Internet Explorer,
начиная с версии 4.0. Это свойство может принимать следую-
щие значения: visible (видимый элемент), hidden (невидимый
$ элемент), inherit (наследование свойства видимости от ро-
дительского элемента).
Сначала атрибуту visibility присвоим значение visible, чтобы элемент был ви-
димым. Код HTML-документа, содержащего мигающий текст в блоке <SPAN>, можно
записать в виде:
<HTML>
<HEAD>
<Т1ТЬЕ>Мигающий тексте/TITLE>
<STYLE TYPE="text/css">
#blinkWord {font-size:14pt; color:red; visibil-
ity :visible}
</STYLE>
eSCRIPT LANGUAGE="JavaScript">
function flash(){
//Определение объекта стиля
var elem=document.all.blinkWord.style;
//Проверка видимости объекта и присвоение противопо-
ложного
//значения свойству visibility
if (elem.visibility=="visible")
elem.visibili ty="hidden"
else
elem.visibility="visible"
}
//Периодический вызов функции flash()
setinterval("flash()", 500)
</SCRIPT>
</HEAD>
<BODY onload="flash()">
Создание
<SPAN id="blinkWord">мигающего</ЗРАЫ>
текста
</BODY>
</HTML>
376
ГЛАВА 14
Этот листинг аналогичен листингу из предыдущего пункта (вместо стилевого свойства
color используется свойство visibility). На данной Web-странице отображается
строка «Создание мигающего текста», в которой второе слово мигает и отображается
шрифтом красного цвета большего размера, чем остальной текст.
Если вы хотите мигающий фрагмент текста выделить отдельным абзацем (Рис. 14.3), то
нужно вместо <SPAN> воспользоваться элементом <DIV>. Во внешний контейнер BODY
можете вставить следующий фрагмент кода:
<CENTER>
<Н2>Предлагаем
<DIV id=”blinkword">
системы oxpaHbi</DIV>
подъездов и гаражей</Н2>
</CENTER>
Поскольку мигающий элемент <DIV> должен отображаться шрифтом того же размера,
что и остальной текст, удалите свойство font-size из таблицы стилей. Значение свой-
ства visibility для <DIV> будет определяться той же функцией flash(), что и
в случае мигающего элемента <SPAN>.
3 Mmi лющни т< kci Microsoft InL met Ex B3Q
Puc. 14.3. Пример мигающего текста: а-свойство visibility имеет
значение "visible"; б - visibility имеет значение "hidden"
Средства Netscape
Браузер Netscape не поддерживает свойство visibility. Поэтому при просмотре
документа, описанного в предыдущем пункте, это свойство будет проигнорировано,
и соответствующий элемент будет всегда оставаться видимым. Для Netscape вы мо-
жете задать мигающий текст с помощью следующего простого тега:
<ВЫЫК>Мигающий тексте/BLINK>
Заметим, что элемент BLINK относится к расширениям, не вошедшим в специфика-
ции HTML.
Динамические стили и анимация
377
Для создания мигающего текста в каскадных таблицах стилей предусмотрено свойство
text-decoration со значением blink. Зададим это свойство при определении стиля:
<HTML>
<HEAD>
<Т1ТЬЕ>Мигающий текст</Т1ТЬЕ>
<STYLE TYPE="text/css">
SPAN.special {font-size:14pt; color:green;
text-decoration:blink)
</STYLE>
</HEAD>
<BODY>
Это <SPAN CLASS="special"> cnoeo</SPAN>
в Netscape должно мигать.
</BODY>
</HTML>
Этот код отобразит в окне браузера Netscape мигающее слово. При просмотре в Internet
Explorer мигания не будет. Отметим, что согласно спецификации CSS2 поддержка зна-
чения blink не является обязательной для всех браузеров.
«Резиновый» текст (свойство letterspacing)
В предыдущих пунктах данного раздела мы показали, как можно использовать сти-
левые свойства color и visibility для создания эффектов изменения цвета и ми-
гания текста. Рассмотрим теперь управление из сценария межсимвольным интервалом.
Если периодически менять этот интервал, то возникает эффект так называемого «рези-
нового» текста.
Расстояние между буквами определяется стилевым свойством letter-spacing
(см. пункт «Свойства текста» главы 3). Этому свойству CSS соответствует свойство
letterspacing объекта. Зададим дискретные значения межсимвольных интервалов
и запишем их в массив interv. Определим функцию rubber (), запускаемую после
загрузки страницы, которая будет задавать последовательные увеличивающиеся или
уменьшающиеся значения из массива interv. Полный HTML-код страницы будет вы-
глядеть следующим образом:
<HTML>
<HEAD>
<TITLE>"Резиновый" текст</Т1ТЬЕ>
<SCRIPT language^"JavaScript">
//Определение массива, содержащего межсимвольные интервалы
var interv = new
Array("Орх","lpx","2px","Зрх","5px","8px");
i=0;
//Функция, устанавливающая межсимвольный интервал
function rubber() {
//Определение объекта текста
378
ГЛАВА
var elem=document.all.myText;
//Задание значения свойства letterspacing
elem.style.letterSpacing=interv[i];
//Определение следующего элемента массива interv
if(i==0)
delta=l; i+=delta;
if(i>=interv.length) {
delta*=-l; i=interv.length-2;
}
)
</SCRIPT>
</HEAD>
<BODY onload="setlnterval('rubber()', 100);”>
<H1 id="myText“ align="Center">"Резиновый" текст</Ь1>
</BODY>
</HTML>
На Рис. 14.4 показано отображение данного документа, содержащего текст с меняющи-
мися значениями межсимвольного интервала.
а
б
Рис. 14.4. Отображение текста с переменным межсимвольным интервалом:
а - минимальный интервал; б - максимальный интервал
Динамические стили и анимация
379
«Печатаемый» текст
Управление свойством innerText (см. раздел «Свойства динамического содержания»
главы 13) позволяет создать эффект «печатаемого» текста, то есть текста, который по-
символьно появляется на экране, как при наборе с клавиатуры.
Допустим, задана строка «Печатаем текст». Содержание объекта строки возвращается
свойством innerText. Для извлечения символов из заданной строки (с целью отобра-
жения на экране печатаемого фрагмента) можно использовать оператор substring.
Временной интервал между обновлениями строки будем задавать с помощью рекурсив-
но вызываемой функции таймера setTimeout (). Запишем код документа в виде:
<HTML>
<HEAD>
<Т1ТЬЕ>Печатаемая строка текста</Т1ТЬЕ>
</HEAD>
<BODY onLoad="nabor() " >
<DIV id="mywords"
style="font:14pt; color:red">
</DIV>
<SCRIPT language="JavaScript">
//Определение строки для анимации
var textline="Печатаем текст";
//Определение счетчика символов
var i=0;
//Определение рекурсивной функции, запускаемой при за-
грузке и затем периодически вызываемой таймером
function nabor() {i++;
if(ictextline.length) {
//Вывод фрагмента строки в окно документа
document.all.mywords.innerText=textline.substring(0,i);
)
//Сброс счетчика символов
else {document.all.mywords.innerText="
i=0;
}
//Рекурсивный вызов функции таймером
setTimeout("naborО ", 50) ;
}
</SCRIPT>
</BODY>
</HTML>
Строка, предназначенная для анимации, вводится через переменную textline. Появ-
ление на экране удлиняющихся фрагментов этой строки задается функцией nabor ().
Эта функция периодически обновляет содержимое окна, добавляя каждый раз по одному
380
ГЛАВА 1
символу к выводимой строке. Когда все символы строки выведены на экран, повторяет-
ся набор строки с первого символа. Скорость появления символов на экране задается
вторым аргументом в функции setTimeout ("nabor () ",50), который определяет
время задержки в миллисекундах. Размещение и формат появляющегося текста вы мо-
жете определить с помощью свойств стиля элемента <SPAN>.
«Неоновый» текст
Еще одним часто используемым приемом текстовой анимации является так называемые
«неоновый» текст, который напоминает последовательно загорающиеся буквы неоновых
реклам (Рис. 14.5).
Рис. 14.5. Анимация в виде строки с меняющимся цветом
Приведем код Web-страницы, содержащей такой «неоновый» текст. Исходные данные о
цветах строки (темном и «светящемся»), текст строки и временной интервал «зажигания»
букв определяются в переменных darkcolor, lightcolor, neontext и
flashinterval соответственно. Все временные интервалы задаются в миллисекундах.
<HTML>
<HEAD>
<Т1ТЬЕ>Неоновый тексте/TITLE>
<SCRIPT language="JavaScriptl.2">
//Определение функции, управляющей цветом букв
function lighting!){
//"Гашение" строки перед "зажиганием"
if (п==0){
for (m=0;mcneontext.length;m++)
liter[m].style.color=darkcolor;
}
//Изменение цвета буквы с темного на светлый
liter[n].style.color=lightcolor;
if (nditer. length-1)
//Увеличение счетчика n для перехода к следующей букве
п++
//Обнуление счетчика после "освещения" всей строки
//и сброс таймера blink, после чего запуск таймера,
//вызывающего функцию start()
Динамические стили и анимация
381
else{n=O;
clearinterval(blink);
setTimeout("start() ",1500) ;
}
)
//Определение функции-генератора событий
function start(){
if (document.all)
blink=setlnterval("lighting()", flashinterval);
}
</SCRIPT>
</HEAD>
<BODY>
<H1>
<SCRIPT language="JavaScriptl.2">
//Определение параметров текста
var darkcolor="#606060";
var lightcolor="#ffOOff";
var neontext='Почти "неоновая" реклама';
var flashinterval=200;
//Запуск счетчика зажигающейся буквы
var n=0;
//Побуквенный вывод "темной" строки с помощью метода
charAt()
i f(document.all){
document.write('<font color="'+darkcolor+'">');
for (m=0;m<neontext.length;m++){
document.write('<span
id="neontextliter">'+neontext.charAt(m)+'</span>')
)
document.write('</font>1);
//Формирование массива букв
var liter=document.all.neontextliter;
}
else
document.write(neontext);
start();
</SCRIPT>
</Hl>
</BODY>
</HTML>
382
ГЛАВА 14
Бегущая строка
Для автоматического перемещения строки (эффект «бегущей строки») существует спе-
циальный элемент MARQUEE, который поддерживается только браузерами Interne:
Explorer. Этот элемент, разработанный фирмой Microsoft, не входит ни в одну из специ-
фикаций HTML. Для получения бегущей строки в других браузерах можно использовать
сценарии JavaScript (см. ниже).
Процедура создания бегущей строки чрезвычайно проста, а именно: текст, который вы
хотите «заставить» перемещаться, заключается в теги:
<MARQUEE> Текст бегущей строки </MARQUEE>
Текст бегущей строки будет периодически перемещаться от одного края окна к другом;,
краю до тех пор, пока пользователь не покинет вашу страницу.
Параметры бегущей строки
Перечислим основные атрибуты элемента <MARQUEE>. Значения этих атрибутов задают
всевозможные параметры бегущей строки.
✓ align - задает выравнивание бегущей строки по отношению к окружающему
тексту. Атрибут align применяется с одним из значений: left, center, top.
middle и bottom. В последних версиях Internet Explorer этот атрибут не поддер-
живается;
✓ behavior - управляет перемещением бегущей строки по области вывода. По умол-
чанию значением атрибута является scroll (постоянное движение строки в одну
сторону). Другие возможные значения: slide (движение строки в одну сторону, по-
ка ведущий символ не коснется границы области вывода, после чего строка останав-
ливается), alternate (движение строки через всю область вывода сначала в од-
ном направлении, а затем - в противоположном);
✓ bgcolor - устанавливает цвет фона, на котором отображается текст бегущей
строки;
✓ datasrc - определяет источник данных, из которого извлекается текст бегущей
строки. Значением атрибута является ID объекта-источника;
✓ direction. - задает направление движения бегущей строки. Значение left (при-
нимается по умолчанию) отвечает перемещению строки слева направо, right -
справа налево. Возможны также значения top, up и down;
✓ height и width. - устанавливают размеры области вывода бегущей строки, а
именно: height (высота) и width (ширина). Эти размеры задаются в пикселах
или процентах от размеров окна браузера;
✓ hspace и vspace - устанавливают в пикселах размеры свободного поля вокруг
бегущей строки: hspace (слева и справа от строки), vspace (сверху и снизу от
строки);
Динамические стили и анимация
383
✓ loop - задает количество повторений движения бегущей строки по области вывода.
Например, 1оор=3 устанавливает трехкратное повторение. Если же атрибуту loop
присвоено значение infinite или -1, бегущая строка будет постоянно переме-
щаться, пока пользователь просматривает вашу страницу;
✓ scrollamount - задает в пикселах шаг перемещения бегущей строки (расстояние
между последовательными перерисовками строки);
✓ scrolldelay - задает в миллисекундах временную задержку при каждой пере-
рисовке;
✓ style- задает атрибуты стиля;
✓ truespeed - позволяет установить время задержки менее 60 мс;
✓ width - определяет в пикселах ширину области вывода бегущей строки.
Приведем пример элемента MARQUEE, который содержит атрибуты, определяющие
режим движения бегущей строки, цвет фона, задержку перерисовки и размеры свобод-
ного поля вокруг строки:
<MARQUEE behavior="alternate" bgcolor="yellow" scrollde-
lay="150"
hspace="20" vspace="10">
Текст бегущей строки
</MARQUEE>
Если вы хотите задать параметры содержимого бегущей строки (размер шрифта, начер-
тание, цвет шрифта и т.д.), можете это сделать с помощью класса CSS, как в следующем
примере.
<HTML>
<HEAD>
<Т1ТЬЕ>Бегущая строка</Т1ТЬЕ>
<STYLE TYPE="text/css">
MARQUEE.special {font-size:14pt; font-weight:900;
color:green)
</STYLE>
</HEAD>
<BODY>
<MARQUEE CLASS="special" behavior="alternate"
datasrc="runString" bgcolor="yellow" scrollamount="30"
hspace="100" vspace="10">
<DIV id="runString">
Бегущая строка
</DIV>
</MARQUEE>
</BODY>
</HTML>
Здесь текст бегущей строки извлекается из элемента DIV (идентификатор runString).
Отображается текст на желтом фоне жирным шрифтом зеленого цвета, имеющим размер
384
ГЛАВА 14
бегущая строка
14pt. Строка перемещается с большим шагом благодаря значению атрибута
scrollamount="30". При увеличении значения scrollamount
выглядит более динамично, однако это затрудняет ее чтение.
Если вы хотите ускорить движение бегущей строки, уменьшив
время задержки перерисовки ниже 60 мс, нужно дописать
в элемент marquee атрибут truespeed (значение атрибута не
: указывается).
События и методы marquee
Для элемента MARQUEE предусмотрена поддержка всех стандартных событий мыши и
клавиатуры (см. раздел «Стандартные события DHTML» главы 11). Мы перечислим собы-
тия, присущие только Marquee:
✓ onstart - это событие происходит, когда текст начинает движение. Для режимов
scroll и slide событие onStart наступает каждый раз перед появлением тек-
ста, а для режима alternate - только один раз при запуске анимации;
✓ onbounce - событие, которое наступает, когда текст бегущей строки отталкивается
от одной из границ области вывода;
✓ onfinish - событие, отвечающее окончанию движения текста.
Для элемента MARQUEE предусмотрены всего две функции. Это start (), предназна-
ченная для запуска анимации, и stop () для остановки бегущей строки. Приведем про-
стой пример, в котором пользователь может остановить бегущую строку, нажав на ней
кнопку мыши, и снова запустить строку, отпустив кнопку:
<MARQUEE onmousedown="this.stop()" onmouseup="this.start()">
Бегущая строка
</MARQUEE>
Анимация изображений
Наверняка при посещении Web-сайтов вы обращали внимание на изображения-анимации.
Создание таких изображений стало одной из наиболее популярных технологий DHTML,
поскольку анимации больше привлекают внимание посетителя, чем статические картинки, и,
кроме того, с помощью меняющихся картинок на одной и той же площади Web-страницы
можно разместить большее количество информации. Без эффектов анимации не обходится
создание рекламных баннеров, интерактивных рисунков, которые изменяют свои размеры
или содержание при определенных действиях пользователя.
Отметим, что при создании анимированных изображений широко применяется графиче-
ский формат gif. Существуют специальные программы для создания анимаций в этом
формате (например, GifAnimator). Но описание анимаций gif-формата выходит за рамки
нашей книги, в которой рассматриваются только приемы анимации с помощью сценариев.
Динамические стили и анимация
385
Замена изображения
Часто встречающимся приемом анимации является замена картинки. Например, при на-
ведении указателя мыши одна картинка, первоначально присутствовавшая на странице,
заменяется на другую картинку. После того, как указатель мыши убран с картинки,
прежнее изображение восстанавливается.
Задача замены изображения решается простейшим способом - с помощью обработчиков
событий onmouseover и onmouseout. Элемент IMG записывается при этом как:
<IMG src="picturel.gif"
onmouseover="this.src ='picture2.gif'"
onmouseout="this.src ='picturel.gif'">
Этот код имеет один недостаток: он не может быть реализован в Netscape, поскольку
данный браузер не поддерживает события onmouseover и onmouseout для элемента
IMG. Однако Netscape понимает указанные события для элемента ANCHOR. Поэтому
вставим элемент IMG в ANCHOR, обеспечив возможность замены картинки в обоих
браузерах, Internet Explorer и Netscape:
<А HREF= ""onmouseover="document.myPic.src
='picture2.gif';"
onmouseout="document.myPic.src
='picturel.gif';">
<IMG name="myPic" border=0 src="picturel.gif">
</A>
При воспроизведении этого кода в Netscape появится еще одна проблема. Этот браузер
фиксирует размер рисунка, устанавливая его по размеру первого загружаемого рисунка.
Поэтому, чтобы избежать искажения масштаба picture2, лучше сделать рисунки рав-
ного размера. В элемент IMG введен атрибут border=0, удаляющий границу вокруг
рисунка (граница отображается по умолчанию).
Еще одним способом замены изображения на Web-странице может быть наведение ука-
зателя мыши на гиперссылку. Допустим на странице имеется элемент IMG с именем
myPic, который выводит на страницу изображение start.gif. Когда вы наводите
указатель на ссылку «Фото» изображение start.gif должно заменяться на
f otosmall. gif (маленькая фотография). Если же вы щелкнете мышью на ссылке, то
в отдельное окно должен быть загружен файл изображения f о to. jpg (большая фото-
графия). Код, реализующий такую замену, аналогичен коду, записанному выше:
<А HREF="foto.jpg"
onmouseover="document.myPic.src ='fotosmall.gif';"
onmouseout="document.myPic.src ='start.gif';">
Фото</А>
<BR>
<IMG name="myPic" border=0 src="start.gif">
386
ГЛАВА 14
Изменение размера изображения
(пульсирующая картинка)
Эффектно на Web-странице выглядит картинка, которая периодически увеличивается и
уменьшается в размере (как бы пульсирует). Создадим анимацию, которая запускается
сразу после загрузки страницы и заключается в ступенчатом изменении размера картин-
ки от минимального до максимального размера и затем обратно.
Изображение введем в документ с помощью тега:
<IMG src="logo.gif" width="30" height="20" border="0">
Максимальные ширину и высоту изображения зададим в пикселах через значения сле-
дующих переменных:
var widthMax=300;
var heightMax=2 0 0;
Количество изображений при изменении размера от минимального до максимального
(либо в обратную сторону) определим переменной:
var quant=5;
Шаг изменения изображения по ширине и высоте определим соответственно в перемен-
ных stepw и steph, которые будут вычисляться с помощью функции
Math. floor (), выполняющей округление до меньшего целого числа:
var stepw=Math.floor((widthMax-30)/quant);
var steph=Math.floor((heightMax-20)/quant);
Такое определение шага обеспечивают пропорциональное изменение ширины и высоты
изображения. Текущие размеры изображения будем задавать и проверять, используя
свойства элементов массива images [ 0 ]:
document.images[0].width
document.images[0].height
Ширина изображения увеличивается с помощью оператора:
document.images[0].width += stepw;
Если значение stepw отрицательно, то получим уменьшение размера. Аналогично че-
рез величину steph определяется изменение высоты изображения.
Наконец, чередование картинок изменяющегося размера обеспечим функцией
repet (), которая запускает таймер setTimeout () и содержит обращение к самой
себе. В итоге HTML-код будет выглядеть следующим образом:
<HTML>
<HEAD>
<Т1ТЬЕ>Картинка с изменяющимися размерами</Т1ТЬЕ>
Динамические стили и анимация 387
<SCRIPT language="JavaScript">
function repet(){
//Если ширина картинки превышает максимальное значение,
//изменяются знаки приращений размеров
if (document.images[0].width>=widthMax){
stepw=-stepw; steph=-steph
}
//Если ширина меньше исходного размера, приращениям
//присваиваются положительные значения
i f (document.images[0].width<3 0){
stepw=Math.abs(stepw); steph=Math.abs(steph)
}
document.images[0].width += stepw;
document.images[0].height += steph;
//Вызов таймера
setTimeout('repet()',100);
}
</SCRIPT>
</HEAD>
<BODY>
<IMG src="logo.gif" width="30" height="20" border="0"
alt="Jloro">
<SCRIPT language="JavaScript">
//Определение параметров меняющейся картинки
var quant=5;
var widthMax=300;
var heightMax=200 ;
//Расчет приращений по ширине и высоте
var stepw=Math.floor((widthMax-30)/quant);
var steph=Math.floor((heightMax-20)/quant);
//Вызов функции анимации
repet();
</SCRIPT>
</BODY>
</HTML>
Чтобы ускорить анимацию, вы можете уменьшить задержку в таймере (второй аргумент
функции setTimeout). Изменяя значение quant можно откорректировать количество
промежуточных изображений. Максимальные размеры изображения, как отмечалось,
зависят от переменных widthMax и heightMax. В рассмотренном примере эти раз-
меры подобраны так, чтобы картинка не претерпевала искажения пропорций.
Динамическое позиционирование
В разделе «Позиционирование элементов» главы 3 были рассмотрены возможности за-
дания положения и размеров элементов, определяемых в HTML-документе. Однако
важно понимать разницу между теми параметрами, которые задаются в документе, и
значениями параметров, вычисляемыми браузером в процессе воспроизведения страни-
цы. Допустим, для прямоугольного элемента elem заданы свойства width:25% и
388
ГЛАВА 14
height: "auto".. При воспроизведении браузером будет вычислена ширина элемента
как 25% от ширины родительского элемента, а высота будет определена пропорцио-
нально ширине элемента.
Информация воспроизведения элементов
(свойства offsetParent, offsetTop и др.)
Данные о размерах и положении элементов рассчитываются браузером при каждом об-
новлении документа и называются информацией воспроизведения. Согласно технологии
позиционирования CSS каждый элемент размещается относительно другого, родитель-
ского элемента. Ссылку на родительский объект содержит свойство offsetParent
Координаты элемента относительно начала координат «предка» содержатся в свойствах
offsetTop и offsetLeft. Размеры прямоугольного элемента описываются свойст-
вами offsetwidth и offsetHeight. Для иллюстрации этих свойств рассмотрим
следующий пример двух элементов (DIV и IMG), вложенных один в другой:
<HTML>
<HEAD>
<Т1ТЬЕ>Информация воспроизведения </TITLE>
<STYLE type="text/css">
#myFig {position:relative;
top:0; left:0; width:50%; height:auto;
border:2pt navy solid}
DIV {position:absolute;
top:120; left:270; width:400; height:200;
text-align:center; border:2pt navy solid)
P {font-style:italic; color:blue; cursor:hand}
</STYLE>
<SCRIPT language^"JavaScript">
function info(x) {
alert("parent: "+x.offsetParent.tagName+'\n’+
"offsetwidth: "+x.offsetwidth+'\n'+
"offsetHeight: "+x.offsetHeight+1\n'+
"offsetTop: "+x.offsetTop+'\n'+
"offsetLeft: "+x.offsetLeft);
}
</SCRIPT>
</HEAD>
<BODY>
<НЗ>Просмотр информации воспроизведения
<ВИ>для двух элементов:
<ВИ>родительского DIV и дочернего IMG</H3>
<BR><BR><BR>
<Р onclick="infо(document.all.parent)">
Информация о «предке&гадио; </P>
<P onclick="info(document.all.myFig)">
Информация о «потомке&гадио; </P>
<DIV ID=parent>
Элемент DIV<BR><BR>
Динамические стили и анимация
389
Элемент IMG <IMG src="Такса.gif" id=myFig
alt='Щелкните на надписи "Информация о потомке
</DIV>
</BODY>
</HTML>
Изображение этого документа браузером Internet Explorer показано на Рис. 14.6, а.
Элементы графически обозначены прямоугольными рамками. Чтобы вывести информа-
цию о родительском элементе, нужно щелкнуть мышью на надписи «Информация о
«предке», а для получения информации о дочернем элементе - щелкнуть на надписи
«Информация о «потомке». При этом функция info () будет выводить сообщения с
указанием значений свойств offset... для указанного элемента (Рис. 14.6, б, в).
а
Microsoft Internet Eiqil ret £J
Microsoft Internet Esploter □
parent BODY
pffsetWidth: 400
irffsetHeighl 200
offsetTop: 120
offsetLeft 270
parent. DIV
offsetWidth: 200
off*etH eight 92
offsetT op 38
offsetLeft 145
ok ~ I
Вк I
6
Puc. 14.6. Пример получения информации воспроизведения элементов:
а - Web-страница с вложенными элементами DIV и IMG;
б - значения свойств родительского элемента DIV;
в - свойства дочернего элемента IMG
390
ГЛАВА 14
Управление областью вырезания (свойство dip)
Ранее описывалось одно из стилевых свойств, позволяющее выполнять вырезку абсолютно
позиционированного элемента (см. раздел «Вырезание области (свойство clip)» главы 3).
С помощью свойства clip можно управлять вырезкой и создавать интересные эффекты
«открытия» и «скрытия» элемента на экране. Например, если для прямоугольного изображе-
ния изменять по вертикали область вырезки от реальной высоты до 0, получим эффект скры-
тия изображения подобно поднимающейся шторе (Рис. 14.7).
а
б
Динамические стили и анимация
391
в
Рис. 14.7. Пример управления областью вырезания:
а - начальное состояние изображения;
б-скрытие изображения после щелчка мышью;
в - полностью скрытое изображение
Создадим страницу, на которой размещено изображение с управляемой областью вырез-
ки (Рис. 14.7). Если щелкнуть мышью на изображении, то область вырезки со временем
уменьшается, как показано на трех последовательных рисунках. После скрытия изобра-
жения на его месте остается надпись - если щелкнуть на ней, то изображение вновь от-
кроется как опускающаяся штора. Код HTML-документа имеет следующий вид:
<HTML>
<HEAD>
<Т1ТЬЕ>Рисунок~"штора"</TITLE>
<STYLE type="text/css">
#photo {position:absolute; top:70; left:10%;
clip:rect(O 100% 100% 0);
border:2pt green solid; width:200;
background:white; cursor:hand)
DIV {position:absolute; left:10%}
P {margin-top:2Opt}
</STYLE>
<SCRIPT language="JavaScript" ID="WipeEffects">
//Функция-обработчик события onclick
function blind() {
//Определение переменной объекта
var elem=document.all.photo;
/* Переменная, в которой хранится информация об элементе,
сгенерировавшем событие */
var into=arguments[0];
//Проверяется, является ли данный вызов функции blind()
первым
if(null==elem.init) {
/*3адание флага elem.init и пошагового приращения
области вырезки elem.delta*/
elem.init=true;
392
ГЛАВА 14
elem.delta=10 ;
/Определение генератора события, задание значений
свойства elem.clipBound, определяющего положение нижней
границы вырезки, а также изменение знака приращения
elem.delta
в случае скрытия элемента*/
if(into) elem.clipBound=0
else {
elem.clipBound=elem.offsetHeight;
elem.delta*=-l;
}
}
//Задание нижней границы
elem.clipBound+=elem.delta;
//Определение области вырезки
elem.style.clip="rect(О 100% "+elem.clipBound+" 0)";
//Проверка условия повторного вызова функции blind О
if(((elem.clipBound<=elem.offsetHeight)&&(elem.delta>0))
||((elem.clipBound>=0)&&(elem.delta<0)))
setTimeout("blind("+into+")", 20);
else
//Сброс флага init
elem.init=null;
}
</SCRIPT>
</HEAD>
<BODY>
<DIV>
<Н2>Появление и исчезновение элемента</112>
<Р STYLE="cursor:hand" onclick="blind(true)">
Ferrari 360 Spider 7
</DIV>
<IMG SRC="Spider_7.jpg" ID=photo АЬТ="Эффекты DHTML"
onclick="blind(false)">
</BODY>
</HTML>
Прорисовка изображения на экране обеспечивается рекурсивным вызовом функции
blind (), который осуществляется с помощью setTimeout ().
Приведенный код можно использовать для перемещения границы вырезки в горизон-
тальном направлении: справа налево или слева направо. Для этого нужно всего лишь
задать значение свойства clip в виде:
elem.style.clip="rect(0 "+elem.clipBound +" 100% 0)";
и свойство elem. of fsetHeight заменить на elem. of f setwidth.
Динамические стили и анимация
393
Видимая часть содержания элемента
(свойства clientHeight, clientwidth, scrollHeight и др.)
Итак, используя свойство вырезки clip и свойства, содержащие информацию воспро-
изведения элемента (offsetwidth и др.), можно управлять динамическим отображе-
нием элемента на экране. Сейчас мы рассмотрим ряд других полезных свойств, характе-
ризующих видимую часть элемента и всего документа (значения свойств выражаются
в пикселах).
✓ clientHeight, clientwidth - эти свойства, предназначенные только для чте-
ния, возвращают высоту и ширину видимой части элемента или документа. Они по-
зволяют определять высоту и ширину рабочей области окна браузера или отобра-
жаемой части элемента. Заметим, что применительно к элементу <BODY> свойства
clientHeight и clientwidth возвращают значения, близкие к значениям of f-
setHeight и offsetwidth;
✓ scrollHeight - это свойство, в отличие от clientHeight, содержит полную
«прокручиваемую» высоту документа или элемента;
✓ scrollwidth - свойство, возвращающее полную «прокручиваемую» ширину
элемента или документа (в случае элемента <BODY>);
✓ scrollLef t - свойство, которое содержит расстояние (в пикселах) между реальной
левой границей и видимой левой границей элемента.. Применительно к документу
(элементу <BODY>) свойство scrollLef t возвращает расстояние между левой гра-
ницей документа и левой границей текущего окна браузера. То есть scrollLeft
показывает, насколько документ «прокручен» влево;
✓ scrollTop - это свойство возвращает расстояние (в пикселах) между реальной
верхней границей и видимой верхней границей элемента. Применительно к элементу
<BODY> свойство scrollTop отвечает расстоянию между реальной верхней грани-
цей документа и верхней границей текущего окна, то есть scrollTop возвращает
величину «прокрутки» по вертикали.
Многие из указанных свойств напоминают нам о существовании свойств с похожими
названиями, которые рассматривались ранее (см., например, раздел «Информация вос-
произведения элементов (свойства offsetparent, of f setTop и др.)» настоящей гла-
вы). Например, свойства scrollwidth и clientwidth напоминают offsetwidth.
Чтобы выяснить различия между всеми этими свойствами, составим пример простого
HTML-документа. Значения свойств будут выводиться в виде сообщений alert после
щелчка на соответствующей кнопке:
<HTML>
<HEAD>
<TITLE>Pa3Mep документа и свойства его видимой части</Т1ТЪЕ>
<STYLE TYPE="text/css">
DIV {top:120; left:270; width:700; height:400;
text-align:left; margin-left:lcm;
border:2pt navy solid)
394
ГЛАВА 14
Н2 {margin-left:1cm}
Р {margin-left:lcm}
</STYLE>
<SCRIPT language="JavaScript">
var x=document.all.mydoc;
function clientProp() {
var x=document.all.mydoc;
alert("clientwidth: "+x.clientWidth+'\n'+
"clientHeight: "+x.clientHeight);
}
function scrollPropO {
var x=document.all.mydoc;
alert("scrollLeft: "+x.scrollLeft+'\n'+
"scrollTop: "+x.scrollTop+'\n'+
"scrollwidth: "+x.scrollWidth+1\n'+
"scrollHeight: "+x.scrollHeight);
}
function offsetProp() {
var x=document.all.mydoc;
alert("offsetLeft: "+x.offsetLeft+'\n1+
"offsetTop: "+x.offsetTop+'\n'+
"offsetwidth: "+x.offsetWidth+'\n'+
"offsetHeight: "+x.offsetHeight);
}
c/SCRIPT>
</HEAD>
cBODY ID=mydoc>
<DIV>
<BR><BR>
сН2>Свойства, содержащие информацию о действительном размере
документа и о его части, видимой в окне браузера</Н2>
<BR>
cINPUT TYPE=button value="Свойства client"
onclick="clientProp()">
cINPUT TYPE=button value="Cвoйcтвa scroll"
onclick="scrollProp()">
cINPUT TYPE=button value="Свойства offset"
onclick="offsetProp()">
сР>Для просмотра значений группы свойств
нажмите нужную кнопкус/р>
c/DIV>
с/BODY>
c/HTML>
Динамические стили и анимация
395
На Рис. 14.8 показано окно браузера с полосами прокрутки, а также приведены значения
свойств в сообщениях на экране. Все значения даны в пикселах.
Рис. 14.8. Страница для просмотра значений размеров документа
(как пример в окне al ert выведены свойства группы offset)
Поэкспериментируйте с размерами окна браузера и полосами прокрутки, чтобы лучше
понять смысл этих свойств. Обратите внимание, что значение offsetwidth почти
равно clientwidth, а значение of fsetHeight близко к clientHeight. То есть
размеры отображаемой части документа, вычисляемые браузером, приближенно равны
фактическому размеру окна. Если вы измените ширину окна, перетянув вертикальную
границу в новое положение, то изменятся свойства clientwidth и offsetwidth, а
свойство scrollwidth, возвращающее полную ширину документа, останется прежним.
Аналогично поведут себя свойства clientHeight, offsetHeight и scroll-
Height при изменении высоты окна.
Когда вы прокручиваете документ по горизонтали, значение scrollLeft увеличивается
(при смещении документа влево) или уменьшается (при смещении документа вправо).
Когда ползунок полосы прокрутки находится в крайнем левом положении,
scrollLeft возвращает значение 0. Аналогично меняется и значение свойства
scrollTop при прокрутке по вертикали.
Отражение элемента от границ окна
Рассмотрим приложение рассмотренных выше свойств к созданию эффекта отражения
элемента от границ окна (например, отражение мяча или надписи). Составим код стра-
ницы, содержащей перемещающийся текстовый блок, который испытывает отражение
от границ:
<HTML>
<HEAD>
<Т1ТЬЕ>Отражение элемента от границ окна</Т1ТЬЕ>
<STYLE TYPE="text/css">
396
ГЛАВА 14
#reflect {position:absolute; top:0; left:0;
width:16Opt; height:15pt;
font-family:arial; font-size:14pt;
font-weight:bold; color:red; z-index:0}
#lower {position:absolute; left:50px; top:70px;
width:15Opx; height:lOOpx;
background:cyan; border:2pt gray solid; z-index:-l)
#upper {position:absolute; left:250px; top:120px;
width:180px; height:130px; background:gray)
</STYLE>
<SCRIPT language="JavaScript">
//Задание начального положения элемента и приращений координат
var х=0;
var у=0;
var dx=2;
var dy=4;
//Определение функции, управляющей движением элемента
function reflect_elem() {
//Объект тела документа
var bod=document.body;
//Объект движущегося элемента
var elem=document.all.reflect;
//Приращение координат элемента
x+=dx;
y+=dy;
//Проверка условий столкновения элемента с границей
if ((x+elem.offsetWidth>=bod.scrollLeft+bod.clientwidth)
||(x<=bod.scrollLeft)) {
dx=-dx;
if(x<=bod.scrollLeft)
x=bod.scrollLeft;
else
x=bod.clientWidth-elem.offsetWidth+bod.scrollLeft;
}
if((y+elem.offsetHeight>=bod.scrollTop+bod.clientHeight)
||(y<=bod.scrollTop)) {
dy=-dy;
if(y<=bod.scrollTop)
y=bod.scrollTop;
else
y=bod.clientHeight-elem.offsetHeight+bod.scrollTop;
}
//Присвоение новых координат объекту движущегося элемента
elem.style.posLeft=x;
elem.style.posTop=y;
}
Динамические стили и анимация
397
</SCRIPT>
</HEAD>
<BODY onload="setlnterval('reflect_elem() ' ,10);"
onunload="clearlnterval();">
<Н4>Перемещение и отражение элемента от границе/Н4>
<DIV id="reflect">
ПРЫГАЮЩИЙ ТЕКСТ
</DIV>
<DIV id="upper">
</DIV>
<DIV id="lower">
</DIV>
</BODY>
</HTML>
Элемент "reflect" начинает двигаться сразу после загрузки документа. Изменение
внешнего вида документа показано на Рис. 14.9. На этих же рисунках видно взаимное
расположение слоев с движущимся текстом и с неподвижными блоками DIV. Порядок
слоев задается свойством z-index (см. раздел «Задание расположения перекрываю-
щихся элементов (свойство z-index)» главы 3).
Рис. 14.9. Пример текстового элемента, перемещающегося по странице:
а - начало перемещения после загрузки;
б - прохождение над блоком lower и под блоком upper
ГЛАВА 15
Программирование форм
Введя в документ с помощью тегов <FORM> форму, вы фактически создали объект с ши-
рокими возможностями его программирования. Помимо стандартной процедуры отправки
формы на сервер, вы можете выполнить проверку введенной информации, очистить фор-
му, изменить набор отображаемых элементов управления, их оформление и т.д. К каждо-
му элементу формы обеспечивается доступ с помощью объектной модели динамиче-
ского HTML.
Семейства форм
В главе 7 «Формы» мы говорили об элементах форм FORM в статической модели HTML.
В динамическом HTML элементам форм отвечают объекты, которые формируют ряд
важных семейств. Во-первых, формы содержатся в семействе all объекта document.
Во-вторых, формы представлены в специальном семействе forms, которое включает
в себя все формы, имеющиеся в документе. Наконец, каждый объект формы представля-
ет семейство elements, объединяющее внутренние элементы управления.
Семейство forms
Напомним, что в документе может быть несколько форм, однако ни одна из форм не
может включать другую форму. Другими словами, все формы принадлежат одному ие-
рархическому уровню, который определяется семейством forms (см. разд. «Иерархи-
ческая структура и ссылки на элементы документа» главы 13). Это семейство является
массивом упорядоченных, проиндексированных элементов, каждый из которых пред-
ставляет определенный тег <FORM> в HTML-документе. Элементы массива forms [ j ]
различаются индексом j, причем первым элементом является forms [ 0 ].
Семейство elements
Основным свойством объекта form является массив elements, который обеспечива-
ет доступ к элементам управления. Этот массив представляет все элементы формы, про-
нумерованные от 0 до значения N-1, где N - длина массива или количество элементов
в данной форме. Длину массива elements можно определить стандартным образом
с помощью свойства length:
document.forms[j].elements.length
где j - индекс формы в массиве forms (для именованной формы в этом выражении
вместо forms [ j ] можно использовать имя формы).
Рассмотрим семейство elements для формы, приведенной в разделе «Пример формы
HTML» главы 7 (см. рис.7.1). Выведем на страницу имена всех имеющихся элементов.
Для этого запишем простой сценарий:
Программирование форм
399
<SCRIPT LANGUAGE^’JavaScript">
document .write ("<112>Список имен элементов формы</Ь2>");
//Определение количества элементов в форме
ex=document.forms[0].elements.length;
//Вывод имен элементов управления на экран
for(i =0; i < ex; i++) {
document.write(document.forms[ 0 ] .elements[i].name +", ");
}
</SCRIPT>
В результате на экран будет выведен следующий текст:
Список имен элементов формы
fn, prof, theme, educ, educ, comm, sub, res,
Обращение к форме
Рассмотрим обращения к формам документа в рамках объектной модели. Во-первых,
каждая форма может быть представлена как элемент массива forms. Во-вторых,
именованные формы имеют отношения с документом и поэтому к ним можно обра-
щаться как к свойствам самого документа. Ссылка на форму по ее индексу в массиве
forms выглядит как
document.forms[0]
- обращение к первой форме. Если форма имеет имя (задан атрибут имени, например,
name=" f rmGuest"), вместо индекса можно указать имя, например,
document.forms['frmGuest']
Более того, к форме можно обратиться непосредственно по имени
document.frmGuest
Но все же лучше ссылаться на форму через семейство forms, поскольку сценарии при
этом лучше читаются и более понятны:
document.forms.frmGuest
где f rmGuest - имя формы. Свойства document. forms . frmGuest .name и
document. f rmGuest. name будут возвращать значения f rmGuest.
400 ГЛАВА 15
Свойства и методы объекта form
Формы, как и любые другие объекты в динамической модели браузера, обладают свой-
ствами, методами и событиями. Мы подробно остановимся на свойствах, а методы и
события, которые поддерживаются формами, будем рассматривать по ходу изложения.
Стандартные свойства DHTML
Объект form поддерживает набор стандартных свойств динамического HTML, боль-
шинство из которых вам уже должно быть известно из предыдущих глав. Перечислим
эти свойства применительно к объектам форм.
✓ className - это свойство позволяет определить, к какому именно классу, опреде-
ленному в списке CSS, относится данный объект формы. Так, для элемента <FORM
id="fl" class=" require "> свойство document. forms . fl. className бу-
дет возвращать значение require. Напомним, что в написании свойств, как всегда,
необходимо соблюдать регистр символов, а именно: правильным будет написание
className и неправильным - classname или Classname;
✓ document - возвращает ссылку на объект документа и, следовательно, обеспечива-
ет доступ к любому свойству документа. Например, из формы можно сослаться на
URL документа следующим образом: this . document. location;
✓ id - это свойство возвращает идентификатор формы;
✓ innerHTML и innerText - возвращают соответственно содержимое HTML-элемента
и содержимое элемента, включая только текст без внутренних тегов (см. раздел «Свойст-
ва динамического содержания» главы 13);
✓ isTextEdit - это свойство принимает два булевских значения, позволяющих оп-
ределить, предназначен ли данный элемент формы для ввода или редактирования
текста. Так свойство this. isTextEdit возвращает true только для элементов
text, textarea, button и reset. Для остальных элементов оно возвращает
false;
✓ lang - свойство для определения языка, который используется в элементе формы.
Значением свойства может быть аббревиатура из числа предусмотренных стандартом
ISO (например, для английского языка это «еп»);
language - соответствует одноименному атрибуту language в элементе
<SCRIPT>, определяющего язык сценария (значением этого свойства может быть
javascript, vbscript, jscript);
✓ offsetHeight, offsetwidth - возвращают высоту и ширину воспроизводимого
элемента или самой формы. Например, обработчик события onclick=
"alert (this .offsetwidth) ", вставленный в тег <FORM>, покажет ширину
формы на экране при щелчке мышью по области формы. Тот же обработчик, запи-
санный в теге <input type=" submit"> выведет сообщение с указанием ширины
кнопки Submit;
Программирование форм
401
✓ offsetLeft, offsetTop - возвращают координаты левого верхнего угла
элемента (см. пункт «Информация воспроизведения элементов» главы 14);
✓ offsetparent - возвращают ссылку на родительский объект (см. тот же пункт);
✓ outerText, outerHTML - смысл этих свойств динамического HTML лучше всего
пояснить примерами (см. разделы «Исчезновение элемента (свойство outerText)» и
«Замена элемента (свойство outerHTML)» главы 13);
✓ sourceindex - возвращает индекс элемента <FORM> в массиве семейства all,
например, свойство document. forms . fl. sourceindex возвращает порядко-
вый номер элемента fl в HTML-документе (нумерация начинается с 0);
✓ style - возвращает ссылку на объект стиля, который определен в теге <FORM>
или в тегах элементов формы. Например, если для формы fl определен стиль
styles" font-size: 14pt; color :green", то свойство
document. forms . f 1. style. color будет возвращать значение green (дейст-
вие свойства style не распространяется на стили элементов форм, определенные
в листе стилей);
✓ tagname - это свойство связано с именем тега, например, document. forms . f 1.
tagname возвращает значение FORM, в то время как обработчик
onclick="alert (this. tagName) ", записанный в теге <INPUT> выведет на эк-
ран сообщение INPUT;
✓ title - задает вывод и содержание подсказки, которая всплывает на экране при
прохождении указателя мыши над элементом формы.
Все перечисленные выше свойства применимы как к формам, так и к элементам форм.
Объекты форм обладают также и другими стандартными DHTML-свойствами (напри-
мер, parent Element, parentTextEdit), однако они редко используются. Отметим
также свойства, характерные именно для форм, это: action, encoding, method
(с соответствующими атрибутами вы знакомились в разделе «Задание формы» главы 7).
Установка фокуса и выделение элемента
(методы focus()H select())
Удобно, когда после загрузки документа фокус оказывается установленным на тот
элемент формы, который нужно обработать в первую очередь. При этом пользователю
не понадобится дополнительно щелкать мышью на форме, чтобы ввести в нее данные.
Установить фокус на нужном элементе можно с помощью следующего простого обра-
ботчика события onload, помещенного в тег <BODY>:
<BODY onload="document.fl.userName.focus()">
где fl - имя формы, userName - имя элемента формы, . focus () - метод установки
фокуса.
Если вы устанавливаете фокус на элементе ввода и хотите, чтобы его содержимое также
было выделено, воспользуйтесь вместе с focus () методом select ():
402 ГЛАВА 15
cBODY onload="document.fl.userName.focus();
document.fl.userName.select()">
Таким образом, с помощью рассмотренных методов вы сможете сделать форму более
дружественной.
Программирование списков и меню
В набор элементов управления, предусмотренный стандартом HTML, входят раскры-
вающиеся меню и прокручиваемые списки. И те, и другие вводятся в документ с помо-
щью контейнера <SELECT> (см. раздел «Определение списков (элементы SELECT и
OPTIONS)» главы 7). Код прокручиваемого списка отличается от кода раскрывающего-
ся меню наличием в теге <SELECT> атрибута size, который определяет количество
опций, первоначально выводимых на экран. При задании этого атрибута меню превра-
щается в список, причем список снабжается полосой прокрутки, если значение size
меньше полного количества опций списка. Таким образом, программирование меню и
списков можно рассматривать параллельно.
Свойства элемента <SELECT>
Вспомним HTML-код для раскрывающегося меню и прокручиваемого списка. В контей-
нер cSELECT* вкладываются элементы cOPTION*, которые задают опции меню или
списка:
cSELECT name= "multichoice" size=3 multiple:*
cOPTION value="ml">Книги
cOPTION value="m2" selected*Bwfleo
cOPTION value="m3">Аудио
cOPTION value="m4">ByMara
cOPTION value="m5">KaHH,enHpuH
с/SELECT*
Данный пример элемента cSELECT* представляет прокручиваемый список (указан ат-
рибут size) с множественным выбором (имеется атрибут multiple). Атрибут name
служит уникальным названием элемента с SELECT*, он используется при расшифровке
выбора, сделанного пользователем. Наличие атрибута selected в элементе
cOPTION* указывает на выбор данного элемента по умолчанию (в примере по умолча-
нию выбрана опция Видео). Каждый элемент cOPTION* имеет атрибут value - значе-
ние этого атрибута передается при отправке формы. Если атрибут value отсутствует,
то будет передано название самой опции. Перечисленным атрибутам отвечают свойства:
✓ name - возвращает имя объекта меню или списка;
✓ multiple - возвращает значение true для списка с множественным выбором (име-
ется атрибут MULTIPLE) и значение false при отсутствии атрибута MULTIPLE;
Программирование форм
403
✓ selected - возвращает значение true, если данный элемент <OPTION> выделен,
и значение false - если не выделен;
✓ value - определяет или возвращает «внутреннее» значение, связанное с данным
элементом <OPTION>.
Однако это не все свойства, присущие именно элементам <SELECT> и <OPTION>.
Полезными для программирования могут оказаться также следующие свойства:
✓ form - содержит ссылку на объект формы, в которой содержится данный элемент
<SELECT>;
✓ length - возвращает количество опций (элементов <OPTION>), содержащихся
в меню или списке (в приведенном примере это значение равно 5);
✓ selectedlndex - устанавливает или возвращает индекс выбранной опции
в элементе <SELECT> (для нашего примера при выборе по умолчанию свойство se-
lectedlndex будет давать значение 1);
✓ text - возвращает текст названия данной опции, например, для первой опции при-
веденного выше элемента <SELECT> свойство text дает значение Книги;
✓ type - это свойство возвращает тип списка, а именно значения: select-
multiple - для списка с множественным выбором, и select-one - для просто-
го списка или меню.
Кроме названных выше свойств, элементы <SELECT> и <OPTION> обладают всеми
стандартными свойствами DHTML (см. раздел «Стандартные свойства DHTML» на-
стоящей главы).
Семейство опций options
В браузерах Internet Explorer и Netscape поддерживается семейство options, которое
включает в себя элементы <OPTION>. Для каждого элемента <SELECT>, имеющего-
ся в документе, существует отдельное семейство options. Благодаря этому
с элементами <OPTION> можно оперировать как с элементами массива options [ ].
Нумерация элементов в этом массиве как обычно начинается с 0. Так, в примере
предыдущего пункта элемент options [0] будет представлять объект, связанный
с опцией Книги. К свойствам элементов <OPTION> можно обращаться как к свойст-
вам семейства options.
V> '>!>
л; В объектной модели DHTML элементам <OPTION> «не повезло»: >
они не представлены в семействе document. all. Поэтому |
в ссылках на какой-либо элемент <OPTION> или на семейство
options должен быть указан элемент <SELECT>, в котором Шг ><
они содержатся. <^SH> &
404
ГЛАВА 15
Поясним состав семейства options на примере прокручиваемого списка из предыду-
щего пункта и дополним Web-страницу сценарием, который будет выводить значения
определенных свойств семейства options:
<HTML>
<HEAD>
<Т1ТЬЕ>Использование семейства options</TITLE>
<SCRIPT language="JavaScript">
//Функция вывода названий опций
function outputOpt() {
//Определение объекта семейства
var opt=document.forms.fl.multistore.options;
var strOpt="";
//Циклическое присвоение
//значений свойства text строковой переменной
for (var i=0; i<opt.length; i++)
strOpt+=opt[i].text+"\n";
alert("Опции списка:\n"+strOpt);
}
</SCRIPT>
</HEAD>
<BODY>
<Н2>Свойства списка</Н2>
<FORM name="fl">
<SELECT name="multistore" size=3 multiple>
<OPTION value= "ml" >Книги</ОРТЮЫ>
<OPTION value="m2" selected>Bnfleo</OPTION>
<OPTION value="m3">Aynno</OPTION>
<OPTION value="m4">Бумага</ОРТ1ОЫ>
cOPTION value="m5">Канцелярия</ОРТ1О№>
</SELECT>
<BRxBR>
cINPUT type=button value="Тип элемента"
onclick="alert(this.form.multistore.type)">
cINPUT type=button value="Список опций"
onclick="outputOpt()">
</FORM>
</BODY>
</HTML>
Внешний вид этой страницы показан на Рис. 15.1, а. Если щелкнуть мышью по кнопке
Тип элемента, на экран будет выведено сообщение с указанием значения свойства
type, а именно select-multiple. При щелчке по кнопке Список опций появится
сообщение с перечислением названий опций элемента <SELECT> (Рис. 15.1, б).
Программирование форм
405
Microsoft Internet Explorer ЕЭ
Опции списка:
Книги
Видео
Аудио
Бумага
Канцелярия
I....ок
Рис. 15.1. Страница, содержащая список и кнопки для вывода значений свойств:
а - внешний вид страницы; б - сообщение с указанием названий опций
Добавление элемента в список (метод add)
Итак, с помощью элемента <SELECT> вы задали в вашем документе список или меню.
Как динамически изменить состав опций списка в процессе работы с документом? Для
этого можно воспользоваться методом add(), применив его к элементу <SELECT>.
Однако перед тем, как ввести новую опцию в список, необходимо создать новый объект
в документе с помощью метода createElement (). Это выполняется простой
инструкцией:
var newOption=document.createElement("OPTION");
где newOption - имя объекта, представляющего новый элемент <OPTION>
в <SELECT>. Затем объект newOption вставляется в элемент <SELECT
ID=" choice" > с помощью метода add ():
choice.add(newOption,ind);
где первый аргумент метода (newOption) представляет новый объект опции, а второй
аргумент (ind) указывает порядковый номер новой опции в списке.
Следующая Web-страница иллюстрирует применение метода добавления элемента
в список цветов (опциями списка являются названия цветов, причем каждая опция ок-
рашена в свой цвет):
<HTML>
<HEAD>
<Т1ТЬЕ>Добавление элемента списка</Т1ТЬЕ>
<STYLE type="text/css">
.small {font-family:"arial"; font-size:9pt)
406
ГЛАВА 15
DIV {font-family:"ms sans serif, sans-serif"; font-
size :lOpt}
</STYLE>
<SCRIPT language="JavaScript">
function addOption() {
//Создание нового элемента в документе
var newOption=document.createElement("OPTION");
//Определение переменой, равной количеству опций в списке
var
ind=document.forms(0).elements("varList").options.length;
//Определение названия опции
newOption.text=document.forms(0).elements("txtOpt").value;
//Определение цвета фона
newOption.style.background=
document.forms(0).elements("bgOpt").value;
//Добавление элемента в <SELECT>
document.forms(0).elements("varList").add(newOption,ind);
}
</SCRIPT>
</HEAD>
<BODY>
<НЗ>Добавление новой опции в список</НЗ>
«FORM name="frmVarList">
<DIV>CnncoK:</DIV>
<SELECT name="varList" class="small">
«OPTION s tyle="background:yel1ow">Желтый
«OPTION styles "background: red">KpacHbin
«OPTION style="background:green">3еленый
</SELECT>
<P>
<0Г7>Название новой опции:</DIV>
cINPUT type-"text" class="small" size="20" name="txtOpt">
<BR>
<DIV>L(BeT фона:«/В1У>
cINPUT type="text" class="small" size="10" name="bgOpt">
cP>
«INPUT type="button" value="Добавить" on-
click="addOption()">
</FORM>
</BODY>
</HTML>
Название добавляемой опции и значение цвета вводятся в соответствующие поля
(Рис. 15.2, а), после чего нужно нажать кнопку Добавить. Обработчик onclick вызо-
вет функцию addOption (), которая добавит новую опцию согласно сценарию в конец
списка. На Рис. 15.2, б показан результирующий список.
Программирование форм
407
Рис. 15.2. Пример добавления элемента в список:
а - ввод значений в поля; б - результирующий список
Заметим, что новая опция не добавляется в код HTML-
документа. Она создается в результате работы сценария,
поэтому при перезагрузке документа новой опции в списке уже
не будет.
Удаление элемента списка (метод remove)
Вы можете удалить из созданного списка любую опцию. Для этого используется метод
remove (), имеющий единственный аргумент - номер удаляемого элемента в семей-
стве options. Как и метод add(), этот метод применяется к элементу <SELECT>,
например,
document.forms(0).elements("varList").remove(1)
удаляет элемент с индексом 1 в списке документа, описанного в предыдущем пункте
(удаляется опция Красный).
Генерация списка заголовков на Web-странице
Рассмотрим динамическую генерацию списка, который содержит заголовки разделов
Web-страницы. Такой список будет формироваться автоматически при загрузке
документа и будет соответствовать обновленному содержанию, что особенно важно для
целей навигации по часто меняющемуся документу.
408
ГЛАВА 15
Составим в качестве примера HTML-документ, который имеет заголовки, отмеченные
якорями <А>. На основе элементов <А> функция listConstr (), вызываемая при за-
грузке документа, будет формировать список заголовков, то есть содержание. Если
щелкнуть мышью по какой-либо опции списка, страница прокрутится к началу указан-
ной главы. Код страницы имеет следующий вид:
<HTML>
<HEAD>
сТ1ТБЕ>Генерация элементов списка</Т1ТЬЕ>
<SCRIPT>
function listConstr() {
//Циклическая обработка якорей
for (var i=0; icdocument.anchors.length;i++){
//
var elem=document.createElement("OPTION");
elem.text=document.anchors[i].innerText;
elem.value=document.anchors[i].name;
document.all.content.options.add(elem);
)
}
function scrDoc(bmark) {
var ind=bmark.value;
document.all[ind].scrollIntoView();
bmark.value=nul1;
}
c/SCRIPT>
</HEAD>
cBODY onload="listConstr();">
<H2><I>M.Булгаков.</i> Жизнь господина де Мольера</Н2>
cLABEL for="content">Содержание:
cSELECT id="content" style="width:lOOpt" on-
change="scrDoc(this);">
c/SELECT>
cH3>cA name="Пролог">Прологс/а>с/нЗ>
сНЗ>Я разговариваю с акушеркойс/НЗ>
--Текст пролога--
сНЗ>сА пате="Глава 1">Глава 1с/а>с/НЗ>
сНЗ>В обезьяньем домес/НЗ>
--Текст главы 1--
сНЗ>сА name="Глава 2">Глава 2с/а>с/нЗ>
сНЗ>История двух театраловс/нЗ>
--Текст главы 2--
сНЗ>сА пате="Глава 3">Глава Зс/а>с/нЗ>
сНЗ>Не дать ли деду орвьетану?с/нЗ>
--Текст главы 3--
c/BODY>
c/HTML>
Программирование форм
409
В качестве примера в этом документе использованы заголовки романа М. Булгакова
«Жизнь господина де Мольера». Понятно, что разработчик Web-страницы предложит
свое конкретное содержание и оформление. Однако все изменения, вносимые в структу-
ру заголовков, автоматически будут переноситься в динамически создаваемый список.
Внешний вид страницы, описываемой приведенным выше кодом, показан на Рис. 15.3.
Рис. 15.3. Пример генерации списка на основе закладок
Чтобы страница прокручивалась к нужному заголовку, в функции scrDoc () использо-
ван метод scrollIntoView (). Этот метод применяется к элементу, по отношению
к которому должна быть произведена прокрутка. Единственный аргумент этого метода
может принимать булевские значения true или false. Если аргумент не указан, то
считается по умолчанию, что он равен true. Это дает прокрутку, при которой элемент
оказывается в верхней части окна. Если же аргумент имеет значение false, то элемент,
к которому применяется метод, расположится в нижней части окна.
Определение выбранных опций в списке
Проблема списков с множественным выбором состоит в определении элементов,
которые выделил пользователь. Дело в том, что свойство value возвращает только
первый выбранный элемент, а для определения всех выделенных элементов из спи-
ска необходимо составлять сценарий. Приведем пример HTML-документа, содержа-
щего такой сценарий:
410
ГЛАВА 15
<HTML>
cHEAD>
сТ1ТБЕ>Список с множественным выборомс/Т1ТБЕ>
cSCRIPT language="JavaScript">
//Функция создания массива выбранных опций
function choiceConstr(listOpt) {
//Определение объекта массива
var choice = new ArrayO;
//Начальное значение индекса
var k=0;
//Циклическая обработка массива-аргумента
for (var i=0; iclistOpt.length; i++) {
//Отбор элементов в массив выбранных опций
if(listOpt[i].selected) {
//Создание объекта и определение свойства value
choice[k]=new Object;
choice[k].value=listOpt[i].value;
//Подготовка индекса для следующего элемента
k+ + ;
}
}
return choice;
}
//Функция вывода списка выбора
function alertchoice(listOpt) {
//Определение массива выбранных элементов
var ch=choiceConstr(listOpt);
//Строковая переменная для хранения результата
var strChoice="";
for (var i=0; i<ch.length; i++)
strChoice+=ch[i].value+"\n";
alert("Выбранные элементы:\n"+strChoice);
J
c/SCRIPT>
</HEAD>
<BODY>
<Н2>Определение выбранных элементов</Н2>
<FORM name="">
cSELECT name="listl" size=4 multiple>
cOPTION value="Книги">Книги
cOPTION value="Видео">Видео
<OPTION value="Аудио">Аудио
<OPTION value="Бумага">Бумага
cOPTION value="Канцелярия">Канцелярия
</SELECT>
cINPUT type=BUTTON value="Список выбора"
onclick="alertChoice(this.form.listl.options)">
c/FORM>
с/BODY>
c/HTML>
Программирование форм
411
Пользователь может выбрать опции списка (Рис. 15.4, а), пользуясь мышью при нажатой
клавише Ctrl или Shift. После нажатия кнопки Список выбора появляется сообщение
с указанием выбранных опций (Рис. 15.4, б).
' Microsoft Inter not Explorer И
Рис. 15.4. Пример определения выбранных элементов списка:
а - внешний вид страницы; б - сообщение с указанием выбора
Выбриппые элементы
Видео
Бумага
При щелчке на кнопке Список выбора вызывается функция alertchoice (), которая
формирует строку сообщения, исходя из массива выбранных элементов. Этот массив
создается функцией choiceConstr () на основе объектов семейства options с ис-
тинными значениями свойства selected.
Проверка ввода данных в форму
Данные, которые вводятся пользователем в форму, могут быть обработаны на сторо-
не клиента либо могут быть отправлены для обработки на сервер. Эффективность
работы пользователя может быть существенно повышена, если предусмотреть про-
верку данных, вводимых в форму. Проверку можно осуществлять непосредственно
при заполнении определенных полей, не выходя из текущего элемента управления.
Возможна также проверка сразу после выхода из элемента управления, например,
при перемещении фокуса на другой элемент формы. Наконец, для проверки действи-
тельности всей информации, отправляемой на сервер, целесообразна проверка при
отправке данных. В настоящем разделе мы рассмотрим все перечисленные варианты
проверки.
412
ГЛАВА 15
Проверка вводимых символов
Каждый символ, вводимый с клавиатуры, может проверяться на соответствие содержа-
нию элемента управления. Допустим, вы хотите избежать ошибок ввода в текстовое по-
ле Фамилия, которое должно содержать строку из букв, и в поле Телефон, которое
должно включать в себя только арабские цифры.
Обработку вводимого символа будем выполнять с помощью события onkeypress, ко-
торое возникает при нажатии и отпускании любой клавиши (см. пункт «События кла-
виатуры» главы 11). Свойство keyCode этого события возвращает код клавиши в ко-
дировке UNICODE. Арабским цифрам соответствует интервал от 48 до 57, а буквам рус-
ского алфавита - интервал 1040 - 1103. Для блокировки ввода неправильного символа в
поле воспользуемся свойством returnvalue события keyCode. Если присвоить зна-
чение false этому свойству, введенный символ обрабатываться не будет.
Запишем для поля Телефон обработчик события onkeypress, который будет блоки-
ровать обработку всех символов, кроме цифр:
onkeypress="if ( (event .keyCode<48) | |
(event.keyCode>57))event.returnValue=false; "
В функции обработчика проверяется код вводимого символа. Функция возвращает значение
false, если код не находится в интервале кодов арабских цифр (см. Приложение Г).
Для буквенного поля Фамилия обработчик зададим в виде:
onkeypress^"if((event.keyCode<l040)| |
(event.keyCode>l103))event.returnValue=false;"
Этот обработчик блокирует все символы, кроме букв русского алфавита, коды которых
попадают в интервал 1040 - 1103 (см. Приложение Г).
Приведем пример кода страницы с ограничениями ввода в текстовые поля:
<HTML>
<HEAD>
<Т1ТЬЕ>Проверка ввода</Т1ТЬЕ>
<STYLE>
DIV {font-family:"ms sans serif, sans-serif")
</STYLE>
</HEAD>
<BODY>
<Н2>Контроль за вводом данных</Н2>
<DIV>
Фамилия:</DIV>
<INPUT TYPE="text"
onkeypress="if((event.keyCode<1040) | |
(event.keyCode>1103))event.returnValue=false;">
<BR><BR>
<DIV>
Телефон:</DIV>
Программирование форм
413
<INPUT type="text"
onkeypress="if((event.keyCode<48)||
(event.keyCode>57))event.returnValue=false;">
</BODY>
</HTML>
Внешний вид этой страницы после ввода данных в текстовые поля показан на Рис. 15.5.
Благодаря контролю ввода исключен набор фамилии латинскими буквами или употреб-
ление дефисов при наборе телефонного номера.
Рис. 15.5. Пример текстовых полей с контролем ввода данных
л; Если в поле должны вводиться только буквы латинского алфа-
</ вита, используйте то обстоятельство, что значения keyCode
<> для латинского алфавита попадают в интервалы 65 - 90 (про-
;/ писные) или 97-122 (строчные буквы).
Проверка при выходе из элемента управления
Описанная выше проверка данных полезна при вводе информации, когда необходимо
проверять каждый символ. Однако более общей проверкой, позволяющей проверить
данные в целом, является проверка при выходе из элемента управления. Такую проверку
можно связать с событием onchange, которое наступает всякий раз при выходе пользо-
вателя из элемента управления (перевода фокуса на другой элемент). Если введенные
данные окажутся неверными, это можно будет отобразить в появляющемся диалоговом
окне или в изменении внешнего вида элемента.
414
ГЛАВА 15
Допустим, на Web-странице сайта знакомств имеется поле, в которое нужно ввести свой
возраст. В коде страницы необходимо организовать проверку, являются ли все введен-
ные символы цифрами. Кроме того, в зависимости от введенного возраста должны вы-
водиться «комментарии».
<HTML>
<HEAD>
<TITLE> Проверка при выходе из элемента</Т1ТЬЕ>
<SCRIPT language="JavaScript">
function chkStr(){
//Определение объекта - элемента управления
var x=document.all.age;
//Определение набора возможных символов
var num="0123456789";
event.returnValue=true;
//Проверка введенной строки (состоит ли она только из
цифр). elem.value - это введенная строка, а
elem.value.length - длина строки
for (var i=0; i<x.value.length; i++)
//Если символ не является числом,
//возвращается значение false
if (-1== num.indexOf(х.value.charAt(i)))
event.returnValue=false;
//Сброс значения поля перед повторным вводом
if (!event.returnvalue) {
х. value="" ,-
alert("Повторите ввод."+1\n'+
"Возраст должен набираться числом")}
else {
if (x.value<15)
alert("Этот сайт только для взрослых");
if (x.value>70)
alert("O! Любви все возрасты покорны")}
}
</SCRIPT>
</HEAD>
<BODY>
<НЗ> &1адио;Сайт знакомств&гадио; </НЗ>
<FONT face="ms sans serif, sans-serif">
Ваш возраст:</FONT>
cINPUT id="age" type=text size=3 title="Введите возраст"
onchange="chkStr()">
</BODY>
</HTML>
Здесь использованы следующие функции JavaScript:
Программирование форм
415
✓ string.charAt (i) - возвращает символ, расположенный в i-й позиции строки
string. Позиции символов строки нумеруются от нуля до string.length-1.
✓ string.indexOf (х) - возвращает номер позиции впервые встреченного символа
х в строке string. Если символ не найден, то возвращается значение -1.
Работа сценария иллюстрируется рисунками Рис. 15.6. Если в поле вводится символ -
не цифра, то при щелчке мышью вне поля ввода появляется сообщение с предложе-
нием повторного ввода, а содержимое поля очищается (Рис. 15.6, б). В зависимости
от правильно введенного возраста может появиться одно из сообщений, показанных
на Рис. 15.6, в, г.
[Microsoft lolmnul Ехрймт
Microsoft Internet Екркдог R
Повторите овод
Возраст должен набираться числом
сайт только для взрослых
Рис. 15.6. Проверка ввода данных при выходе из элемента управления:
а - поле ввода; б - сообщение в случае неправильного ввода;
в - сообщение, появляющиеся в случае возраста <15; г - сообщение для возраста >70
а
Проверка данных при отправке формы
Перед отправкой формы полезно проверить, является ли полной представляемая инфор-
мация. Рассмотрим пример формы, в которой текстовые поля, подлежащие обязатель-
ному заполнению, окрашены в специальный цвет. Если эти поля не будут заполнены,
необходимо, чтобы при попытке отправки формы на экране появилось предупреждение
о необходимости ввести данные в цветные поля. Приведем полный код Web-страницы,
содержащей такую форму:
<HTML>
<HEAD>
<Т1ТЬЕ>Проверка полноты данных</Т1ТЬЕ>
416
ГЛАВА 15
cSTYLE type="text/css">
.oblig {background:orange)
DIV {font-family:"ms sans serif, sans-serif")
</STYLE>
cSCRIPT language="JavaScript">
//Функция проверки, не является ли элемент пустым
function isEmpty(inText) {
for (var i=0; i<inText.length; i++)
if (""!=inText.charAt(i))
return false;
return true;
)
//Функция просмотра всех полей
function fullData(x) {
for (var i=0; i<x.elements.length; i++)
if (”oblig"==x.elements(i).className) {
alert("Необходимо заполнить все цветные поля");
return false;
)
)
//Функция определения класса элемента
function detClass(х) {
x.className=isEmpty(x.value)?"oblig":"";
)
//Функция проверки, не является ли
//введенный символ пробелом (код 32)
function checkGap(х) {
if (32!=event.keyCode)
x.className="";
)
c/SCRIPT>
</HEAD>
<BODY>
<Н2>Проверка формы при отправке</Н2>
<FORM name="fUser" onsubmit="return fullData(this)">
сВ1У>Имя пользователя:</DIV>
cINPUT type=text class="oblig"
onkeypress="checkGap(this)" on-
change="detClass(this)"><BR>
<DIV>
E-mail:</DIV>
cINPUT type=text class="oblig"
onkeypress="checkGap(this)" onchange="detClass(this)">
cDIV>
Домашний адрес:c/DIV>
cINPUT type=text size=45>cBR>
Программирование форм
417
<DIV>
Возраст:</DIV>
<INPUT type=text size=3><BR><BR>
cINPUT type=submit value="Отправить">
</FORM>
</BODY>
</HTML>
Внешний вид документа показан на Рис. 15.7. В форме имеются текстовые поля Имя
пользователя и E-mail, обязательные для заполнения, - они окрашены в оранжевый цвет.
Рис. 15.7. Пример формы, в которой выполняется проверка наличия данных
в цветных полях
Фоновый цвет этих обязательных полей, принадлежащих классу oblig, задается стиле-
вым свойством background в таблице стилей. Когда пользователь вводит какой-либо
символ в обязательное поле, выполняется проверка, не является ли вводимый символ
пробелом. Обработчик события onkeypress вызывает функцию checkGap (), кото-
рая «сбрасывает» класс oblig, при вводе первого символа - не пробела. В результате
поле становится белым.
Когда пользователь выходит из обязательного поля ввода, выполняется обработка собы-
тия onchange с помощью функции detClass (). Эта функция определяет принад-
лежность элемента классу oblig, то есть классу незаполненного поля. Класс элемента
устанавливается с помощью другой функции - булевской функции пустого поля
isEmpty (), которая возвращает значение true, если в поле нет символов, и false -
если поле содержит хотя бы один символ.
Чтобы была возможность проверить форму прежде, чем она будет передана в сеть, в тег
<FORM> помещен обработчик события onsubmit, наступающего при нажатии кнопки
418 ГЛАВА 15
Отправить. Программа для обработки события, в качестве которой используется функ-
ция fullData(), просматривает все элементы формы и проверяет, нет ли среди них
тех, которые принадлежат классу oblig. Если такие поля имеются, на экран выводится
«алерт» (Рис. 15.8) с предложением ввести данные в незаполненные поля. Функции
fullData () присваивается значение false, и форма, содержащая некорректные дан-
ные, в сеть отправлена не будет.
Рис. 15.8. Предупреждение о необходимости заполнить обязательные поля
Таким образом, в трех последних разделах главы мы рассмотрели основные приемы про-
верки действительности данных, содержащихся в форме, перед их отправкой на сервер.
Приложение A.
НТМ L-элементы
Элемент Описание Примечание
< ! Комментарий
<!DOCTYPE> Описание типа документа Пустой элемент
<А> Якорный элемент
<ABBR> Аббревиатура
<ACRONYM> Сокращение
<ADDRESS> Информация об авторе или владельце
<APPLET> Java-апплет Устаревший элемент
<AREA> Фрагмент изображения-карты Пустой элемент
<B> Вывод полужирным шрифтом
<BASE> Базовый URL для всех относительных URL Пустой элемент
<BASEFONT> Размер шрифта по умолчанию для всего документа Пустой элемент
<BDO> Переопределение направления чтения текста
<BGSOUND> Фоновый звук для всей страницы
<BIG> Вывод текста шрифтом, крупнее базового шрифта
<BLOCKQUOTE> Длинная цитата
<BODY> Содержимое документа Необязательный элемент
<BR> Принудительный разрыв строки («жесткий» перевод строки) Пустой элемент
<BUTTON> Кнопка
<CAPTION> Подпись к таблице или рисунку
<CENTER> Выравнивание по центру с учетом полей Устаревший элемент
<CITE> Цитата, выводимая курсивом
<CODE> Фрагмент программного кода, выводимый моноширинным шрифтом
<COL> Столбец таблицы Пустой элемент
<COLGROUP> Группа столбцов таблицы Конечный тег не обязателен
<DD> Текст определения термина в списке определений Конечный тег не обязателен
<DEL> Текст, удаленный из документа
<DFN> Текст, являющийся определением
<DIR> Список-каталог Устаревший элемент
420
Приложение А
Элемент Описание Примечание
<DIV> Блок, логическая единица документа, удоб- ная для назначения стиля и языка, примене- ния сценария
<DL> Создание списка определений
<DT> Определяемый термин в списке определений Конечный тег не обязателен
<ЕМ> Выделение текста (обычно курсивом)
<EMBED> Внедренный объект
<FIELDSET> Группа элементов управления в форме
<FONT> Локальное изменение шрифта Устаревший элемент
<FORM> Создание формы с элементами управления
<FRAME> Создание фрейма Пустой элемент
<FRAMESET> Набор фреймов
<H1> до <H6> Заголовки документа от первого до шестого уровня
<HEAD> Заголовочная часть документа Необязательный элемент
<HR> Горизонтальная линия Пустой элемент
<HTML> Определение материала как HTML- документа Необязательный элемент
<I> Вывод курсивом
<IFRAME> Плавающий фрейм
<ILAYER> Слой Поддерживается только в Netscape, не рекомендуется к использованию
<IMG> Вставка изображения, видеоролика, анима- ции Пустой элемент
<INPUT> Элемент ввода Пустой элемент
<INS> Текст, вставленный в документ
<ISINDEX> Поле ввода для поиска по ключевым словам Устаревший элемент
<KBD> Текст, отображаемый как введенный с кла- виатуры (моноширинным шрифтом)
<LABEL> Подпись к элементу формы
<LAYER> Слой Поддерживается только в Netscape, не рекомендуется к использованию
<LEGEND> Подпись к группе элементов формы
<LI> Строка списка, созданного элементами <OL>, <UL>, <DIR> или <MENU> Конечный тег не обязателен
<LINK> Определение отношения между документами Пустой элемент
HTML-элементы
421
Элемент Описание Примечание
<МАР> Клиентское изображение-карта
<MARQUEE> Бегущая строка
<MENU> Создание списка-меню Устаревший элемент
<МЕТА> Общая информация о документе Пустой элемент
<MULTICOL> Многоколоночный текст Поддерживается только в Netscape
<NOBR> Отмена перевода строки
<NOFRAMES> Альтернативное содержимое для броузеров, которые не поддерживают фреймы
<NOSCRIPT> Альтернативное содержимое для броузеров, которые не поддерживают сценарии
<OBJECT> Вставка произвольного объекта в документ
<0L> Создание нумерованного (упорядоченного) списка
<OPTGROUP> Группа пунктов в списке, созданном с помо- щью элементов <OPTION>
<OPTION> Пункт раскрывающегося списка, созданного элементом <SELECT> Конечный тег не обязателен
<p> Абзац текста Конечный тег не обязателен
<PARAM> Задание параметра объекта Пустой элемент
<PLAINTEXTS Вывод текста без учета HTML-разметки Устаревший элемент
<PRE> Указание на предварительно отформатиро- ванный текст
<Q> Короткая цитата
<S> Вывод перечеркнутым шрифтом (краткая форма записи элемента <STRIKE>) Устаревший элемент
<SAMP> Пример программы или сценария
<SCRIPT> Программа, составленная на языке сценария
<SELECT> Раскрывающийся список (список вариантов выбора)
<SMALL> Вывод текста шрифтом, мельче базового шрифта
<SPACER> Невидимая область
<SPAN> Строчный блок для назначения стиля и язы- ка, применения сценария
<STRIKE> Вывод перечеркнутым шрифтом Устаревший элемент
<STRONG> Логический элемент, указывающий на важ- ность текста и выводимый полужирным шрифтом
<STYLE> Вставка в документ стилевых правил
422
Приложение А
Элемент Описание Примечание
<SUB> Нижний индекс
<SUP> Верхний индекс
<TABLE> Создание таблицы
<TBODY> Группировка строк таблицы для применения единых стилевых правил Необязательный элемент
<TD> Ячейка данных в таблице Конечный тег не обязателен
<TEXTAREA> Многострочное поле для ввода текста
<TFOOT> Нижний колонтитул таблицы Конечный тег не обязателен
<TH> Ячейка заголовка таблицы Конечный тег не обязателен
<THEAD> Верхний колонтитул (заголовок) таблицы Конечный тег не обязателен
<TITLE> Название документа
<TR> Строка таблицы Конечный тег не обязателен
<TT> Печатный текст, выводимый моноширинным шрифтом
<u> Вывод подчеркнутым шрифтом Устаревший элемент
<UL> Создание маркированного (неупорядоченно- го) списка
<VAR> Логический элемент для обозначения пере- менной, выводимый курсивом
<WBR> Вставка перевода строки при наличии внеш- него элемента <NOBR> («мягкий» перевод строки)
Приложение Б.
Список допустимых атрибутов
Имя атрибута Элемент Допустимое значение Назначение
abbr TD TH Текст Сокращенная запись содержимого ячейки
accept-charset FORM Список символов Список кодировок для данных, выводимых в форму
accept FORM INPUT Список типов Список MIME-типов* файлов, которые могут отправляться по сети из формы
action FORM URL URL программы на сервере, предназначенной для обработки данных формы
align CAPTION top bottom left right Выравнивание подписи к таблице или рисунку
align APPLET IFRAME IMG INPUT OBJECT bottom middle top left right Вертикальное или горизонтальное выравнивание данного элемента относительно других элементов
align MARQUEE bottom middle top left center right Выравнивание содержимого бегущей строки относительно окружающего текста
align LEGEND top bottom left right Определение размещения подписи внутри границы, созданной элементом FIELDSET
align TABLE left center right Выравнивание таблицы относительно окружающего текста
* MIME-тип (сокращение от Multipurpose Internet Mail Extensions) - это заголовок в отправляемом
с сервера файле, который указывает на специфику содержимого файла. По заголовку MIME
броузер определяет, что делать с данными, получаемыми с сервера. Каждому MIME-типу
соответствуют определенные операции.
424
Приложение Б
Имя атрибута Элемент Допустимое значение Назначение
align HR left center right Выравнивание линии по горизонтали
align Hl H2 H3 H4 H5 H6 P DIV left center right justify Выравнивание объекта по горизонтали
align COL COLGROUP TBODY TD TFOOT TH THEAD TR Left center right justify char Горизонтальное выравнивание содержимого элемента таблицы (ячейки, столбца и т.д.)
alink BODY Значение цвета Цвет активизированной (выбранной) ссылки
alt APPLET AREA IMG INPUT Текст Задание альтернативного текста
autostart EMBED false true Задание включения воспроизведения звука
background BODY TABLE TD TH URL URL файла с изображением, которое загружается в виде фона для всего документа, таблицы или ее отдельных ячеек
balance BGSOUND Число Настройка стереобаланса при воспроизведении аудиоклипа
behavior MARQUEE scroll slide alternate Особенности движения бегущей строки в области вывода
Список допустимых атрибутов
425
Имя атрибута Элемент Допустимое значение Назначение
bgcolor TABLE TR TD TH BODY MARQUEE Значение цвета Цвет фона объекта
border TABLE IMG OBJECT MARQUEE Число Толщина границы, окружающей объект
bordercolorlight TABLE COL COLGROUP TBODY TR TD TH TFOOT THEAD Значение цвета Задание светлого цвета для освещенных частей рамки таблицы (в Internet Explorer)
bordercolordark TABLE COL COLGROUP TBODY TR TD TH TFOOT THEAD Значение цвета Задание темного цвета для затененных частей рамки таблицы (в Internet Explorer)
cellpadding TABLE Число Задание расстояния между границами ячейки и ее содержимым
cellspacing TABLE Число Задание свободного поля между ячейками
char COL COLGROUP TBODY TR TD, TH TFOOT THEAD Символ Задание символа, по которому выполняется выравнивание
426
Приложение Б
Имя атрибута Элемент Допустимое значение Назначение
checked INPUT checked Начальная установка переключателя или кнопки
cite BLOCKQUOTE Q URL URL документа, из которого взята цитата
class Все элементы, кроме: BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE Символьные данные Имя класса, к которому принадлежит данный элемент
classid OBJECT URL URL экземпляра объекта
clear BR left all right none Прерывание обтекания изображения текстом
code APPLET Символьные данные URL файла класса, в котором записан исполняемый апплет
codebase OBJECT APPLET URL Абсолютный или относительный URL
codetype OBJECT Тип содержимого Указание MIME-типа объекта
color BASEFONT FONT Значение цвета Задание цвета шрифта
color HR Значение цвета Цвет горизонтальной линии
cols FRAMESET Число Описание количества вертикальных фреймов и их ширины
cols TEXTAREA Число Видимая ширина многострочного текстового поля
colspan TD TH Число Количество объединяемых ячеек смежных столбцов
Список допустимых атрибутов
427
Имя атрибута Элемент Допустимое значение Назначение
compact DIR DL MENU OL UL compact Уменьшение расстояния между пунктами списка
content META Символьные данные Содержание МЕТА- инструкции
controls IMG controls Отображение панели видео проигрывателя (в Internet Explorer)
coords AREA Числа Координаты узловых точек фрагментов карт ссылок
data OBJECT URL URL данных, требуемых для работы объекта
datetime DEL INS Символьные данные Дата и время изменений текста
declare OBJECT declare Объявление объекта
direction MARQUEE left right Направление движения текста в бегущей строке
defer SCRIPT defer Указание на то, что броузер может задержать выполнение данного сценария
dynsrc IMG URL URL файла с видеозаписью (используется в Internet Explorer вместо обычного атрибута SRC)
dir Все элементы кроме: APPLET, BASE, BDO, BASEFONT, BR, FRAME, FRAMESET, IFRAME, PARAM, SCRIPT Itr rtl Направление чтения текста
enctype FORM Символьные данные Тип кодировки данных перед отправкой на сервер
face BASEFONT FONT Перечень гарнитур Список шрифтов, которыми может быть выведен текст
428
Приложение Б
Имя атрибута Элемент Допустимое значение Назначение
for LABEL Идентифика- тор Установление связи между меткой и элементом управления
frame TABLE void above below hsides Ihs rhs box vsides border Указание на то, какие границы таблицы должны выводиться на экран
frameborder FRAME IFRAME 1 0 Отображение рамки фреймов
headers TD TH Идентифика- торы Список идентификаторов ID соответствующих ячеек- заголовков, которые связаны с данной ячейкой
height IFRAME Число Высота плавающего фрейма
height MARQUEE Число Высота области вывода бегущей строки
height TD TH Число Высота ячейки
height IMG OBJECT Число Высота объекта
height APPLET Число Высота области, в которую выводится апплет
hidden EMBED false true Управление отображением панели проигрывателя
href A AREA LINK URL URL ресурса, с которым связана ссылка
href BASE URL Базовый URL, который будет добавляться ко всем относительным URL
hreflang A LINK Код языка Код языка того документа, на который указывает ссылка
Список допустимых атрибутов
429
Имя атрибута Элемент Допустимое значение Назначение
hspa.ce APPLET IMG OBJECT MARQUEE Число Ширина свободных полей справа и слева от объекта
http-equiv META Имя Имя заголовка сообщения ответа HTTP
id Все элементы кроме: BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE Имя Идентификатор данного элемента
ismap IMG ismap Указание на то, что изображение является серверной картой ссылок
lang Все элементы кроме: APPLET, BASE, BR, BASEFONT, FRAME, FRAMESET, IFRAME, PARAM, SCRIPT Код языка Сокращенное обозначение языка, который используется в содержимом данного элемента
language SCRIPT Символьные данные Наименование языка сценариев
link BODY Значение цвета Цвет ссылки в документе
longdesc IMG FRAME IFRAME URL URL документа, содержащего подробное описание элемента
loop BGSOUND Число Задание количества повторений при воспроизведении фонового аудиоклипа
430
Приложение Б
Имя атрибута Элемент Допустимое значение Назначение
loop IMG MARQUEE Число infinite -1 Задание количества повторений при воспроизведении видеоклипа или бегущей строки (в Internet Explorer)
loopdelay IMG Число Время задержки (в миллисекундах) перед началом воспроизведения видео (в Internet Explorer)
lowscr IMG URL URL изображения низкого качества, которое загружается в первую очередь
marginheight FRAME IFRAME Число Высота верхнего и нижнего поля внутри фрейма
marginwidth FRAME IFRAME Число Ширина правого и левого поля внутри фрейма
maxlength INPUT Число Максимальная длина содержимого текстового поля (количество допустимых символов)
method FORM get post Способ передачи данных из формы на сервер
multiple SELECT multiple Выбор нескольких элементов из списка
name BUTTON TEXTAREA Символьные данные Присвоение имени элементу формы
name APPLET Символьные данные Присвоение имени апплету
name SELECT Символьные данные Присвоение имени списку
name FORM Символьные данные Присвоение имени форме
name FRAME IFRAME Символьные данные Присвоение имени фрейму
name IMG Символьные данные Присвоение имени изображению
name A Символьные данные Присвоение имени конечной закладке
name INPUT OBJECT Символьные данные Присвоение имени элементу управления или объекту
Список допустимых атрибутов
431
Имя атрибута Элемент Допустимое значение Назначение
паше MAP Символьные данные Присвоение имени карте ссылок
пате PARAM Символьные данные Присвоение имени свойству
пате META Символьные данные Присвоение имени МЕТА- информации
nohref AREA nohref Задание неактивного фрагмента карты ссылок
noresize FRAME noresize Запрет изменения размеров фрейма
noshade HR noshade Задание линии без тени
nowrap TD TH nowrap Отмена перераспределения строк таблицы, если они выходят за правую границу экрана
profile HEAD URL URL словаря с метаинформацией
readonly TEXTAREA INPUT readonly Запрет на изменение значения в элементе формы (содержимое доступно только для чтения)
rel A LINK alternate next stylesheet prev contents index glossary start copyright help chapter section subsection appendix bookmark Отношение между исходным и целевым объектом ссылки
rev A LINK alternate next stylesheet prev contents index glossary start Определение типа «обратной ссылки» (отношение, обратное атрибуту rel)
432
Приложение Б
Имя атрибута Элемент Допустимое значение Назначение
copyright help chapter section subsection appendix bookmark
rows FRAMESET Список размеров Описание количества горизонтальных фреймов и их высоты
rows TEXTAREA Число Количество строк в текстовом поле
rowspan TD TH Число Количество объединяемых строк
rules TABLE All cols rows groups none Управление выводом границ в таблице
scope TD TH row col rowgroup colgroup Указание на то, для каких ячеек таблицы данная ячейка является заголовком
scrollamount MARQUEE Число Смещение текста бегущей строки между последовательными перерисовками
scrolldelay MARQUEE Число Временная задержка между последовательными перерисовками текста бегущей строки
scrolling FRAME IFRAME yes no auto Задание отображения полосы прокрутки
selected OPTION Selected Указание на то, что данный пункт списка выбран по умолчанию
shape AREA rect circle poly default Форма фрагмента карты ссылок
Список допустимых атрибутов
433
Имя атрибута Элемент Допустимое значение Назначение
size HR Число Толщина линии
size FONT Символьные данные Размер шрифта
size INPUT Символьные данные Задание видимого размера текстового поля
size BASEFONT Символьные данные Размер основного шрифта
size SELECT Число Количество видимых строк в списке
span COLGROUP Число Количество столбцов в группе
src SCRIPT URL URL файла, в котором размещается код сценария
src INPUT URL URL файла, содержащего изображение для графических кнопок формы
src FRAME IFRAME URL URL содержимого фрейма
src IMG URL URL файла изображения
src BGSOUND URL URL фонового аудиоклипа
standby OBJECT Текст Сообщение, выводимое на экран во время загрузки объекта
start OL Число Число, с которого начинается нумерация пунктов списка
start IMG fileopen Задание момента начала включения видеоклипа (в Internet Explorer)
style Все элементы кроме: BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE Лист стилей Атрибут стиля
434
Приложение Б
Имя атрибута Элемент Допустимое значение Назначение
tabindex A AREA BUTTON INPUT OBJECT SELECT TEXTAREA Число (от 0 до 32767) Задание номера, который определяет, в каком порядке обходятся объекты при нажатии клавиши Tab
target A AREA BASE FORM LINK Имя Указывает на целевой фрейм, в который будет выведен ресурс, обозначенный ссылкой
text BODY Значение цвета Цвет текста для всего документа
title Все элементы кроме: BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, TITLE Текст Всплывающая подсказка
type A LINK Текст MIME-тип ресурса, на который указывает ссылка
type OBJECT Текст Указание MIME-типа данных, которые необходимы объекту
type SCRIPT Текст М1МЕ-тип, соответствующий языку, который используется в сценарии
type STYLE Текст MIME-тип листа стилей
type INPUT Текст Задание типа элемента управления
type LI square circle Тип маркера, используемого в списке
Список допустимых атрибутов
435
Имя атрибута Элемент Допустимое значение Назначение
type OL 1 A a I i Тип маркеров нумерации, используемых в упорядоченном списке
type UL disc square circle Тип маркера, используемого в списке
type BUTTON button submit reset Тип кнопки
usemap IMG INPUT OBJECT URL Превращение объекта в клиентскую карту ссылок; значением атрибута является URL тар-файла
valign COL COLGROUP TD TBODY TFOOT TH THEAD TR top middle bottom baseline Вертикальное выравнивание содержимого внутри элемента таблицы (ячейки, столбца и т.д.)
value INPUT Символьные данные Задание значения по умолчанию для элементов text или password
value OPTION Символьные данные Значение, которое отправляется из формы на обработку
value BUTTON Символьные данные Значение кнопки
value LI Число Определение текущего порядкового номера пункта упорядоченного списка (изменение порядка)
version HTML Символьные данные Наименование версии HTML
vlink BODY Значение цвета Цвет ссылок в документе, которые уже посещались
volume BGSOUND Число Громкость воспроизведения звука
436
Приложение Б
Имя атрибута Элемент Допустимое значение Назначение
vspace APPLET IMG OBJECT MARQUEE Число Высота свободных полей сверху и снизу от объекта
width HR Число Ширина горизонтальной линии
width IFRAME Число Ширина плавающего фрейма
width IMG OBJECT Число Ширина изображения, объекта
width TABLE Число Ширина таблицы
width TD TH Число Ширина ячейки
width COL COLGROUP Число Ширина столбца в группе
width MARQUEE Число Ширина области вывода бегущей строки
Приложение В.
Свойства стилей'
Свойство “ Значение Значение по умолчанию Примечание
background См. свойства: background- color, background- image, background- repeat, background- position Задает в сокращенном виде цвет фона, URL фонового изображения, повторение и позиционирование фонового рисунка
background- color <цвет> transparent transparent Определяет цвет фона элемента
background- image <URL> none none Присваивает элементу фоновое изображение, хранящееся в файле с указанным URL
background- position top center bottom left center right <число> 0 0 Позиционирование фо- нового изображения (по положению левого верхнего угла)
background- repeat repeat repeat-x repeat-y no-repeat repeat Повторение фонового изображения
border См. свойства: border-width, border-style, border-color Задает в сокращенном виде ширину, стиль и цвет линий всех четы- рех границ элемента
* в угловых скобках в качестве значений свойств стилей записываются:
вместо ключевого слова “цвет”- имя цвета (например, red) или RGB-код (например,
#FF0000):
вместо ключевого слова “URL” - URL-адрес источника;
вместо ключевого слова “число” - числовые значения в процентах (%), относитель-
ных (рх, ex, ет) или абсолютных величинах (cm, in, mm, pc, pt).
* * В таблице приводятся свойства CSS, которые поддерживаются в броузерах Netscape и Internet
Explorer.
438
Приложение В
Свойство ** Значение Значение по умолчанию Примечание
border- spacing <число> 0 Определяет зазор между линиями границ смеж- ных ячеек таблицы
border-top border-right border- bottom border-left См. свойства: border-width (border-top- width, border-right- width, . .) , border-style, border-color Задают в сокращенном виде свойства границ: ширину, стиль и цвет
border-color <цвет> Задает цвет всех четы- рех границ элемента
border-top- color border- right-color border- bottom-color border-left- color <цвет> Задает цвет соответст- вующей границы элемента
border-style border-top- style border- right-style border- bottom-style border-left- style none hidden dotted dashed solid double groove ridge inset outset none Задает стиль всех че- тырех границ (свойст- во border-style) или одной границы, а именно: отображе- ние границы точками, пунктиром, сплошной линией, двойной ли- нией и т.д.
border-width border-top- width border- right-width border- bottom-width border-left- width thin medium thick <число> medium Задает ширину всех четырех границ (свой- ство border-width) или одной границы
Свойства стилей
439
Свойство ** Значение Значение по умолчанию Примечание
caption-side top bottom left right top Позиционирование названия таблицы
clear none left right both none Запрещает обтекания элемента текстом
clip rect auto auto Определяет прямо- угольную область, в которую выводится содержимое элемента (обрезание области вывода)
color <цвет> Зависит от броузера Задает цвет текста для всего документа
cursor auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help auto Определяет форму указателя мыши
display Inline block list-item none inline Управляет отображе- нием элемента (строч- ный элемент, блочный элемент и список)
empty-cells show hide show Задает отображение рамок вокруг пустых ячеек таблицы
float left right none none Задает обтекание элемента текстом
440
Приложение В
Свойство ** Значение Значение по умолчанию Примечание
font См. свойства font-style, font-variant, font-weight, font-size, font-family Задает в сокращенном виде стиль, начерта- ние, толщину, размер, высоту и наименова- ние шрифта
font-family Arial Helvetica Sans-serif и др. Зависит от броузера Определяет шрифт или семейство шрифтов
font-size <число> xx-small x-small small medium large x-large xx-large medium Задает размер шрифта
font-style normal italic oblique normal Управляет стилем начертания в семейст- ве шрифтов
font-variant normal small-caps normal Задает вариант начер- тания шрифта (обыч- ный или мелкими за- главными буквами)
font-weight normal bold bolder lighter <число от 100 до 900 с шагом 100> normal Задает «вес» или относительную жирность шрифта
height <число> auto auto Задает высоту элемента
letter- spacing <число> normal normal Определяет межсим- вольный интервал
line-height <число> normal normal Определяет меж- строчный интервал
Свойства стилей
441
Свойство ** Значение Значение по умолчанию Примечание
list-style См. свойства: list-style- position, list-style- image , list-style-type Задает в сокращенном виде тип списка, рас- положение маркеров и их изображение
list-style- image <URL> none none Задает URL файла, со- держащего изображе- ние маркера для элементов списка
list-style- position Inside outside outside Определяет располо- жение маркеров отно- сительно элементов списка(внутри или вне области вывода списка)
list-style- type disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none disc (для не- упорядоченного списка) Задает маркеры для неупорядоченного и упорядоченного списков
margin <число> 0 Определяет размеры всех четырех свобод- ных полей вокруг элемента
margin-top margin-right margin- bottom margin-left <число> 0 Определяет размер свободного поля (верхнего, правого, нижнего, левого)
overflow visible hidden scroll none none Управляет отображени- ем содержимого элемен- та за пределами области вывода
padding <число> 0 Задает расстояние ме- жду всеми границами элемента и его содержимым
442
Приложение В
Свойство ** Значение Значение по умолчанию Примечание
padding-top padding- right padding- bottom padding-left <число> 0 Задает расстояние от соответствующей границы до содержи- мого элемента
position static relative absolute static Определяет размеще- ние элемента относи- тельно других элементов
text-align left right center justify Зависит от брау- зера и направле- ния чтения Задает горизонтальное выравнивание текста в блочных элементах
text- decoration none underline overline line-through blink попе Задает параметры на- чертания шрифта (под- черкивание, надчерки- вание, зачеркивание, мерцание)
text-indent <число> 0 Задает отступ первой строки текста
text-shadow none <цвет> <число> попе Определяет текст с тенью
text- transform capitalize uppercase lowercase none попе Изменение регистра текста
vertical- align baseline sub super top text-top middle bottom text-bottom <число> baseline Определяет верти- кальное положение текста и изображений относительно базовой линии
visibility visible hidden inherit Определяет видимость элемента
Свойства стилей
443
Свойство “ Значение Значение по умолчанию Примечание
white-space normal pre nowrap normal Определяет отображе- ние пробелов,знаков табуляции и перевода строки(нормальное, преформатированное, безразрывное)
Width <число> auto auto Задает ширину элемента
word-spacing normal <число> normal Определяет интервал между словами
z-index auto <число> auto Задает порядок распо- ложения перекры- вающихся элементов
Приложение Г.
Таблица символьных примитивов
Числовой примитив Именной примитив Символ Описание
	 Пробельный символ (горизонтальная табуляция)
Пробельный символ (перевод строки)
  Пробел
! J Восклицательный знак (факториал)
" " п Двойные кавычки
 5; # Рамка
 6; $ Доллар
% О, "О Процент
& & & Амперсанд
' f Апостроф
( ( Левая круглая скобка
) ) Правая круглая скобка
* ; * Звездочка (астериск)
+ ; 4- Знак «плюс»
, Л Запятая
- - Дефис
. Точка
/ / Косая черта (слэш)
0 - 9 0-9 Цифры (0-9)
: • Двоеточие
; / Точка с запятой
< < < Знак «меньше»
= ≡ = Знак равенства
> > > Знак «больше»
? Вопросительный знак
@ © Коммерческое «at»
A - Z A - Z Прописные буквы латинского алфавита
[ [ Левая квадратная скобка
\ \ Обратная косая черта (обратный слэш)
] ] Правая квадратная скобка
^ Знак «каре»
Таблица символьных примитивов
445
Числовой примитив Именной примитив Символ Описание
_ Символ подчеркивания
	б; Тупой акцент
a - z a - z Строчные буквы латинского алфавита
{ { Левая фигурная скобка
| 1 Вертикальная черта
} } Правая фигурная скобка
~ Тильда
б0; Неразрывный пробел
¡ i Перевернутый восклицательный знак
б2; ¢ c Знак цента
£ £ £ Знак фунта стерлинга
¤ fccurren; Общий знак денежной единицы
¥ &y en; ¥ Знак японской йены
¦ kbrvbar; 1 1 Разорванная вертикальная черта
§ § § Параграф
¨ ¨ •• Умлаут
© © © Знак авторского права
« « « Левые кавычки-«елочки»
¬ knot; “1 Знак отрицания
® ® Знак зарегистрированной торговой марки
¯ ¯ - Символ надчеркивания
° ° о Знак градуса
± ± + Знак «плюс-минус»
² ² 2 Надстрочный индекс 2 (показатель степени)
³ ³ 3 Надстрочный индекс 3 (показатель степени)
µ µ Ц Приставка «микро»
¶ ¶ Знак абзаца
· · • Точка по середине высоты символов
¹ &supl; 1 Надстрочный индекс 1
» » » Правые кавычки-«елочки»
¼ &fracl4; Дробь «одна четвертая»
½ &fracl2; y2 Дробь «одна вторая»
¾ ¾ 3/4 Дробь «три четвертых»
446
Приложение Г
Числовой примитив Именной примитив Символ Описание
£#191; kiquest; c Перевернутый вопросительный знак
£#215; £times; X Знак умножения
£#402; £fnof; f Знак флорина
£#732; £tilde; Тильда
£#913; - £#937; A - Q Прописные буквы греческого алфавита
£#945; - £#969; a - co Строчные буквы греческого алфавита
£#8194;   Короткий пробел
£#8195; £emsp; Длинный пробел
£#8201; £thinsp; Минимальный пробел
£#8211; £ndash; — Короткое тире
£#8212; £mdash; — Длинное тире
£#8216; £lsquo; Левая одинарная кавычка
£#8217; £rsquo; / Правая одинарная кавычка
£#8218; £sbquo; r Нижний апостроф
£#8220; £ldquo; w Левая двойная кавычка
£#8221; £rdquo; tt Правая двойная кавычка
£#8222; £bdquo; и Нижняя двойная кавычка
£#8224; £dagger; t Крестик
£#8225; £Dagger; Ф Двойной крестик
£#8226; £bull; • Круглый зачерненный маркер
£#8230; £hellip; ... Многоточие
£#8240; £permil; Знак промилле
£#8242; £prime; r Знак угловой минуты или фута
£#8243; ″ ff Знак угловой секунды или дюйма
£#8249; klsaquo; < Левая угловая одинарная кавычка
£#8250; £rsaquo; > Правая угловая одинарная кавычка
£#8260; £frasl; / Наклонная черта дроби
£#8364; £euro; € Знак евро
£#8482; ™ TM Знак торговой марки
£#8592; £larr; <— Стрелка «влево»
£#8593; £uarr; T Стрелка «вверх»
£#8594; £rarr; —> Стрелка «вправо»
£#8595; £darr; I Стрелка «вниз»
£#8596; ↔ Стрелка «влево-вправо»
£#8706; ∂ d Знак частной производной
Таблица символьных примитивов
447
Числовой примитив Именной примитив Символ Описание
∏ ∏ П Знак произведения
∑ ∑ E Знак суммы
− − — Знак минус
√ √ •v Квадратный корень
∞ ∞ oo Знак бесконечности
∫ ∫ J Интеграл
≈ ≈ Знак приближенного равенства
≠ ≠ Знак неравенства
≡ ≡ == Знак тождественного равенства
≤ ≤ Меньше или равно
≥ ≥ > Больше или равно
Содержание
Введение.............................................5
Часть I. Язык разметки HTML........................7
ГЛАВА 1. Введение в HTML...............................................8
Общие сведения о HTML..................................................8
Зачем нужен язык разметки?.............................................8
Об истории HTML и World Wide Web.......................................9
Web-документы, Web-сайты, Web-серверы.................................11
Браузеры..............................................................12
Адресация документов в Web............................................14
Принципы создания Web-страниц.........................................15
Просмотр кода страниц.................................................15
Редакторы HTML-файлов.................................................15
Теговая модель........................................................16
Парные и одиночные теги, контейнеры...................................17
Элементы HTML.........................................................18
Атрибуты тегов........................................................20
Комментарии...........................................................21
Основные правила синтаксиса HTML......................................22
Общая структура HTML-документа........................................22
Информация о версии HTML..............................................23
HTML-документ (элемент HTML)..........................................24
Заголовочная часть документа (элемент HEAD)...........................25
Название документа (элемент TITLE)....................................25
Тело документа (элемент BODY).........................................26
ГЛАВА 2. Оформление текста............................................27
Формирование абзацев и строк..........................................27
Разбиение текста на абзацы (элементы Р)...............................27
Разрывы строк (теги <BR>, <NOBR>).....................................28
Выравнивание абзацев (атрибут align)..................................30
Разделы (элементы DIV)................................................31
Заголовки (элементы Нх)...............................................31
Центрирование (элемент CENTER)........................................32
Горизонтальные линии в документе (элемент HR).........................33
Простейшие приемы форматирования текста...............................35
Предварительное форматирование текста (элемент PRE)...................35
Работа с шрифтами.....................................................37
Элемент FONT и его атрибуты...........................................38
Относительные размеры шрифтов.........................................38
Изменение основного шрифта (элемент BASEFONT).........................40
Содержание 449
Выбор гарнитуры шрифта (атрибут face).................................41
Управление цветом шрифта и фона страницы..............................42
Задание начертания шрифта (элементы В, I, U)..........................44
Стили текстовой разметки..............................................45
Элементы стиля шрифтов................................................45
Верхние и нижние индексы (элементы SUP и SUB).........................47
Списки................................................................48
Структура маркированных и нумерованных списков........................48
Маркированный список (элемент UL).....................................49
Нумерованный список (элемент OL)......................................50
Списки определений....................................................52
Г иперссылки..........................................................53
Ссылки и закладки.....................................................53
Принципы создания ссылок..............................................54
Создание ссылок на другие Web-узлы....................................56
Создание ссылок на объекты текущего Web-узла..........................57
Оформление ссылок.....................................................61
Применение многоязычного текста.......................................63
Направление чтения текста.............................................64
Кодирование символов..................................................64
ГЛАВА 3. Листы стилей............................................... 65
Понятие о листах стилей...............................................65
Поддержка листов стилей...............................................65
Как записывается стиль................................................66
Определение встроенного стиля (атрибут style).........................67
Формирование листа стилей.............................................68
CSS-правила...........................................................68
Внутренние и внешние листы стилей.....................................69
Введение заголовочного стиля (элемент STYLE)..........................69
Виды селекторов.......................................................71
Стилевые свойства.....................................................73
Значения свойств......................................................73
Свойства шрифтов......................................................74
Свойства текста.......................................................76
Свойства цвета и фона.................................................78
Свойства блока........................................................80
Свойства списков......................................................84
Другие группы стилевых свойств........................................86
Внешние листы стилей..................................................87
CSS-файлы.............................................................87
Обращение к внешнему листу стилей (элемент LINK)......................87
Еще раз о записи CSS-правил...........................................88
450 Содержание
Построчная запись стилевых свойств.........................................88
Сокращенная форма записи...................................................88
Комментарии................................................................89
Группирование селекторов и определений.....................................89
Псевдоклассы и псевдоэлементы..............................................90
Стили ссылок...............................................................90
Динамические псевдоклассы ссылок...........................................91
Стили фрагментов текста....................................................92
Наследование и каскадирование..............................................93
Правила наследования свойств...............................................93
Селекторы потомков.........................................................94
Каскады стилей.............................................................95
Приоритеты стилей..........................................................95
Слои и позиционирование элементов..........................................98
Свойство position..........................................................98
Абсолютное и относительное позиционирование (значения absolute и relative).99
Размещение текстовых блоков в документе...................................102
Визуальные эффекты........................................................104
Вырезание области (свойство clip).........................................104
Обработка содержания за пределами видимой области элемента
(свойство overflow).......................................................106
Задание расположения слоев (свойство z-index).............................108
Вывод элемента на экран (свойство visibility).............................110
ГЛАВА 4. Таблицы..........................................................112
О роли таблиц в Web-документах............................................112
Примеры Web-страниц с таблицами...........................................112
Создание таблиц...........................................................113
Строки (элемент TR).......................................................114
Ячейки (элемент TD).......................................................114
Заголовки (элемент TH)....................................................115
Название (элемент CAPTION)................................................115
Задание общих параметров таблицы..........................................116
Ширина таблицы (атрибут width)............................................117
Выравнивание таблицы в документе (атрибут align).........................117”
Вывод внешней рамки (атрибут border)......................................118
Параметры внешних и внутренних границ (атрибуты frame и rules)............119
Определение внешней рамки.................................................119
Определение внутренних границ (атрибут rules).............................121
Ширина границ таблицы (атрибут cellspacing)...............................123
Расстояние от содержимого ячейки до рамки (атрибут cellpadding)...........123
Форматирование строк и ячеек..............................................124
Выравнивание содержимого..................................................124
Задание ширины и высоты...................................................127
Содержание
451
Объединение ячеек таблицы.............................................127
Цвет в таблицах.......................................................129
Фон...................................................................129
Цвет внешней рамки....................................................131
Цвет внутренних границ................................................131
«Объемная» рамка......................................................131
Группирование строк и столбцов........................................132
Группы строк (элементы THEAD, TFOOT и TBODY)..........................132
Группы и подгруппы столбцов (элементы COLGROUP и COL).................134
Наследование свойств выравнивания.....................................138
Компоновка таблиц и текста............................................140
Плавающие таблицы.....................................................140
Прерывание обтекания текста вокруг таблицы............................141
ГЛАВА 5. Графика и мультимедиа на Web-странице........................143
Общие сведения о графике для Web......................................143
Об использовании графической информации...............................143
Форматы графических файлов для WWW....................................143
О возможных источниках изображений и авторских правах.................144
Вставка изображения (элемент IMG).....................................145
Размеры изображения (атрибуты width и height).........................147
Выравнивание изображения (атрибут align)..............................148
Отключение обтекания рисунка текстом..................................151
Рисунок в рамке (атрибут border)......................................151
Поля вокруг рисунка (атрибуты vspace, hspace и свойства margin).......152
Чтобы посетитель не скучал, пока загружается рисунок..................153
Альтернативный текст (атрибут alt)....................................153
Некоторые другие атрибуты.............................................154
Изображения-ссылки....................................................154
Фоновые изображения (атрибут background)..............................155
Прозрачные изображения................................................156
Озвучивание Web-страницы..............................................157
О роли звука на Web-странице..........................................157
Два способа обращения к мультимедиа-файлам............................158
Форматы аудиофайлов...................................................158
Звуковой фон (элемент BGSOUND)........................................159
Внедрение аудио (элемент EMBED).......................................160
Вставка видео.........................................................162
Форматы видеофайлов...................................................162
Внедрение видео (элемент EMBED).......................................163
Особенности Internet Explorer по воспроизведению видео (элемент IMG)..163
Гиперссылки на видео..................................................165
452
Содержание
ГЛАВА 6. Фреймы................................................... 166
Возможности фреймов.................................................166
Создание фреймов....................................................167
Элемент задания фреймов FRAMESET....................................168
Содержимое фреймов (элемент FRAME)..................................171
Вложенные фреймы....................................................171
Безфреймовая версия страницы (элемент NOFRAMES).....................173
Настройка фреймов...................................................173
Атрибуты элемента FRAMESET..........................................173
Атрибуты элемента FRAME.............................................174
Ссылки и навигация..................................................175
Целевые фреймы и элементы привязки..................................176
Пример панели навигации.............................................176
Базовый фрейм (элемент BASE)........................................177
Специальные целевые фреймы..........................................178
Плавающие фреймы (элемент IFRAME)...................................179
ГЛАВА 7. Формы.................................................... 181
О формах HTML.......................................................181
Пример формы HTML...................................................182
Зачем нужны формы...................................................183
Задание формы (элемент FORM)........................................184
Имя формы (атрибут name)............................................184
Представление формы на сервер (атрибут action)......................184
Передача данных (атрибут method)....................................185
Кодировка (атрибут enctype).........................................186
Создание элементов управления.......................................186
Атрибуты тега <INPUT>...............................................186
Какие бывают элементы управления (атрибут type).....................187
Текстовые поля......................................................189
Флажки..............................................................191
Переключатели.......................................................193
Кнопки..............................................................195
Многострочные поля (элемент TEXTAREA) ..............................197
Списки..............................................................198
Группирование элементов управления (теги <FIELDSET>, <LEGEND>)......201
Отправка формы......................................................202
ГЛАВА 8. Планирование и размещение
Web-сайта в Интернете................................................203
Планирование и создание сайта.......................................203
Предварительные этапы...............................................203
Разработка структуры сайта..........................................203
Содержание 453
Сборка файлов Web-сайта................................................205
Выбор Web-сервера......................................................206
Размещение Web-сайта в Интернете.......................................207
Использование протокола HTTP...........................................207
Использование протокола FTP............................................210
Регистрация в поисковых системах, рейтингах............................213
Как работает поисковая машина..........................................213
Краткий обзор средств поиска...........................................214
Задание ключевых слов..................................................215
Составление описания для поисковой системы.............................216
Включение рисунков в результаты поиска.................................216
Регистрация «вручную» в поисковых системах и каталогах.................216
Участие в рейтинге, установка счетчика.................................219
Мероприятия по раскрутке сайта.........................................221
Часть II. Язык сценариев JavaScript.....................223
ГЛАВА 9. Введение в JavaScript..........................................224
Начальные понятия JavaScript............................................224
JavaScript - интерпретируемый язык......................................224
Встраивание сценария в документ.........................................225
Константы, переменные, идентификаторы...................................226
Зарезервированные слова.................................................228
Разделители.............................................................229
Комментарии.............................................................230
Поддерживает ли ваш браузер язык JavaScript?............................230
Escape-последовательности...............................................231
Типы данных.............................................................232
Числовой тип............................................................232
Булевский (логический) тип..............................................233
Строковый тип...........................................................233
Нулевой тип.............................................................233
Объявление переменных и отсутствие типизации............................233
Операции................................................................234
Арифметические операции.................................................235
Операции инкремента и декремента........................................236
Операции сравнения......................................................237
Строковые операции......................................................237
Логические операции.....................................................238
Операции присваивания...................................................240
Прочие операторы........................................................240
Приоритеты выполнения операций..........................................241
Инструкции..............................................................242
Инструкции выбора.......................................................242
454
Содержание
Инструкции циклов......................................................245
Функции................................................................250
Объявление функции.....................................................250
Инструкция return......................................................251
Вызов функции..........................................................252
Функции преобразования типов данных....................................253
ГЛАВА 10. Объектная модель JavaScript.................................. 255
Общие сведения об объектах.............................................255
Свойства, методы, инкапсуляция.........................................255
Операции со свойствами.................................................256
Встроенные объекты.....................................................257
Объект Date............................................................257
Объект Math............................................................260
Массивы................................................................264
Массивы в JavaScript...................................................264
Массивы как объекты....................................................265
Операторы цикла при работе с массивами.................................266
Методы массивов........................................................268
Многомерные массивы....................................................269
Строки.................................................................270
Создание объекта String................................................270
Операции со строками...................................................271
Строковые массивы......................................................275
Пользовательские объекты...............................................276
Конструктор объектов...................................................276
Пример. Создание типа прямоугольников..................................277
Конструирование метода.................................................279
Пример. Использование объектов для хранения данных.....................280
Добавление свойств и методов (объект Prototype)........................282
Пример. Создание метода для формирования списка в документе HTML.......283
Функции как объекты....................................................284
Свойства функции.......................................................285
Локальные и глобальные переменные......................................285
Использование массива аргументов.......................................286
Специальные значения, функции, объекты.................................287
Infinity и NaN.........................................................287
Объект null............................................................288
Значение undefined.....................................................288
Различие между undefined и null. Оператор typeoff......................288
ГЛАВА 11. Обработка событий.............................................290
События и обработчики событий..........................................290
Всплывание событий в DHTML.............................................291
Содержание 455
Стандартные события DHTML..............................................292
События объектов JavaScript............................................294
Способы связывания событий.............................................295
Введение событий в качестве атрибутов..................................295
Обработчики событий как функции........................................296
Динамическое связывание событий в сценарии.............................298
Асинхронность обработчиков событий.....................................299
Обработчики событий в теге <SCRIPT>....................................300
Атрибуты for и event...................................................300
Если браузер не поддерживает связывание событий в <SCRIPT>.............301
Один обработчик событий для нескольких элементов.......................302
Использование объекта event............................................303
Свойства объекта event.................................................303
Определение событий мыши...............................................304
События таймера........................................................304
О событиях, не зависимых от пользователя...............................304
Периодические события таймера..........................................305
Удаление таймера.......................................................306
Задержка времени точной длительности...................................307
Часть III. Динамический HTML.................309
ГЛАВА 12. Управление окнами..........................................310
Объектная модель браузера............................................310
Dynamic HTML как спецификация объектной модели.......................310
Иерархия объектов....................................................311
Точечная нотация.....................................................312
Операции с окнами (объект window)....................................312
Создание нового окна браузера (метод open)...........................312
Присвоение имени окну (свойство name)................................314
Перемещение окна браузера (методы moveTo, moveBy)....................315
Изменение размеров окна (методы resizeTo и resizeBy).................315
Печать Web-страницы (метод Print)....................................316
Закрытие окна (метод close)..........................................316
Информация о документе и окне браузера (объект location).............316
Свойства объекта location............................................317
Получение данных URL.................................................317
Перезагрузка и замена текущей страницы (методы объекта location).....319
Управление строкой состояния (свойства status, defaultstatus)........320
Пример. Изменение содержимого строки состояния.......................320
Пример. Цифровые часы в строке состояния.............................321
Переходы между Web-страницами (объект history).......................322
Свойства и методы, применяемые для переходов.........................322
456
Содержание
Создание кнопок Назад и Вперед..........................................323
Работа с диалоговыми окнами..............................................324
Организация простых диалогов (методы alert, confirm и prompt)...........324
Создание индивидуального диалогового окна...............................326
Обмен данными между диалоговым окном и документом.......................329
Обработка событий окна...................................................335
Событие onLoad для различных элементов..................................335
Проверка загрузки документа.............................................336
ГЛАВА 13. Управление документом........................................ 338
Объект document..........................................................338
Иерархическая структура и ссылки на элементы документа..................338
Запись ссылок на объект document........................................340
Семейства, свойства и методы............................................340
Вывод свойств объекта document..........................................341
Работа с документом......................................................342
Методы write и writein..................................................343
Изменение содержания документа (методы open, close, write)..............343
Задание цветов фона и текста (свойства bgColor и fgColor)...............344
Задание цвета гиперссылок (свойства linkcolor, alinkColor и vlinkColor).345
Изменение заголовка документа (свойство title)..........................346
Даты....................................................................347
Семейства элементов документа............................................347
Семейство all...........................................................348
Динамическое содержание документа........................................350
Свойства динамического содержания.......................................350
Создание элемента с помощью метода write()..............................355
Методы Adjacent.........................................................355
Динамическое создание таблиц.............................................361
Построение таблицы......................................................361
Свойства и методы элемента <TABLE>......................................363
Заполнение таблицы данными..............................................364
ГЛАВА 14. Динамические стили и анимация................................ 367
Управление стилями CSS...................................................367
Определение стиля текста (свойство cssText).............................367
Семейство styleSheets....................................................368
Свойства owningElement и styleSheet.....................................369
Отключение листа стилей (свойство disabled).............................370
Изменение уровня детализации содержания документа.......................371
Анимация текста..........................................................373
Текст с меняющимся цветом...............................................374
«Мигающий» текст........................................................374
«Резиновый» текст (свойство letterspacing)..............................377
Содержание
457
«Печатаемый» текст.................................................379
«Неоновый» текст...................................................380
Бегущая строка.....................................................382
Анимация изображений...............................................384
Замена изображения.................................................385
Изменение размера изображения (пульсирующая картинка)..............386
Динамическое позиционирование......................................387
Информация воспроизведения элементов (свойства offsetParent, offsetTop и др.).388
Управление областью вырезания (свойство clip)......................390
Видимая часть содержания элемента (свойства clientHeight, clientwidth,
scrollHeight и др.)................................................393
Отражение элемента от границ окна..................................395
ГЛАВА 15. Программирование форм....................................398
Семейства форм..................................................... 398
Семейство forms....................................................398
Семейство elements.................................................398
Обращение к форме..................................................399
Свойства и методы объекта form.....................................400
Стандартные свойства DHTML.........................................400
Установка фокуса и выделение элемента (методы focus()n select())...401
Программирование списков и меню....................................402
Свойства элемента <SELECT>.........................................402
Семейство опций options............................................403
Добавление элемента в список (метод add)...........................405
Удаление элемента списка (метод remove)............................407
Генерация списка заголовков на Web-странице........................407
Определение выбранных опций в списке...............................409
Проверка ввода данных в форму......................................411
Проверка вводимых символов.........................................412
Проверка при выходе из элемента управления.........................413
Проверка данных при отправке формы.................................415
Приложение А. HTML-элементы........................................419
Приложение Б. Список допустимых атрибутов..........................423
Приложение В. Свойства стилей......................................437
Приложение Г. Таблица символьных примитивов........................444