ПРАКТИЧЕСКАЯ РАБОТА №3
advertisement
ПРАКТИЧЕСКАЯ РАБОТА №3
ТЕМА: Функция и обработка события
Цель: Получить представление об общих принципах обработки в JavaScript событий , связанных с
окном веб-браузера, веб-страницей, содержащейся в браузере и элементами документа. Научиться
использовать простейшие элементы регулярных выражений для поиска подстрок, структура и
содержание которых описывается нетривиальным шаблоном.
Пример 1. Обработка события нажатия кнопки мыши и определение, какая именно была нажата.
<html>
<head>
<script language = "javascript">
function whichButton(event)
{
if (event.button == 2)
{
alert("Вы щелкнули правой кнопкой мыши!");
}
else
{
alert("Вы щелкнули левой кнопкой мыши!");
}
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p>Щелкните любой кнопкой мыши в любом месте документа</p>
</body> </html>
Пример 2. Нахождение площади треугольника.
Предположим, что мы хотим создать форму, в которой поля Основание и Высота служат для
ввода соответствующих значений. Кроме того, в форме создадим кнопку Вычислить. При щелчке
мышью по этой кнопке мы хотим получить значение площади треугольника.
Пример 2. Реакция на событие Click.
<HTML>
<HEAD>
<title>Обработка значений из формы</title>
<script language="JavaScript">
<!--//
function care (a, h)
{
var s=(a*h)/2;
document.write ("Площадь прямоугольного треугольника равна ",s);
1
return s
}
//-->
</script>
</HEAD>
<BODY>
<P>Пример сценария со значениями из формы</P>
<FORM name="form1">
Основание: <input type="text" size=5 name="st1"><hr>
Высота: <input type="text" size=5 name="st2"><hr>
<input type="button" value=Вычислить
onClick="care(document.form1.st1.value, document.form1.st2.value)"> /*По клику мыши на кнопке в
функцию care передаются два параметра - содержимое полей ввода*/
</FORM>
</BODY>
</HTML>
При интерпретации HTML-страницы браузером создаются объекты JavaScript. Взаимосвязь
объектов между собой представляет иерархическую структуру. На самом верхнем уровне иерархии
находится объект windows, представляющий окно браузера. Объект windows является предком или
родителем" всех остальных объектов. Каждая страница кроме объекта windows имеет объект document.
Свойства объекта document определяются содержимым самого документа: цвет фона, цвет шрифта и т.
д. Для получения значения основания треугольника, введенного в первом поле формы, должна быть
выполнена конструкция
document.forml.stl.value
т.е., говоря русским языком (при этом читаем с конца), используем данные value из поля ввода с
именем st1 находящегося на форме form1 объекта document.
Пример 3. Вычисление площади квадрата.
Напишем сценарий, определяющий площадь квадрата по заданной стороне. Площадь должна
вычисляться в тот момент, когда изменилось значение его стороны. Пусть форма содержит два
текстовых поля: одно для длины стороны квадрата, другое для вычисленной площади. Кнопка
Обновить очищает поля формы. Площадь квадрата вычисляется при возникновении события change,
которое происходит в тот момент, когда значение элемента формы с именем num1 изменилось, и
элемент потерял фокус. HTML-код представлен в примере 2.
Пример 3. Реакция на событие Change
<HTML>
<HEAD>
2
<title>Обработка события Change - изменение значения элемента</title>
<script>
function srec(obj)
{obj.res.value=obj.num1.value* obj.num1.value}
</script>
</HEAD>
<BODY>
<P>Вычисление площади квадрата</P>
<FORM name="form1">
Сторона: <input type="text" size=7 name="num1"
onChange="srec(form1)">
<hr>
Площадь: <input type="text" size=7 name="res"><hr>
<input type="reset" value=Обновить>
</FORM>
</BODY>
</HTML>
Событие Focus возникает в момент, когда пользователь переходит к элементу формы с помощью
клавиши <Таb> или щелчка мыши. Событие "потеря фокуса" (Blur) происходит в тот момент, когда
элемент формы теряет фокус. Событие select вызывается выбором части или всего текста в текстовом
поле. Например, щелкнув дважды мышью по полю, мы выделим поле, наступит событие select,
обработка которого приведет к вычислению требуемого значения.
Задания для самостоятельного выполнения
1. Проверить примеры из лабораторной работы.
2. Создать HTML документ, который должен содержать следующие элементы:
-два абзаца произвольной информации (абзац определяется тегом <p>ваш текст</p>)
-элемент «форма» на которой размещены тестовые элементы (например <input type="text" size=5
name="st2">) и элемент «кнопка»
3. Написать скрипт для вашего примера, который должен выполнять следующие действия:
Вычислить объем конуса и вывести результат
1
Формулы объема конуса 𝑉 = 3 𝜋𝑅 2 ℎ
При наведении на 1 абзац поменять его цвет на любой другой
При клике на 2 абзаце вывести сообщение с помощью alert, содержащее фамилию студента
выполнившего задание.
3
Теоретический материал
1. Обработка событий в JavaScript
Популярность JavaScript во многом обусловлена именно тем, что написанный на нем сценарий может реагировать на
действия пользователя и другие внешние события . Каждое из событий связано с тем или иным объектом: формой,
гипертекстовой ссылкой или даже с окном, содержащим текущий документ.
В качестве примеров внешних событий, на которые могут реагировать объекты JavaScript , можно привести
следующие:
- окончание загрузки документа в окно (или окончание загрузки документов во все фреймы окна).
Это событие связано с объектом window;
- щелчок мышью на объекте. Это событие может быть связано с интерактивным элементом формы или с
гипертекстовой ссылкой;
- получение объектом фокуса ввода. Это событие может быть связано с объектами типа Text, Password и с другими
интерактивными элементами;
- передача на сервер данных, введенных пользователем с помощью интерактивных элементов. Связывается с формой.
Обработка события производится
с
помощью
специально
предназначенного
для
этого
фрагмента
кода,
называемого обработчиком события. Для каждого события JavaScript предоставляет свой обработчик. Однако при
построении сценария можно создавать собственный обработчик события и использовать его вместо обработчика, заданного
по умолчанию.
Имя обработчика определяет, какое событие он должен обрабатывать. Так, для того чтобы сценарий нужным
образом отреагировал на щелчок мышью, используется обработчик с именем onClick, для обработки события,
заключающегося в получении фокуса ввода, - обработчик onFocus.
Для того чтобы указать интерпретатору JavaScript на то, что обработкой события должен заниматься обработчик,
необходимо включить в HTML-дескриптор следующее выражение:
имя_обработчика="команды_обработчика"
Это выражение включается в тэг, описывающий объект, с которым связано событие.
Например, если необходимо обработать событие, заключающееся в получении фокуса полем ввода, дескриптор,
описывающий этот интерактивный элемент, должен иметь примерно следующий вид:
<input type="text" name="Inform" onFocus="handleFocus();">
Имя
обработчика
является
одним
из
атрибутов HTML-дескриптора,
а
команды,
предназначенные
для
обработки события, выступают в роли значения этого атрибута. В данном случае обработка события производится в теле
функции handleFocus(). В принципе, обработчиком может быть не только функция, но и любая последовательность
команд JavaScript в виде составного оператора.
Следующий пример демонстрирует обработку события, связанного с наведением курсора мыши на гиперссылку:
<a href = ”http://www.myhp.edu” onmouseover="alert('An onMouseOver event'); return false">
<p>Наведите курсор</p>
</a>
Таким образом, для того чтобы обработать какое-либо стандартное событие в браузере, необходимо добавить в
подходящий HTML тэг
атрибут,
соответствующий
этому событию,
указав
в
качестве
значения
атрибута
имя JavaScript функции. Список атрибутов, которые определены для HTML тэгов приводится ниже:
Атрибут
Описание
onabort
Прерванная загрузка изображения
4
onblur
утрата фокуса элементом
onchange
Изменение содержимого в поле ввода
onclick
Щелчок мыши на объекте
ondblclick
Двойной щелчок мыши на объекте
onerror
Ошибка при загрузке изображения или документа
onfocus
Получение фокуса элементом
onkeydown
Нажатие клавиши
onkeypress
Клавиша нажата
onkeyup
Отжатие клавиши
onload
Завершение загрузки страницы или изображения
onmousedown
Нажатие кнопки мыши
onmousemove
Перемещение курсора мыши
onmouseout
Смещение курсора мыши с объекта
onmouseover
Наведение курсора мыши на объект
onmouseup
Отжатие кнопки мыши
onreset
Кнопка "Reset" нажата
onresize
Изменение размера окна
onselect
Выделение текста
onsubmit
Кнопка "Submit" нажата
onunload
Уход с веб-страницы
Работа с функциями
Основным элементом языка JavaScript является функция. Описание функции имеет вид
function F (V) {S},
где F - идентификатор функции, задающий имя, по которому можно обращаться к функции; V - список параметров
функции, разделяемых запятыми; S - тело функции, в нем задаются действия, которые нужно выполнить, чтобы получить
результат. Необязательный оператор return определяет возвращаемое функцией значение. Обычно все определения и
функции задаются в разделе <head> документа. Это обеспечивает интерпретацию и сохранение в памяти всех функций при
загрузке документа в браузер.
5
