Лабораторная работа №5. События.
Рассмотрим различные виды событий на примере клавиш и кнопок, которые запускают в действие практически одинаковые сценарии.
Упражнение 5.1. Событие onmouseover="Func()".
<html>
<head>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<title>События</title>
<script language="JavaScript">
Function Fsob1()
{
alert("Сценарий запущен в момент касания указателем мыши кнопки «Коснитесь»");
}
</script>
</head>
<body>
<input type="Button" value="Коснитесь!" onmouseover="Fsob1()">
</body>
</html>
Событие onmouseover="Func()"запускает функцию Func() в момент соприкосновения указателя мыши с объектом – кнопкой «Коснитесь!».
В результате на экране появится следующее сообщение:
Упражнение 5.2. Событие onclick="Func()".
<html>
<head>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<title>События</title>
<script language="JavaScript">
Function Fsob2()
{
alert("Сценарий запущен в момент щелчка по кнопке");
}
</script>
</head>
<body>
<div align="center">
<input type="Button" value="Щелкните" onclick="Fsob2()">
</div>
</body>
</html>
При щелчке по кнопке
Происходит запуск сценария, результат работы которого показан ниже:
Упражнение 5.3. Событие ondblclick="Func()".
<html>
<head>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<title>События</title>
<script language="JavaScript">
Function Fsob3()
{
alert("Сценарий запущен с помощью двойного щелчка по кнопке");
}
</script>
</head>
<body>
<div align="center">
<input type="Button" value="Нужен двойной щелчок!" ondblclick="Fsob3()">
</div>
</body>
</html>
Результат выполнения двойного щелчка по кнопке
показан ниже:
Упражнение 5.4. Событие onmouseout="Func()".
<html>
<head>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<title>События</title>
<script language="JavaScript">
Function Fsob4()
{
alert("Сценарий запущен в момент выхода указателя мыши с кнопки");
}
</script>
</head>
<body>
<div align="center">
<input type="Button" value="Проведите по кнопке!" onmouseout="Fsob4()">
</div>
</body>
</html>
В момент покидания указателя мыши кнопки запускается сценарий, результат работы которого показан ниже:
Упражнение 5.5. Событие onmousedown="Func()".
Самостоятельно напишите HTML-код сценария, который запускается в момент нажатия кнопки «Нажмите».
Упражнение 5.6. Событие onmouseup="Func()".
Самостоятельно напишите HTML-код сценария, который запускается в момент отпускания кнопки «Срабатывает при отпускании!». Проверьте, что при этом нажатие кнопки может происходить в другом месте страницы. Если же нажатие и отпускание кнопки мыши происходит на кнопке «Срабатывает при отпускании!», то действие события onmouseup ничем не отличается от действия onclick.
Упражнение 5.7. Событие onkeypress="Func()".
Событие onkeypress="Func()" активизирует функцию Func() в момент нажатия клавиши на клавиатуре. В данном упражнении скрипт позволяет выводить на экран кодовую таблицу CP-1251 для латинских букв, цифр, знаков препинания и т.п. Для букв русского алфавита выводимые коды не соответствуют CP-1251.
<html>
<head>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<title>События</title>
</head>
<body>
<p align="center">