HTML / 12. Исполняемое содержимое

JavaScript

Все элементы исполняемого содержимого, о которых мы до сих пор говорили, имеют одну общую черту – они существуют отдельно от броузера и HTML/XHTML-документа, представляя собой отдельный блок данных или отдельную программу. Совсем иное дело – JavaScript. Это встроенный язык сценариев, обращающийся к собственным возможностям броузера. Можно раскидать предложения JavaScript по вашим документам – в виде ли блоков программного кода или в виде отдельных операторов, привязанных к индивидуальным тегам. Броузеры, поддерживающие JavaScript, в том числе все все популярные броузеры, интерпретируют и исполняют введенные в текст документов фрагменты кода JavaScript, изменяя внешний вид документов, управляя характеристиками отображения,манипулируя элементами форм и проверяя правильность их заполнения, выполняя, наконец, вычислительные задачи общего назначения. Как и в случае Java, мы не претендуем на то, чтобы учить вас в этой книге программированию на JavaScript. Мы покажем вам, как вкладывать JavaScript в ваши документы и как запускать эти программы,
а полное определение языка JavaScript вы сможете найти в книге «JavaScript: Definitive Guide» (O’Reilly).

Тег <script>
Один из способов включения JavaScript-кода в документы заключается в использовании стандартного HTML- и XHTML-тега <script>.Все, что содержится между тегами <script> и </script>, будет обрабатываться броузером как исполняемые выражения (функции) Java-
Script и данные. Внутри этого тега нельзя размещать разметку HTML и XHTML – броузер расценит это как ошибку.

Однако броузеры, не поддерживающие тега <script>, обрабатывают его содержимое – к недоумению пользователей – как обычный HTML. По этой причине мы рекомендуем заключать содержимое тега <script> в HTML-комментарии, как это делается CSS-правилами <style>:

<script language="JavaScript">
<!--
Здесь будут выражения JavaScript
// -->
</script>

Для броузеров, игнорирующих тег <script>, это содержимое будет скрыто обозначениями комментариев <!-- и -->. Поддерживающие JavaScript броузеры, напротив, автоматически распознают и интерпретируют операторы JavaScript, выделенные тегами комментариев.
Используя этот шаблон во всех своих тегах <script>, можно быть уверенным, что броузеры обработают документы, если даже и не полностью, то аккуратно.

К несчастью, как мы об этом говорим в главе 16, XHTML требует, чтобы содержимое сценария заключалось в специальные объявления CDATA, а не в комментарии. Следовательно, HTML-броузеры проиг-норируют XHTML-сценарии, и наоборот. Единственное, что мы можем здесь порекомендовать, это ориентироваться на популярные броузеры – писать на HTML, но, готовясь к будущему, включать в ваши документы как можно больше черт XHTML.

Можно включить в документ не один тег <script>, а несколько, располагая их как в заголовках (<head>), так и в теле () документа. Поддерживающий JavaScript броузер исполняет предложения по очереди.

Переменные и функции, определенные в одном теге, могут использоваться в других JavaScript-предложениях других тегов <script>. Фактически один распространенный стиль программирования на Java-Script состоит в помещении в документ одного тега <script>, содержащего определения глобальных переменных и функций общего назначения, и последующих вызовов этих функций и ссылок на эти переменные в предложениях JavaScript, разбросанных по документу.

Атрибуты language и type
Атрибуты language и type тега <script> используются для объявления языка сценария, использованного при составлении содержимого тега. Атрибут language признан нежелательным в стандартах HTML 4 и XHTML в пользу атрибута type. К сожалению, значения этих атрибутов различны.

Если вы используете JavaScript – до сих пор самый распространенный в Сети язык сценариев, – пишите language=JavaScript или type=text/javascript.
Иногда вы можете увидеть в качестве значения атрибута language=VBScript (text/vbscript для type), что означает, что текст внутри тега написан на Microsoft Visual Basic Script.

В случае JavaScript можно также указать в качестве языка "JavaScript 1.2", тем самым уточняя, что данный скрипт написан для броузеров, поддерживающих версию 1.2 этого языка (а большинство современных броузеров ее действительно поддерживает). Netscape 2.0, поддерживающий JavaScript 1.0, не будет обрабатывать сценарий, объявленный как "JavaScript 1.1", но какова доля ваших клиентов, все еще использующих Netscape 2.0?

Атрибуты srс и charset
Коды особенно больших или часто используемых JavaScript-программ, возможно, имеет смысл сохранять в отдельных файлах. В таких случаях броузер будет загружать эти отдельные файлы при помощи атрибута src. Значение атрибута – это URL файла, содержащего JavaScript-программу. MIME-тип такого файла должен быть application/x-javascript, но правильно сконфигурированный сервер будет с ним обращаться надлежащим образом, если суффикс в имени файла будет .js.Например:

<script type="text/javascript" src="http://www.kumquat.com/quatscript.js">
</script>

предлагает поддерживающему тег <script> броузеру загрузить с сервера JavaScript-программу под названием quatscript.js. Хотя у тега <script> нет содержимого, закрывающий тег </script> все же обязателен.

Используемый совместно с атрибутом src, атрибут charset сообщает броузеру, какой набор символов использовался при записи программы на JavaScript. Его значением может служить любой набор кодов символов стандарта ISO.

Атрибут defer
Некоторые JavaScript-сценарии используются для создания содержимого документа с применением метода document.write, а некоторые – нет. Если ваши сценарии не изменяют содержимого документа, вставьте в тег <script> атрибут defer, чтобы ускорить обработку вашего документа. Поскольку броузер будет знать, что он может без опаски прочитать остаток вашего документа, не исполняя ваши сценарии, он отложит интерпретацию сценариев до окончания отображения документа на устройстве пользователя.

Тег <noscript>
С помощью тега <noscript> можно оставить сообщение для тех пользователей, чьи броузеры не поддерживают тег <script>. Вы уже видели множество примеров применения этого тега, так что знаете, как поступить…

Очень старые, поддерживающие тег <script> броузеры, такие как Netscape 2 и Internet Explorer 3, ничтоже сумняшеся отобразят – к недоумению пользователей – содержимое тега <noscript>. Учитывая немногочисленность владельцев этих броузеров, мы сомневаемся в необходимости всей затеи, но тем не менее существуют другие способы определения того, как броузеры относятся к тегу <script>, и соответствующего с ними обращения – они подробно описаны во всякой хорошей книге по JavaScript.

Тег <noscript> поддерживает шесть стандартных атрибутов HTML 4/XHTML: class и style для управления стилями, lang и dir для выбора типа языка и направления вывода, title и id для озаглавливания и именования содержимого, а также атрибуты событий для обработки
действий пользователя.

JavaScript-обработчики событий
Одной из самых важных возможностей, предоставляемых JavaScript, является способность отмечать события, происходящие во время загрузки документа, его вывода и изучения пользователем, и реагировать на них. Код JavaScript, обрабатывающий эти события, может размещаться в теге <script>, но чаще он ассоциируется с определенным тегом при помощи одного или нескольких специальных атрибутов тега. Например, вы можете захотеть вызывать некую функцию JavaScript, когда пользователь проводит мышью над гиперссылкой в документе.

Поддерживающие JavaScript броузеры распознают специальный атрибут обработки события «мышь сверху» для тега (a), именуемый On-MouseOver и позволяющий написать следующее:

(a href="doc.html" onMouseOver="status='Click me!'; return true")

Когда мышь попадает на ссылку из этого примера, броузер исполняет оператор JavaScript. (Отметьте, что два оператора JavaScript заключены в кавычки и разделяются точкой с запятой и что текстовое сообщение в первом предложении заключено в одинарные кавычки.)

Хотя полное объяснение приведенного кода находится за пределами нашего обсуждения, чистый его эффект состоит в том, что броузер помещает в строку состояния своего окна сообщение «Click me!» (Нажми меня). Обычно авторы используют эту простую функцию JavaScript для более содержательного описания гиперссылки, чем тот, часто загадочный URL, который в строке состояния традиционно отображает броузер.

И HTML, и XHTML поддерживают очень много обработчиков событий при помощи соотвествующих «onEvent» («поСобытию») атрибутов тегов. Значением каждого из JavaScript-обработчиков событий является заключенная в кавычки строка, содержащая один или несколько операторов JavaScript, разделенных точками с запятой. Чрезвычайно
длинные последовательности операторов можно при необходимости разбить на несколько строк. Следует также обратить внимание на необходимость использования кодов символов двойных кавычек (\" или \x22) внутри операторов во избежание синтаксических ошибок при обработке значений атрибутов.

Стандартные атрибуты обработчиков событий
Большинство из них поддерживаются популярными броузерами, которые поддерживают также и многообразие нестандартных обработчиков событий, помеченных в таблице звездочками.Мы разделяем обработчики событий на две категории: пользовательские и документные. К пользовательским мы относим события, инициируемые мышью и/или клавиатурой, происходящие, когда пользователь производит какие-либо действия с каким-нибудь из этих устройств. Пользовательские события вездесущи, они появляются в качестве атрибутов почти во всех стандартных тегах (даже если они, возможно, не поддерживаются никаким броузером). Некоторые события, однако, встречаются редко и только с особыми тегами. Это относится к особым событиям и состояниям, случающимся в процессе отображения документа и его элементов броузером и в процессе управления документом и его элементами.

События, связанные с мышью
Атрибуты OnClick, onDblClick, onMouseDown и onMouseUp относятся к кнопкам мыши. Событие OnClick происходит тогда, когда пользователь нажимает и быстро отпускает кнопку мыши. Если только пользователь быстро щелкнет кнопкой мыши еще раз, то происходит другое событие – onDblClick.

Если нужно обратить внимание на каждую стадию щелчка мыши, используйте атрибуты onMouseDown и onMouseUp. Когда пользователь нажимает кнопку мыши, происходит событие onMouseDown, а когда отпускает кнопку, – onMouseUp.

События onMouseMove, onMouseOut и onMouseOver происходят, когда пользователь перемещает указатель мыши. Событие onMouseOver наступает, когда указатель мыши впервые попадает на ассоциированный с этим событием HTML-элемент. Вслед за этим событие onMouseMove наступа-ет, когда мышь перемещается в пределах элемента. Наконец, событие onMouseOut наступает, когда мышь покидает элемент. Для некоторых элементов событию onMouseOver соответствует onFocus, а событию onMouseOut – onBlur.

События, связанные с клавиатурой
С клавиатурой связаны в настоящее время только три принадлежащие стандартам HTML 4 и XHTML атрибута: onKeyDown, onKeyUp и onKeyPress. Событие onKeyDown наступает, когда пользователь нажимает на клавишу на клавиатуре, а событие onKeyUp – когда он ее отпускает. onKeyPress происходит, когда пользователь нажимает клавишу и отпускает.
Обычно обрабатывается либо первая пара событий, либо третье составное событие, но не все вместе.

События, связанные с документом
Большинство обработчиков событий, связанных с документом, относятся к действиям и состояниям элементов формы. К примеру, onReset и onSubmit случаются, когда пользователь активизирует кнопки типа reset (сбросить) и submit (отправить) соответственно. Подобным образом onSelect и onChange происходят, когда пользователь взаимодействует с определенными элементами формы.

Имеются также несколько событий, относящихся к документу, происходящих, когда различные элементы документа обрабатываются броузером. Например, событие onLoad может произойти, когда закончено отображение набора файлов или когда тело HTML- или XHTML-документа загружается и отображается броузером. Подобным образом onUnload происходит, когда документ покидает фрейм или окно.

javascript-URL
Вы можете заменить любую традиционную URL-ссылку в документе на одно или несколько предложений JavaScript. Тогда, вместо того чтобы загружать новый документ, броузер выполнит этот JavaScript-код всякий раз, когда броузеру укажут на этот URL. Результат последнего оператора принимается в качестве «документа», на который указывает URL, и соответственно отображается броузером. Результат последнего оператора – это не URL документа, а действительное содержимое, которое должен отобразить броузер. Чтобы создать javascript-URL, используйте javascript в качестве указания протокола URL:

(a href="javascript:generate_document()")

В этом примере JavaScript-функция generate_document() исполняется всякий раз, когда пользователь выбирает эту гиперссылку. Предположительно, значение, возвращаемое этой функцией, – это сгенерированный сценарием текст HTML- или XHTML-документа, который выводится и отображается броузером.

Может так случиться, что исполняемое предложение не возвращает никакого значения. В таком случае текущий документ остается без изменений. Следующий javascript-URL, например:

(a href="javascript:alert('Error!')")

выводит на экран диалоговое окно с предупреждением об ошибке и ничего более. Документ, содержащий гиперссылку, остается видимым после того, как диалоговое окно появится на экране и будет закрыто пользователем.

JavaScript-макросы
Коды символов (символьные ссылки) HTML и XHTML состоят из амперсанда (&), названия символа или его номера и завершаются точкой с запятой. Чтобы, например, вставить сам символ амперсанда в поток текста документа, используйте последовательность символов &.

Подобным образом в JavaScript можно определить макросы, которые состоят из амперсанда, следующих за ним одного или нескольких операторов JavaScript, заключенных в фигурные скобки, и закрывающей точки с запятой. К примеру:

&{document.fgColor};

Если в фигурных скобках больше чем один оператор, они разделяются точками с запятой. Значение последнего (или единственного) оператора преобразуется в строку и замещает в документе JavaScript-код.

Обычно макросы могут встречаться в документе где угодно. Макросы JavaScript предназначены исключительно для значений атрибутов тегов. Это позволяет вам создавать «динамические теги», атрибуты которых неизвестны, пока документ не загружен и JavaScript не исполнен. Например:



установит цвет текста в документе в соответствии с кодом цвета, возвращаемым, вероятно, заданной автором функцией favorite_color().

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

Тег <server>
Тег <server> – это зверь особой породы. Он обрабатывается только вебсервером, и его не видит броузер. Поэтому то, что вы можете делать с этим тегом, зависит от используемого вами сервера, а не от пользовательского броузера.

Netscape-серверы (не путайте их с броузером Netscape Navigator) используют тег <server>, чтобы позволить вам вставлять в документ JavaScript операторы, которые будет обрабатывать сервер. Результат исполнения JavaScript затем вставляется в документ на место тега <server>.

Полное обсуждение этого так называемого JavaScript со стороны сервера находится совершенно за пределами настоящей книги. Мы включаем сюда это краткое упоминание, только чтобы задокументировать тег <server>.

Подобно тегу <script> тег <server> содержит JavaScript-код. Последний из них, однако, вместе со своим JavaScript-содержимым может находиться только в заголовке документа. Он извлекается из документа и исполняется сервером, когда документ запрашивается.
Очевидно, что JavaScript со стороны сервера тесно связан с сервером, а не с броузером. Чтобы использовать все возможности этого тега, равно как и преимущества, проистекающие из JavaScript со стороны сервера или других языков программирования со стороны сервера, обратитесь к документации по вашему веб-серверу.

Статьи по HTML на эту тему:

Таблицы стилей JavaScript (устарели)

Вернуться в раздел: HTML / 12. Исполняемое содержимое