Как писать скрипты
Как писать скрипты
Применяя скрипты (сценарии), мы обрабатываем различные события (например, щелчок кнопкой мыши), анализируем введенные пользователем данные, изменяем внешний вид некоторой части страницы или даже всей страницы.
Как уже неоднократно отмечалось, сценарий вставляется в HTML-код с помощью тэга <SCRIPT>, который обычно размещается внутри тэга заголовка <HEAD>. Это делается для того, чтобы код сценария загрузился прежде, чем страница будет выведена на экран. Сценарий можно разместить и в конце HTML-документа, чтобы элементы документа загрузились прежде, чем к ним будут применены операции сценария. Для указания языка сценария служит атрибут LANGUAGE (язык). Если сценарий пишется на JavaScript, то атрибут LANGUAGE можно не указывать, поскольку JavaScript считается стандартным языком (по умолчанию). В браузере Internet Explorer версий с 4.0 по 6.0 можно также применять сценарии, написанные на VBScript. Если вы пишете на VBScript, то в качестве аргумента атрибута LANGUAGE следует задавать либо VBScript, либо VBS.
Вставка сценария в HTML-код осуществляется обычно по следующей схеме:
<HTML>
<HEAD>
...
<!--
<SCRIPT LANGUAGE='название_языка' >
... (здесь располагается текст сценария)
</SCRIPT>
//-->
</HEAD>
...
<BODY>
...
</BODY>
</HTML>
Здесь использован типовой вариант, при котором сценарий вставляется внутрь тэга заголовка <HEAD>, хотя он может находиться влюбом месте HTML-кода. Иногда даже требуется, чтобы скрипт был загружен после загрузки некоторых элементов страницы,
Атрибут LANGUAGE тэга <SCRIPT> может принимать аргументы JavaScript, JScript, VBScript и VBS. Если атрибут не указан, то подразумевается JavaScript.
Символы < ! — и //--> образуют тэг комментария. Рекомендуется их использовать на тот случай, когда браузер пользователя не сможет интерпретировать сценарий. Например, браузеры Netscape не воспринимают скрипты на VBScript. Обратите внимание, что тэг комментария в данном случае отличается от обычного тэга комментария < ! >, используемого вне сценария для того, чтобы вставить поясняющие тексты, не отображаемые на экране.
Сценарий совсем необязательно размещать в том же HTML- документе, где он может понадобиться. Его можно разместить в отдельном обычном текстовом файле, но с расширением js, а в HTML-документе написать такую инструкцию:
<SCRIPT SRC="адрес_файла_со_скриптом"> </SCRIPT>
Например:
<SCRIPT SRC="my_script . js"> </SCRIPT>
Для определенности в тэг <SCRIPT> не помешает вставить атрибут LANGUAGE= ' JScript'.
Привязка сценариев к элементам страницы
Внутри тэга <SCRIPT> размещается собственно программа сценария. Эта программа может делать все, что угодно ее автору. Однако обычно она содержит описания функций, которые должны вызываться при возникновении таких событий, как щелчок кнопкой мыши, нажатие клавиши на клавиатуре, загрузка страницы и др. Такие функции называются обработчиками событий. Чтобы вызов функций сценария произошел при возникновении того или иного события, нужно сделать привязку события и соответствующей ему функции к элементу страницы.
Связь между событием и функцией осуществляется в формате:
событие =" функция"
Например, если мы хотим связать событие «щелчок кнопкой мыши» с определенной нами функцией MyfuncQ, то должны использовать запись вида:
onclick="Myfunc ()"
Если вызов этой функции должен произойти при загрузке страницы в браузер, то следует записать:
onload=IMyfunc ()I
Мы рассмотрели связь типа «событие-функция». Однако одно и то же событие может восприниматься различными элементами страницы. Например, на щелчок кнопкой мыши могут отреагировать и кнопка, и картинка, и заголовок. Чтобы образовать связь «событие-функция—элемент», следует вставить запись типа событие='функция' в тэг элемента страницы подобно вставке атрибута. Например, если мы хотим, чтобы функция Myfunc() вызывалась при щелчке на тексте, находящемся внутри тэга <Н2>, то надо написать:
<Н2 onclick='Myfunc()'> Некоторый текст </Н2>
Связь между событием и функцией может быть записана в большинстве тэгов, например в <BODY>, <IMG>, <DIV>, <INPUT> и др.
Возможен и другой, нестандартный способ связи «событие—функция-элемент». Он заключается в том, что в тэге элемента страницы указывается атрибут ID (идентификатор, выполняющий роль имени NAME этого элемента, предназначенный для доступа к нему из программы). Затем в сценарии определяется функция, имя которой формируется по правилу:
идентификатор_элемента.событие()
Например, если мы хотим, чтобы при щелчке мышью на тексте, заключенном внутри тэга <Н2>, выполнялась некоторая функция, то мы должны написать примерно следующее:
....
<Н2 ID=My> Некоторый текст <Н2>
....
<SCRIPT>
....
function My.onclick()
....
</SCRIPT>
....
Обратите внимание на связь между значением атрибута ID в тэге <Н2> элемента страницы и именем функции, определенной внутри тэга сценария <SCRIPT>: значение ID и название события указываются в имени функции. В JScript эти составляющие имени пишутся через точку, а в VBScript — через символ подчеркивания. Приведенный выше фрагмент на языке VBScript выглядит так:
....
<Н2 ID=Му>Некоторый текст<Н2>
....
<SCRIPT LANGUAGE="VBScript">
....
Sub My_onclick()
....
</SCRIPT>
Подробно связи событий с функциями, определенными в сценарии, а также привязка этих связей к элементам страницы рассмотрены ниже на конкретных примерах. А сейчас дадим общие рекомендации по созданию обработчиков событий.
Обработчики событий
Обработчики событий следует оформлять в виде функций или процедур. В JScript используются только функции, а в VBScript — в основном, процедуры. Функция от процедуры отличается только тем, что возвращает некоторое значение. Следует различать описание (определение) функции и ее вызов.
Описание функции в JScript имеет вид:
function имя_функции (список_параметров)
{
... // код (тело) функции
};
Ключевое слово function сообщает интерпретатору (браузеру), что далее идет описание функции. Список параметров, если он есть, представляет собой последовательность идентификаторов, разделенных запятыми. Идентификаторы — просто символьные обозначения параметров, начинающиеся с буквы или символа подчеркивания. Код (тело) функции выделяется фигурными скобками. Выражения в коде, если их несколько, разделяются точкой с запятой. Комментарии начинаются двойным слэшем //. Если требуется явно указать, что именно должна возвратить функция в качестве результата, используется команда
return возвращаемый_результат
Если команда return не указана, то возвращается значение последнего вычисленного выражения. Следующий пример дает описание функции для вычисления площади прямоугольника:
function S_rectangle (a,b)
{
S=a*b;
return S
};
Для вычисления значения функции используется вызов:
имя_функции (список_значений_параметров)
Например, для вычисления площади прямоугольника со сторонами 5 и 20 следует записать выражение:
S = S_rectangle(5,20)
Здесь значение, возвращаемое функцией S_rectangle, присваивается переменной S. В вызове функций вместо конкретных значений можно подставлять переменные, функции и выражения. Вот пример:
х = 5;
S = S_rectangle(x,4+16)
Поскольку функция возвращает значение, ее вызов может участвовать в выражениях. Например, для вычисления площади прямоугольного треугольника с катетами а и b можно записать следующий код:
а = 5;
b = 20;
S_tr = 0.5*S_rectangle(a,b)
Впрочем, мы могли бы определить специальную функцию, вычисляющую площадь прямоугольного треугольника по его катетам:
function S_tr(a,b)
{
return 0.5*S rectangle(a,b)
Переменные
При разработке программ, как правило, используются переменные, служащие для хранения исходных данных, а также промежуточных и конечных результатов вычислений. Переменная создается в том месте программы, где впервые появилось выражение, в котором ей было присвоено значение. Если переменная создана в теле функции, то она будет доступна только внутри этой функции. Рассмотрим пример:
<SCRIPT LANGUAGE 'JScript'>
// Вычисление площади прямоугольного треугольника с помощью
// функции для площади прямоугольника
а = 5;
b = 20;
S_tr = 0.5*S_rectangle (a,b) // Вычисление площади
// прямоугольного треугольника.
function S_rectangle (a,b) // Описание функции
// вычисления площади прямоугольника.
{
S=a*b;
return S
}
</SCRIPT>
