 |
АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция
Как пишутся 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-кода страницы, что нам совсем не помешает.
Поиск по сайту: