13.1. Основы использования сценариев в HTML-документе
Помещение сценария в документ
Для помещения сценария в документ достаточно использовать HTML‑элемент SCRIPT. Этот элемент задается парными тегами <SCRIPT> и </SCRIPT> и имеет следующие атрибуты:
• src – URI файла, в котором записан код внешнего сценария;
• type – задает тип содержимого элемента SCRIPT или файла, определенного атрибутом src, принимает значения вида text/язык_сценария (например, text/javascript, text/vbscript);
• language – задает язык сценария (например, javascript или vbscript); при использовании атрибута type этот атрибут излишен.
Элемент SCRIPT может появляться как в заголовке, так и в теле документа произвольное количество раз. Рассмотрим пример внедрения в документ простейшего сценария на JavaScript (язык рассмотрим чуть позже) (пример 13.1).
Пример 13.1. Сценарий в HTML-документе
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN»
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Простейшая страница со сценарием</TITLE>
</HEAD>
<BODY>
<SCRIPT type = "text/javascript">
var date = new Date;
if (date.getHours() < 8 || date.getHours() > 22)
document.write("<P align = right><FONT color = black><I>Не спится?</I></FONT></P>");
else if (date.getHours() < 11)
document.write ("<P align = right><FONT color = blue><I>Доброе утро </I></FONT></P>");
else if (date.getHours() < 17)
document.write ("<P align = right><FONT color = red><I>Добрый день</I></FONT></P>");
else document.write ("<P align = right><FONT color = green><I>Добрый вечер</I></FONT></P>");
</SCRIPT>
<H1>Страница, содержащая сценарий</H1>
<P>Прочий текст страницы...
</HTML>
Участки кода между <SCRIPT> и </SCRIPT>, начинающиеся с document.write(), должны быть записаны в одну строку, иначе пример работать не будет. Что же делает сценарий в приведенном примере? Да ничего особенного, просто при загрузке страницы печатает в правом верхнем углу приветствие, цвет и текст которого зависят от времени суток.
Стоит сказать несколько слов о еще одном HTML‑элементе, имеющем отношение к сценариям, – это NOSCRIPT. Этот HTML‑элемент задается парными тегами <NOSCRIPT> и </NOSCRIPT> и полезен, когда автор документа хочет подстраховаться на случай, если его документ будет открыт в браузере, не поддерживающем сценарии вообще или не поддерживающем сценарии на используемом языке программирования. Итак, если сценарий не может быть выполнен, то браузер отобразит содержимое элемента NOSCRIPT (в нем может быть, например, гиперссылка на версию документа, не использующую сценарии).
Рассмотрим прием, который часто применяется для того, чтобы браузер, вообще «не знающий» HTML‑элемента SCRIPT, не показал пользователю текст сценария. Это может случиться, если сценарий помещен в тело документа.
Для предотвращения возникновения такой ситуации текст сценария помещают в HTML‑комментарий следующим образом:
<SCRIPT type = «text/javascript»>
<!–
//Текст программы, помещенной здесь, пользователь не увидит случайно
–>
</SCRIPT>
Браузеры, поддерживающие элемент SCRIPT, должны проигнорировать HTML‑комментарий внутри этого элемента (хотя некоторые версии браузера Netscape Navigator не воспринимали сценарий, заключенный в комментарий HTML).
Другим вариантом скрытия, который должен точно работать, является помещение сценария во внешнем файле и подключение его при помощи атрибута src элемента SCRIPT.
13.2. Исполнение сценария
Теперь рассмотрим, как организовать выполнение написанных и внедренных в документ сценариев. Итак, сценарий может исполняться в двух случаях: при загрузке документа и при возникновении события (а также при вызове его интерпретатором, например, по таймеру, но это рассмотрим особо).
Исполнение при загрузке документа
Интерпретатор браузера выполняет операторы языка JavaScript, записанные вне тела какой‑либо функции, только один раз по мере загрузке документа. Причем положение HTML‑элемента SCRIPT с текстом сценария определяет момент времени, в который сценарий будет выполняться. Так, сценарий в примере 13.1 выполнялся именно до того, как было загружено остальное содержимое документа, поэтому выведенный им текст и появился раньше основного содержимого документа.
Чтобы при загрузке HTML‑документа выполнялась какая‑либо функция, в нужном месте сценария должен быть записан вызов функции. Так, пример 13.1 можно переписать следующим образом (пример 13.2 сокращен).
Пример 13.2. Вызов функции при загрузке документа
...
<BODY>
<SCRIPT type = "text/javascript">
function greeting(){
//Те же действия, что и в примере 13.1...
}
//Вызов функции greeting();
</SCRIPT>
<H1>Страница, содержащая сценарий</H1>
<P>Прочий текст страницы...
</HTML>
Если бы в коде сценария не было явного вызова функции greeting(), то на странице не появилось бы приветствие.
Сценарий может быть также запущен браузером при возникновении на странице какого‑либо события, с которым сопоставлен сценарий, – обработчика события. Генерацию событий могут вызывать различные действия пользователя: щелчок кнопкой мыши на элементе страницы, наведение указателя мыши на элемент и др.
Для назначения обработчиков события используются атрибуты HTML‑элементов, приведенные в табл. 13.1.
Таблица 13.1. Атрибуты для назначения обработчиков событий
Значениями приведенных в таблице атрибутов могут быть фрагменты кода сценариев, например:
<P onClick = «alert('Не давите на меня!!!')»>Текст абзаца
<P onClick = "
{
//Аккуратно оформленный блок кода, ведь строки HTML-разметки можно
//безнаказанно разрывать
alert('Лучше нажимайте на соседний абзац.');
}">Текст абзаца
Обратите внимание, что поскольку текст обработчика помещается в двойные кавычки, то сами кавычки в тексте сценария использовать не следует. Обычной практикой является создание функций‑обработчиков события (обычной функции JavaScript) вместо записи действий по обработке события прямо в теге элемента. В таком случае в атрибут onСобытие записывается код вызова функции‑обработчика.
События, возникающие в дочерних элементах, передаются вверх по иерархии родительским элементам. Так, например, если над текстом элемента B в приведенном ниже примере произойдет щелчок кнопкой мыши, то событие получит сначала элемент B, потом элемент P, а затем и элемент BODY:
<BODY onClick = «body_click()»>
<P onClick = "p_click()">Обычный текст
<B onClick = "b_click()">полужирный текст</B>
13.3. Объектная модель документа
Чтобы можно было успешно применить полученные значения по программированию на JavaScript, нужно рассмотреть еще один специфический момент – это то, как сценарии могут воздействовать на HTML‑документ. Для этого необходимо изучить технологию представления HTML‑документа в виде совокупности объектов – объектную модель документа (DOM, Document Object Model). DOM включает не только объекты, из которых состоит документ, но и объекты, позволяющие получать различную информацию о браузере, системе (в частности, о видеосистеме компьютера), работать с окнами и многое другое.
Для программиста на JavaScript HTML‑документ представляется в виде объекта document. Этот глобальный объект существует в единичном экземпляре. О создании объекта document заботится интерпретатор.
Свойства и методы объекта document
Итак, объект document предоставляет ряд свойств и методов, позволяющих осуществлять практически любые манипуляции с HTML‑документом. Основные свойства объекта document приведены в табл. 13.2.
Таблица 13.2. Свойства объекта document
Свойства, отвечающие за цветовое оформление, хранят целочисленные значения. Другие свойства, кроме возвращающих коллекции, хранят строки. Особо следует рассмотреть свойства, которые возвращают коллекции: all, anchors, forms, frames, images и links. В этих коллекциях находятся объекты, описывающие соответствующие элементы HTML‑документа.
Коллекции – это тоже объекты, во многом похожие на массивы. Однако коллекции предоставляют доступ к своим элементам c помощью метода item(). Причем доступ может осуществляться как по номеру элемента в коллекции, так и по его имени (задается атрибутом id или name элемента). Нумерация элементов в коллекциях начинается с нуля. Кроме того, для коллекций предусмотрено свойство length, хранящее количество элементов в коллекции.
В качестве примера рассмотрим, как получить доступ к элементам следующего HTML‑документа (пример 13.3).
Пример 13.3. HTML-документ, к элементам которого нужно получить доступ
<HTML>
<HEAD>
<TITLE>Заголовок документа</TITLE>
</HEAD>
<BODY>
<H1 id = "main_part">Главный заголовок документа</H1>
<P id = "par1">Текст документа...
</BODY>
</HTML>
Если осуществлять доступ к элементам документа при помощи коллекции all с использованием номеров, то доступ ко всем элементам документа будет выглядеть следующим образом:
