Лабораторная работа №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">
В верхнее поле введите букву латинского алфавита
<p align="center">
<script language="JavaScript">
var code=97;
function Fpress()
{
code=window.event.keyCode;
window.document.Formpress.InpText2.value="Код CP=1251 для нажатой клавиши равен..." + code;
}
</script>
<form name="Formpress">
<input type="text" name="InpText" value="" size="4" onkeypress="Fpress()">
<p align="center">
<input type="text" name="InpText2" value="Код CP-1251 для нажатой клавиши равен... " size="50">
</form>
</body>
</html>
Выводимый скриптом код будет синхронно изменяться с введением очередной буквы.
Упражнение 5.7. Событие onkeyup="Func()".
<html>
<head>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<title>События</title>
<script language="JavaScript">
function Fpress2()
{
alert("Сценарий запущен в момент отпускания клавиши");
}
</script>
<div align="center">
Введите символ<br><br>
<form name="Formpress2">
<input type="text" name="InpText" value="" size="4" onkeyup="Fpress2()">
</form>
</head>
<body>
</body>
</html>
Введение символа с клавиатуры приводит к появлению следующего сообщения:
