Материал: Web-дизайн. лабораторный практикум. Суворов А.П., Проценко В.Н

Все элементы формы порождают соответствующие объекты, подчиненные объекту родительской формы. Таким образом, для ссылки на объект text (с параметром name = text1) формы form1 можно пользоваться любым из нижеприведенных операторов:

document.forms[0].text1; document.forms["form1"].text1; document.form1.text1;

Кроме имени элементы формы, имеют свойство value, значение которого определяется смыслом атрибута value элемента формы. Например, для элементов text и textarea значением этого свойства будет строка содержимого полей ввода этих элементов; для кнопки подтверждения - надпись на кнопке и т.д. Обратиться к свойству value можно по тому же принципу, например:

document.form1.text1.value

1.3.7. Обработка событий

Использование языка JavaScript при обработке событий значительно расширило возможности языка HTML. Чаще всего программы создаются для обработки информации, вводимой пользователем в поля форм. Возможности управления элементами форм обеспечиваются главным образом за счет функций обработки событий, которые могут быть заданы для всех элементов формы. События делятся на несколько категорий:

события, связанные с документами (события документа) - загрузка и выгрузка документов;

события, связанные с гиперсвязью (события гиперсвязи) - помещение указателя мыши на гиперсвязь и активизация гиперсвязи;

события, связанные с формой (события формы) –

o щелчки мыши на кнопках;

o получение и потеря фокуса ввода и изменение содержимого полей ввода, областей текста и списков;

o выделение текста в полях ввода и областях текста;

События, связанные с документами, возникают при загрузке и выгрузке документа, в то время как события гиперсвязей возникают при их активизации или при помещении на них указателя мыши. Чтобы обеспечить перехват события, необходимо написать функцию-обработчик события. В качестве обработчиков событий могут быть заданы целые функции языка JavaScript или только группы из одного или нескольких операторов. В таблице перечислены имена событий и условия их возникновения:

45

Атрибут onClick

Атрибут onClick может использоваться в следующих тегах HTML:

•<a herf=”url” onClick=" function()">. . .</a>

•<input type="checkbox" onClick=" function()">

•<input type="radio" onClick="function()">

•<input type="reset" onClick=" function()">

•<input type="submit" onClick=" function()">

•<input type="button" onClick=" function()">

Операторы языка JavaScript, заданные в атрибуте onClick, выполняются при щелчке мыши на таких объектах как гиперсвязь, кнопка перезагрузки формы или контрольный переключатель. Для контрольных переключателей и селекторных кнопок событие Click возникает не только при выборе элемента, но и при разблокировании.

Разберем пример использования атрибута onClick для кнопок, определенных тегами

46

<input type="button"> в контейнере <form> . . . </form>:

…

<script language="JavaScript"> function but1() {

alert("Вы нажали первую кнопку");

}

function but2() {

alert("Вы нажали вторую кнопку");

}

</script>

…

<form>

<input type="button" value="Первая кнопка" onClick="but1()"> <input type="button" value="Вторая кнопка" onClick="but2()">

</form>

Работа с меню

Список в форме задается с помощью объекта select, обработка событий выполняется с помощью следующих параметров:

Рассмотрим следующий пример:

<script language="JavaScript"> function selectBlur()

{

document.myForm7.myText.value="Вы нажали поле вне списка ";

}

function selectFocus()

{

document.myForm7.myText.value="Вы нажалиту же кнопку ";

}

function selectChange()

{

document.myForm7.myText.value="Вы нажали другую кнопку ";

}

</script>

<form name="myForm7">

<input type="text" name="myText" size=40 value="Город"><br>

47

<select name="script" multiple onBlur="selectBlur()" onFocus="selectFocus()" onChange="selectChange()">

<option value="town1" selected>Париж <option value="town2">Лондон <option value="town3">Рим <option value="town4">Берлин

</select>

</form>

Управление логикой программного кода при помощи событий

В объектно-ориентированном программировании нет единой структуры управления работой программы. Есть независимые друг от друга объекты. Когда пользователь щелкает, например, по ссылке на экране, браузер передает событие Click объекту, тега <a>. Для события “щелчок мыши” в этом объекте предусмотрен стандартный обработчик — он загружает в окно новый документ.

Давайте попробуем “перехватить” это событие:

<a href=”page1.htm” onClick="alert ('Хода нет?')">документ page1</a>

Если щелкнуть по ссылке, на экране возникнет надпись “Хода нет?”. Событие перехвачено, но, при закрытии окна alert, видим, что браузер попрежнему грузит документ page1.htm. При помощи атрибута onClick мы установили в объекте, “отвод” на собственный обработчик. Но когда скрипт нашего обработчика выполнен, управление возвращается к стандартному обработчику, и это вызывает загрузку документа page1.htm.

Отключение стандартной обработки кодируется так:

<a href=page1.htm onClick="alert ('Хода нет!'); return false">документ page1</a>

Оператор return указывает возвращаемое функцией значение. Если ее операнд true, то документ загружается, если false, нет.

Подтверждение активизации гиперсвязи.

Аналогичный пример управления логикой программного кода при помощи событий рассмотрен и в следующем примере. Гиперссылка обычно всегда срабатывает по клику мыши, но иногда нужно, чтобы пользователь был уверен, что хочет перейти по ссылке в следующий документ. Для этого существует метод confirm(), который отображает на экране окно сообщения с кнопками "Ok" и "Cancel". Для перехвата события в теге <a href= ... > мы применим событие onClick. Рассмотрите пример подтверждения активизации гиперсвязи:

<a href="form.htm" onClick="return confirm('Вы действительно хотите перейти по ссылке?')"> Подтверждение активизациигиперсвязи</a>

48

Определение событий формы

Объект form имеет два обработчика событий: onSubmit и onReset. В эти обработчики событий, задаваемые в пределах дескриптора <form>, добавляется группа операторов JavaScript или функция, управляющая формой.

Если вы добавите оператор (или функцию) в обработчик onSubmit, то он (или она) вызывается до отправки данных в сценарий CGI. Для того чтобы отменить отправку данных на обработку сценарием CGI, обработчик событий onSubmit должен возвратить значение false. Если же он возвращает значение true, то данные отправляются на сервер. В некоторых случаях необходимо добавить в форму кнопку reset, запускающую обработчик событий onReset.

Для формы одним из важных действий на странице является проверка правильности заполнения полей пользователем на машине клиента до пересылки их на сервер. В следующем примере разъясняется, как выполнять эту процедуру.

Рассмотрим скрипт, который будет проверять правильность заполнения формы. Необходимо проверить: нет ли пустых строк и правильно ли введен e-mail:

<html>

<head>

<title>пример формы</title> <script language="JavaScript"> function doSend(){

var v=document.user.e.value.indexOf("@",1) if(document.user.f.value==""){

alert('Вы должны заполнить поле ФИО') document.user.f.focus()

}

if(document.user.a.value==""){

alert('Вы должны заполнить поле адреса') document.user.a.focus()

}

if(document.user.e.value==""){

alert('Вы должны заполнить поле e-mail') document.user.e.focus()

}

if(v==-1){

alert('Адрес e-mail указан неверно') document.user.e.select() document.user.e.focus()

}

else document.user.submit()

49