Обработка полей формы
advertisement
Информационная модель документа.
Общие сведения о языке JavaScript
Все браузеры реализуют две функции: визуальную и моделирующую. Визуальная
функция проявляется как только мы загружаем гипертекстовую страницу, которую
браузер рисует на экране по описанным в документе тэгам. Но, кроме этого, браузер
строит в памяти компьютера информационную модель документа, в которой каждому
тэгу из HTML-файла соответствует отдельный объект. Построение объекта браузер
начинает с объекта window, в котором описываются свойства окна документа. В состав
объекта window входит объект document, который соответствует контейнеру
<HTML>…</HTML>. Объект document включает в себя массивы других объектов.
Например, объект-массив images, который содержит сведения о всех графических
изображениях, объект-массив forms, содержащий сведения об используемых формах и
т.д. Документ становится динамическим, если в код страницы включить не только
описание тэгов, но и описать воздействие на информационную модель при
возникновении того или иного события. Например, при наступлении события "курсор
мыши над картинкой номер 2" изменить во втором элементе массива объектов images
свойство src c одного графического файла на другой. Тогда при наведении указателя
мыши на картинку мы увидим её изменение. Воздействие на информационную модель
документа осуществляется с помощью специальных языков программирования, таких
как JavaScript и VBScript.
Таким образом, поле окна браузера можно изменить двумя способами:
1) написать HTML-тэги и загрузить файл в браузер (построение статичного документа),
2) воздействовать на информационную модель документа (построение динамического
документа).
В полной мере, воздействие на информационную модель можно реализовать лишь
используя CSS. Каскадные таблицы стилей позволяют задать для каждого объекта
большое количество различных свойств, а JavaScript даёт доступ к этим свойствам.
Язык JavaScript – это язык программирования, который разработан специально для
работы совместно с HTML и дополняет его. Его можно рассматривать как упрощённую
версию языка Java. JavaScript – интерпретационный язык. Исходный код программы на
JavaScript встраивается в HTML-код или хранится в отдельном файле с расширением .js
(подобно таблице стилей) и интерепретируется браузером.
Для добавления к документу JavaScript-сценария используется тэг:
<SCRIPT>
…..
</SCRIPT>
Сценарий может быть описан в любом месте страницы. Чтобы сценарий был
доступен всей странице, его необходимо разместить в заголовок документа. В одном
документе может быть любое количество сценариев. В дескрипторе <SCRIPT> можно
использовать атрибут language=язык. По умолчанию берётся значение "JavaScript".
Возможно использование языка VBScript (но он не воспринимается браузером Netscape).
Для того, чтобы со страницей могли корректно работать все браузеры, то его лучше
оформить как комментарий:
<SCRIPT>
<!-Текст сценария
//-->
</SCRIPT>
Браузеры, не поддерживающие скрипты пропустят эту часть страницы. Для них
можно создать альтернативный вариант без использования скриптов. Он размещается
между тэгами
<NOSCRIPT>
….
</NOSCRIPT>
Чтобы код сценария не выполнялся сразу при загрузке страницы, а начинал работу
после возникновения того или иного события, его оформляют как функцию, которая
вызывается при наступлении данного события. Общий вид функции:
function имя()
{текст сценария
…………….
……………..}
Вызов функции может быть описан либо внутри сценария, либо внутри атрибута.
В конце каждой команды ставится точка с запятой.
Для создания комментариев можно использовать символы:
// Строковый комментарий
/* Блоковый
комментарий */
Переменные, константы, выражения
Ввод и вывод информации.
Для образования имён переменных, как и во всех языках программирования,
используются идентификаторы. Регистр букв в имени имеет значение. Counter и counter –
это две разные переменные.
В JavaScript типы переменных не объявляются. Тип переменной определяется по
содержимому. В одном и том же скрипте одна и та же переменная может получать
значения разных типов.
x = "3";
x = 3;
x = "Оценка="+3;
Целые числа:
- десятичные записываются в обычном виде: 255,
- восьмеричные начинаются с символа "0": 043,
- шестнадцатеричные начинаются с символов "0х": 0хFF.
Дробные числа: 3.14 или .314E1
Строковые значения записываются в одинарных или двойных кавычках. Если
внутри строки необходимо вывести кавычку или апостроф, то перед ними ставится
обратный слэш:
'It\'s OK!'
"\"ВАЗ 2109\""
Внутри одинарных кавычек можно использовать без слэша двойные и наоборот:
'Кинотеатр "Кристалл"'
Каждая переменная должна быть описана до своего использования. Для описания
переменных используется ключевое слово var. В описании переменной допускается
присваивание ей начального значения:
var x;
var x=5;
var mes='январь';
JavaScript позволяет описывать переменные в любом месте, но нужно стараться
собирать их в одном месте (в начале скрипта или начале функции). Для того чтобы
переменная была видна из всех скриптов (глобальная переменная), её необходимо описать
в скрипте, расположенном между тэгами <HEAD> и </HEAD> до описания функций. Для
создания локальных переменных, их описывают внутри функций.
Арифметические операции: - , + , *, / , % (остаток от деления):
y = 2*x;
z = y %3;
name="Крокодил "+"Гена"
Для вывода различных сообщений на экран используется функция alert, которая
создаёт информационную панель с одной единственной кнопкой "OK". Пользовтель
читает сообщение, нажимает кнопку и панель убирается с экрана. Общий вид функции:
alert(выражение);
Например:
alert("Привет");
Знак "+" (операция конкатенации или соединения) нужно использовать и в том
случае, если текст сообщения очень длинный и его требуется записать в нескольких
строках:
alert('Язык JavaScript был разработан в 1995 году '+
фирмой Netscape для второй версии'+
' своего браузера');
Но знак соединения не означает, что в этом месте произойдёт разрыв строки на
экране. Он используется лишь для перехода на новую строку в тексте исходного кода
документа. Для принудительного разрыва строки необходимо использовать "\n":
alert('Первая строка. \nВторая строка.');
Браузер Netscape Navigator третьей версии некорректно выводит русские буквы "я" и
"С". Поэтому перед ними рекомендуется ставить слэш:
alert('Перва\я строка. \nВтора\я строка.');
Примеры:
1) var x=48;
var ex="попугаев";
alert(x+" "+ex);
2) var x=2;
var y=3;
alert("Результат="+x*y);
Для передачи информации в документ используется функция prompt:
prompt("надпись","значение по умолчанию");
На экран выводится панель с двумя кнопками (ОК и Отмена). Пользователь
записывает текст в специальном окне ввода и ввода и при нажатии кнопки "ОК"
введённый текст становится значением функции prompt. Если будет нажата кнопка
"Отмена", то функция prompt возвращает значение null:
x=prompt("Сколько будет 2х2?","5");
Так как prompt – это функция, то её результат обязательно должен быть присвоен
какой-либо переменной.
Функции
Когда одну и ту же группу команд необходимо повторить несколько раз в разных
местах программы, используются функции. Описание функции на языке JavaScript
выглядит следующим образом:
function имя_функции(формальные параметры)
{
…….
return значение;
}
Команда return может быть не одна, а может вообще отсутствовать. В последнем
случае функция не возвращает никакого значения и рассматривается как процедура.
Описание функции может располагаться в любом месте скрипта (до и после основной
программы).
Команда вызова функции имеет вид:
имя_функции(фактические параметры);
При вызове функции формальные параметры получают значения фактических.
Параметры всегда передаются по значению, то есть всё, что происходит внутри функции с
формальными параметрами, не оказывает никакого влияния на фактические. Для того,
чтобы вернуть в основную программу значение из функции, необходимо использовать
команду возврата return. Все переменные, которые используются в функции, должны быть
либо описаны внутри функции, либо описаны в основной программе и переданы в
функцию в качестве параметров.
<HTML>
<BODY>
<SCRIPT language=JavaScript>
<!-var x=5;
var y=10;
alert(sum(x,y));
alert(x);
alert(y);
function sum(a,b)
{
a=3;
b=5;
sum=a*b;
return sum;
}
//-->
</SCRIPT>
</HTML>
Будут выведены значения 15, 5, 10.
Задача. Ввести три целых положительных числа и вычислить общее количество их
цифр.
//num – целое положительное число
function SumOfNumber(num)
{
var len=0;
if (num<10) len=1;
else
while (num)
{
num=(num-num%10)/10;
len++;
}
return len;
}
var sum=0;
var num1,num2,num3;
num1=prompt(“Введите первое число”,””);
sum+=SumOfNumber(num1);
num2=prompt(“Введите второе число”,””);
sum+=SumOfNumber(num2);
num3=prompt(“Введите третье число”,””);
sum+=SumOfNumber(num3);
alert(“Общее число цифр в числах:”+sum);
Команда return прерывает выполнения кода функции в том месте, где она стоит.
Например, для вычисления модуля числа a, можно записать следующую функцию:
function abs(a)
{
if (a<0) return –a;
else return a;
}
Но по возможности нужно стараться делать один выход из функции.
Если функция не возвращает никакого значения, то она должна вызываться как
процедура:
function f(x)
{
alert(x);
}
var str=”Это процедура’;
f(x);
При написании программ необходимо осуществлять проверку правильности ввода
значений, иначе результат работы может получиться самый неожиданный. Для этого
иногда удобно использовать функцию parseInt(num,X), где num – это значение
произвольного типа. а X – основание системы счисления (2,8,10,16). Функция преобразует
значение переменной num в число в заданной системе счисления. Если она сталкивается с
неверным символом, то преобразуется часть строки до этого символа (“48 попугаев” будет
преобразовано в 48), а если будет неверной вся строка, то возвращается служебное
значение NaN
Обработка полей формы
Работая с гипертекстовыми документами, пользователь имеет возможность вводить
текст в поле, выбирать альтернативу, отмечать флажком правильный ответ, нажимать
кнопки и т.д. Всё это реализуется с помощью форм. Использование скриптов даёт
возможность анализировать каждое введённое или выбранное значение и реагировать на
них определённым образом. Для этого необходимо самой форме и каждому элементу
формы присвоить имя с помощью атрибута name, что даёт возможность обращения к ним
из скрипта.
Рассмотрим работу с текстовыми полями (text и password)
Пусть задана форма:
<FORM name=anketa>
<INPUT type=text value=”Зима” name=obj>
</FORM>
В
программе
на
JavaScript
можно
использовать
конструкцию
document.anketa.obj.value для доступа к элементу value соответствующего тэга <INPUT>:
var str=document.anketa.obj.value;
document.anketa.obj.value=”Лето”;
Последнее присваивание приведёт к мгновенной перерисовке части экрана, в
котором хранится значение “Зима”. Параметр value определяет текущее состояние
текстового поля. Для доступа к значению атрибута value, установленного по умолчанию,
используется свойство defaultValue. Например, для предыдущего примера значение value
будет равным “Лето”, а значени defaultValue – “Зима”. Кроме этих атрибутов, текстовое
поле ввода может содержать атрибуты maxlength – максимальная длина строки и size –
размер поля. Доступ к ним осуществляется так же, как и для атрибута value. Атрибут
readonly позволяет сделать поле доступным только для чтения.
В форме можно использовать три типа кнопок:
reset – автоматическое возвращение формы в исходное состояние (поля принимают
значения по умолчанию),
submit – отправка формы по указанному адресу,
button – обычная кнопка, не выполняющая какого-либо действия.
Для всех типов кнопок параметр value задаёт надпись на кнопке.
<BODY>
<SCRIPT language=JavaScript>
<!—
var num=0;
var name0=”число нажатий: 0”;
//-->
</SCRIPT>
<H2>Умная кнопка</H2>
<HR>
<FORM name=count>
<INPUT type=button value=”сброс” onclick=”document.count.key.value=name0;
num=0;”>
<INPUT type=button value=”число нажатий: 0” name=key
onclick= ”document.count.key.value=’число нажатий:’+(++num);”>
</FORM>
</BODY>
Данный скрипт при каждом нажатии на вторую кнопку будет выводит количество
нажатий. При нажатии кнопки «сброс» счётчик обнуляется.
Обработчики событий для элементов формы:
OnBlur – наступает, когда элемент формы теряет фокус,
OnChange – наступает, когда поля Select, Text или Textarea теряют фокус, а их
значения были изменены.
onFocus - наступает, когда элемент формы получает фокус,
onSubmit – наступает, когда пользователь нажимает кнопку «Отправить»,
onClick -наступает, когда пользователь щелкает по объекту
Метод: focus() – устанавливает фокус на объект.
Флажки, радиокнопки, меню, многострочное поле
Флажки в форме задаются тэгом:
<INPUT type=checkbox name=имя checked>
Атрибут checked означает, что флажок установлен по умолчанию. Флажки не
зависят друг от друга. Их можно устанавливать и сбрасывать в любой комбинации. У
объекта INPUT при работе с флажками есть свойства checked и defaultChecked. Свойство
checked принимает значение true, когда флажок установлен и false в противном случае.
Свойство defaultChecked принимает значение true, если флажок был установлен по
умолчанию, независимо от его текущего состояния.
<FORM>
<INPUT name=flag type=checkbox checked>
<INPUT type=button value=”checked” onClick=”alert(this.form.flag.checked);”>
<INPUT type=button value=”defaultChecked”
onClick=”alert(this.form.flag.DefaultChecked);”>
</FORM>
С помощью этого кода можно выводить на экран текущее состояние флажка и
состояние, установленное по умолчанию.
В качестве атрибута name в тэгах-флажках можно устанавливать одно и то же имя
для флажков, входящих в группу. В этом случае доступ к отдельному флажку
осуществляется как к элементу массива по номеру:
<FORM>
<INPUT type=reset value=”Сброс”>
Отметьте выражения со значением true:
<BR>
<INPUT type=checkbox name=task> !0&&!””<BR>
<INPUT type=checkbox name=task> !0 | | !”” <BR>
<INPUT type=checkbox name=task> 0&&!””<BR>
<INPUT type=checkbox name=task> 0 | | !”” <BR>
<INPUT type=button value=”Проверить” onClick=”var ans=’неверно’;
if (this.form.task[0].checked&& this.form.task[1].checked&&
!this.form.task[2].checked&& this.form.task[3].checked)
ans=’верно’;
this.form.result.value=ans;”>
<INPUT type=text size=15 name=result value=””>
</FORM>
Радиокнопки предназначены для выбора одного
альтернативных. Для задания радиокнопки используется тэг:
варианта
из
нескольких
<INPUT type=radio name=имя checked>
У объекта INPUT при работе с радиокнопками есть свойства checked и
defaultChecked. Они работают аналогично этим же атрибутам при работе с флажками.
Рассмотрим программу «Умножатель», которая позволяет выбрать два числа из
предложенных списков (по 4 значения в каждом) и получить результат их умножения друг
на друга.
<FORM>
<TABLE border=0>
<TR>
<TD colspan=3>
<INPUT type=reset value=”Сброс”>
</TD>
<TR>
<TD>
<INPUT type=radio name=op1 checked>10
</TD>
<TD>&nbsp;</TD>
<TD>
<INPUT type=radio name=op2 checked>2
</TD>
</TR>
<TR>
<TD>
<INPUT type=radio name=op1 checked>20
</TD>
<TD>&nbsp;* &nbsp;</TD>
<TD>
<INPUT type=radio name=op2 checked>3
</TD>
</TR>
<TR>
<TD>
<INPUT type=radio name=op1 checked>30
</TD>
<TD>&nbsp;</TD>
<TD>
<INPUT type=radio name=op2 checked>4
</TD>
</TR>
<TR>
<TD>
<INPUT type=radio name=op1 checked>40
</TD>
<TD>&nbsp;</TD>
<TD>
<INPUT type=radio name=op2 checked>5
</TD>
</TR>
<TR>
<TD colspan=3>
<INPUT type=button value=”Ответ”
onClick=”var op1=new Array(10,20,30,40);
var op2=new Array(2,3,4,5);
var len=4;
var ind1;
var ind2;
for (var i=len; --i>=0;)
{
if (this.form.op1[i].checked) ind1=i;
if (this.form.op2[i].checked) ind2=i;
}
this.form.result.value=op1[ind1]*op2[ind2];”>
<INPUT type=text size=10 name-result value=””>
</TD>
</TR>
</TABLE>
</FORM>
Блок <SELECT>…</SELECT> вставляет в форму меню или разворачивающийся
список. Обычно меню используют в режиме, когда из нескольких предлагаемых
вариантов можно выбрать только один. В этом случае меню напоминает переключатель с
радиокнопками.
Формат команды:
<SELECT атрибуты>
<OPTION атрибуты>надпись в меню</OPTION>
…
<OPTION атрибуты>надпись в меню</OPTION>
</SELECT>
Атрибуты <SELECT>:
name=имя
size=число видимых строк (по умолчанию – 1)
Атрибуты <OPTION>:
selected – выбор пункта меню по умолчанию.
Свойства <SELECT>:
options – массив объектов, каждый из которых содержит одну строку меню. Каждый
объект из этого массива имеет свойства:
text – текст строки меню
selected -возвращает true, если пункт выбран
defaultSelected -возвращает true, если пункт выбран по умолчанию
length – число элементов в массиве options
seletedIndex – номер выбранной строки меню (совпадает с индексом элемента
массива)
<FORM>
Укажите автора:<BR>
У Лукоморья дуб зелёный,<BR>
Златая цепь на дубе том…<BR>
<SELECT name=menu>
<OPTION selected>Лермонтов</OPTION>
<OPTION>Пушкин</OPTION>
<OPTION>Есенин</OPTION>
</SELECT>
<INPUT type=button value=”Проверить”
onClick=”var ans=’неверно’;
if (this.form.menu.selectedIndex==2)
ans=’верно’;
this.form.result.value=ans;”>
<INPUT type=text size=15 name=result value=””>
</FORM>
Для работы с многострочными текстовыми полями используется тэг:
<TEXTAREA атрибуты>
текст по умолчанию
</TEXTAREA>
Атрибуты тэга:
name=имя
cols=число столбцов
rows=число строк
Свойства тэга:
value – текущее значение. Содержимое value размещается в переменной как одна
текстовая строка; концы строк представляются двумя символами “\r\n”
defaultValue – значение по умолчанию.
<FORM>
Исправьте ошибки:<BR>
<TEXTAREA name=edit rows=7 cols=44>
Покрывало убежало,
Улетела размазня,
И кукушка, как лягушка,
Ускакала от меня.
</TEXTAREA>
<BR>
<INPUT type=reset value=”Восстановить”>
<INPUT type=button value=”value”
onClick=”alert(this.form.edit.value);”>
<INPUT type=button value=”defaultValue”
onClick=”alert(this.form.edit.defaultValue);”>
</FORM>
Рекомендуем также ознакомиться с примерами скриптов по адресу:
http://www.scriptic.ru/form/index.shtml
