Обработчики событий

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

Имя обработчика начинается с приставки on, за которым следует имя самого события (о возможных событиях и их названиях см. в уроке 11):

onclick обработчик события click (щелчок мышью)

onmouseover обработчик события mouseover (наведение указателя мыши на элемент HTML)

Значением атрибута, соответствующего обработчику события, является код JavaScript. Обычно в нем задается вызов функции, реализующей "реакцию" страницы на действия пользователя, но может быть задана и целая последовательность операторов:

<p onmouseover="color(this)"

onmouseout="color(this)"

onclick="click++; myFunc();">. . . </p>

Функция или процедура– это именованная последовательность операторов, которая выполняет определенную задачу и может возвращать некоторое значение, определяемое операцией return (если такой операции в теле функции нет, то ее возвращаемым значением будет специальное значение undefined):

function имя_функции([параметры]) {

[операторы JavaScript]

[return значение]

}

Определение необходимых функций следует осуществлять в элементах SCRIPT, расположенных в элементе HEAD документа, так как они становятся доступными уже в начале обработки документа (содержимое элемента HEAD обрабатывается первым).

4Пример 3. Сценарий, вычисляющий время обработки документа

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

Для вычисления общего времени обработки документа в сценарии, расположенном в элементе HEAD, задается переменная tBegin, в которой хранится время начала обработки документа (не считая времени, ушедшего на обработку тега <HEAD> и самого тега <SCRIPT>).

Второй элемент SCRIPT подключает файл 3.js, в котором находится определение функции time(), возвращающей текущую дату. Эта функция вызывается в сценарии третьего элемента SCRIPT, расположенного в теле документа HTML (элемент BODY). В нем для отображения на странице полученной функцией time() даты используется метод write() объекта document обозревателя. Этот объект представляет всю загруженную в обозреватель страницу, и в момент ее формирования указанным методом можно "писать" на страницу все, что требуется. Однако после завершения обработки документа (при этом генерируется событие load объекта document) запись этим методом в документ приведет к тому, что в нем будет содержаться только то, что записано этим методом.

Для определения времени завершения обработки документа обозревателем используется упоминавшееся событие load и в обработчике события onload элемента BODY создается переменная tEnd, в которой и хранится время завершения обработки документа.

Для получения общего времени обработки документа по щелчку на кнопке выполняется код, определенный в ее обработчике события onclick, который вычисляет разность между временем, хранящемся в переменных tBegin и tEnd и отображает результат функцией alert().

<HEAD>

<!--

// Объявление переменной tBegin и инициализация ее

// объектом Date, содержащим текущие дату и время

var tBegin = new Date();

//-->

</SCRIPT>

</HEAD>

<P>Начинается отображение страницы, в которую внедрен сценарий JavaScript.</P>

<p>Следующая строка сгенерирована внедренным сценарием:</p>

<hr>

<!--

document.write("<p>Сегодня <b>", time(),

"</b></p>");

//-->

</SCRIPT>

<hr>

<input type=button

onclick="delta = tEnd.getTime()-tBegin.getTime();

s = 'Время обработки документа:\n'+delta+

' миллисекунд';

alert(s)"

value="Время обработки документа">

</BODY>

Файл 3.js располагается в том же каталоге, что и файл документа HTML, и содержит следующий код JavaScript, определяющий функцию получения текущей даты в форме число.месяц.год.

// Определяем функцию, возвращающую текущую дату

function time() {

d = new Date();

return d.getDate()+"."+d.getMonth()+"."+d.getYear();

}

Упражнения

1. Напишите сценарий, который при загрузке документа в браузер формирует его содержимое, представляющее отображенным в виде элемента H1 предложение "Привет, читатель!" и в виде абзаца строку "Сегодня, дата, ты начинаешь изучать динамический HTML.". Вместо дата сценарий должен подставлять текущую дату в формате мм.дд.гггг.

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

3. Напишите сценарий, в котором создается переменная currentDate со значением текущей даты и сразу же после обработки страницы браузером ее содержимое отображается с помощью функции alert().

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

5. Повторите упражнение 3, но только отсчет интервала времени следует вести от момента завершения обработки страницы браузером.

Урок 3. Переменные и литералы

Реализация JavaScript является примером языка свободного использования типов. Тип переменной зависит от типа хранимых в ней данных, причем при изменении типа данных, меняется и тип переменной.

JavaScript поддерживает следующие простые типы данных:

1. Числовой (целый и вещественный)

2. Строковый

3. Булевый, или логический

Сложные (ссылочные) типы данных:

1. Объектный

2. Массив

Специальные типы данных:

1. null

2. undefined

Числовой тип

В языке JavaScript целые и вещественные числа не различаются — внутренне они представляются числами в формате плавающей точки. Используется стандарт IEEE 754 представления вещественных чисел в восьмибайтном формате чисел с плавающей точкой. Диапазон изменения абсолютных значений: от 5∙10^-324 до 1.7976931348623157∙10³⁰⁸.

Целыелитералы

123, -123, +678 // целое: десятичные числа

0123, -0123, +0677 // целое: восьмеричные числа

0x18F, -0X8A, +0xAA // целое: положительное число

<1 234 5 6 7 >

Дата добавления: 2018-09-24; просмотров: 427;