ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ
Государственное образовательное учреждение
высшего профессионального образования
Сибирский государственный аэрокосмический университет
имени академика М.Ф. Решетнева
(СибГАУ)
АЭРОКОСМИЧЕСКИЙ КОЛЛЕДЖ
Рассмотрено на заседании
цикловой комиссии
230103 «Автоматизированные
системы обработки
информации и управления»
и
рекомендовано к применению
_____________( )
«_____»_____________20___г
Методическое пособие
Лабораторная работа № 12
по дисциплине:
«Распределенные системы обработки информации»
Создание динамической Web-страницы.
230103 Автоматизированные системы обработки информации и управления
Разработал Преподаватель АК
2010 г.
ЛАБОРАТОРНАЯ РАБОТА № 12
Тема: Создание динамической Web-страницы.
Цель: научиться создавать динамические web-страницы.
Оборудование и программное обеспечение:
Персональный компьютер IBM PC/AT.
Операционная система MS-DOS, Windows 95/98/NT/2000/XP.
Теоретическая часть
События JavaScript
События, главным образом, инициируются теми или иными действиями пользователя. Если он щелкает по некоторой кнопке, происходит событие Click. Если указатель мыши пересекает какую-либо ссылку гипертекста - происходит событие MouseOver. Можно заставить JavaScript-программу реагировать на некоторые события. И это может быть выполнено с помощью специальных программ обработки событий. Так, в результате щелчка по кнопке может создаваться выпадающее окно. Это означает, что создание окна должно быть реакцией на событие - Click. Программа - обработчик событий, которую мы должны использовать в данном случае, называется onClick. И она сообщает компьютеру, что нужно делать, если произойдет данное событие.
Пример 1:
<html>
<body>
<form>
<input type="button" value="Click me" onClick="alert('Привет')">
</form>
</body>
</html>
</html>
Таким образом, для того чтобы обработать какое-либо стандартное событие в браузере, необходимо добавить в подходящий HTML тэг обработчик, соответствующий этому событию, указав в качестве значения обработчика события имя JavaScript функции.
Синтаксис основных обработчиков событий, использующихся в JavaScript:
onclick - Вызывается после щелчка кнопкой мыши на объекте.
<INPUT TYPE="elementType" onсlick="function">
onmouseover - Событие происходит при наведение курсора мыши на объект.
<A HREF="URL" onmouseover="function">linkText</A>
onmousedown - Вызывается после нажатия кнопки мыши.
onmouseout - Вызывается после смещение курсора мыши с объекта.
onfocus - Событие происходит при получение фокуса элементом.
<INPUT TYPE="inputType" onfocus="function">
onblur - Событие происходит в тот момент, когда элемент теряет фокус.
<INPUT TYPE="elementType" onblur="function">
onselect - Обработчик вызывается в тот момент, когда выделен текст.
<INPUT TYPE="textType" onselect="function">
onsubmit - Событие происходит в момент щелчка мышью на кнопке Submit для посылки данных формы на сервер.
<TAG onsubmit="function">
onload - Вызывается при завершении загрузки страницы или изображения.
<BODY onload="function">, <FRAMESET onload="function">
onunload - Вызывается, когда пользователь выходит из документа.
<BODY onunload="function">, <FRAMESET onunload="function">
onchange - Событие происходит в тот момент, когда изменяется содержимого в поле ввода.
<INPUT TYPE="elementType" onchange="function">
Пример 2:
<html>
<body>
<A HREF="http://www.rambler.ru" onmouseover="window.status='Перейти на рамблер'; return true">Ссылка</A>
<form>
<input type="text" size="30" onfocus="window.status='Текст в строке состояния';">
</form>
<form>
<input type="text" size="55" value="Впишите свое имя и щелкните по другой строке" onblur="alert('Вы изменили ответ — уверены, что он правильный?');">
</form>
<form>
<input TYPE="text" size="55" value="Измените текст и щелкните по другой строке" onchange="alert('Текст был изменен')">
</form>
<form>
<input TYPE="submit" onsubmit="parent.location='thanksalot.html'";>
</form></body>
Объект Event
Объект Event содержит свойства, описывающие некое событие. Каждый раз, когда происходит какое-либо событие, объект Event передается соответствующей программе обработки.
Объект Event обладает следующими свойствами:
− button возвращает целочисленное значение, указывающее, какая кнопка или кнопки мыши были нажаты.
0 - Кнопки не нажаты
1 - Нажата левая
2 - Нажата правая
3 - Одновременно нажаты левая и правая
4 - Нажата средняя
5 - Нажаты левая и средняя
6 - Нажаты правая и средняя
7 - Все три кнопки нажаты
− srcElement возвращает ссылку на объект элемента HTML-документа, который инициировал событие. При получении такой ссылки можно узнать или изменить значения свойств этого объекта и применить к нему любой из его методов.
− screenX, screenY - Горизонтальное, вертикальное положение курсора
Уважаемый посетитель!
Чтобы распечатать файл, скачайте его (в формате Word).
Ссылка на скачивание - внизу страницы.
