12. Події таймера
Безліч керованих подіями середовищ програмування використовують подія таймера, яка є подією, що викликається кожного разу після заданого інтервалу часу. Хоча JavaScript не пропонує подію типу таймера, для тих же цілей можна використовувати метод setInterval об'єкту Window.
Метод setInterval багато разів викликає функцію або обчислює вираз кожного разу після закінчення вказаного інтервалу часу (у мілісекундах). Цей метод виконуватиметься, поки вікно не закриється або поки не буде викликаний метод clearInterval.
При використанні JavaScript 1.1 або ранішій версії можна виконуватиподібний процес (хоч і не таким прямим способом) за допомогою методів setTimeout() і clearTimeout().
Зазвичай метод setTimeout() використовується для обчислення виразу після певного проміжку часу. Це обчислення — одноразовий процес, який не повторюється незліченна кількість разів.
Проте, оскільки в JavaScript є можливість проводити рекурсивні виклики функції, рекурсію можна використовувати для створення події таймера де- факто.
Припустимо, що кожен ранок в 8:30 необхідно виконати завдання, описане трохи вище. Для цього потрібно мати таймер, що обчислює час; коли цей час досягнутий, процес запускається. Метод dailyTaskO визначається __________так:
function dailyTaskO {
var tdy = new Date () ;
if ((tdy.getHours() = 8) && (tdy.getMinutes() =30)) {
performProcess()}
timerlD = setTimeout("dailyTask() ",10000)
}
Метод створює об'єкт Date, що містить поточний час, за допомогою getHours() і getMinutes(). Якщо вони обчислюють 8:30 ранку, викликається метод performProcess().
Наступний рядок — основа процесу таймера — використовує метод setTimeout() для рекурсивного виклику методу dailyTaskO кожні 10000 мілісекунд.
Цей приклад демонструє певні трюки відносно таймера, і краще бути обережніше з подібною реалізацією процесу в реальних завданнях. Здійснення такого безперервного процесувиконання циклу в браузере може привести, врешті-решт, до браку ресурсів.
14. Програмна генерація подій
До цих пір в даному розділі обговорювалася відповідь на події, щозгенерували користувачем (наприклад, подія click) або системою (наприклад, подія onllnload). В більшості випадків код проектується так, щоб відповідати на ці події, як тільки вони відбуваються. Проте, розробники JavaScript не повинні розраховувати тільки на зовнішні чинники, що генерують події. Насправді, можна викликати виникнення деяких з цих подій усередині коди. Наприклад, можна змоделювати подію click для об'єкту Button, викликаючи його метод click(). Хоча це вірно для об'єкту Button, але, наприклад, для об'єкту Link (у якого є обробник подій onClick) метод click() не існує.
Виконання завдання
Рис. 1.
Рис. 2.
Лістинг программи
Index.Html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Автоматизована система готельного комплексу</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.6.js" ></script>
<script type="text/javascript" src="js/kwicks-1.5.1.pack.js" ></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="all">
<![endif]-->
<!--[if lt IE 7]>
<div style=' clear: both; text-align:center; position: relative;'>
</div>
<![endif]-->
</head>
<body id="page1" onkeypress="test();">
<div class="bg1">
<div class="bg2">
<div class="main">
<!-- header -->
<header>
<h1><a href="index.html"></a></h1>
<div class="department">
</div>
</header>
<div class="kwicks-wrapper marg_bot1">
<ul class="kwicks horizontal">
<li><img src="images/img1.jpg" alt=""></li>
<li><img src="images/img2.jpg" alt=""></li>
<li><img src="images/img3.jpg" alt=""></li>
<li><img src="images/img4.jpg" alt=""></li>
</ul>
</div>
</div>
<div class="main">
<!-- footer -->
<footer>
<form name="main">
<input name="textentry"
type=text size=10 maxlength=10>
</form>
<script>
document.onkeydown = function checkKeycode(event)
{
k=event.keyCode;
if (k==13);
{
alert("Код города Черкассы: 0472");
}
else { alert('error') }
}
</script>
</footer>
<!-- footer end -->
</div>
<script type="text/javascript"> Cufon.now(); </script>
<script>
$(document).ready(function(){
$('.kwicks').kwicks({
max : 500,
spacing : 0,
event : 'mouseover'
});
})
</script>
</body>
</html>
Висновок: Ми навчитись обробляти події миші та клавіатури в Web-браузері за допомогою динамічних сценарії на мові JavaScript.