Этот сайт - часть системы сайтов для начинающих веб-мастеров
|
Вот и закончился
ликбез по 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-кода страницы, что нам совсем не помешает.