Cправочник web-дизайнера / javascr6

My home page Программирование обработки событий в языке JavaScript Для совместимости с языком JavaScript в теги HTML были введены специальные атрибуты обработки событий. Когда пользователь совершает некоторое действие, такое как, например, щелчек на гиперсвязи или передача данных формы HTML на сервер, генерируется событие, которое может быть перехвачено интерпритатором JavaScript и затем соответствующим образом обработано.

Программирование обработки событий с использованием языков JavaScript и HTML Основной метод ввода информации в языке JavaScript основан на использовании форм HTML. Формы являются контейнерами, содержащими различные объекты (такие как поля ввода, многострочные поля ввода, меню, поля списка и кнопки). С каждым из указанных объектов можно связать определенное событие. Одним из важных событий, связанных с вводом информации в поля, является проверка правильности ввода. К основным типам событий, которые могут обрабатываться в языке JavaScript, относятся следующие: Click(нажатие), Focus(фокус) и Blur (потеря фокуса), MouseOver(курсор мыши на объекте) и Select(выбор). События в языке JavaScript и объекты, которые реализуются тегами HTML, взаимосвязаны следующим образом:

- События Click: кнопки, селекторные кнопки, контрольные переключатели, кнопки передачи на сервер, кнопки сброса и гиперсвязи

- События Focus, Blur и Change: поля ввода, многострочные поля ввода, поля списка и меню

- Событие MouseOver: гиперсвязи

- События Select: поля ввода и многострочные поля ввода.

Обработчики событий и методы их вызова Имя событияСобытие наступает, когда:Обработчик события Событие changeПользователь вносит изменения в поле ввода текста, многострочное поле ввода текста или в выбранный элементonChange Событие blurПользователь убирает фокус ввода с элементаonBlur Событие clickПользователь нажимает кнопку мыши, когда ее курсор находится на элементе или гиперсвязиonClick Событие focusПользователь переносит фокус ввода на элемент формы onFocus Событие loadПользователь загружает страницу в броузер Netscape onLoad Событие mouseoverПользователь помещает курсор мыши на гиперсвязь onMouseOver Событие selectПользователь осуществляет выбор элемента формы onSelect Событие submitПользователь передает форму на серверonSubmit Событие unloadПользователь выходит из страницыonUnload Атрибуты обработки событий onBlur Применим к:

- <input type=text>

- <textarea>...</textarea>

Описание:

Атрибутом обработки события onBlur задается программа на языке JavaScript, которая выполняется, когда пользователь "покидает" поле, для которого был задан атрибут onBlur (либо при активизации другого поля, либо при попытке покинуть данное поле с помощью нажатия на клавишу [Tab]). Атрибут onBlur особенно полезен для реализации функций, проверяющих правильность ввода информации.

Пример 19

onChange Применимо к:

- <select>..<option>..</select>

- <input type=radio>

- <textarea>...</textarea>

Описание:

Служит для обработки события, которое генерируется при внесении пользователем изменения в одно из полей HTML. Первое изменение содержимого поля не считается событием Change. Это событие активизируется только после того, как было изменено ранее внесенное значение.

Пример 20

onClick Применимо к:

- <a href>...</a>

- <input type=checkbox>

- <input type=radio>

- <input type=reset>

- <input type=submit>

Описание:

С помощью атрибута обработки события onClick задается код языка JavaScript, который должен выполняться, когда пользователь щелкнет на гиперсвязи, кнопке сброса или конторольном переключателе. Для контрольных переключателей и селекторных кнопок событие onClick будет генерироваться при выборе соответствующего объекта. Простейший способ использования события onclick - включение его в контейнер <form>..</form> тега <input type=button>.

Пример 21

onFocus Применимо к:

<input type=text>

Описание:

Атрибут обработки события onFocus позволяет связать событие с получением фокуса данным полем. В броузере Netscape поле формы получает фокус в том случае, когда пользователь выбирает данное поле с помощью нажатия на кнопку мыши либо осуществляет переход в данное поле с помощью клавиши [Tab]. Выделение информации в поле с помощью мыши не считается событием, приводящим к получению фокуса данным полем.

onLoad Применимо к:

- <body>...</body>

- <frameset>..<frame>..</frameset>

Описание:

Атрибут onLoad можно поместить в контейнер HTML <body>, чтобы вызывать определенные функции языка JavaScript, когда броузер Netscape закончит загрузку текущего документа. Событие генерируется, когда броузер Netscape завершает загрузку текста HTML-документа в текущее окно или в кадр документа с набором кадров. Документ с набором кадров - это такой документ, в котором задано разбиение окна на отдельные области и в каждой из таких областей отображается отдельный документ.

onMouseOver Применимо к:

- <a href>...</a>

Описание:

Этот атрибут позволяет инициализировать выполнение определенных операторов языка JavaScript в том случае, когда курсор мыши попадает на активную гиперсвязь, для которой задан атрибут onMouseOver. После того как пользователь поместит курсор мыши на данную гиперсвязь, появляется сообщение в строке состояния, которое остается в ней до тех пор, пока его не сменит какое-нибудь другое. События onMouseOver весьмя полезны для организации смены сообщений в строке состояния с помощью свойства window.status; их можно также использовать для обновления информации в полях ввода, пока пользователь принимает решение о том, активизировать ли ему данную гиперсвязь.

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

Пример 22

onSelect Применимо к:

- <input type=text>

- <textarea>...</textarea>

Описание:

Атрибут onSelect задает обработку события, связанного с данным полем, в том случае, когда пользователь выберет текст, содержащийся в данном поле. Под выбором подразумевается не просто щелчок кнопкой мыши в этом поле, а выделение текста в нем с помощью мыши.

onSubmit Применимо к:

- <form>...</form>

Описание:

Атрибут onSubmit используется для подтверждения правильности ввода информации в форму HTML. В зависимости от того, какое значение (true или false) будет возвращать функция языка JavaScript, вызов которой задан атрибутом обработки события onSubmit, будет либо не будет осуществляться передача данных формы на сервер (здесь "передача" - действия, которые выполняются в результате щелчка на кнопке, заданной тегом <input type=submit>). Эта кнопка присутствует во всех формах, данные которых должны передаваться на удаленный Web-сервер.

onUnload Применимо к:

- <body>...</body>

- <frameset>..<frame>..</frameset>

Описание:

Атрибут onUnload является обратным по отношению к атрибуту onLoad. Атрибут onUnload позволяет задать вызов функции языка JavaScript для случая, когда пользователь покидает данный документ. Этот атрибут обработки события можно применять в документах Netscape, содержащих набор кадров.

События, генерируемые при нажатии кнопок Кнопки являются весьма полезными инструментальными средствами. Пользуясь кнопками, пользователь может вызывать те или иные функции языка JavaScript вручную. Атрибут onClick специально предназначен для обработки событий, связанных с кнопками. Кнопку, при щелчке на которой вызывается функция, задаваемая этим атрибутом, можно поместить на экран с помощью тега вида:

<form...>

<input type="button"..onClick="function();">

...

</form>

По умолчанию с помощью тега <input...type="button"> на экране создается маленький прямоугольный участок серого цвета, на котором пользователь может выполнить щелчек кнопкой мыши для вызова определенного кода на языке JavaScript (как правило,это функция, содержащая последовательность операторов языка Javascript). Такая кнопка должна быть обозначена с помощью некоторого текста, описывающего ее назначение. Этот текст задается атрибутом value.

Пример 23

Контрольные вопросы Разработка динамических HTML-документов (методы write() и writeln()).

Использование метода prompt. Для чего он применяется?

Получение доступа к переменным в которых хранятся значения даты и времени.

Написание процедур обработки событий.

Проверка правильности заполнения форм.

Локальное управление передачей данных формы на сервер.

Закрепление функции языка JavaScript за объектами пользовательского интерфейса.

События, генерируемые при нажатии кнопок.