1744
.pdf//в переменную seg заносим часы var seg=h
//в переменную seg добавляем минуты
//через «:»
//если минуты меньше 10, то добавляем символ «0» перед
//минутами
seg+=((minute<10)?":0":":")+minute
//в переменную seg добавляем секунды через «:»
//если секунды меньше 10, то добавляем символ «0» перед //секундами
seg+=((sec<10)?":0":":")+sec //выводим время document.write(seg) </script>
На рис.25 показано, как будет выглядеть результат работы
сценария.
Глава 4. ОБРАБОТЧИКИ СОБЫТИЙ
4.1. События
Событие это важное в программировании на JavaScript понятие. Событие может произойти в любом из элементов браузера и документа HTML. Событие это сигнал от браузера о том, что что-то произошло.
Каждое событие имеет собственное имя. Существуют следующие группы событий:
DOM-события, которые инициируются элементами DOM. Например, событие сlick происходит при нажатии на элементе, а событие mouseover когда указатель мыши появляется над элементом. Именно DOM-события связывают действия, происходящие в документе, с кодом JavaScript, тем самым обеспечивая динамический Web-интерфейс.
События окна. Например, событие resize при изменении размера окна браузера.
Другие события, например, load, readystatechange. Они используются, скажем, в технологии AJAX.
В табл. 5 представлены события и элементы документов HTML, в которых эти события могут происходить.
50
|
|
|
|
|
Таблица 5 |
|
|
События и объекты |
|
|
|
|
|
|
|
|
|
|||
Событие |
Объекты |
Когда происходит событие |
||||
1 |
2 |
|
|
3 |
|
|
Abort |
image |
Отказ от загрузки изображения |
|
|||
Blur |
windows, элементы |
Потеря объектом фокуса |
|
|||
|
формы |
|
|
|
|
|
Change |
text, textarea, select |
Изменение значения элемента |
|
|||
Click |
button, radio, checkbox, |
Щелчок на элементе или связи |
|
|||
|
submit, reset, link |
|
|
|
|
|
DragDrop |
windows |
Перетаскивание мышью объекта в |
|
|||
|
|
окно браузера |
|
|
|
|
Error |
image, windows |
Ошибка |
при |
загрузке |
документа |
|
|
|
или изображения |
|
|
||
Focus |
windows, элементы |
Окно |
или |
элемент |
формы |
|
|
формы |
получает фокус |
|
|
||
KeyDown |
document, image, link, |
Нажатие клавиши клавиатуры |
|
|||
|
textarea |
|
|
|
|
|
KeyPress |
document, image, link, |
Удержание |
нажатой |
клавиши |
|
|
|
textarea |
клавиатуры |
|
|
|
|
KeyUp |
document, image, link, |
Отпускаются клавиши клавиатуры |
|
|||
|
textarea |
|
|
|
|
|
Load |
Тело документа |
Загружается документ в браузер |
|
|||
MouseDown |
document, button, link |
Нажатие кнопки мыши |
|
|
||
MouseOut |
area, link |
Перемещение курсора из области |
|
|||
|
|
изображения или связи |
|
|
||
MouseOver |
link |
Перемещение курсора над связью |
|
|||
MouseUp |
document, button, link |
Отпускается кнопка мыши |
|
|||
Move |
windows |
Пользователь |
или |
сценарий |
|
|
|
|
перемещает окно |
|
|
||
Reset |
form |
Нажатие кнопки «Reset» формы |
|
|||
Resize |
windows |
Пользователь |
или |
сценарий |
|
|
|
|
изменяет размеры окна |
|
|
||
Select |
text, textarea |
Выбирается поле ввода элемента |
|
|||
|
|
формы |
|
|
|
|
Submit |
form |
Нажатие кнопки «Submit» формы |
|
|||
Unload |
Тело документа |
Пользователь закрывает документ |
|
|||
51
4.2. Назначение обработчиков событий
Обработчик событий – это сценарий, который управляет событиями. Обработчики событий дают указания браузеру выполнить определенные действия при наступлении определенных событий.
Например, текстовые и графические ссылки имеют событие onMouseOver, которое происходит при наведении указателя мыши на ссылку. Для этого определяется обработчик событий как параметр дескриптора HTML (в начало имени события добавляется ключевое слово on) и добавляется оператор JavaScript, управляющий событием, в кавычках.
Например, определим дескриптор графической ссылки с
обработчиком событий:
<img src= "risunok.gif " onMouseOver= "HighLight()">
Приведем пример обработки еще одного события Load, которое связано с объектом document и происходит после окончания загрузки Web-страницы (включая все рисунки). Определим его обработчик события в дескрипторе <BODY>, состоящий в отображении сообщения по окончании загрузки страницы:
<BODY onLoad="alert('Загрузка страницы завершена')"> Следует отметить, что JavaScript – однопоточный язык, поэтому
обработчики всегда выполняются последовательно и в общем потоке. Это значит, что при установке обработчиков двух событий, которые возникают на элементе одновременно, например mouseover (мышь появилась над элементом) и mousemove (мышь двигается над элементом), их обработчики будут выполнены последовательно.
Более удобным способом для управления событием является использование функции, т.к. имена функций короткие и позволяют выполнять несколько операторов.
4.3. Использование обработчиков событий в элементах форм
Сценарии JavaScript часто применяются для предварительной обработки данных, введенных пользователями в формах. Проверенные данные затем могут передаваться расширениям CGI сервера Web. Кроме того, с помощью форм и сценариев JavaScript можно создавать активные страницы, способные получать от пользователя и обрабатывать произвольную информацию.
52
4.3.1. Формы на Web-странице
Рассмотрим основные элементы форм ведения данных подробнее.
1) Определение формы: <FORM NAME="Имя_формы" TARGET="Имя_окна"
ACTION="Адрес_URL_расширения_сервера" METHOD=GET или POST onSubmit="Обработчик_события_Submit"> </FORM>
Определяется форма с указанным именем. Это имя нужно для адресации формы как свойства объекта document.
Назначение параметра TARGET аналогично назначению этого же параметра в теге <A>. Когда форма используется для передачи запроса расширению CGI сервера Web, то ответ, полученный от сервера, отображается в окне. Имя этого окна задано параметром TARGET. Если ответ должен отображаться в том же окне, что и форма, то параметр TARGET задавать не нужно.
С помощью параметра ACTION указывается адрес URL загрузочного файла программы CGI, а также передаваемые расширению параметры. В том случае, когда форма предназначена для передачи данных расширению сервера Web, параметр ACTION является обязательным. Но если данные, введенные в форме, обрабатываются сценарием JavaScript локально и не передаются серверу Web, этот параметр можно опустить.
Параметр METHOD задает метод передачи данных из формы расширению сервера Web и может принимать значения GET или POST. Если данные из полей формы обрабатываются сценарием JavaScript локально, параметр METHOD задавать не нужно.
Помимо параметров для формы можно определить обработчик события, связанный с кнопкой типа SUBMIT. Такая кнопка предназначена для посылки данных из заполненной формы расширению сервера Web.
2) Элемент формы – Кнопка:
<INPUT TYPE="BUTTON" NAME="Имя кнопки" VALUE="Надпись на кнопке">
53
Пример
<INPUT TYPE="BUTTON" NAME="Color" VALUE="Цвет фона">
На рис.26 показано, как будет выглядеть результат работы сценария.
Рис. 26. Вид Web-страницы в окне браузера
3) Элемент формы – Окно для ввода текста: <TEXTAREA NAME="Имя_окна_ввода текста"
COLS="Ширина_окна" ROWS="Высота_окна"> . . . </TEXTAREA>
Пример
<H3> Окно ввода: <BR>
<TEXTAREA NAME="Moe" ROWS=5 COLS=30> </TEXTAREA>
</H3>
На рис.27 показано, как будет выглядеть результат работы сценария.
Рис. 27. Вид Web-страницы в окне браузера
4) Элемент формы – Раскрывающийся список: <SELECT>
<OPTION VALUE="a"> Пункт 1
54
<OPTION VALUE="b"> Пункт 2
. . .
</SELECT>
Пример
<SELECT>
<OPTION VALUE="a"> Первый <OPTION VALUE="b"> Второй <OPTION VALUE="с"> Третий <OPTION VALUE="d"> Четвертый </SELECT>
На рис.28 показано, как будет выглядеть результат работы сценария.
Рис. 28. Вид Web-страницы в окне браузера
5) Элемент формы – Раскрывающийся список с заданным количеством пунктов, видимых на экране:
<SELECT MULTIPLE NAME="Имя Меню" SIZE="Количество пунктов">
<OPTION VALUE="a"> Пункт 1 <OPTION VALUE="b"> Пункт 2
. . .
</SELECT>
Пример
<SELECT MULTIPLE NAME="Меню" SIZE="2"> <OPTION VALUE="a"> Первый
<OPTION VALUE="b"> Второй <OPTION VALUE="с"> Третий <OPTION VALUE="d"> Четвертый </SELECT>
55
На рис.29 показано, как будет выглядеть результат работы сценария.
Рис. 29. Вид Web-страницы в окне браузера
6) Элемент формы – Строка для ввода текста:
<INPUT TYPE="Text" NAME="Имя строки" SIZE="Длина строки в символах">
Пример
Строка ввода:
<INPUT TYPE="Text" NAME="Строка" SIZE="23">
На рис.30 показано, как будет выглядеть результат работы сценария.
Рис. 30. Вид Web-страницы в окне браузера
7) Элемент формы – Флажок:
<INPUT TYPE="CHECKBOX" NAME="Имя флажка" VALUE="Значение" CHECKED>
С помощью параметра VALUE вы можете определить строку, которая передается расширению сервера при посылке заполненной формы, если переключатель находится во включенном состоянии. Если этот параметр не указан, то по умолчанию посылается строка "on". Сценарий JavaScript также может получить значение параметра
VALUE.
Необязательный параметр CHECKED указывается в том случае, если при начальном отображении формы переключатель должен отображаться во включенном состоянии.
56
Пример
<INPUT TYPE="CHECKBOX" NAME="F1"> JavaScript
На рис.31 показано, как будет выглядеть результат работы сценария.
Рис. 31. Вид Web-страницы в окне браузера
8) Элемент формы – Строка для ввода пароля:
<INPUT TYPE="Password" NAME="Имя строки" SIZE="Длина строки в символах">
Пример
Пароль: <INPUT TYPE="Password" NAME="Р" SIZE="5">
На рис.32 показано, как будет выглядеть результат работы сценария.
Рис. 32. Вид Web-страницы в окне браузера
9) Элемент формы – Переключатель:
<INPUT TYPE="Radio" NAME="Имя" VALUE="Значение" CHECKED>
Все переключатели radio, принадлежащие к одной группе, должны иметь одинаковые имена, определенные параметром NAME. Для того, чтобы расширение сервера Web или сценарий JavaScript, обрабатывающие форму, могли узнать, какой же из переключателей radio группы находится во включенном состоянии, все такие переключатели должны иметь различные значения VALUE. Кроме того, только один из переключателей radio может быть определен с параметром CHECKED.
57
Пример
Производится выбор одного переключателя из группы – в этом случае имена NAME одинаковые (CHECKED – переключатель сразу выбран по умолчанию).
<INPUT TYPE="Radio" NAME="S1" VALUE="Первый">
Первый <BR>
<INPUT TYPE="Radio" NAME="S1" VALUE="Второй"> Второй <BR>
<INPUT TYPE="Radio" NAME="S1" VALUE="Третий" CHECKED> Третий
На рис.33 показано, как будет выглядеть результат работы сценария.
Рис. 33. Вид Web-страницы в окне браузера
Пример
Производится выбор нескольких переключателей из группы – в этом случае имена NAME разные.
<INPUT TYPE="Radio" NAME="S1" VALUE="Первый">
Первый <BR>
<INPUT TYPE="Radio" NAME="S2" VALUE="Второй"> Второй <BR>
<INPUT TYPE="Radio" NAME="S3" VALUE="Третий"> Третий На рис.34 показано, как будет выглядеть результат работы
сценария.
Рис. 34. Вид Web-страницы в окне браузера
58
10) Элемент формы – Кнопка «Отправление формы» и кнопка «Очистка формы»:
<INPUT TYPE="SUBMIT" VALUE="Надпись на кнопке"> –
Кнопка «Отправление формы»
<INPUT TYPE="RESET" VALUE="Надпись на кнопке"> –
Кнопка «Очистка формы»
Пример
<P ALIGN=CENTER>
<TEXTAREA NAME="Text" ROWS=5 COLS=30> </TEXTAREA> <BR>
<INPUT TYPE="SUBMIT" VALUE="Переслать форму"> <INPUT TYPE="RESET" VALUE="Очистить форму">
На рис.35 показано, как будет выглядеть результат работы сценария.
Рис. 35. Вид Web-страницы в окне браузера
4.3.2. Использование обработчиков событий в формах
Обработчики событий в формах используются аналогично тому, как это было описано в п.4.2.
Например, для обработки события сlick на кнопке, можно назначить обработчик onClick, выводящий диалоговое окно с сообщением «Спасибо!»:
<form>
<input type="button" value="Нажми Меня" onClick="alert('Спасибо!')">
</form>
59