Практическое занятие №21

Наименование: Обработка событий в сценариях JavaScript

1. Цель: Научиться применять обработчики событий в сценариях JavaScript

2. Подготовка к занятию: По предложенной литературе повторить темы «Обработчики событий JavaScript» и «Функции JavaScript» и ответить на следующие вопросы:

1. Какие обработчики событий вам известны?

2. Когда и почему применяются обработчики событий в сценариях?

3. Литература:

3.1 Шомас Е.А. Конспект лекций по дисциплине «Распределенные системы обработки информации»

3.2 Квинт И. HTML и CSS на 100%. – СПб.: Питер, 2008с

3.3 Никсон Р. Создаем динамические веб-сайты с помощью PHP, MySQL и JavaScript. – СПб.: Питер, 2011. – 496 с

4. Перечень оборудования и программного обеспечения:

4.1 ПЭВМ, подключенные к сети Интернет

4.2 Браузеры

4.3 Текстовый редактор

5. Задание:

5.1 Создайте сценарий, в котором присутствует обработчик событий onClick (щелчок мышью). При нажатии на кнопку должно появиться окно с сообщением «Сценарий заработал!!!»

5.2 Создайте сценарий, в котором текст, при наведении на него курсором мыши будет окрашиваться в отличный от черного цвет.

6. Порядок выполнения работы:

7. Содержание отчета:

7.1 Наименование и цель работы

7.2 Код программы

7.3 Ответы на контрольные вопросы

7.4 Вывод о проделанной работе

8. Контрольные вопросы:

8.1 Что можно отнести к событиям?

8.2 Какие обработчики событий вы знаете?

ПРИЛОЖЕНИЕ:

Сценарий может быть выполнен сразу – же после загрузки веб – страницы. Но иногда нужно, чтобы сценарий выполнялся после каких-либо действий пользователя: нажатия на кнопку или ввода текста. То есть в ответ на пользовательское событие. Для этого в тегах элементов страницы введены параметры обработки событий, задающие действия, выполняемые при возникновении события, связанного с элементом. Например:

Здесь Click – событие (щелчок), onClick – обработчик события, addText() – имя функции, которая сработает при возникновении этого события.

Перечислим наиболее часто встречающиеся события поддерживаемые JavaScript.

Событие	Когда происходит	Обработчик события
Click	Пользователь щелкает мышью по объекту	onClick
DblClick	Пользователь делает двойной щелчок мышью по объекту	onDblClick
KeyDown	Пользователь нажимает клавишу клавиатуры	onKeyDown
KeyPress	Пользователь удерживает нажатой клавишу клавиатуры	onKeyPress
KeyUp	Пользователь отпускает клавишу клавиатуры	onKeyUp
MouseDown	Пользователь нажимает кнопку мыши	onMouseDown
MouseOut	Указатель мыши выходит за пределы элемента	onMouseOut
MouseOver	Указатель мыши помещается над элементом	onMouseOver
MouseUp	Пользователь отпускает кнопку мыши	onMouseUp
Reset	Пользователь нажимает кнопку «Сброс» формы	onReset
Select	Пользователь выбирает элемент формы	onSelect
Submit	Пользователь нажимает кнопку «Отправить» формы	onSubmit

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

Функция – это именованная последовательность операторов (инструкций). Синтаксис функции имеет вид:

function ИмяФункции( ) {

оператор;

…………

оператор;

}

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

Рассмотрим на примере. Создадим HTML – страницу, в которой поместим следующий код:

<html>

<head>

<title>Введение в JavaScript</title>

</head>

<body>

<div onClick="myFc();">Щелкни меня</div>

</body>

</html>

Затем создадим страницу script.js, которую подключим к HTML – странице. На странице script.js напишем саму функцию:

function myFc() {

alert("вы щелкнули по тексту");

}

Наша функция будет выполнять одно действие – отображать окно Предупреждение с текстом: