8.2. Обробка подій
Подія – це дія, виконана користувачем або програмою по відношенню до конкретного об’єкта, на яку реагує програмне забезпечення.
Зазвичай обробку подій визначають у параметрах об’єктів (найчастіше елементів форм). Ім’я параметру обробки події починається з префіксу on, після якого визначається власно ім’я події. У мові JavaScript передбачена можливість обробки значної кількості подій. Деякі з них наведені у табл. 8.1.
Таблиця 8.1 – Основні подій і об’єкти
Подія |
Об’єкти |
Коли відбувається подія |
Click |
button, radio, checkbox, submit, reset, link |
Клацання лівою кнопкою миші на елементі або посиланні |
Abort |
image |
Відмова від завантаження зображення |
Change |
text, textarea, select |
Зміна значення елемента |
DragDrop |
window |
Перетягування при натиснутій лівій кнопці миші об’єкту у вікно браузера |
Error |
image, window |
Помилка при завантаженні документа або зображення |
KeyDown |
document, image, link, textarea |
Натиснення клавіші на клавіатурі |
KeyPress |
document, image, link, textarea |
Утримання натиснутою клавішу клавіатури |
Load |
document |
Завантаження документа у вікні браузера |
Unload |
document |
Зачинення документа |
Reset |
form |
Натиснення на кнопці Reset у формі |
Submit |
form |
Натиснення на кнопці Submit у формі |
Значенням параметру обробки події може бути оператор мови JavaScript, а також звернення до певної функції.
Наприклад, наступний тег HTML – коду
<INPUT NAME="solve" TYPE="button" VALUE="Розрахунок" onClick="document.formR.fieldY.value= 2*document.formR.fieldX.value ">
визначає, що при натисненні лівою кнопкою миші на командній кнопці Розрахунок з іменем solve відбувається зміна вмісту текстового поля fieldY у формі formR на результат обчислення виразу – вміст текстового поля fieldX збільшується на 2.
8.3. Робота з текстовими полями
Сценарій може обробити інформацію, що введена у текстове поле форми, звернувшись до поля за його повним іменем і до властивості Value. Для виконання певних дій зазвичай у формі створюються командні кнопки. Для того, щоб після натискання на командній кнопці виконувалась певна дія, потрібно у тегу <INPUT>, що описує дану командну кнопку визначити параметр onClick, з яким буде пов’язана деяка операція або функція.
Розглянемо опрацювання даних текстових полів на такому простому прикладі. Створено форму, за допомогою якої можна ввести числа Х (fieldX) і У (fieldY), після натискання на командній кнопці solve сценарій повинен розраховувати добуток Х на У і виводити результат у третьому текстовому полі (fieldrez). Вікно HTML – документа представлено на рис. 8.1.
Рисунок 8.1 - Результат виконання сценарію обробки текстових полів
Код HTML – документа такий:
<HTML>
<BODY> <FONT size=4>
<CENTER>
<FORM name="form1">
Число Х:<INPUT NAME="fieldX" TYPE=text SIZE=15> <BR><BR>
Число У:<INPUT NAME="fieldY" TYPE=text SIZE=15> <BR><BR>
<INPUT NAME="solve" TYPE="button" VALUE="Розрахунок добутку Х на У" onclick="document.form1.fieldrez.value=Number(document.form1.fieldX.value)*
Number(document.form1.fieldY.value)"> <BR><BR>
<INPUT NAME="fieldrez" TYPE=text SIZE=15>
</FORM>
</CENTER>
</FONT>
</BODY>
</HTML>