Как пишутся Web - сценарии
Вот и закончился ликбез по JavaScript и объектной модели документов. Пришло время поговорить о том, как же пишутся Web -сценарии.
Прежде всего, выясним, как JavaScript -код помещается в HTML -код. Для этого служит парный тег < script >. . .</ script >, внутри которого помещается код сценария. Вне этого тега помещать сценарий можно, но выполняться он не будет.
Вообще, все Web -сценарии можно разделить на два вида: выполняющиеся при загрузке страницы (загрузочные) и вызывающиеся в ответ на событие (обработчики событий). В зависимости от того, является сценарий загрузочным или обработчиком, различается способ его реализации.
Сценарии, выполняющиеся при загрузке страницы, представляют собой обычный код на JavaScript , помещенный в тег < script >. Он имеет такой вид :
<FORM ACTION="http://www.somesite.ru/cgi/program.pl">
<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_onClick (); "> Некий текст .</ Р >
. . .
</BODY>
Это как раз пример сценария , помещаемого в секцию HTML- заголовка страницы . Он представляет собой функцию para _ onciick , чей код меняет цвет текста абзаца para . Поместив сценарий в секцию HTML -заголовка, мы можем быть уверены, что Web -обозреватель обработает этот код перед тем, как будет загружена страница, и "отложит" определения функций в "долгий ящик", чтобы вызвать их впоследствии, при наступлении соответствующего события.
А теперь обратимся к нашему текстовому абзацу. Что видим? Нечто странное... Откуда-то взялся новый, не знакомый нам атрибут onclick . Что он делает?
Это не совсем атрибут. Вернее, совсем не атрибут, хотя и выглядит похоже. Таким способом в HTML к какому-либо событию, происходящему в элементе страницы, привязывается обработчик. Общий синтаксис такой "привязки" следующий:
<Имя события>="<Код сценария обработчика>"
В данном случае мы привязали вызов функции para _ onciick в качестве обработчика к событию onclick , происходящему, когда пользователь щелкает мышью по этому абзацу.
Вообще, код этого обработчика столь мал, что его можно без всяких последствий поместить прямо в тег <р>:
< Р ID="para" STYLE="color: #0000FF" onClick="para.style.color = '#FF0000';">He кий текст .</P>
Таким образом, мы значительно уменьшим размер HTML -кода страницы, что нам совсем не помешает.
Простейший Web - сценарий
Давайте создадим простейшую Web -страничку, содержащую работающий Web -сценарий. Этот сценарий будет выводить текущие дату и время.
<HTML>
<HEAD>
<TITLE> Сегодня </TITLE>
</HEAD>
<BODY>
<P>
<SCRIPT LANGUAGE="JavaScript">
var d;
d=new Date ( );
document.write (d.toString ()) ;
</SCRIPT>
</P>
</BODY>
</HTML>
Сохраните этот код в файле под именем 13.1.htm и откройте в Web -обозревателе. Вы увидите, что на странице будут стоять сегодняшние дата и время.
Давайте рассмотрим наш пример подробнее.
Если мы отбросим весь маловажный код, у нас останется единственный текстовый абзац <р>, внутри которого помещен сценарий. Вот он :
<P>
<SCRIPT LANGUAGE="JavaScript">
var d;
d=new Date ( );
document. write (d.toString () )
</SCRIPT>
</P>
Сам абзац не представляет собой ничего особенного . Сценарий — по большому счету , тоже. Мы уже познакомились с такими сценариями; они выполняются непосредственно при загрузке страницы и обычно производят различные предустановки. В нашем случае такой предустановкой является помещение в текстовый абзац строки, содержащей сегодняшние дату и время.
Как это происходит? С помощью метода write объекта document . Автор не рассматривал этот метод, когда говорил об объекте document . Все объекты, входящие в объектную модель документа, имеют множество свойств и методов, многие из которых используются в сценариях довольно часто. А объем книги ограничен; мы не можем уделять слишком много места описанию объектной модели в ущерб Dreamweaver . Поэтому кое о чем автор умолчал.
Теперь же настало время рассказать о методе write . Он помещает строку, переданную ему в качестве параметра, в то место документа, где встретилось выражение, вызывающее этот метод. Только и всего. В нашем случае он проделывает это со строковым значением текущей даты и помещает его внутри текстового абзаца <р>.
Остальной код вполне понятен. Мы объявляем переменную, помещаем в него значение текущей даты в виде объекта класса Date и преобразуем это значение в строку методом tostring . Вы также можете для этого использовать метод toLocaleString , выполняющий это преобразование с учетом национальных настроек операционной системы, но такой код, возможно, будет работать не во всех Web -обозревателях.
