SNK Software
Web Studio Монополия Metaproducts Утилиты Игры
Монополию Web Studio Библиотека
Вебмастер Дельфи Работа на ПК Самоучитель
Для PHP Для Delphi
Веб-дизайн Программирование Компьютеры Девайсы Заметки
SNK Software Индустрия hardware Индустрия software
О студии Портфолио Сопровождение сайтов

Новые материалы

Девайсы:
Сравнительный обзор Nokia Lumia 920 и HTC 8X
Девайсы:
Обзор Nokia Lumia 820 – смартфона на WP8
Вебмастеру:
Настройка Apache, PHP и MySQL для Linux-VPS
Вебмастеру:
VPS на домашнем ПК: настройка сети в VM VirtualBox и Debian
Вебмастеру:
VPS на домашнем ПК: устанавливаем Linux Debian 6
Вебмастеру:
VPS на домашнем ПК: установка VM VirtualBox
Работа на компьютере:
Иные возможности текстового процессора Word
Работа на компьютере:
Вставка объектов
Работа на компьютере:
Таблицы в Word
Работа на компьютере:
Печать и сохранение документов
Работа на компьютере:
Сноски, колонтитулы, оглавление и указатели в Word

Стили и сценарии

В этой главе:

  1. Элемент STYLE
  2. Атрибуты STYLE, CLASS и ID
  3. Элементы SCRIPT и NOSCRIPT
  4. Динамические атрибуты

Хотя ни таблицы стилей, ни какие-либо языки сценариев не входят в спецификацию XHTML, мы рассмотрим здесь способы их подключения. То, что будет сказано в этой главе о таблицах стилей, следует относить, в первую очередь, к каскадным таблицам стилей – CSS, подробно рассматриваемых в третьей части настоящего издания. В свою очередь, работа со сценариями, а так же язык сценариев JavaScript, будут рассмотрены в четвертой части. Здесь же мы рассмотрим лишь средства, имеющиеся у языка разметки XHTML для взаимодействия с этими ныне повсеместно применяемыми технологиями – элементами STYLE и SCRIPT, а так же атрибутами STYLE, ONCLICK и др.

Элемент STYLE

Для встраивания стилевой разметки непосредственно в документы HTML и XHTML применяется элемент STYLE. Этот элемент всегда должен находиться в части HEAD документа, как показано в листинге 2.38.

Листинг 2.38. Элемент STYLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <title>Документ со стилями</title> <style type="text/css"> определение таблицы стилей </style> </head> <body> Документ, на который распространяется действие стилей, определенных в STYLE </body> </html>

Для того чтобы скрыть содержимое элемента STYLE от тех браузеров, которые его не распознают, можно разместить его содержимое внутри комментария:

<style type="text/css"><!-- определение таблицы стилей --></style>

Как мы видим, у элемента STYLE имеется атрибут TYPE, при помощи которого определяется, какой именно стилевой язык применяется (CSS – не единственный язык стилей, хотя и самый распространенный). Альтернативный вариант указания языка стилей – использование элемента META:

<meta http-equiv="Content-Style-Type" content="text/css" />

В таком случае явно указывается, что в данном документе все стили имеют тип CSS. Раз уж мы сослались на другой элемент, то нелишним будет напомнить, что для подключения стилей может использоваться и элемент LINK:

<link rel="Stylesheet" href="default.css" type=”text/css” />

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

Второй собственный атрибут элемента STYLE – это MEDIA, указывающий на то, для какого типа представления документа определенный стиль следует применять. Дело в том, что существуют несколько типов представления документа – от дисплея ПК или телевизора до обычного принтера или устройства Брайля. Соответственно, и атрибут MEDIA может принимать целый ряд значений:

При всем изобилии вариантов, особенно важно выделить screen и print, так как именно для просмотра на компьютерах и печати на принтерах создается большинство web-страниц. Например, если ваши страницы выглядят на экране как светлый текст на темном фоне, то имеет смысл задать обратное представление для печати.

ПРИМЕЧАНИЕ
На самом деле, современные браузеры самостоятельно «оптимизируют» страницы для вывода на печать, так что в случае белых букв на черном фоне, при печати и так все будет выведено наоборот. Однако для более предсказуемых результатов бывает полезно определять специальные стили для печати.

Кроме собственных атрибутов, у элемента STYLE имеются и общие, а именно LANG, DIR и TITLE. Последний в данном случае может быть использован лишь для написания каких-либо комментариев к коду, поскольку никак не обрабатывается браузерами.

Свойства STYLE

Закрывающий тег: требуется.
Совместимость: все.
Вложение: недопустимо (может содержать только код на языке стилей).
Уникальный: нет.

Атрибуты STYLE, CLASS и ID

Если элемент STYLE задает стиль для всего документа, т.е. всех элементов, находящихся в части BODY, то действие одноименного атрибута локализовано лишь тем элементов, в котором он определен. При этом атрибут STYLE определен почти для всех элементов XHTML – исключение составляют лишь пустые элементы BASE, BASEFONT и PARAM, а также те элементы, которые должны находиться вне тела документа, т.е. HEAD, HTML, META и TITLE. Ну и, разумеется, сам элемент STYLE по той же причине одноименного атрибута тоже не имеет, равно как и другой элемент, применяемый для внедрения «не-HTML» кода, т.е. SCRIPT.

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

<em style="color: red">красный текст!</em>

Во всех других случаях использование атрибута STYLE не желательно, поскольку он не позволяет воспользоваться основными преимуществами, предоставляемыми таблицами стилей – а именно отделению оформления от содержания. Так, если мы хотим выделить несколько элементов одним стилем, то следует определить соответствующий код в общем правиле CSS, указанном в заголовке документа или вообще в отдельном файле, а применить его уже используя другие средства, например, атрибут CLASS:

<style type="text/css"><!-- em.hot {color: red;} --></style> ... <em class="hot">красный текст!</em> ... <em class="hot">тоже красный текст!</em>

Более того, если даже выделяемый элемент заведомо уникален на данной странице, то все равно лучше избегать использования элемента STYLE для его выделения. Возможно, что в этом случае вместо CLASS следует воспользоваться другим атрибутом идентификации – ID:

<style type="text/css"><!-- em#hot {color: red;} --></style> ... <em id="hot">Уникальный красный текст!</em> ...

Преимущество такого подхода будет в том, что если применить внешнюю таблицу стилей (например, подключенную при помощи элемента LINK), то использование ID вместо внедренного атрибутом STYLE стиля позволит изменить, в случае надобности, оформление выделенного таким образом текста сразу на всех страницах, использующих данные стиль.

Подобно STYLE, атрибуты CLASS и ID имеются практически у всех элементов, а если быть точнее, то CLASS отсутствует лишь у тех же элементов, что и STYLE, а ID отсутствует только у BASE, HEAD, HTML, META, SCRIPT, STYLE и TITLE.

Элементы SCRIPT и NOSCRIPT

Для включения небольших программ – сценариев (или «скриптов») – на языках программирования, например, JavaScript, используют элемент SCRIPT:

<script type="text/javascript"> ... программа на языке JavaScript... </script> Очевидно, что элемент SCRIPT во многом схож с уже знакомым нам элементом STYLE. Более того, для того, чтобы скрыть сам сценарий от браузера, сценарии не поддерживающего, так же допустимо применять комментарии: <script type="text/javascript"><!-- ... программа на языке JavaScript... //--></script>

Единственное отличие – в двух косых чертах перед закрывающим тегом HTML-комментария. Эти две черты тоже являются комментарием, на сей раз – самого языка JavaScript и призваны предотвратить возникновение ошибки, связанной с попыткой интерпретации символов «-->».

ПРИМЕЧАНИЕ
На самом деле, поскольку вероятность встретить пользователя с Netscape 1.0 или MSIE 2.0, не выше, чем повстречать слона на Северном полюсе, а все остальные браузеры, включая даже самые примитивные (и не поддерживающие сценарии) типа Lynx, все равно распознают теги SCRIPT, то надобность в скрытии кода сценария практически равна нулю. Единственное исключение - это показ какого-либо содержимого, которое надо отобразить в любом случае, даже если у пользователя отключена обработка скриптов JavaScript.

Важное отличие элемента SCRIPT от STYLE состоит в том, что элемент SCRIPT может находиться в любом месте документа, а не только в его заголовке. Связано это с тем, что при помощи сценариев можно не только управлять страницами, но и создавать их содержимое. Именно поэтому и существует еще один элемент – NOSCRIPT, который следует располагать непосредственно за SCRIPT в тех случаях, когда без выполнения сценария может потеряться какая-либо важная информация. Пример такого использования показан в листинге 2.39 (см. также Styles\script.html).

Листинг 2.39. Элемент SCRIPT и альтернативный вывод

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <title>Документ со сценарием</title> </head> <body> <script type="text/javascript"> Программа на языке JavaScript, выводящая в документ то или иное приветствие в зависимости от времени суток... </script> <noscript>Здравствуйте!</noscript> ... </body> </html>

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

Для включения в HTML-документ сценария, находящегося в отдельном файле, следует использовать атрибут SRC:

<script src="JavaScriptProgram.js" type="text/javascript"></script>

В этом случае при помощи SRC указывается, что сценарий находится не внутри контейнера SCRIPT, а в отдельном файле. А атрибут TYPE традиционно определяет, что за тип файла следует загрузить. Помимо TYPE, указывающего на тип языка сценария, существует атрибут LANGUAGE, используемый для этих же целей. Более того, при помощи этого атрибута можно еще указать и версию языка:

<script language="JavaScript1.3"> ... программа на языке JavaScript версии 1.3... </script>

Такое использование было актуальным, когда разные браузеры работали с разными версиями языка, зачастую несовместимыми друг с другом. В настоящее время этот аспект не столь актуален, а потому данный атрибут был исключен из XHTML 1.1.

Помимо уже рассмотренных атрибутов, для элемента SCRIPT определены DEFER и CHARSET, а Microsoft предлагает так же атрибуты FOR и EVENT. Все они собраны в таблице 2.42.

Таблица 2.42 Атрибуты элемента SCRIPT
АтрибутПримечаниеОписание
src-Указывает на URI файла, содержащего текст сценария
typeОбязательныйУказывает на используемый язык сценариев
languageУстаревшийУказывает на то, какой язык сценариев используется. Допустимые значения зависят от конкретной программы. Для рассматриваемых в этой книге браузеров по умолчанию принимается как JavaScript
defer-Указывает, что данный скрипт не производит запись в документ. Например, если в JavaScript-программе нет выражений вроде document.write()
charsetТолько совместно с SRCУказывает на то, какой набор символов используется в подключаемом файле сценария
forТолько MSIEОпределяет элемент (через его ID), для которого предназначается сценарий
eventТолько MSIEОпределяет событие, для которого предназначается сценарий

Если не рассматривать патентованные атрибуты FOR и EVENT, которые, по сути, являются динамическими атрибутами наоборот, то больше рассматривать пока нечего: подробнее о сценариях будет рассказано в соответствующем разделе книги. Что касается использования динамических атрибутов (ONCLICK и т.п.), то приведу здесь две идентичных с точки зрения результата версии кода. Итак, стандартный вариант (с атрибутом):

<p onclick="alert('Hello!');">Щелкните для приветствия</p>

А вариант с использованием FOR и EVENT будет выглядеть так:

<p id="p1">Щелкните для приветствия</p> <script type="text/javascript" for="p1" event="onclick()"> alert('Hello!'); </script> Очевидно, что хоть какой-то смысл в использовании предлагаемого Microsoft подхода может быть в том случае, когда требуется использовать большой по объему код, хотя даже в таком случае правильнее будет определить функцию, которая будет вызываться динамическим атрибутом:

<p onclick="my_func();">Щелкните для приветствия</p> <script type="text/javascript"> function my_func() { ...большой код на JavaScript... } </script>

ПРИМЕЧАНИЕ
На самом деле, данные атрибуты были введены лишь для того, чтобы автоматические программы-генераторы (например, FrontPage или PowerPoint), могли без особых проблем работать со сценариями.

Свойства SCRIPT

Закрывающий тег: требуется. Совместимость: все. Вложение: недопустимо (может содержать только код на языке сценариев). Уникальный: нет.

Динамические атрибуты

Продолжая тему сценариев, нельзя не упомянуть о динамических атрибутах элементов XHTML. К таковым, в первую очередь, относятся определенные практически для всех встречающихся в теле документа элементов атрибуты ONCLICK, ONDBLCLICK, ONMOUSEDOWN, ONMOUSEUP, ONMOUSEOVER, ONMOUSEMOVE, ONMOUSEOUT, ONKEYPRESS, ONKEYDOWN и ONKEYUP. Кроме того, для ссылок и элементов форм предусмотрены атрибуты ONFOCUS и ONBLUR, а для некоторых – еще ONCHANGE и ONSELECT. Кроме того, формы имеют дополнительные динамические атрибуты ONSUBMIT и ONRESET, а сами документы, включая фреймсодержащие (т.е. элементы BODY и FRAME), обладают атрибутами ONLOAD, ONUNLOAD и ONBEFOREUNLOAD. Рассмотрим подробнее все данные атрибуты, для чего обратимся к таблице 2.43.

Таблица 2.43. Динамические атрибуты
АтрибутСобытиеДля каких элементов
onclickЩелчок мышкойВсе элементы, допустимые в теле документа, кроме APPLET, BR, FONT, ISINDEX, SCRIPT и PARAM
ondblclickДвойной щелчок мышкойВсе элементы, допустимые в теле документа, кроме APPLET, BR, FONT, ISINDEX, SCRIPT и PARAM
onmousedownНажата клавиша мышкиВсе элементы, допустимые в теле документа, кроме APPLET, BR, FONT, ISINDEX, SCRIPT и PARAM
onmouseupОтпущена клавиша мышкиВсе элементы, допустимые в теле документа, кроме APPLET, BR, FONT, ISINDEX, SCRIPT и PARAM
onmouseoverУказатель мышки попадает в область элементаВсе элементы, допустимые в теле документа, кроме APPLET, BR, FONT, ISINDEX, SCRIPT и PARAM
onmousemoveУказатель мышки перемещается по области элементаВсе элементы, допустимые в теле документа, кроме APPLET, BR, FONT, ISINDEX, SCRIPT и PARAM
onmouseoutУказатель мышки покидает область элементаВсе элементы, допустимые в теле документа, кроме APPLET, BR, FONT, ISINDEX, SCRIPT и PARAM
onkeypressНажата и отпущена клавиша на клавиатуреВсе элементы, допустимые в теле документа, кроме APPLET, BR, FONT, ISINDEX, SCRIPT и PARAM
onkeydownНажата клавиша на клавиатуреВсе элементы, допустимые в теле документа, кроме APPLET, BR, FONT, ISINDEX, SCRIPT и PARAM
onkeyupОтпущена клавиша на клавиатуреВсе элементы, допустимые в теле документа, кроме APPLET, BR, FONT, ISINDEX, SCRIPT и PARAM
onfocusПолучение фокуса вводаТолько A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA
onblurПотеря фокуса вводаТолько A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA
onchangeИзменение текста в элементе вводаТолько INPUT (типа File, Text и Password), SELECT, TEXTAREA
onselectВыделение текста в элементе вводаТолько INPUT (типа File, Text, Password) и TEXTAREA
onsubmitЗапрос на отправку формыТолько FORM
onresetЗапрос на сброс формыТолько FORM
onloadЗавершение загрузки документаТолько BODY и FRAMESET
onunloadПокидание страницыТолько BODY и FRAMESET
onbeforeunloadЗапрос на покидание страницы (только MSIE и Mozilla 1.7 и выше)Только BODY

Чтобы лучше понять, как данные атрибуты работают на практике, обратимся к примеру, приведенному в листинге 2.40 (см. так же файл Styles\Mouse.html).

Листинг 2.40. Динамические атрибуты для взаимодействия с мышью

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <title>Мышка</title> </head> <body> <p onclick="this.style.color='red';" ondblclick="this.style.color='green';"> Сделайте обычный и двойной щелчки мышкой </p> <p onmousedown="this.style.color='red';" onmouseup="this.style.color='green';"> Сначала нажмите, а затем отпустите клавишу мышки </p> <p onmouseover="this.style.color='red';" onmouseout="this.style.color='green';"> Подведите, а затем отведите указатель мышки </p> </body> </html>

В каждом из трех абзацев определено по два динамических атрибута, причем во всех случаях, первый заданный атрибут, при помощи кода на языке JavaScript, меняет цвет параграфа на красный, а второй – на зеленый. Так, в первом абзаце данного примера определены атрибуты ONCLICK и ONDBLCLICK, в результате чего при одинарном щелчке по области, занимаемой абзацем в браузере, цвет текста сменится на красный, а при двойном щелчке – на зеленый. Во втором абзаце текст краснеет в момент нажатия клавиши мышки и зеленеет после того, как клавиша будет отпущена. Ну а в третьем для покраснения достаточно просто подвести указатель мышки к абзацу, а для «позеленения» – отвести.

Подобно тому, как работают атрибуты для отслеживания нажатий на клавишу мышки, а именно – ONCLICK, ONMOUSEDOWN и ONMOUSEUP, действуют и их клавиатурные собраться – атрибуты ONKEYPRESS, ONKEYDOWN и ONKEYUP. Например, если в первом абзаце из листинга 2.40 вместо атрибута ONCLICK написать ONKEYPRESS, то абзац, должен будет изменить свой цвет при нажатии на любую кнопку на клавиатуре:

<p onkeypress="this.style.color='red';">...</p>

К сожалению, здесь мы сталкиваемся с такой проблемой, как идентификация активного элемента: если когда мы щелкаем мышкой по элементу, то ясно, что щелчок относится к нему, то при нажатии кнопки на клавиатуре не всегда ясно, к какому элементу нажатие относится. Так, если речь идет об элементах, которые могут иметь фокус ввода – а это все элементы форм и ссылки, то событие получит тот элемент, который в момент нажатия имеет фокус ввода. Для всех других элементов браузер Opera определяет элемент по тому, где расположен указатель мышки. Что касается MSIE и Mozilla, то они в таких случаях данные атрибуты попросту игнорируют. Проверить работу этих атрибутов в различных браузерах вы можете, используя файл keys.html. В частности, во всех браузерах «клавиатурные» атрибуты будут работать с элементами форм:

<form> <input type="text" size="60" value="Текст" onkeydown="this.style.color='red';" onkeyup="this.style.color='green';"> </form>

Поскольку фокус ввода могут получать не только формы, но и ссылки (характерным признаком таких элементов является наличие атрибута TABINDEX), то данные события будут обрабатываться и ими:

<a href="http://www.snkey.net" onkeypress="alert('Hello!');">Hello!</a>

Если взглянуть на таблицу 2.43, то можно отметить, что для данного набора элементов (т.е. формы и ссылки) определены дополнительные динамические атрибуты – ONFOCUS и ONBLUR. Как раз они отвечают за возможность обработки событий, связанных с получением и потерей фокуса ввода. Например, можно изменять состояние элемента формы при получении им фокуса ввода, тем самым дополнительно выделяя его на странице:

<input type="text" value="Текст" onfocus="this.style.color='red';" onblur="this.style.color='green';">

Здесь мы определили, что, получая фокус ввода, текст в строке станет красным, а после того, как пользователь перейдет к другому полю – зеленым. Пример такой формы можно посмотреть в файле focus.html.

Для еще более ограниченного круга элементов, а именно – для текстовых полей форм определены еще два атрибута – ONCHANGE и ONSELECT. Первый определяет обработчик события для того случая, когда пользователь изменяет значение текста. Кстати, этот атрибут имеется еще и у элемента SELECT – ведь в списке тоже можно изменить значение, правда, не вводя (или удаляя) какие-либо символы, а выбрав иной вариант. Что касается ONSELECT, то он используется в тех случаях, когда требуется выполнить действие в ответ на выделение пользователем текста (например, для его последующего копирования в буфер обмена):

<input type="password" onselect="this.value=''">

В данном случае в ответ на попытку пользователя выделить содержимое строки пароля, все оно будет удалено (никогда так не делайте на практике!).

Наконец, для самого элемента FORM, определены два собственных атрибута – ONSUBMIT и ONRESET, которые мы уже рассматривали в контексте форм (см. файл Forms\formevents.html). Что касается оставшихся трех динамических атрибутов, связанных с загрузкой и выгрузкой документа, то, хотя они уже и упоминались в контексте BODY, рассмотрим их работу здесь, обратившись к листингу 2.41.

Листинг 2.41. Атрибуты загрузки и выгрузки документа

<html> <head> <title>Вход и выход</title> </head> <body onload="alert('Пришли!');" onbeforeunload="return 'А может, останемся?';" onunload="alert('Ушли!');"> ... </body> </html>

Если вы откроете такой файл (in-out.html) в браузере, то сразу же получите сообщение «Пришли!». При выходе с этой странице (в том числе путем закрытия окна браузера), вы сначала получите предупреждение о том, что покидать ее, возможно и не следует (рис. 2.28).

Запрос на уход со страницы

Рис. 2.28. Запрос на уход со страницы с обработкой «запроса на выход»

Впрочем, такой запрос покажут не все, а только MSIE или Mozilla версии не ниже 1.7 (и, соответственно, Netscape 7.2 и Firefox 0.9), поскольку за его поддержку отвечает нестандартный атрибут ONBEFOREUNLOAD. Использование такого атрибута может быть оправдано лишь в случае, когда подобный подход позволит подстраховать посетителя страницы, например, от потери данных, введенных в объемную форму до ее отправки. Если вы выберите «Отмену», то новый документ не загрузится (или же окно браузера не закроется), в противном случае, «на прощание», сработает последний определенный в BODY атрибут – ONUNLOAD, показав, в нашем случае, сообщение «Ушли!».

В завершение остается добавить, что динамические атрибуты работают со всеми браузерами (с учетом приведенных в тексте оговорок).

2011-06-06 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !

Избранное

SNK GSCP
SNK GSCP - новая библиотека для PHP 5!
Web Studio
Web Studio и Visual Workshop
Библиотека:
Стандарты на web-технологии
Монополия
Монополия Android
Загрузки:
скачать программы
Продукция:
программы и книги
Техподдержка / Связаться с нами
Copyright © 1999-2013 SNK. Все права защищены.
При использовании материалов с сайта ссылка на источник обязательна.
Рейтинг@Mail.ru