Обработчики событий
С помощью обработчиков событий, представляющих собой введенные в стандарт HTML дополнительные атрибуты для всех элементов HTML, реализуется реакция отображаемого в обозревателе Интернета документа на действия пользователя или системы. По-существу с их помощью документ становится "живым", реализуя событийно-управляемое приложение.
Имя обработчика начинается с приставки on, за которым следует имя самого события (о возможных событиях и их названиях см. в уроке 11):
xnclick обработчик события click (щелчок мышью)
xnmouseover обработчик события mouseover (наведение указателя мыши на элемент HTML)
Значением атрибута, соответствующего обработчику события, является код JavaScript. Обычно в нем задается вызов функции, реализующей "реакцию" страницы на действия пользователя, но может быть задана и целая последовательность операторов:
<p xnmouseover="color(this)" xnmouseout="color(this)" xnclick="click++; myFunc();">. . . </p>Функция или процедура - это именованная последовательность операторов, которая выполняет определенную задачу и может возвращать некоторое значение, определяемое операцией return (если такой операции в теле функции нет, то ее возвращаемым значением будет специальное значение undefined):
function имя_функции([параметры]) { [операторы JavaScript] [return значение]}Определение необходимых функций следует осуществлять в элементах SCRIPT, расположенных в элементе HEAD документа, так как они становятся доступными уже в начале обработки документа (содержимое элемента HEAD обрабатывается первым).
| Пример 3. Сценарий, вычисляющий время обработки документа |
| В этом примере представлен документ HTML со всеми возможными способами внедрения кода сценария JavaScript, реализующий вычисление времени обработки браузером документа HTML и отображения этой информации в диалоговом окне. Для вычисления общего времени обработки документа в сценарии, расположенном в элементе HEAD, задается переменная tBegin, в которой хранится время начала обработки документа (не считая времени, ушедшего на обработку тега <HEAD> и самого тега <SCRIPT>). Второй элемент SCRIPT подключает файл 3.js, в котором находится определение функции time(), возвращающей текущую дату. Эта функция вызывается в сценарии третьего элемента SCRIPT, расположенного в теле документа HTML (элемент BODY). В нем для отображения на странице полученной функцией time() даты используется метод write() объекта document обозревателя. Этот объект представляет всю загруженную в обозреватель страницу, и в момент ее формирования указанным методом можно "писать" на страницу все, что требуется. Однако после завершения обработки документа (при этом генерируется событие load объекта document) запись этим методом в документ приведет к тому, что в нем будет содержаться только то, что записано этим методом. Для определения времени завершения обработки документа обозревателем используется упоминавшееся событие load и в обработчике события xnload элемента BODY создается переменная tEnd, в которой и хранится время завершения обработки документа. Для получения общего времени обработки документа по щелчку на кнопке выполняется код, определенный в ее обработчике события xnclick, который вычисляет разность между временем, хранящемся в переменных tBegin и tEnd и отображает результат функцией alert(). <HEAD><SCRIPT LANGUAGE="JavaScript"><!--// Объявление переменной tBegin и инициализация ее// объектом Date, содержащим текущие дату и времяvar tBegin = new Date(); //--></SCRIPT> <SCRIPT SRC=3.js LANGUAGE="JavaScript"></SCRIPT></HEAD> <BODY xnload="tEnd = new Date();"> <P>Начинается отображение страницы, в которую внедрен сценарий JavaScript.</P> <p>Следующая строка сгенерирована внедренным сценарием:</p> <hr><SCRIPT><!--document.write("<p>Сегодня <b>", time(), "</b></p>");//--></SCRIPT><hr> <input type=button xnclick="delta = tEnd.getTime()-tBegin.getTime(); s = 'Время обработки документа:\n'+delta+ ' миллисекунд'; alert(s)" value="Время обработки документа"> </BODY> Файл 3.js располагается в том же каталоге, что и файл документа HTML, и содержит следующий код JavaScript, определяющий функцию получения текущей даты в форме число.месяц.год. |
| Упражнение 1. | |
| Напишите сценарий, который при загрузке документа в браузер формирует его содержимое, представляющее отображенным в виде элемента H1 предложение "Привет, читатель!" и в виде абзаца строку "Сегодня, дата, ты начинаешь изучать динамический HTML.". Вместо дата сценарий должен подставлять текущую дату в формате мм.дд.гггг. |
| Упражнение 2. | |
| Сценарий, формирующий страницу HTML упражнения 1, сохранить в отдельном файле и подключить его к документу HTML через атрибут SRC открывающего тега элемента SCRIPT. Подключение выполнить, когда файл сценария располагается в том же каталоге, что и документ HTML, а также в подкаталоге каталога документа HTML и в подкаталоге каталога, содержащего каталог с документом HTML. |
| Упражнение 3. | |
| Напишите сценарий, в котором создается переменная currentDate со значением текущей даты и сразу же после обработки страницы браузером ее содержимое отображается с помощью функции alert(). |
| Упражнение 4. | |
| Создайте страницу с кнопкой и напишите сценарий, реализующий отображение функцией alert() при щелчке на кнопке количество миллисекунд, прошедших от начала загрузки документа в браузер и до момента нажатия кнопки пользователем (каждое нажатие должно отображать увеличивающийся интервал). |
| Упражнение 5. | |
| Повторите упражнение 3, но только отсчет интервала времени следует вести от момента завершения обработки страницы браузером. |
Дата добавления: 2016-02-11; просмотров: 726;