Язык программирования JavaScript разработан фирмой Netscape в сотрудничестве с Sun Microsystems и предназначен для создания интерактивных HTML-документов. Основные области использования JavaScript таковы:
JavaScript позволяет создавать приложения, выполняемые как на стороне клиента, так и на стороне сервера. При разработке приложений обоих типов используется так называемое ядро, в котором содержатся определения стандартных объектов. Клиентские приложения выполняются браузером на машине пользователя.
Программа (сценарий) на языке JavaScript обрабатывается встроенным в браузер интерпретатором. Надо стремиться к тому, чтобы написанные сценарии корректно выполнялись в любом браузере.
Программа (сценарий) на языке JavaScript представляет собой последовательность операторов. Если несколько операторов располагаются на одной строке, то между ними следует поставить знак "точка с запятой" (;). Если каждый оператор размещается на одной строке, то разделитель можно не писать. Один оператор может располагаться на нескольких строках.
Согласно принципам структурного программирования, программу рекомендуется записывать таким образом, чтобы в ней была отражена блочная структура. Это облегчает исследование программы и поиск ошибок.
В программах на JavaScript можно использовать комментарии. Для того чтобы задать комментарий, располагающийся на одной строке, достаточно перед его текстом поставить две косые черты (//). Если же поясняющий текст занимает несколько строк, то его следует заключать между символами /* и */.
В JavaScript строчные и прописные буквы алфавита считаются разными символами.
Простейшие данные, с которыми может оперировать программа, называются литералами. Литералы не могут изменяться. Литералы целого типа могут быть заданы в десятичном (по основанию 10), шестнадцатеричном (по основанию 16) или восьмеричном (по основанию 8) представлении. Литерал целого типа в десятичном представлении записывается как последовательность десятичных цифр со знаком или без него, например, 15, 123, –156, +3567.
Шестнадцатеричные числа включают цифры 0—9 и буквы а, b, с, d, e, f. Шестнадцатеричные числа записываются с символами 0х перед числом, например, 0x25, 0xa1,0xff.
Восьмеричное число включает только цифры 0—7 и записывается, начиная с нуля, например, 03, 0543, 011.
Запись вещественного литерала отличается от записи вещественного числа в математике тем, что вместо запятой, отделяющей целую часть от дробной, указывается точка, например, 123.34, –22.56. Кроме того, для записи вещественных чисел можно использовать так называемую экспоненциальную форму, например, число 0,000000273, которое можно представить в виде 2.73×10–7, в языке JavaScript записывается так: 2.73е–7. В такой записи знак умножения и число 10 заменяются символом е. В записи вещественного литерала должна присутствовать, по крайней мере, одна цифра и десятичная точка или символ экспоненты (е или Е).
Кроме целых и вещественных значений в языке JavaScript могут встречаться так называемые логические значения. Существуют только два логических значения: истина и ложь. Первое представляется литералом true, второе — false. В некоторых реализациях JavaScript может быть использована единица в качестве true, и ноль в качестве false.
Строковый литерал представляется последовательностью символов, заключенной в одинарные или двойные кавычки. Примером строкового литерала может быть строка "результат" или 'результат'. Строковый литерал, представляющий пустую строку, обозначается как "" или ''.
Переменные используются для хранения данных. Переменные в сценарии представляются с помощью идентификаторов. Идентификатор должен начинаться с буквы латинского алфавита, либо с символа подчеркивания. Далее может указываться последовательность, содержащая буквы латинского алфавита, цифры или знак подчеркивания, например, test1, _my_test, test_1. Тип переменной зависит от хранимых в ней данных, при изменении типа данных меняется тип переменной.
Переменные следует инициализировать с помощью оператора var:
var test1
В данном случае тип переменной test1 не определен и станет известен только после присвоения переменной некоторого значения.
В операторе var можно сразу присвоить значение переменной:
var my_color="yellow"
Здесь определяется переменная my_color и ей присваивается значение "yellow".
Значение переменной изменяется в результате выполнения оператора присваивания. Оператор присваивания может быть использован в любом месте программы и способен изменить не только значение, но и тип переменной. Оператор присваивания выглядит так
а=b
где а — переменная, которой мы хотим задать некоторое значение; b — выражение, определяющее новое значение переменной. Пусть в сценарии описаны следующие переменные
var n=3725
var x=2.75
var p=true
var s="Выполнение завершено"
Переменные n и х имеют тип number, тип переменной р — логический, переменная s имеет тип string. В JavaScript определен тип function для всех стандартных функций и функций, определяемых пользователем. Объекты JavaScript имеют тип данных object. Переменные типа object часто называют просто объектами, они могут хранить объекты.
Переменные, описанные в сценарии как в части <HEAD>, так и в части <BODY>, имеют одну и ту же область действия, доступны любому сценарию текущего документа. Такие переменные называются глобальными в отличие от локальных переменных, определенных в теле функции.
Выражения строятся из литералов, переменных, знаков операций, скобок. В результате вычисления выражения получается единственное значение, которое может быть либо числом (целым или вещественным), либо строкой, либо логическим значением. Используемые в выражении переменные должны быть инициализированы. Если при вычислении выражения встречается неопределенная или неинициализированная переменная, то фиксируется ошибка. В JavaScript существует литерал null для обозначения неопределенного значения. Если переменной присвоено значение null, то она считается инициализированной.
Выражения формируются из операндов и обозначений операций. Например, в формуле а*b операндами являются а и b, обозначением операции — знак *.
Операции делятся на унарные (одноместные) или бинарные (двуместные). Выражение записывается либо в виде ⊕А, если ⊕ — обозначение унарной операции, либо А⊕В, если ⊕ — обозначение бинарной операции. Вычисление выражения ⊕А сводится к вычислению операнда А и применению операции ⊕ к значению операнда. Вычисление выражения вида А⊕В состоит из следующих шагов:
1. Вычисляются А и В.
2. Операция ⊕ применяется к значению операндов, полученных на шаге 1.
В зависимости от типа вычисленного значения выражения можно разделить на арифметические, логические и строковые. Арифметические выражения получаются при выполнении операций, перечисленных в табл. 1.1.
Таблица 1.1. Арифметические операции
|
Операция |
Название |
|
+ |
Сложение |
|
– |
Вычитание |
|
* |
Умножение |
|
/ |
Деление |
|
% |
Остаток от деления целых чисел |
|
++ |
Увеличение значения операнда на единицу |
|
– – |
Уменьшение значения операнда на единицу |
Операторы в выражении вычисляются слева направо в соответствии с приоритетами арифметических операций. При необходимости с помощью скобок можно изменить порядок выполнения операций. В языке JavaScript определены операторы, в которых производятся арифметические действия над левым и правым операндом и результат присваивается переменной, заданной левым операндом. Операции так называемой сокращенной формы присваивания представлены в табл. 1.2.
Таблица 1.2. Сокращенные формы оператора присваивания
|
Оператор |
Эквивалентный оператор присваивания |
|
X += Y |
X = X+Y |
|
X – = Y |
X = X–Y |
|
X *= Y |
X = X*Y |
|
X /= Y |
X = X/Y |
|
X %= Y |
X = X%Y |
Операции отношения применимы к операндам любого типа. Результат операции— логическое значение true, если сравнение верно, и false — в противном случае. Перечислим операции сравнения:
Операция ! (логическое НЕ) применяется к операндам логического типа, если значение операнда а равно true, то значение выражения !а — false, если значение операнда а равно false, то значение выражения !а — true. Результат применения логических операций && (логическое И) и || (логическое ИЛИ) приведен в табл. 1.3.
Таблица 1.3. Логические операции
|
А |
В |
A&&B |
A||B |
|
true |
true |
true |
true |
|
true |
false |
false |
true |
|
false |
true |
false |
true |
|
false |
false |
false |
false |
Значение выражения А&&В истинно, если истинны оба операнда, и ложно в противном случае. Значение выражения А||B истинно, если значение хотя бы одного из операндов истинно, и ложно в противном случае.
Над строковыми значениями определена операция конкатенация (соединение) строк. Обозначается операция знаком плюс. Результатом выполнения этой операции является строка, состоящая из строковых значений операндов, например, в результате выполнения оператора присваивания
st = "текущее "+"состояние"
переменная st получит значение "текущее состояние".
Рассмотрим еще один пример. Пусть выполнено
st1 = "текущий "
st2 = "момент"
В результате выполнения
st1 += st2
переменная st1 получит значение "текущий момент".
Приоритет операций определяет порядок, в котором выполняются операции в выражении. В табл. 1.4 перечислены рассмотренные операции в порядке убывания приоритетов.
Таблица 1.4. Таблица приоритетов операций
|
Название |
Обозначение |
|
Инкремент |
++ |
|
Декремент |
-- |
|
Отрицание |
! |
|
Унарный минус |
– |
|
Умножение |
* |
|
Деление, остаток от деления |
/, % |
|
Сложение |
+ |
|
Вычитание |
– |
|
Сравнение |
<, >, <=, >= |
|
Равенство |
= = |
|
Неравенство |
! = |
|
Логическое И |
&& |
|
Логическое ИЛИ |
|| |
|
Присваивание |
=, +=, –=, *=, /=, %=, ! = |
Сценарии, написанные на языке JavaScript, могут располагаться непосредственно в HTML-документе между тегами <script> и </script>.
Одним из атрибутов тега <script> является language, который определяет используемый язык сценариев. Для языка JavaScript значение атрибута равно "JavaScript". Если применяется язык сценариев VBScript, то значение атрибута должно быть равным "VBScript". В случае использования языка JavaScript атрибут language можно опускать, т.к. этот язык выбирается браузером по умолчанию.
Обычно браузеры, не поддерживающие какие-либо теги HTML, эти теги просто игнорируют. Попытка браузера проанализировать содержимое не поддерживаемых тегов может привести к неверному отображению страницы. Чтобы избежать такой ситуации, рекомендуется помещать операторы языка JavaScript в теги комментария <!-- ... -->. Для правильной работы интерпретатора перед закрывающим тегом комментария --> следует поставить символы //.
Итак, для размещения сценария в HTML-документе следует написать следующее:
<script language="JavaScript">
<!--
Операторы языка JavaScript
//-->
</script>
Документ может содержать несколько тегов <script>. Все они последовательно обрабатываются интерпретатором JavaScript. В следующем примере в раздел <BODY> (в тело) HTML-документа вставлены операторы языка JavaScript.
Необходимо написать сценарий, выводящий на экран приветствие заданного цвета. Сценарий разместим в разделе <BODY> HTML-документа (листинг 1).
Листинг 1. Пример сценария JavaScript
<HTML>
<HEAD>
<TITLE>Пример сценария JavaScript</TITLE>
</HEAD>
<BODY>
<script>
<!--
var my_color="red"
document.write("<p><span style='color:" + my_color + " '>Здравствуйте!</span>")
//-->
</script>
<noscript>
<p>Поддержка JavaScript отключена!
</noscript>
</BODY>
</HTML>
В сценарии описывается и инициализируется переменная my_color, затем значение выражения, полученного конкатенацией трёх строк записывается в документ. Для формирования вывода в HTML-страницу используется метод write объекта document. Строки, записываемые в документ, могут включать в себя теги HTML и выражения JavaScript, причем теги HTML обязательно берутся в кавычки, а переменные JavaScript идут без кавычек.
Обратите внимание, что в в команде document.write() использованы и двойные (") и одинарные кавычки ('). Почему? В большинстве случаев вы можете использовать либо один, либо другой тип кавычек. Однако, если бы мы написали
document.write("<p><span style="color:" + my_color + " ">Здравствуйте!</span>"),
то компьютер не смог бы разобраться в нашем скрипте, поскольку становится неясно, где заканчивается строка JavaScript, а где — значение атрибута style=, тоже идущее в кавычках, т.к. подразумевается, что в результате должны получиться такие HTML-команды:
<p><span style='color:red'>Здравствуйте!</span>
Поэтому вы и вынуждены в данном случае перемежать оба типа кавычек. Не имеет значения, в каком порядке вы использовали кавычки — сперва двойные, а затем одинарные или наоборот. То есть вы можете точно так же написать и
document.write('<p><span style="color:' + my_color + ' ">Здравствуйте!</span>').
Тег <noscript> определяет HTML-код, отображаемый на экране в случае, если JavaScript не поддерживается браузером или поддержка отключена. Этот тег следует после кода, заключенного в теги <script> и </script>. Если поддержка включена, то тег <noscript> игнорируется.
В дальнейших примерах будем считать, что поддержка JavaScript включена.
Для отображения диалогового окна ввода пользователя применяется встроенная функция prompt, имеющая 2 параметра: текст сообщения и значение по умолчанию (которое может быть и пустой строкой). Причем введенное значение можно сразу присвоить переменной:
var my_color=prompt("Введите названия цвета (aqua, blue, yellow, red, green)","red")
Изменим сценарий 1, добавив функцию prompt (листинг 2).
Листинг 2. Использование диалогового окна
<HTML>
<HEAD>
<TITLE>Использование диалогового окна</TITLE>
</HEAD>
<BODY>
<script>
<!--
var my_color=prompt("Введите названия цвета (aqua, blue, yellow, red, green)","gray")
document.write("<p><span style='color:" + my_color + " '>Здравствуйте!</span>")
//-->
</script>
</BODY>
</HTML>
А теперь посмотрите, что будет выведено в диалоговом окне, если убрать второй параметр в функции prompt.
JavaScript имеет набор средств, предназначенных для уведомления пользователей о выполненных операция. Например, можно создать сообщение с предупреждением, напоминанием или подтверждением. Для отображения на экране окна с предупреждением применяется функция alert:
При составлении программы часто необходимо выполнение различных действий в зависимости от результатов проверки некоторых условий. Для организации ветвлений можно воспользоваться условным оператором, который имеет вид:
if (В) {S1} else {S2}
где B — выражение логического типа; S1 и S2 — операторы. Выполнение условного оператора осуществляется следующим образом. Вычисляется значение выражения B. Если оно истинно, то выполняются операторы S1, если ложно — операторы S2. Если последовательность операторов S1 или S2 состоит лишь из одного оператора, то фигурные скобки можно опустить. Возможна сокращенная форма условного оператора:
if (В) {S}
где B — выражение логического типа; S — последовательность операторов. Выполнение краткого условного оператора осуществляется так: вычисляется значение выражения B, если оно истинно, то выполняются операторы S.
Напишем сценарий, запрашивающий у пользователя, на каком языке он говорит и его имя, а затем выводящий на экран приветствие на выбранном языке в окне alert (листинг 3).
Листинг 3. Использование условного оператора и окна alert
<HTML>
<HEAD>
<TITLE>Использование окна alert</TITLE>
</HEAD>
<BODY>
<script>
<!--
var my_language=prompt("На каком языке вы говорите? (русский - ru, английский - en)","ru")
var who=prompt("Введите ваше имя","")
if (my_language=="ru") {alert("Здравствуйте, " + who + "!")}
else {alert("Hello, " + who + "!")}
//-->
</script>
</BODY>
</HTML>
В тех случаях, когда при решении задачи требуется выбрать один вариант действия из нескольких возможных, удобно воспользоваться оператором switch.
Синтаксис оператора switch следующий:
switch (В)
{
case L1: S1;
case L2: S2;
... ... ...
case Ln: Sn;
default: S
}
где В — выражение; L1, L2, ..., Ln — литералы; S1, S2, ..., Sn; S — операторы. Выполнение переключателя происходит так: вычисляется значение выражения В. Если значение В равно L1, то выполняются операторы S1, а затем все остальные операторы либо до первого оператора break, либо до конца оператора switch. Если значение в равно L2, то выполняются операторы S2, а затем все остальные операторы либо до первого оператора break, либо до конца оператора switch и т.д. Если же значение в не равно ни одному из значений L1, L2, ..., Ln, то выполняются операторы S. Часть default: S может отсутствовать, тогда переключатель имеет вид
switch (В)
{
case L1: S1;
case L2: S2;
... ... ...
case Ln: Sn;
}
В этом случае, если значение выражения в не равно ни одному из значений L1, L2, ..., Ln, то оператор switch завершает свою работу, что эквивалентно пустому оператору. На самом деле переключатель удобно записывать в виде:
switch (В)
{
case L1: S1; break;
case L2: S2; break;
... ... ...
case Ln: Sn; break;
default: S
}
В этом случае оператор break обеспечивает завершение работы переключателя после выполнения очередного варианта.
Напишем программу, которая по номеру дня определяет его название. Задачу можно решить с использованием условных операторов, в этом случае программа будет ненаглядной. При решении такого рода задач удобно использовать переключатель. Переменной s в зависимости от номера дня недели будет присвоено его название. В листинге 4 приведен требуемый сценарий.
Листинг 4. Определение по номеру дня его названия
<HTML>
<HEAD>
<TITLE>Oпpeделение по номеру дня его названия</TITLE>
</HEAD>
<BODY>
<script language="JavaScript">
<!--
var s=prompt("Введите номер дня недели","")*1
switch (s)
{
case 1: alert("понедельник"); break;
case 2: alert("вторник"); break;
case 3: alert("среда"); break;
case 4: alert("четверг"); break;
case 5: alert("пятница"); break;
case 6: alert("суббота"); break;
case 7: alert("воскресенье"); break;
default: alert("ошибка в номере дня")
}
//-->
</script>
</BODY>
</HTML>
Информация, введенная через prompt — это всегда строка. Поэтому, если требуется преобразовать строку в число, нужно сделать умножение на 1.
При создании программы разумно выделить в ней логически независимые части (так называемые подпрограммы). Каждую часть при необходимости можно разбить на отдельные подпрограммы и т. д. Разбиение программы на подпрограммы облегчает процесс отладки, т. к. позволяет отлаживать каждую подпрограмму отдельно. Имеет смысл распределить работу по созданию сложной программы между отдельными программистами. Некоторые подпрограммы можно использовать для решения разных задач.
Один раз созданную и отлаженную программу можно использовать произвольное число раз.
Во многих языках программирования понятие подпрограммы реализуется с помощью конструкций процедур, функций, модулей и т. п.
Основным элементом языка JavaScript является функция. Описание функции имеет вид
function F (V) {S}
где F — идентификатор функции, задающий имя, по которому можно обращаться к функции; V — список параметров функции, разделяемых запятыми; S — тело функции, в нем задаются действия, которые нужно выполнить, чтобы получить результат. Необязательный оператор return определяет возвращаемое функцией значение.
Описание функции не может быть вложено в описание другой функции. Параметры функции внутри ее тела играют ту же роль, что и обычные переменные, но начальные значения этим параметрам присваиваются при обращении к функции. Если описание функции имеет вид
function F (v1, v2, ..., vn) {S}
то вызов функции должен иметь вид
F (e1, e2, . . ., en)
где e1, e2, ..., en — выражения, задающие фактические значения параметров. Параметры v1, v2, ..., vn, указанные в описании функции, называются формальными параметрами, чтобы подчеркнуть тот факт, что они получают смысл только после задания в вызове функции фактических параметров e1, е2, ..., en, с которыми функция затем и работает. Если в функции параметры отсутствуют, то описание функции имеет вид
function F () {S}
Наличие скобок в операторе вызова функции обязательно, т. е. вызов функции в этом случае должен иметь вид:
F()
Обычно все определения и функции задаются в разделе <HEAD> документа. Это обеспечивает интерпретацию и сохранение в памяти всех функций при загрузке документа в браузер.
В следующем примере в разделе <HEAD> HTML-документа (листинг 5) описана функция square, вычисляющая площадь треугольника по заданным основанию и высоте.
Листинг 5. Использование сценария с функцией
<HTML>
<HEAD>
<TITLE>Использование сценария с функцией</TITLE>
<script language="JavaScript">
<!--
function square(a,h) {
/* a - основание треугольника, h - высота треугольника */
return a*h/2 }
//-->
</script>
</HEAD>
<BODY>
<script>
<!--
var a1=6; h1=4
var s=square(a1,h1)
var my_text="Площадь треугольника с основанием " +a1+ " и высотой " +h1+ " равна " +s+ "."
document.write(my_text);
//-->
</script>
</BODY>
</HTML>
Тело функции состоит лишь из оператора return, который определяет возвращаемое функцией значение. Вызов функции осуществляется в теле документа при выполнении оператора присваивания: s=square(a1,h1). Формальным параметрам а и h присваивается значение фактических параметров a1 и h1, и выполняется тело функции. Полученное значение помещается в документ с помощью метода write.
Оператор цикла арифметического типа имеет следующий синтаксис:
for (А; В; I){S}
Выражение А служит для инициализации атрибута цикла и вычисляется один раз в начале выполнения цикла. Выражение В (условие продолжения) управляет работой цикла. Если значение выражения ложно, то выполнение цикла завершается, если истинно, то выполняется оператор S, составляющий тело цикла. Выражение I служит для изменения значения атрибута цикла. После выполнения тела цикла S вычисляется значение выражения I, затем опять вычисляется значение выражения В и т.д. Цикл может прекратить свою работу в результате выполнения оператора break в теле цикла. Опишем функцию sumdel, которая находит сумму делителей числа n, не считая самого числа.
function sumdel (n)
{ var s=1;
for (var i=2; i <= n/2; i++)
{ if (n % i == 0) s += i }
return s
}
Параметр цикла i описывается с помощью оператора var i = 2. Условие продолжения выполнения цикла i <=n/2. Все делители натуральных чисел находятся в интервале [1; n]. Параметр цикла i увеличивается на 1 при выполнении i++. Тело цикла состоит из условного оператора. Если очередное число является делителем, то оно добавляется к переменной s, служащей для «накапливания» суммы делителей числа n. До цикла переменной s присваивается значение 1, т.к. 1 — делитель любого натурального числа.
Напишем сценарий, изображающий на экране таблицу Пифагора, т.е. таблицу умножения N×N, где значение N запрашивается у пользователя. Кроме того, в этой таблице диагональные клетки закрашиваются желтым цветом (листинг 6).
Листинг 6. Таблица Пифагора N×N
<HTML>
<HEAD>
<TITLE>Таблица Пифагора NxN</TITLE>
</HEAD>
<BODY>
<script>
<!--
var x; var y
var color="yellow"
var N=prompt("Введите размер таблицы Пифагора (от 2 до 10)","")
document.write("<table border=1 cellpadding=5>")
for (var y=1; y<=N; y++)
{
document.write("</table>");
document.write("<tr>");
for (var x=1; x<=N; x++)
{
if (x==y) {document.write("<td style='background-color:" + color + " '>")}
document.write("</tr>")
else {document.write("<td>")}
document.write(x*y);
document.write("</td>");
}
}
//-->
</script>
</BODY>
</HTML>
Массив представляет собой набор элементов, доступ к которым осуществляется по индексу. Массив создается оператором new и конструктором массива — системной функцией Array. Создать массив из названий дней недели можно, например, следующим образом:
var NDays = new Array("воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота")
В качестве параметров конструктору передаются значения элементов массива. Можно создать массив, указав в нем лишь число элементов, например, так:
var Ndays1 = new Array(7)
И, наконец, можно использовать конструктор без параметра:
var Ndays2 = new Array()
В этом случае определяется лишь, что переменная Ndays2 используется в качестве массива.
Все элементы массива перенумерованы, начиная с нуля. Для получения значения элемента массива необходимо задать имя массива и в квадратных скобках порядковый номер элемента. Для того чтобы получить доступ к первому элементу массива, следует воспользоваться конструкцией Ndays[0].
Свойство length позволяет определить число элементов в массиве или, как говорят, длину массива. Доступ к последнему элементу массива можно осуществить, например, следующим образом:
Ndays[Ndays.length-1]
При описании переменной Ndays1 задана только длина массива. Значения элементов массива можно указать с помощью оператора присваивания:
Ndays[0]="воскресенье"
Ndays[1]="понедельник"
Ndays[2]="вторник"
Ndays[2]="среда"
Ndays[2]="четверг"
Ndays[2]="пятница"
Ndays[6]="суббота"
Напишем функцию, которая по строке, являющейся названием дня недели, определяет, является ли этот день выходным или рабочим:
function grd(s);
{ var res="рабочий"
if ((s==NDays[0]) || (s==NDays[6]))
res="выходной"
return res
}
HTML-формы используются в веб-страницах для взаимодействия с пользователем, получения от него какой-то информации. Сами формы создаются с помощью команд HTML, но для обработки форм необходим какой-либо язык веб-программирования (JavaScript, PHP, Perl и т.п.).
Формы составляются из одного (или нескольких) запросов к пользователю, ответом на которые должен быть ввод текста или выбор условий.
Пример задания формы:
<FORM>
<P>Имя пользователя
<BR>
<INPUT NAME="CONTROL1" TYPE=TEXTBOX VALUE="Введите ваше имя">
<P>Пароль
<BR><INPUT TYPE="PASSWORD" NAME="CONTROL2">
<P>Курс
<BR>
<INPUT TYPE="RADIO" NAME="CONTROL3" VALUE="1" CHECKED>1
<INPUT TYPE="RADIO" NAME="CONTROL3" VALUE="2">2
<INPUT TYPE="RADIO" NAME="CONTROL3" VALUE="3">3
<INPUT TYPE="RADIO" NAME="CONTROL3" VALUE="4">4
<P>Ваши комментарии
<BR><TEXTAREA NAME="CONTROL4" ROWS="2" COLS="25"></TEXTAREA>
<P><INPUT NAME="CONTROL5" TYPE=CHECKBOX CHECKED>
Подтвердить получение
<P><INPUT TYPE="SUBMIT" VALUE="Готово"
OnClick="alert('Это только пример')">
<INPUT TYPE="RESET" VALUE="Отменить ввод">
</FORM>
На экране браузера это будет выглядеть так:
Команда <FORM> определяет форму в HTML документе. В одном документе может быть определено несколько форм для заполнения, но вложенные команды FORM не разрешены.
Команда <FORM> выглядит следующим образом:
<FORM NAME="myform" ACTION="url" METHOD="post">
...
</FORM>
Атрибуты команды FORM:
В форме, которая обрабатывается средствами языка JavaScript, атрибуты ACTION= и METHOD= не используются.
После команды <FORM> указываются элементы формы. Среди них текстовые поля, кнопки, флажки, переключатели и раскрывающиеся списки.
Чаще всего в формах ввода данных используются текстовые поля. С их помощью запрашиваются имена, адреса и другая текстовая информация. Ниже приведен пример простого текстового поля:
<INPUT TYPE="text" NAME="text1" VALUE="Введите ваше имя" SIZE=30>
В этом примере определено текстовое поле с именем text1. Оно содержит текст «Введите ваше имя» и имеет длину 30 символов.
Текстовые поля — это самые простые элементы формы. Каждое текстовое поле имеет следующие свойства:
Чтобы после заполнения формы выполнить требуемые действия (отправить информацию или очистить все поля формы) используются кнопки. Они также определяются в команде <INPUT> и, в зависимости от значения атрибута TYPE= могут быть следующего вида:
Действие пользователя (например, щелчок кнопкой мыши) вызывает событие. События в основном связаны с действиями, производимыми пользователем с элементами форм HTML. Обычно перехват и обработка события задается в атрибутах элементов форм. Имя атрибута обработки события начинается с приставки on, за которой следует имя самого события. Например, атрибут обработки события Submit будет выглядеть как onSubmit.
После щелчка на кнопке Reset запускается обработчик событий onReset. Для создаваемых произвольных кнопок запускается обработчик событий onClick. Приведенный ниже код представляет простой пример программы обработки события onClick:
<form>
<input type="button" value="Проверьте этот пример" onClick="alert('Это текст')">
</form>
Здесь мы создаем некую форму с кнопкой. Атрибут onClick= определяет, что происходит, когда нажимают на кнопку. Таким образом, если имеет место событие Click, компьютер должен выполнить вызов alert('Это тест'). Причём в этом случае даже не нужно использовать команду <script>.
Обратите внимание, что здесь (как и в листинге 1) значение атрибута onClick="..." взято в двойные кавычки, поэтому строка в функции alert('Это текст') — уже в одинарные кавычки.
Вы можете использовать в скрипте множество различных типов функций обработки событий.
К базовым событиям, поддерживаемым в JavaScript, относятся:
|
Событие |
Объекты |
Когда происходит событие |
|---|---|---|
|
onAbort |
image |
Отказ от загрузки изображения |
|
onBlur |
windows, элементы формы |
Потеря объектом фокуса |
|
onChange |
text, textarea, select |
Изменение значения элемента |
|
onClick |
button, radio, checkbox, submit, reset, link |
Щелчок на элементе или связи |
|
onDragDrop |
windows |
Перетаскивается мышью объект в окно браузера |
|
onError |
image, windows |
Ошибка при загрузке документа или изображения |
|
onFocus |
windows, элементы формы |
Окно или элемент формы получает фокус |
|
onKeyDown |
document, image, link, textarea |
Нажатие клавиши клавиатуры |
|
onKeyPress |
document, image, link, textarea |
Удержание нажатой клавиши клавиатуры |
|
onKeyUp |
document, image, link, textarea |
Отпускаются клавиши клавиатуры |
|
onLoad |
Тело документа |
Загружается документ в браузер |
|
onMouseDown |
document, button, link |
Нажатие кнопки мыши |
|
onMouseOut |
area, link |
Перемещение курсора из области гиперссылки |
|
onMouseOver |
link |
Перемещение курсора над гиперссылкой |
|
onMouseUp |
document, button, link |
Отпускается кнопка мыши |
|
onMove |
windows |
Пользователь или сценарий перемещает окно |
|
onReset |
form |
Нажатие кнопки Reset формы |
|
onResize |
windows |
Пользователь или сценарий изменяет размеры окна |
|
onSelect |
text, textarea |
Выбирается поле ввода элемента формы |
|
onSubmit |
form |
Нажатие кнопки Submit формы |
|
onUnload |
Тело документа |
Пользователь закрывает документ |
Предположим, что мы хотим создать форму, в которой поля Основание и Высота служат для ввода соответствующих значений. Кроме того, в форме создадим кнопку Вычислить. При щелчке мышью по этой кнопке мы хотим получить значение площади треугольника.
Значением атрибута обработки события могут быть операторы языка JavaScript. В качестве значения атрибута обработки события можно задать вызов функции, которая должна выполняться при возникновении события, определяемого атрибутом обработки события. В этом случае может быть использована следующая форма:
<FORM name="form1">
Основание: <input type="text" size=5 name="st1"><hr>
Высота: <input type="text" size=5 name="st2"><hr>
<input type="button" value="Вычислить"
onClick="square(document.form1.st1.value, document.form1.st2.value)">
</FORM>
Для функции, вычисляющей площадь треугольника по заданным основанию и высоте, создадим форму для ввода исходных данных.
HTML-код представлен в листинге 7.
Листинг 7. Обработка значений из формы
<HTML>
<HEAD>
<TITLE>Обработка значений из формы</TITLE>
<script language="JavaScript">
function square(a,h)
{ var s=(a*h)/2;
document.write("Площадь треугольника равна " +s);
return s
}
</script>
</HEAD>
<BODY>
<p>Пример сценария со значениями из формы</p>
<FORM name="form1">
<p>Основание: <input type="text" size=5 name="st1">
<p>Высота: <input type="text" size=5 name="st2">
<p><input type="button" value="Вычислить"
onClick="square(document.form1.st1.value, document.form1.st2.value)">
</FORM>
</BODY>
</HTML>
Рассмотрим подробнее значение атрибута обработки события, представляющего собой вызов функции square.
При интерпретации HTML-страницы браузером создаются объекты JavaScript. Взаимосвязь объектов между собой представляет иерархическую структуру. На самом верхнем уровне иерархии находится объект window, представляющий окно браузера. Объект window является предком или родителем всех остальных объектов. Каждая страница кроме объекта window имеет объект document. Свойства объекта document определяются содержимым самого документа: цвет фона, цвет шрифта и т.д. В последнем примере на странице расположена форма. Форма (form) является потомком объекта document, а все элементы формы выступают потомками объекта form. Ссылка на объект может быть осуществлена по имени, заданному атрибутом name тега <HTML>. Для получения значения основания треугольника, введенного в первом поле формы, должна быть выполнена конструкция
document.form1.st1.value
При ссылке на формы и их элементы можно не указывать объект document. В рассмотренном примере получить значение первого поля ввода можно и следующим образом
form1.st1.value
Итак, когда в функцию передаются данные простых типов, например, чисел, как в рассмотренном случае, передача параметров осуществляется по значению. Формальному параметру а присваивается значение фактического параметра form1.st1.value, а формальному параметру b значение form1.st2.value. После этого выполняется тело функции.
Ситуация изменится, когда фактическим параметром функции станет объект. В этом случае говорят, что передача параметра осуществляется по ссылке или по наименованию. Пусть тело документа описано следующим образом:
<BODY>
<Р>Вычисление площади прямоугольного треугольника</Р>
<FORM name="form1">
<p>Основание: <input type="text" size=7 name="st1">
<p>Высота: <input type="text" size=7 name="st2">
<p><input type="button" value="Вычислить"
onClick="square1(form1.st1,form1.st2)">
</FORM>
</BODY>
В качестве фактических параметров в вызове функции square1 выступают имена текстовых полей формы. При вычислении площади используются значения, введенные пользователем. Поэтому описание функции square1 должно быть таким:
function square1(a,h)
{var s=(a.value * h.value)/2;
document.write("Площадь равна " +s);
return s}
Значение основания треугольника получается с помощью конструкции a.value, а высоты — h.value. Приведем описание документа со сценарием полностью.
Напишем сценарий, определяющий площадь треугольника по заданному основанию и высоте. В качестве фактических параметров функции будем использовать имена текстовых полей формы. HTML-код представлен в листинге 8.
Листинг 8. Передача параметров по ссылке
<HTML>
<HEAD>
<TITLE>Имена полей формы в качестве
параметров</TITLE>
<script language="JavaScript">
function square1(a,h)
{ var s=(a.value * h.value)/2;
document.write ("Площадь равна " +s);
return s}
</script>
</HEAD>
<BODY>
<p>Вычисление площади треугольника</p>
<FORM name="form1">
<p>Основание: <input type="text" size=7 name="st1">
<p>Высота: <input type="text" size=7 name="st2">
<p><input type="button" value="Bычиcлить"
onClick="square1(form1.st1,form1.st2)">
</FORM>
</BODY>
</HTML>
В следующем примере функции square2 передается лишь один параметр — имя формы, а внутри функции определяются конкретные переданные значения.
Напишем сценарий, определяющий площадь треугольника по заданному основанию и высоте. В качестве фактических параметров функции следует использовать имя формы.
Функция square2 имеет один параметр obj, являющийся именем формы, в которой с помощью текстовых полей задаются пользователем значения. Для того чтобы использовать в вычислениях значения, заданные с помощью формы, требуется применить конструкцию obj.st1.value, т.е. указать имя поля формы, а затем выбрать значение (листинг 9).
Листинг 9. Параметр функции — имя формы
<HTML>
<HEAD>
<TITLE>Параметр функции - имя формы</TITLE>
<script language="JavaScript">
function square2(obj)
{var a=obj.st1.value
var h=obj.st2.value
var s=(a*h)/2;
obj.res.value=s
}
</script>
</HEAD>
<BODY>
<p>Вычисление площади треугольника</p>
<FORM name="form1">
<p>Основание: <input type="text" size=7 name="st1">
<p>Высота: <input type="text" size=7 name="st2">
<p><input type="button" value="Вычиcлить"
onClick="square2(form1)">
<p>Площадь <input type="text" size=7 name="res">
</FORM>
</BODY>
</HTML>
В результате щелчка по кнопке Вычислить в поле с именем res будет помещено требуемое значение. В приведенных примерах значением атрибута обработки события было имя функции, которая вызывалась, когда происходило событие. В общем случае значением атрибута обработки события могут быть и другие операторы языка JavaScript.
Как уже было сказано, в языке JavaScript все элементы на web-странице выстраиваются в иерархическую структуру. Каждый элемент предстает в виде объекта. И каждый такой объект может иметь определенные свойства и методы. В свою очередь, язык JavaScript позволит вам легко управлять объектами web-страницы, хотя для этого очень важно понимать иерархию объектов, на которые опирается разметка HTML. Как это все действует, можно понять на следующем примере. Рассмотрим простую HTML-страницу:
<html>
<head>
<title>Пример</title>
</head>
<body background="bg.gif">
<DIV align=center>
<img src="ris1.gif" name="pic1">
</DIV>
<p>
<form name="myForm">
Name:
<input type="text" name="name" value="Вова"><br>
e-Mail:
<input type="text" name="email" value="test@test.com"><br><br>
<input type="button" value="Нажми меня" name="myButton" onClick="alert('Привет')">
</form>
</p>
<DIV align=center>
<img src="ris2.gif" name="pic2" width=700 height=3>
</DIV>
<p align=center>
<a href="primer2.htm">Пример</a>
</p>
</body>
</html>
А вот как выглядит эта страница на экране (с комментариями):
Итак, мы имеем два рисунка, одну ссылку и некую форму с двумя полями для ввода текста и одной кнопкой. С точки зрения языка JavaScript окно браузера — это некий объект window. Этот объект также содержит в свою очередь некоторые элементы оформления, такие как строка состоятия. Внутри окна мы можем разместить документ HTML. Такая страница является ни чем иным, как объектом document. Это означает, что объект document представляет в языке JavaScript загруженный на настоящий момент документ HTML. Объект document является очень важным объектом в языке JavaScript и вы будете пользоваться им многократно. К свойствам объекта document относятся, например, цвет фона для веб-страницы. Однако для нас гораздо важнее то, что все без исключения объекты HTML являются свойствами объекта document. Примерами объекта HTML являются, к примеру, ссылка или заполняемая форма.
На следующем рисунке иллюстрируется иерархия объектов, создаваемая HTML-страницей из нашего примера:
Разумеется, мы должны иметь возможность получать информацию о различных объектах в этой иерархии и управлять ею. Для этого мы должны знать, как в языке JavaScript организован доступ к различным объектам. Как видно, каждый объект иерархической структуры имеет свое имя. Следовательно, если вы хотите узнать, как можно обратиться к первому рисунку на нашей HTML-странице, то обязаны сориентироваться в иерархии объектов. И начать нужно с самой вершины. Первый объект такой структуры называется document. Первый рисунок на странице представлен как объект images[0]. Это означает, что отныне мы можем получать доступ к этому объекту, записав в JavaScript document.images[0].
Если же, например, вы хотите знать, какой текст ввел пользователь в первый элемент формы, то сперва должны выяснить, как получить доступ к этому объекту. И снова начинаем мы с вершины нашей иерархии объектов. Затем прослеживаем путь к объекту с именем elements[0] и последовательно записываем названия всех объектов, которые минуем. В итоге выясняется, что доступ к первому полю для ввода текста можно получить, записав:
document.forms[0].elements[0]
А теперь как узнать текст, введенный пользователем? Элемент, соответствующий полю для ввода текста, имеет свойство value, которое соответствует введенному тексту. Итак, теперь мы имеем все необходимое, чтобы прочитать искомое значение. Для этого нужно написать на языке JavaScript строку:
name=document.forms[0].elements[0].value;
Полученная строка заносится в переменную name. Следовательно, теперь мы можем работать с этой переменной, как нам необходимо. Например, мы можем создать окно с сообщением, воспользовавшись командой alert("Привет" + name). В результате, если читатель введет в это поле слово 'Вова', то по команде alert("Привет " + name) будет открыто окно с приветствием Привет Вова.
Если вы имеете дело с большими страницами, то процедура адресации к различным объектам по номеру может стать весьма запутанной. Например, придется решать, как следует обратиться к объекту document.forms[3].elements[17] или document.forms[2].elements[18]? Во избежание подобной проблемы, вы можете сами присваивать различным объектам уникальные имена. Как это делается, вы можете увидеть опять же в нашем примере:
<form name="myForm"> Name: <input type="text" name="name" value="Вова"><br> ...
Эта запись означает, что объект forms[0] получает теперь еще и второе имя — myForm. Точно так же вместо elements[0] вы можете писать name (последнее было указано в атрибуте name= тэга <input>). Таким образом, вместо
name=document.forms[0].elements[0].value;
можно записать
name=document.myForm.name.value;
Это значительно упрощает программирование на JavaScript, особенно в случае с большими веб-страницами, содержащими множество объектов (обратите внимание, что при написании имен вы должны еще следить и за положением регистра — то есть вы не имеете права написать myform вместо myForm)
В JavaScript многие свойства объектов доступны не только для чтения. Вы также имеете возможность записывать в них новые значения. Например, посредством JavaScript вы можете записать в упоминавшееся поле новую строку.
Пример кода на JavaScript, иллюстрирующего такую возможность - интересующий нас фрагмент записан как свойство onClick второго тэга <input>:
<form name="myForm">
<input type="text" name="input" value="Привет!">
<input type="button" value="Нажмите меня, плиззззззз..."
onClick="document.myForm.input.value= 'Спасибо! :-)'; ">
</form>
Кроме объектов window и document в JavaScript имеется еще один важный объект — location. В этом объекте представлен адрес загруженного HTML-документа. Например, если вы загрузили страницу index.htm, то значение location.href как раз и будет соответствовать этому адресу.
Впрочем, гораздо более важно, что есть возможность записывать в location.href свои новые значения. Например, в данном примере кнопка загружает в текущее окно новую страницу:
<form>
<input type=button value="К оглавлению"
onClick="location.href='index.htm'">
</form>
Данные удобно представлять с помощью элемента управления «переключатель» (или «радиокнопка») в том случае, когда из нескольких вариантов может быть выбран лишь один. Например, для указания возраста можно задать интервалы:
Пользователь может выбрать тот интервал, который определяет его возраст. Оценки, полученные на экзамене, также удобно представить переключателем, т.к. каждый студент способен получить лишь одну из оценок (2, 3, 4 или 5). Для представления информации о полученном зачете достаточно двух радиокнопок. С помощью переключателя можно представлять информацию о семейном положении, образовании и многое другое.
Элемент формы переключатель отображается в виде круглой кнопки и существует только в составе группы подобных элементов. Может быть осуществлен выбор лишь одного элемента группы. Эти элементы задаются с помощью команды <input> с атрибутом type="radio", причем все элементы группы должны иметь одинаковое значение атрибута name. Обязательный атрибут value должен иметь уникальное значение для каждого элемента группы.
Предположим, что некоторая фирма принимает заказы на изготовление витражей. Заказчик должен выбрать форму витража, количество, указать размеры, материал и др. Требуется определить стоимость заказа. Мы рассмотрим лишь фрагмент, в котором выбирается форма витража. Этот выбор осуществляется с помощью переключателя.
Пусть для выбора фигуры задана следующая форма:
<FORM name="form1">
Выберите форму витража<br>
<input type="radio" name="fv" value="прямоугольник">прямоугольник<br>
<input type="radio" name="fv" value="квадрат">квадрат<br>
<input type="radio" name="fv" value="тpeyгoльник">тpeyгoльник<br>
<input type="radio" name="fv" value="кpyг">кpyг<hr>
<input type="button" value="Bыпoлнить" onClick="vid()">
<input type="reset" value="Отменить"><br>
Форма витража: <input type="text" name="res">
</FORM>
В этой форме семь элементов. Первые четыре элемента образуют группу и являются переключателями. Пятый элемент создает кнопку Bыпoлнить, при нажатии на которую в седьмом элементе (текстовом поле) появится выбранная форма витража. Шестой элемент создает кнопку сброса, нажатие которой отменяет все сделанные изменения.
Так как объект forms имеет свойство-массив
elements, в котором содержатся
ссылки на элементы формы в порядке их перечисления в теге
<FORM>, то получить
доступ к первому элементу формы можно либо с помощью значения атрибута name
этого элемента (document.form1.fv), либо используя объектную модель JavaScript
document.forms[0].elements[2], document.forms[0].elements[3].
Состояние переключателя (выбран или нет) хранится в свойстве checked, которе возвращает логическое значение true, если тот выбран, и false — в противном случае. Выяснить, выбран ли переключатель, являющийся первым элементом формы с именем form1, можно по значению следующего выражения:
(document.form1.elements[0]).checked
Приведем сценарий, в котором определяется выбранный переключатель при щелчке мышью по кнопке в форме (листинг 10).
Листинг 10. Определение выделенного элемента в переключателе
<HTML>
<HEAD>
<TITLE>Данные из формы типа "переключатель". Выделенный элемент</TITLE>
<script language="JavaScript">
function vid()
{ var d=document
var k;
if (d.form1.fv[0].checked) k=d.form1.fv[0].value
else
if (d.form1.fv[1].checked) k=d.form1.fv[1].value
else
if (d.form1.fv[2].checked) k=d.form1.fv[2].value
else
if (d.form1.fv[3].checked) k=d.form1.fv[3].value
d.form1.res.value=k
}
</script>
</HEAD>
<BODY>
<FORM name="form1">
Выберите форму витража<br>
<input type="radio" name="fv" value="прямоугольник">прямоугольник<br>
<input type="radio" name="fv" value="квадрат">квадрат<br>
<input type="radio" name="fv" value="тpeyгoльник">тpeyгoльник<br>
<input type="radio" name="fv" value="кpyг">кpyг<br>
<input type="button" value="Bыпoлнить" onClick="vid()">
<input type="reset" value="Отменить">
<p>Форма витража: <input type="text" name="res">
</FORM>
</BODY>
</HTML>
К элементам формы помимо атрибута name еще можно обращаться и с помощью атрибута id (это второй вариант использования того же самого атрибута id, помимо селектора по идентификатору в CSS).
В этом случае вид обращения к значению элемента формы form1 с атрибутом id="res2" будет следующим:
document.all("res2").value
Напишем сценарий, в котором определяется выбранный переключатель при щелчке мышью по определяемой в форме кнопке. Доступ к элементу требуется осуществить, используя уникальные имена (листинг 11).
Листинг 11. Идентификаторы
<HTML>
<HEAD>
<TITLE>Данные, представленные переключателем. Идентификаторы</TITLE>
<script language="JavaScript">
function vid()
{ var d=document; var k;
if (d.all("i1").checked) k=d.form1.fv[0].value
else
if (d.all("i2").checked) k=d.form1.fv[1].value
else
if (d.all("i3").checked) k=d.form1.fv[2].value
else
if (d.all("i4").checked) k=d.form1.fv[3].value
d.all("res2").value=k
}
</script>
</HEAD>
<BODY>
<FORM name="form1">
Выберите форму витража<br>
<input type="radio" id="i1" name="fv" value="пpямoyгoльник">пpямoyгoльник<br>
<input type="radio" id="i2" name="fv" value="квадрат">квадрат<br>
<input type="radio" id="i3" name="fv" value="треугольник">треугольник<br>
<input type="radio" id="i4" name="fv" value="кpyг">кpyг<br>
<br>
<input type="button" value="Выполнить" onClick="vid()">
<input type="reset" value="Отменить">
<p><input type="text" id="res2">
</FORM>
</BODY>
</HTML>
Во многих случаях данные удобно представить в виде таблицы. Поскольку таблица содержит ячейки, то для каждой из ячеек можно определить, как разместить в ней данные. Горизонтальное выравнивание позволяет содержимое ячейки расположить по центру, левому или правому краю. Кроме того, текст или графику внутри ячейки можно разместить, определив атрибуты вертикального выравнивания.
Напишем сценарий, который позволяет продемонстрировать, как изменяется содержимое ячейки таблицы в зависимости от значений атрибутов горизонтального и вертикального выравнивания.
В документе слева находится список атрибутов, которые пользователь выбирает для горизонтального и вертикального выравнивания. В правой части в ячейке таблицы хранится изображение, положение которого будет меняться в зависимости от выбранных переключателей после нажатия кнопки Просмотр (рис. 1.).
Рис. 1. Расположение изображения внутри ячейки
После нажатия кнопки Просмотр выполняется функция, анализирующая, какие атрибуты выбраны, и присваивает определенные значения атрибутам выравнивания содержимого ячейки. В правой части документа изображение занимает определенное атрибутами выравнивания место в ячейке таблицы. Доступ к ячейке таблицы осуществляется по значению атрибута id. При нажатии кнопки Обновить изображение требуется вернуть на место. По умолчанию горизонтальное выравнивание предполагает расположение содержимого по левому краю, вертикальное выравнивание — по верхней границе. HTML-код, содержащий сценарии, представлен в листинге 12.
Листинг 12. Расположение текста или изображения внутри ячейки таблицы
<HTML> <HEAD>
<TITLE>Расположение текста или изображения
внутри ячейки таблицы</TITLE>
<script>
function set(obj)
{ var d=document
if(obj.elements[0].checked) {d.all("itab").align="LEFT"}
else
if(obj.elements[1].checked) {d.all("itab").align="MIDDLE"}
else
if(obj.elements[2].checked) {d.all("itab").align="RIGHT"}
if(obj.elements[3].checked) {d.all("itab").vAlign="TOP"}
else
if(obj.elements[4].checked) {d.all("itab").vAlign="MIDDLE"}
else
if(obj.elements[5].checked) {d.all("itab").vAlign="BOTTOM"}
}
function rset(obj)
{ var d=document
d.all("itab").align="LEFT"
d.all("itab").vAlign="TOP"
}
</script>
<BODY bgcolor="#F8F8FF">
<H3 align=center>Pacпoлoжeниe текста или изображения
внутри ячейки</H3>
Выберите значения атрибутов, которые Вас интересуют,
и нажмите кнопку <В>Просмотр</B>.
<TABLE border=2>
<TR>
<TD><H4 align=center>Значения атрибутов выравнивания таблицы</H4>
<TD><H4 align=center>Действия при выбранных значениях
атрибутов</H4>
</TR>
<TR>
<TD>
<FORM name="form1">
Горизонтальное выравнивание<br>
<input type="radio" name="al" checked>LEFT<br>
<input type="radio" name="al">CENTER<br>
<input type="radio" name="al">RIGHT<P>
Вертикальное выравнивание<br>
<input type="radio" name="vl" checked>TOP<br>
<input type="radio" name="vl">MIDDLE<br>
<input type="radio" name="vl">BOTTOM<br>
</FORM>
</TD>
<TD id="itab" bgcolor=blue height=160
valign=TOP align=LEFT>
<IMG src="ris.gif" border=2 height=120>
</TD>
</TR>
</TABLE><P>
<input type="button" value= "Просмотр" onclick="set(form1)">
<input type="reset" value="Обновить" onclick="rset()">
</BODY>
</HTML>
Текстовая область определяется с помощью команды <TEXTAREA>, эта команда обязательно имеет закрывающую — </TEXTAREA>. Существует разница между текстовым полем и текстовой областью: текстовая область позволяет вводить несколько строк текста.
Атрибуты команды TEXTAREA:
TEXTAREA имеет полосы прокрутки, так что может быть введено любое количество текста. Но в этом тексте нельзя использовать команды HTML! Текст между открывающей и закрывающей командами <TEXTAREA> используется как значение по умолчанию. Для создания новой строки в текстовой области можно использовать специальные служебные символы \n\r (перевод строки и возврат курсора)
В следующем примере проверяется правильность обработки данных элемента управления «переключатель». Объект radio имеет свойства name, type, value. Событие Focus возникает, когда элемент формы получает фокус, т.е. попросту говоря мы щелкаем мышкой по переключателю. При получении фокуса переключателем в текстовой области отображаются значения свойства для выбранного переключателя.
Необходимо написать сценарий, в котором для каждого переключателя выводятся значения соответствующих ему свойств, как на
рис. 2.
 |
Рис 2. Свойства переключателя |
Группа элементов состоит из четырех переключателей, пятый элемент формы — поле ввода многострочного текста. При выполнении сценария формируется строка s, содержащая требуемые значения. Фактическим параметром функции обработки события test является элемент формы — переключатель, а не значение атрибута value выбранного переключателя, как в предыдущем примере. Далее в сценарии для получения свойств переключателя используются конструкции obj.value, obj.name, obj.type. В этом примере в качестве значения атрибута value в переключателе применяется строковый литерал.
HTML-код приведен в листинге 13.
Листинг 13. Свойства выбранного элемента-переключателя
<HTML>
<HEAD>
<TITLE>Данные из формы типа "переключатель". Событие Focus</TITLE>
<script language="JavaScript">
function test(obj)
{ var s="свойство value: " + obj.value + "\n\r" +
"свойство name: " + obj.name + "\n\r" +
"свойство type: " + obj.type
form1.elements[4].value=s
}
</script>
</HEAD>
<BODY>
<FORM name="form1">
Выберите форму витража<br>
<input type="radio" name="fv" value="прямоугольник"
onFocus=test(form1.elements[0])>прямоугольник<br>
<input type="radio" name="fv" value="квaдpaт"
onFocus=test(form1.elements[1])>квадрат<br>
<input type="radio" name="fv" value="тpeyгoльник"
onFocus=test(form1.elements[2])>треугольник<br>
<input type="radio" name="fv" value="кpyг"
onFocus=test(form1.elements[3])>круг<br>
Тест: <br>
<textarea name="res" cols=55 rows=5></textarea><br>
<input type="reset" value="Отменить">
</FORM>
</BODY>
</HTML>
Напишем сценарий, в результате работы которого при попадании курсора мыши на элемент списка, в текстовой области появляется некоторое сообщение.
Пусть список представляет собой расписание занятий в определенный день, а текст сообщения содержит комментарий к каждому занятию. Вид документа приведен на рис. 3.
 |
Рис 3. Расписание занятий |
Расписание занятий задается списком. В теге <LI>, определяющем элемент списка, предусмотрена реакция на два события, связанных с попаданием курсора мыши на элемент списка (onMouseOver) и выход курсора за пределы элемента списка (onMouseOut). При попадании в текстовое поле помещается значение строки. Размещаемая в текстовом поле строка определяется атрибутом функции.
HTML-код документа имеет вид, представленный в листинге 14.
Листинг 14. Свойства выбранного элемента-переключателя
<HTML>
<HEAD>
<TITLE>Расписание занятий
</TITLE>
<script>
var s1="Контрольная работа"
var s2='Изменилась аудитория - БФА'
var s3='Занятия в компьютерном
классе'
var s4='Подготовка реферата'
var s5='Занятия переносятся
на следующую неделю'
function sch(s)
{document.form1.m1.value=s}
function delet ()
{document.form1.m1.value=''}
</script>
</HEAD>
<BODY bgcolor="#77AAFF">
<Center>
<h4>Расписание занятий</h4>
<TABLE border=0 cellspacing=5 cellpadding=5>
<TR valign=top>
<TD align=center>
<FORM name ="form1">
<textarea name="m1"
cols=35 rows=4></textarea></TD>
</FORM>
</TR>
<TR valign=middle><TD>
<UL><FONT size=4>
<LI onMouseOver="sch(s1)" onMouseOut="delet()">
<b><i>1 пара </i></b>
Математический анализ
<LI onMouseOver="sch(s2)" onMouseOut="delet()">
<b><i>2 пара </i></b>Высшая
алгебра
<LI onMouseOver="sch(s3)" onMouseOut="delet()">
<b><i>3 пара </i></b>
Программирование
<LI onMouseOver="sch(s4)" onMouseOut="delet()">
<b><i>4 пара </i></b>
История
<LI onMouseOver="sch(s5)" onMouseOut="delet()">
<b><i>5 пара </i></b>
Дискретный анализ
</FONT>
</UL>
</TD></TR>
</TABLE>
</BODY>
</HTML>
Элемент управления «флажок» используется в случае, когда из предложенных вариантов можно выбрать как один, так и несколько. Каждый вариант выбора задается флажком, который можно либо установить, либо сбросить. Флажок определяется в теге <input> значением checkbox атрибута type. Обязательным атрибутом является атрибут value, значение которого будет передано на обработку в случае выбора нажатием кнопки.
Предположим, читателю предлагается заполнить анкету, в которой требуется указать название любимого издания и выбрать из предложенного списка характеристики, которые присущи рассматриваемому изданию.
 |
Рис 4. Пример обработки анкеты читателя |
Для задания характеристик издания можно воспользоваться флажком. Пользователь устанавливает флажки для тех свойств, которыми, по его мнению, обладает издание. Обработка анкеты будет состоять в том, что выбранные свойства будут отражены в поле ввода многострочного текста (рис. 4).
При щелчке мышью по флажку возникает событие click, обработка которого состоит в вызове функции set с одним атрибутом, принимающим значение атрибута value флажка. Для формирования строки результата служит глобальная переменная s; к имеющемуся значению добавляется значение параметра функции и помещается в текстовое поле. Если нажать на кнопку Отмена, то очистятся все поля формы. Однако следует позаботиться о том, чтобы значение переменной s изменилось на начальное. Значение атрибута реакции на событие click при щелчке по кнопке Отмена задается оператором присваивания, обеспечивающим начальные условия.
HTML-код представлен в листинге 15.
Листинг 15. Анкета читателя
<HTML>
<HEAD>
<TITLE>Анкета читателя</TITLE>
<script>
var s="Bac привлекает: \r\n"
function set(vch)
{ s=s+vch + "\r\n"; document.form1.area.value=s }
</script>
</HEAD>
<BODY bgcolor="#F8F8FF">
<CENTER>
<H3 align="center">Анкета читателя</H3>
<FORM name="form0">
<h4>Введите название любимого журнала или газеты</h4>
<input type="text" name="n1" size=45><br>
</FORM>
<FORM name="form1">
<h4>Что Вас привлекает в издании?</h4>
<TABLE border=3 align=center> <TR>
<TD><img src="ris.gif" align="center"></TD>
<TD><input type="checkbox" name="m1"
value="Cтиль подачи материала"
onClick="set(form1.elements[0].value)">
Стиль подачи материала<br>
<input type="checkbox" name="m2"
value="Достоверность информации"
onClick="set(form1.elements[1].value)">
Достоверность информации<br>
<input type="checkbox" name="m3"
value="Дизайн и оформление"
onClick="set(form1.elements[2].value)">
Дизайн и оформление<br>
<input type="checkbox" name="m4"
value="Kaчecтво информации"
onClick="set(form1.elements[3].value)">
Качество информации<br>
<input type="checkbox" name="m5"
value="Репутация издания"
onClick="set (form1.elements[4].value)">
Репутация издания<br>
<input type="checkbox" name="m6"
value="Репутация издания"
onClick="set(form1.elements[5].value)">
Регулярность издания<br>
</TD></TR></TABLE>
<textarea name="area" cols=35
rows=7></textarea><br>
<input type="reset" value="Отмена"
onclick= "s='Bac привлекает: \r\n'">
</FORM>
</BODY>
</HTML>
Если флажок получает фокус, то происходит событие FOCUS, в качестве значения атрибута обработки события, как и в предыдущем случае, может быть вызов функции set:
<input type="checkbox" name="ml" value="Стиль подачи материала"
onFocus="set(form1.elements[0].value)">Стиль подачи материала<br>
И, наконец, потеря объектом фокуса вызовет событие Blur, обработка которого может быть произведена аналогичным способом:
<input type="checkbox" name="m1"
value="Стиль подачи материала"
onBlur="set(form1.elements[0].value)">Стиль подачи материала<br>
Объект checkbox обладает свойствами value, name, type, которые соответствуют атрибутам тега, описывающего флажок. Функция set получает в качестве параметра объект checkbox и формирует для выбранного флажка значения соответствующих ему свойств так, как показано на рис. 5.
 |
Рис 5. Исследование свойств флажка |
В представленном HTML-коде (листинг 16) обратите внимание на фактический атрибут вызова функции set при обработке события click.
Листинг 16. Анкета читателя. Свойства флажка
<HTML>
<HEAD>
<TITLE>Анкета читателя </TITLE>
<script>
var s="Свойства выбранного флажка: \r\n"
function set(objch)
{s+="свойство value: "+objch.value +"\n"+
"свойство name: "+objch.name +"\n"+
"свойство type: "+objch.type +"\n"
document.form1.area.value=s}
</script>
</HEAD>
<BODY bgcolor="#F8F8FF">
<CENTER>
<H3 align="center">Aнкета читателя</H3>
<FORM name="form0">
<h4>Введите название любимого журнала или газеты</h4>
<input type="text" name="n1"
size=45><br>
</FORM>
<FORM name="form1">
<h4>Что Вас привлекает в издании?</h4>
<TABLE border=3 align=center>
<TR>
<TD><img src="ris.gif" align="center"></TD>
<TD><input type="checkbox" name="m1"
value="Cтиль подачи материала"
onClick="set(form1.elements[0])">
Стиль подачи материала<br>
<input type="checkbox" name="m2"
value="Достоверность информации"
onClick="set(form1.elements[1])">
Достоверность информации<br>
<input type="checkbox" name="m3"
value="Дизайн и оформление"
onClick="set(form1.elements[2])">
Дизайн и оформление<br>
<input type="checkbox" name="m4"
value="Качество информации"
onClick="set(form1.elements[3])">
Качество информации<br>
<input type="checkbox" name="m5"
value="Репутация издания"
onClick="set(form1.elements[4])">
Репутация издания<br>
<input type="checkbox" name="m6"
value="Регулярность издания"
onClick="set(form1.elements[5])">
Регулярность издания<br>
</TD></TR></TABLE>
<textarea name="area" cols=35
rows=7></textarea><br>
<input type="reset" value="Отмена"
onClick="s='Свойства выбранного флажка: \r\n'">
</FORM>
</BODY>
</HTML>
В качестве параметра в функцию set можно передать номер флажка, а уже в самой функции определить свойства выбранного элемента. В этом случае функция set может быть описана следующим образом:
function set(i)
{ var d=document.forms[1].elements[i-1]
s+="свойство value: "+d.value +"\n"+
"свойство name: "+d.name +"\n"+
"свойство type: "+d.type +"\n"
document.forms[1].elements[6].value=s}
Обратите внимание, что в документе определены две формы. Одна содержит текстовое поле ввода названия журнала, а во второй форме расположены флажки, текстовое поле и кнопка сброса.
В анкете требуется указать те языки, которыми владеет переводчик. Предположим, что за знание каждого языка назначается определенная сумма. Размер вознаграждения определяется после заполнения анкеты в зависимости от тех языков, которыми пользователь владеет. По результатам заполненной переводчиком анкеты напишите сценарий определения размера вознаграждения.
Для задания сведений о том, владеет ли пользователь определенным языком, удобно
применять флажок. При щелчке мышью по кнопке Вознаграждение выполняется
функция grant(). Требуется проанализировать состояние флажков. Свойство checked
возвращает логическое значение, представляющее текущее значение отдельного флажка
(true или false). Воспользуемся тем, что каждый объект form имеет свойство-массив
elements, получим доступ к каждому флажку формы. Состояние первого флажка можно
определить с помощью следующей конструкции:
(document.form1.elements[0]).checked
второго —
(document. form1.elements[1]).checked
и т.д. В переменной к накапливается сумма. Шаг увеличения этой переменной задается в качестве значения атрибута value. После анализа всех флажков полученная сумма выводится в документ.
HTML-код представлен в листинге 17.
Листинг 17. Данные, представленные флажком. Анкета переводчика
<HTML>
<HEAD>
<TITLE>Данные, представленные флажком. Анкета переводчика</TITLE>
<script language="JavaScript">
function grant()
{ var d=document
var k=0;
if ((d.form1.elements[0]).checked)
k=k+Number(d.form1.elements[0].value)
if ((d.form1.elements[1]).checked)
k=k+Number(d.form1.elements[1].value)
if ((d.form1.elements[2]).checked)
k=k+Number(d.form1.elements[2].value)
if ((d.form1.elements[3]).checked)
k=k+Number(d.form1.elements[3].value)
if ((d.form1.elements[4]).checked)
k=k+Number(d.form1.elements[4].value)
if ((d.form1.elements[5]).checked)
k=k+Number(d.form1.elements[5].value)
document.write("Вам полагается вознаграждение " +k+ " y.e.")
}
</script>
</HEAD>
<BODY>
<H3>Анкета для переводчиков</H3>
Укажите те языки, которыми вы владеете в
совершенстве: <br>
<FORM name="form1">
<input type="checkbox" value="100">pyccкий<br>
<input type="checkbox" value="200">английский<br>
<input type="checkbox" value="300">французский<br>
<input type="checkbox" value="400">немецкий<br>
<input type="checkbox" value="500">китайский<br>
<input type="checkbox" value="600">японский<br>
<input type="button" value=Вознаграждениие onClick="grant()"> <br>
<input type="reset" value="Отменить">
</FORM>
</BODY>
</HTML>
Объект Number() преобразует строку в число.
Атрибут id= применим в следующем примере при задании элементов флажка.
Определим размер вознаграждения по результатам заполнения анкеты. Обратите внимание на описание элементов форм и на анализ состояния флажков в функции grant (листинг 18).
Листинг 18. Переводчики. Использование атрибута id
<HTML>
<HEAD>
<TITLE>Данные из формы типа checkbox. Переводчики</TITLE>
<script language="JavaScript">
function grant()
{ var d=document
var k=0;
if (d.all("y1").checked) k+=Number(d.all("y1").value)
if (d.all("y2").checked) k+=Number(d.all("y2").value)
if (d.all("y3").checked) k+=Number(d.all("y3").value)
if (d.all("y4").checked) k+=Number(d.all("y4").value)
if (d.all("y5").checked) k+=Number(d.all("y5").value)
if (d.all("y6").checked) k+=Number(d.all("y6").value)
form1.res.value="Baм полагается вознаграждение " +k+ " y.e."
}
</script>
</HEAD>
<BODY>
<H3>Анкета для переводчиков </H3>
Укажите те языки, которыми вы владеете в
совершенстве: <br>
<FORM name="form1">
<input type="checkbox" value="100" id="y1">русский<br>
<input type="checkbox" value="200" id="y2">английский<br>
<input type="checkbox" value="300" id="y3">фpaнцyзcкий<br>
<input type="checkbox" value="400" id="y4">немецкий<br>
<input type="checkbox" value="500" id="y5">китaйcкий<br>
<input type="checkbox" value="600" id="y6">японский<br>
<input type="button" value="Вознаграждение" onClick="grant()">
<input type="text" size=45 name="res"><br>
<input type="reset" value="Отменить">
</FORM>
</BODY>
</HTML>
Если элементов много, то представление их с помощью флажков или переключателей увеличивает размер формы. В этом случае варианты выбора могут быть представлены в окне браузера более компактно с помощью тега <select>, который имеет несколько атрибутов. Атрибут name является обязательным. Для того чтобы установить число одновременно видимых элементов, следует задать атрибут size=n. Когда n равно 1, то отображается ниспадающее меню или список выбора; при n>1 выводится список с n одновременно видимыми значениями. Если атрибут size не задан, то по умолчанию принимается значение равное 1. Указание атрибута multiple означает, что из меню или списка можно выбрать несколько элементов (для этого надо кликать мышкой при нажатой клавише Ctrl). Элементы меню задаются внутри тега <select> с помощью тега <option>. Общий вид тега таков:
<select name=myselect size=10 multiple>
<option value="var1" selected>Первый вариант
<option value="var2">Второй вариант
<option value="var3">Третий вариант
</select>
Атрибут selected означает, что данный элемент списка считается выбранным по умолчанию. Атрибут
value содержит значение, которое передается, если данный элемент выбран из списка или меню.
Вернемся к задаче оформления заказа на витражи. В предыдущей версии форма витража задавалась с помощью переключателей. Теперь воспользуемся тегом <select>.
<BODY>
<FORM name="form1">
Выберите форму витража<br>
<select name="vid" size=1>
<option value="0">прямоугольник
<option value="1">квадрат
<option value="2">треугольник
<option value="3">круг
</select>
<input type="button" value="Проверить" onClick="testsel()">
<input type="reset" value="Отменить">
</FORM>
</BODY>
Выбрать форму витража можно с помощью раскрывающегося списка. В приведенном выше коде форма содержит три элемента управления. Первый определяется тегом <select>, следующие два элемента представляют собой кнопки Проверить и Отменить.
Для того чтобы осуществить доступ к первому элементу формы (списку), следует воспользоваться одной из следующих конструкций
document.form1.vid
document.form1.elements[0]
document.forms["form1"].elements[0]
document.forms[0].elements[0]
Список обладает свойствами length и name. В рассматриваемом примере значение document.form1.vid.length равно четырем, а значение document.form1.vid.name равно vid.
Свойства selected и value связаны с текущим выбором элемента из списка. Свойство
selected возвращает значение
true, если элемент выбран, и
false — в противном случае. В рассматриваемом варианте кода если выбран первый элемент (прямоугольник), то значение
((document.forms["form1"].elements[0])[0].selected
станет равным true. Для анализа следующих трех элементов списка следует определить значения:
document.forms["form1"].elements[0])[1].selected
document.forms["form1"].elements[0])[2].selected
document.forms["form1"].elements[0])[3].selected
Свойство value возвращает значение атрибута value, определенного в теге
<option>.
Значение ((d.forms["form1"].elements[0])[0]).value
равно
нулю. Свойство text возвращает текст, записанный после тега
<option> в объекте select. Так значением
((d.forms["form1"].elements[0])[0]).text
является строковый литерал "прямоугольник".
Функция testsel() играет роль тестиреумой программы и проверяет, правильно ли выбираются атрибуты. Полностью документ со сценарием будет выглядеть так, как представлено в листинге 19а.
Листинг 19а. Данные, представленные с помощью тега select
<HTML>
<HEAD>
<TITLE>Данные, представленные с помощью тега select</TITLE>
<script ="JavaScript">
function testsel()
{ var d=document
var r="Выбранная форма: "
if (((d.forms["form1"].elements[0])[0]).selected)
r=r+((d.forms["form1"].elements[0]) [0]).text+" "
else
if (((d.forms["form1"].elements[0])[1]).selected)
r=r+((d.forms["form1"].elements[0])[1]).text+" "
else
if (((d.forms["form1"].elements[0])[2]).selected)
r=r+((d.forms["form1"].elements[0])[2]).text+" "
else
if (((d.forms["form1"].elements[0])[3]).selected)
r=r+((d.forms["form1"].elements[0])[3]).text+" "
form1.res.value=r
}
</script>
</HEAD>
<BODY>
<FORM name="form1">
Выберите форму витража<br>
<select name="vid" size=1>
<option value="0">прямоугольник
<option value="1">квадрат
<option value="2">треугольник
<option value="3">круг
</select>
<input type="button" value="Проверить" onClick="testsel()">
<input type="text" size=50 name="res">
<input type="reset" value="Отменить">
</FORM>
</BODY>
</HTML>
Однако, если элементов списка достаточно много, то пользоваться условным оператором, для определения,
какой из элементов выбран, не слишком удобно. Гораздо эффективнее воспользоваться свойством
selectedIndex
объекта select. В этом случае получение значения выбранного элемента можно сделать в два этапа.
Сначала определяется значение свойства selectedIndex (т.е. номер выбранного элемента),
а затем из массива
В качестве примера — другой вариант обработки формы в выборе вида витража (листинг 19б.)
Листинг 19б. Применение свойства selectedIndex
<HTML>
<HEAD>
<TITLE>Применение свойства selectedIndex</TITLE>
<script ="JavaScript">
function testsel()
{ var d=document
var r="Выбранная форма: "
ind=d.forms["form1"].vid.selectedIndex
r=r+d.forms["form1"].vid.options[ind].value+" "
form1.res.value=r
}
</script>
</HEAD>
<BODY>
<FORM name="form1">
Выберите форму витража<br>
<select name="vid" size=1>
<option value="прямоугольник">прямоугольник
<option value="квадрат">квадрат
<option value="треугольник">треугольник
<option value="круг">круг
</select>
<p><input type="button" value="Проверить" onClick="testsel()">
<input type="text" size=50 name="res">
<p><input type="reset" value="Отменить">
</FORM>
</BODY>
</HTML>
Здесь в раскрывающемся списке с именем vid значения элементов <option>
заданы сразу в атрибутах value ("прямоугольник", "квадрат" и т.д.). Затем, в функции
testsel() в переменную ind заносится номер того элемента <option>,
который был выбран, а в конструкции
document.forms["form1"].vid.options[ind].value
для элемента массива options[ind] с номером ind получаем значение
атрибута value.
Напишем сценарий обработки анкеты переводчика. Сведения о тех языках, которыми тот владеет, требуется задать с помощью списка.
Так как переводчик может владеть несколькими языками, то в теге <select> необходимо указать атрибут multiple, означающий, что из списка могут быть выбраны несколько элементов. Определим значение атрибута size равным четырем. Тогда будет отображен список прокрутки с четырьмя одновременно видимыми значениями и тремя выбранными, как на рис. 6.
 |
| Рис 6. Анкета переводчика |
Приведем описание тела HTML-кода документа (листинг 20а).
Листинг 20а. Анкета переводчика. Представление списком
<BODY>
<FORM name="form1">
<H4>Анкета переводчика</H4>
Выберите язык, которым вы владеете в совершенстве<br>
<select name="forma" size=4 multiple>
<option value="русский">русский
<option value="английский">английский
<option value="французский">французский
<option value="немецкий">немецкий
<option value="китайский">китайский
<option value="японский">японский
</select><P>
Вознаграждение:<input type="text" name="res" size=10><P>
<input type="button" value="Определить"
onClick="form1.res.value=testsel()">
<input type="reset" value="Отменить">
</FORM>
</BODY>
В форме содержатся несколько элементов. Нас будет интересовать первый элемент, а в первом элементе те значения, которые выбраны. Определить, какие элементы выбраны, можно, если проанализировать следующие значения:
((document.forms["form1"].elements[0])[0]).selected
((document.forms["form1"].elements[0])[1]).selected
((document.forms["form1"].elements[0])[2]).selected
((document.forms["form1"].elements[0])[3]).selected
((document.forms["form1"].elements[0])[4]).selected
((document.forms["form1"].elements[0])[5]).selected
За знание каждого языка назначается определенная сумма. После анализа всех выбранных значений определяется вознаграждение. Для определения суммы вознаграждения следует щелкнуть по кнопке Определить. Реакция на это событие — запись в поле формы вычисленного значения (листинг 20б).
Листинг 20б. Данные об языках, представленные с помощью списка
<HTML>
<HEAD>
<TITLE>Данные об языках, представленные с помощью списка</TITLE>
<script language="JavaScript">
function testsel()
{ var d=document
var s=0
if (((d.forms["form1"].elements[0])[0]).selected) s+=100
if (((d.forms["form1"].elements[0])[1]).selected) s+=200
if (((d.forms["form1"].elements[0])[2]).selected) s+=300
if (((d.forms["form1"].elements[0])[3]).selected) s+=400
if (((d.forms["form1"].elements[0])[4]).selected) s+=500
if (((d.forms["form1"].elements[0])[5]).selected) s+=600
return s
}
</script>
</HEAD>
<BODY>
<FORM name="form1">
<H4>Анкета переводчика</H4>
Выберите язык, которым вы владеете в совершенстве<br>
<select name="forma" size=4 MULTIPLE>
<option value="русский">русский
<option value="английский">английский
<option value="французский">французский
<option value="немецкий">немецкий
<option value="китайский">китайский
<option value="японский">японский
</select><P>
Вознаграждение: <input type="text" name="res" size=10><P>
<input type="button" value="Определить"
onClick="form1.res.value=testsel()">
<input type="reset" value="Отменить">
</FORM>
</BODY>
</HTML>
Напишем сценарий обработки анкеты переводчика. Сведения о тех языках, которыми владеет переводчик, требуется задать с помощью списка. Выбранные языки следует помещать в поле ввода многострочного текста, как на рис. 7.
 |
| Рис 7. Выбор с помощью списка |
Напомним, что событие change происходит в тот момент, когда значение элемента формы text, select или textarea изменилось, и элемент потерял фокус. Будем обрабатывать анкету переводчика следующим образом. Параметр обработки события поместим в тег <select>. Как только выбран конкретный язык, т. е. произошло событие Change, выполняется функция gr:
function gr(obj,m)
{ var r=100*(Number(((obj.elements[0])[m]).value)+1)
s+=((obj.elements[0])[m]).text+"\r\n"
obj.restext.value=s
sum+=r
obj.res.value=r
}
Первый параметр — имя формы, второй — значение атрибута value выбранного элемента. Второй оператор обеспечивает формирование строки всех выбранных пользователем языков. Третий оператор помещает вычисленное значение в текстовое поле. В результате выполнения четвертого оператора присваивания в переменной sum формируется значение, которое, затем при нажатии кнопки Сумма будет выведено в текстовое поле. Последний оператор помещает значение для выбранного языка в соответствующее поле формы. Полностью документ со сценарием и формами может быть описан так, как указано в листинге 21.
Листинг 21. Реакция на событие change в теге <select>
<HTML>
<HEAD>
<TITLE>Реакция на событие Change в теге select</TITLE>
<script language="JavaScript">
var s=""
var sum=0
function gr(obj,m)
{ var r=100*(Number(((obj.elements[0])[m]).value)+1)
s+=((obj.elements[0])[m]).text+"\r\n"
obj.restext.value=s
sum+=r
obj.res.value=r
}
</script>
</HEAD>
<BODY>
<FORM name="form1">
<H3>Анкета переводчика</H3>
<TABLE border=3 bgcolor=silver>
<TR><TH>Выбранный язык</TH><TH>Результат</TH></TR>
<TR>
<TD valign=top>
<select name="data" size=6
onChange="gr(form1,form1.data.value)">
<option value="0">русский
<option value="1">aнглийcкий
<option value="2">французский
<option value="3">немецкий
<option value="4">китайский
<option value="5">японский
</select><P>
<input type="text" name="res" size=15>
</TD>
<TD><textarea name="restext" cols=15 rows=6>
</textarea><P>
<input type="button" value=Сумма
onClick="form1.resgr.value=sum">
<input type="text" name="resgr" size=10>
</TD></TR></TABLE><p>
<input type="reset" value="Отменить" onClick="sum=0; s=''">
</FORM>
</BODY>
</HTML>
Рассмотрим случай, когда значение атрибута обработки события — функция с одним атрибутом, который является именем тега <select>.
<select name="data" size=6 onChange="gr(form1.data)">
<option value="0">русский
<option value="1">aнглийcкий
<option value="2">фpaнцyзcкий
<option value="3">немецкий
<option value="4">китайский
<option value="5">японский
</select>
Для того чтобы получить доступ к значению в сценарии, выполняется конструкция obj.value, а свойство списка form позволяет получить доступ к объектам формы. Форма имеет несколько элементов, к которым доступ получен различными способами в следующем сценарии:
function gr(obj)
{ var r=100*(Number(((obj.form.elements[0])[obj.value]).value)+1)
s+=((obj.form.elements[0])[obj.value]).text+"\r\n"
obj.form.restext.value=s
sum+=r
obj.form.res.value=r
}