4.7 Контрольні питання
1. Які типи даних використовуються в JavaScript?
2. Які оператори присвоювання використовуються в JavaScript?
3. Які математичні оператори використовуються в JavaScript?
4 Які оператори відносин використовуються в JavaScript?
5. Які оператори циклу використовуються в JavaScript?
6. Як оголошуються масив в JavaScript?
7. Як визначаються функції JavaScript?
8. Які класи об'єктів використовуються в JavaScript?
9. Яке призначення об'єкта Date і які методи він підтримує?
10. Яке призначення об'єкта Math і які методи він підтримує?
5 ОБРОБКА ПОДІЙ
Питання для вивчення
Події та обробники подій
Способи зв'язування подій
Події та обробники подій
Події генеруються в результаті дій користувача (клацаня миші, натискання клавіш і т.д.), а також змін стану вікна або документа (завантаження документа, зображень, поява помилки та ін.). Наприклад, якщо користувач клацає кнопкою миші на певному елементі, настає подія Click. Якщо покажчик миші перетинає будь-яку посилання, виникає подія Mouseover. При завантаженні документа в вікно браузера відбувається подія Load.
Розробляючи динамічні Web-сторінки можна скласти сценарій таким чином, що сторінка буде реагувати на деякі з подій. Це робиться за допомогою спеціальних програм, які називаються обробниками подій. Програми обробників подій є фрагментами коду і зазвичай оформляються у вигляді функцій.
Припустимо, необхідно, щоб при клацанні на певному абзаці документа з'являлося повідомлення із зазначенням теми абзацу. Для цього в тег абзацу <Р> потрібно вставити подію onclick:
<Р onclick="alert('Анотація');" >
В даному прикладі з елементом Р пов'язана подія onclick, що обробляється функцією alert (). Ця функція є обробником події. Запис обробника події в тези <Р> виглядає аналогічно завданню атрибута стилю. Дійсно, як і у випадку вбудованого стилю, атрибуту-події присвоюється певний вираз у подвійних лапках. В даному випадку цей вираз являє собою функцію - обробник події.
Взагалі кажучи, обробники подій можуть розміщуватися в різних частинах документа:
у HTML-тегах у вигляді атрибутів. Обробники подій в цих випадках доповнюють
можливості тегів;
у сценарії, між тегами <SCRIPT> і </ SCRIPT>. При цьому обробники подій входять до складу інструкцій JavaScript;
у тезі <SCRIPT>, що передбачено в Internet Explorer (але не в Netscape). В цьому випадку обробник подій використовується спільно з атрибутами for і event.
5.1.1 Спливання подій в dhtml
При натисканні мишею або переміщенні миші, зміні розмірів вікна або завантаженні сторінки, операційна система генерує повідомлення. Ці повідомлення переносяться в чергу повідомлень браузера. З черги повідомлення доставляється відповідному елементу, наприклад, кнопці чи посилання, і елемент генерує подія. У динамічному HTML (Dynamic HTML або скорочено DHTML) все елементи можуть генерувати події, навіть теги заголовків.
В основу моделі подій в DHTML належить так зване спливання подій. Подія, сгенерированна одним елементом, передається вгору по ієрархічній структурі контейнерів, поки не досягне рівня самого документа. Завдяки ефекту спливання подія може оброблятися на кожному рівні ієрархії контейнерів.
Наведемо приклад, який демонструє спливання подій в браузері Internet Explorer:
<HTML>
<HEAD>
<TITLE> спливання подій </ ТITLE>
</ HEAD>
<BODY onclick = "alert ('Елемент BODY');">
<H2> Демонстрація спливання подій </ Н2>
BODY
<DIV onclick = "alert ('Зовнішній блок DIV');"
style = "border-style: solid; width = 330; height = 150">
DIV
<DIV onclick = "alert ('Внутрішній блок DIV');"
style = "border-style: solid; width = 200; height = 100">
DIV <BR>
<SPAN onclick = "alert ('Елемент SPAN - нижчий рівень');"
style = "border-style: solid; width = 80; height = 50">
SPAN
</ SPAN>
</ BODY>
</ HTML>
Якщо клацнути у внутрішньому прямокутнику (елемент SPAN), з'явиться діалог, показаний на Рис. 5.1. Наступні натискання на кнопку ОК в діалогах приведуть до наступного ланцюжку повідомлень: «Внутрішній блок DIV» - «Зовнішній блок DIV» -
Рис. 5.1 .Спливання подій
«Елемент BODY». Ці повідомлення відображає спливання події onclick по ієрархічній структурі контейнерів.