 |
 |
 |
Как
пишутся Web-сценарии
Вот
и закончился ликбез по JavaScript и объектной модели документов. Пришло время
поговорить о том, как же пишутся Web-сценарии.
Прежде
всего, выясним, как JavaScript-код помещается в HTML-код. Для этого служит парный
тег <SCRIPT>. . .</SCRIPT>, внутри которого помещается код сценария.
Вне этого тега помещать сценарий можно, но выполняться он не будет.
Вообще,
все Web-сценарии можно разделить на два вида: выполняющиеся при загрузке страницы
(загрузочные) и вызывающиеся в ответ на событие (обработчики событий). В зависимости
от того, является сценарий загрузочным или обработчиком, различается способ
его реализации.
Сценарии,
выполняющиеся при загрузке страницы, представляют собой обычный код на JavaScript,
помещенный в тег <SCRIPT>. Он имеет такой вид:
<FORM ACTION="http://www.somesite.ru/cgi/prograra.p1">
<INPUT
TYPE="text" NAME="txtDate"> <SCRIPT> var d;
d
= new Date ();
document.forms[0].txtDate.value
= d.toString(); </SCRIPT> </FORM>
Этот
сценарий помещает в поле ввода txtDate значение текущей даты. (О формах и элементах
управления см. главу 16.) Для этого он вызывает свойство value, отображающее
значение, введенное в поле ввода. Заметьте, что для именования поля ввода мы
использовали атрибут NAME, поэтому вышеприведенный код будет работать также
и в Navigator 4.x.
Этот
сценарий будет выполняться непосредственно при загрузке страницы. Сначала Web-обозреватель
загрузит и распознает тег <FORM>, потом — тег <INPUT>, а сразу за
ним выполнит наш сценарий. Такие сценарии очень часто используются для занесения
начальных значений в элементы управления и вообще для выполнения различных предустановок.
Мы
поместили код сценария сразу же за тегом, задающим поле ввода, к которому мы
обращаемся. Если бы мы поместили сценарий перед тегом, Web-обозреватель не смог
бы найти объект txtDate, т. к. он еще не был бы создан, и выдал бы сообщение
об ошибке. Имейте это в виду, когда будете писать загрузочные сценарии.
Если
нужно, чтобы какие-либо предустановки выполнились перед тем, как будет загружен
какой-либо "видимый" на странице HTML-код, выполняющий их сценарий
помещается в секцию HTML-заголовка страницы (тег <HEAD>). В основном,
это касается кода, выполняющего предустановки для других сценариев, чаще всего,
обработчиков событий.
Теперь
поговорим о сценарии обработчика событий. И рассмотрим пример такого обработчика:
<HEAD>
<SCRIPT>
function
para_onClick() {
para.style.color
= "#FF0000"; }
</SCRIPT>
</HEAD> <BODY>
<P
ID="para" STYLE="color: #0000FF" onClick="para_ondick();">Некий
текст.</Р>
</BODY>
Это
как раз пример сценария, помещаемого в секцию HTML-заголовка страницы. Он представляет
собой функцию para_ondick, чей код меняет цвет текста абзаца para. Поместив
сценарий в секцию HTML-заголовка, мы можем быть уверены, что Web-обозреватель
обработает этот код перед тем, как будет загружена страница, и "отложит"
определения функций в "долгий ящик", чтобы вызвать их впоследствии,
при наступлении соответствующего события.
А
теперь обратимся к нашему текстовому абзацу. Что видим? Нечто странное... Откуда-то
взялся новый, не знакомый нам атрибут onclick. Что он делает?
Это
не совсем атрибут. Вернее, совсем не атрибут, хотя и выглядит похоже. Таким
способом в HTML к какому-либо событию, происходящему в элементе страницы, привязывается
обработчик. Общий синтаксис такой "привязки" следующий:
<Имя
события>="<Код сценария обработчика>"
В
данном случае мы привязали вызов функции para_onclick в качестве обработчика
к событию onclick, происходящему, когда пользователь щелкает мышью по этому
абзацу.
Вообще,
код этого обработчика столь мал, что его можно без всяких последствий поместить
прямо в тег <р>:
<Р
ID="para" STYLE="color: #0000FF" onClick="para.style.color
= #'FF0000';">Heкий текст.</Р>
Таким образом, мы значительно уменьшим размер HTML-кода страницы, что нам совсем не помешает.
|
|
|
электронная книга получена с сайта www.knigka.info