Упражнения

1. Написать сценарий, отображающий в отдельном окне браузера сразу же после загрузки в него страницы все формы (свойство name) и все элементы управления в каждой из них с их названием и значением (свойства name и value), а для элемента SELECT отобразить его свойство name и все элементы списка со значением их свойств value, например:

form1

1. txt1: *****

2. chk1: yes

3. radio1: yes

4. radio1: no

form2

1. txt1: xxxxxx

2. select1:

val1

val2

3. txt2: yyyyyy

. . .

2. Реализовать эмуляцию взаимодействия страницы HTML с серверной программой, регистрирующей пользователя. На странице HTML пользователь вводит имя, фамилию, пароль и адрес электронной почты. Заполнение всех полей обязательно. Перед отсылкой данных на "сервер" следует проверить правильность ввода адреса электронной почты (наличие двух частей, разделенных символом @). Эмуляцию серверной программы осуществить сценарием JavaScript, встроенном в другую страницу HTML, адрес которой указывается в атрибуте ACTION открывающего тега элемента FORM. Сценарий должен сформировать страницу, приветствующую пользователя по имени и фамилии и сообщающем ему в табличной форме с каким браузером он работает, его версию, а также наименование операционной системы (используйте объекты location и navigator).

3. Написать функцию, отображающую с помощью метода alert() объекта window значения свойств объекта body с префиксами client, offset и scroll. Вызвать ее из начала, середины и конца большого документа, отображаемого как минимум на трех экранах. Проанализировать полученные результаты.

4. Напишите универсальную функцию проверки значений, вводимых пользователем в текстовых полях формы на соответствие вещественному числу. Под универсальностью функции понимается тот факт, что ее можно использовать для любого однострочного текстового поля любой формы. Если пользователь ввел не вещественное число, то следует поле следует очистить и установить в него указатель мыши, сообщив о неправильном вводе пользователя.

Урок 12. Обработка событий в ms Internet Explorer Обработчики событий

Интерактивные страницы HTML реагируют на действия пользователя. Например, при нажатии на кнопку появляется диалоговое окно с сообщением, или выполняется проверка правильности введенных пользователем данных в полях формы.

В JavaScript подобная интерактивность реализована, как и в других системах программирования, возможностью перехвата и обработки событий, возникающих в результате действий пользователя или системы. Для этого в теги практически всех элементов HTML (объектов с точки зрения JavaScript) были введены атрибуты обработки событий, задающие действия, выполняемые при возникновении события, связанного с этим элементом HTML. Имя атрибута обработки события начинается с приставки on, за которым следует название события. Если событием является, например, щелчок кнопкой мыши click, то соответствующий атрибут обработки этого события называется onclick; если обрабатываемым событием является нажатие кнопки мыши mousedown, то атрибут называется onmousedown.

Информация о некоторых событиях некоторых элементов HTML приведена в следующей таблице.

Событие	Применяется к объектам	Когда происходит событие
abort	image	Пользователь отказывается от загрузки изображения
blur	window, body и все объекты формы	Потеря объектом фокуса
change	text, textarea, select	Пользователь изменяет значение элемента
click	Все элементы HTML	Щелчок на элементе HTML
error	image, window	Загрузка документа или изображения вызывает ошибку
focus	window , body и все объекты формы	Окно или элемент формы получает фокус
keydown	Все элементы HTML	Пользователь нажимает клавишу клавиатуры
keypress	Все элементы HTML	Пользователь удерживает нажатой клавишу клавиатуры
keyup	Все элементы HTML	Пользователь отпускает клавишу клавиатуры
load	Тело документа	Загружается документ в браузер
mousedown	Все элементы HTML	Пользователь нажимает кнопку мыши
mousemove	Все элементы HTML	Пользователь перемещает указатель мыши в области элемента
mouseout	Все элементы HTML	Пользователь перемещает указатель мыши из области элемента
mouseover	Все элементы HTML	Пользователь перемещает указатель в область элемента
mouseup	Все элементы HTML	Пользователь отпускает кнопку мыши
mousewheel	Все элементы HTML	Пользователь крутит колесико мыши
move	Относительно или абсолютно позиционированный элемент	Пользователь или сценарий перемещает элемент
reset	form	Пользователь нажимает кнопку Reset формы
select	body, text, textarea	Пользователь выбирает поле ввода элемента формы или выделяет часть документа
submit	form	Пользователь нажимает кнопку Submit формы
unload	body, frameset, window	Пользователь закрывает документ

Хорошим стилем программирования является оформление действий, выполняемых при обработке событий, в виде процедур.