HTML події | Об'єкти в html

ЗАГОЛОВОК

1 Доступ до властивостей об'єктів на HTML на Web-сторінці за допомогою мови html
2 Обробка подій на Web-сторінці
Приклад 1

1 Доступ до властивостей об'єктів на HTML на Web-сторінці за допомогою мови html

відповідно До об'єктної моделі документа DOM (Document Object Model), яка підтримується мовою JavaScript, всі теги Web сторінки є об'єктами і поміщені в колекцію (набір), яка називається document.all, з можливістю програмного доступу до будь-якого з них для визначення або зміни їхніх властивостей.

Найбільш простим способом доступу до об'єкту на Web-сторінці є доступ за його ідентифікатором. У цьому випадку може застосовуватися один з трьох форм:

document.all("ідентифікатор").свойство;
document.getElementById("ідентифікатор").свойство;
идентификатор.свойство,

де

ідентифікатор - це ідентифікатор тега, заданий з допомогою параметра ID , наприклад <P ID="txt">. Для тих тегів, для яких допускається використання параметра NAME, наприклад, таких як <IMG>, <A>, а також елементів тега <FORM>, в якості ідентифікатора замість параметра ID можна використовувати параметр NAME: <IMG NAME="img1" . . . >.

Третя форма доступу до тегу є найбільш простий, її підтримує браузер Microsoft Internet Explorer, і ми надалі в основному будемо використовувати цей підхід. До недоліків слід віднести те, що далеко не всі браузери підтримують цю форму доступу. Якщо необхідно добитися того, щоб Web-сторінка була правильно оброблена будь-яким браузером, краще скористатися другий, більш універсальною формою.

Необхідно звернути увагу на різницю в двох варіантах імені тега: в лапках - "ідентифікатор" і без лапок - ідентифікатор. Ім'я ідентифікатора тега в лапках має строковий тип і задає саме ідентифікатор тега, тоді як ім'я ідентифікатора тега без лапок має тип об'єкта і задає сам тег, як об'єкт.

Використання всіх трьох способів доступу до тегам <H1> <IMG> наведено в прикладі № 1.

Властивість - це або HTML-найменування параметру тега, або найменування властивості CSS, заданого для цього тега. В останньому випадку використовується наступне правило вказівки властивостей CSS на мові JavaScript: якщо властивість CSS складається з декількох слів, записаних через дефіс, то в позначенні властивості для JavaScript всі знаки дефіса прибираються, перше слово властивості пишеться з великої букви, а друге слово і подальші слова властивості пишуться з великої літери. Наприклад, властивість CSS font-size на JavaScript буде виглядати так: fontSize, а властивість CSS list-style-image:url(URL) так: listStyleImage="url(URL)".
Використання властивостей CSS в JavaScript наведено в прикладі № 1.

Зміст

2 Обробка подій в HTML на Web-сторінці

До подій на Web-сторінці відносяться як дії користувача, пов'язані з роботою з мишею та клавіатурою, так і дії браузера, пов'язані з навантаженням, розвантаженням Web-сторінок та ін.

підтримує JavaScript наступні обробники подій:

onMouseover - викликається за події Mouseover : наведення вказівника миші на об'єкт;
onMouseout - викликається за події Mouseout: вказівник миші знімається з об'єкту:
onMousemove - викликається за події Mousemove: вказівник миші поміщається на об'єкт або рухається по об'єкту;
onClick - викликається за події Click: клацають (натискання лівої кнопки миші);
onDblclick - викликається за події Dblclick: подвійний щиглик;
onContextmenu - викликається за події Contextmenu: натиснення правої клавіші миші;
onKeydown - викликається за події Keydown: натиснення клавіши клавіатури;
onKeypress - викликається за події Keypress: натискання й утримання клавіші клавіатури;
onKeyup - викликається за події Keyup: віджимання клавіші клавіатури;
onLoad - викликається за події Load: завантаження web-сторінки;
onUnload - викликається за події Unload: вивантаження Web-сторінки;
onHelp - викликається за події Help: натискання клавіші допомоги F1;
onFocus - викликається за події Focus: установка фокусу поля (при клацанні мишею по полю);
onBlur - викликається за події Blur: зняття фокусу.

Для обробки події в мові JavaScript використовується така конструкція:
Обробник подій="дії по обробці події",
де Обробник подій - це один з перерахованих вище обробники подій; дії по обробці події - це або виклик функції, або вбудований фрагмент програми на JavaScript.
Ця конструкція поміщається в той тег, параметри якого повинні бути змінені при здійсненні події, пов'язаного з роботою миші. Обробники подій, пов'язаних з натисканням клавіш клавіатури або з роботою браузера, поміщаються в тег <BODY> При обробці подій, що стосуються клавіатури, визначити ASCII-індекс (точніше Unicode) натиснутою або натисканні клавіші можна так:
event.keyCode.

Для визначення символу використовується наступний метод об'єкта String: String.fromCharCode(Unicode).
прикладі № 1 показано застосування двох функцій - changeHeader() і restoreHeader().

Перша з них викликається з наведення миші на заголовку "ЗАГОЛОВОК ПАРАГРАФА" (тег <H1 ID="hd"> зі значенням ідентифікатора, рівним "hd") і змінює деякі його властивості: використовуючи параметр HTML ALIGN вирівнює по центру екрана, використовуючи властивість CSS - збільшує в два рази розмір, змінює колір, жирність і нахил. Крім того, ця функція визначає фон у вигляді малюнка, змінюючи параметр BACKGROUND тега <BODY>.

Друга функція відновлює початкові властивості фону і заголовка при знятті з вказівника миші.
Для того, щоб зробити програму більш компактною у функції restoreHeader() застосовується оператор with.

Приклад 1

<HTML>
<HEAD>
<TITLE> Зміна властивостей об'єктів в HTML на Web-сторінці </TITLE>
<SCRIPT>
n=9;
function changeTag(hd) // Зміна властивостей заголовка і малюнка
{
switch (hd) {
case head: {
bod.background="back.gif";
hd.align="center";
document.getElementById("head").style.color="#00F";
document.all("head").style.fontSize=2*n+"mm"; // 18 mm
hd.style.fontWeight="normal";
hd.style.fontStyle="italic";
break; }
case image: {
hd.width=300;
break; }
}
}
function restoreTag(hd) // Відновлення властивостей заголовка і малюнка
{
bod.background="";
hd.align="left";
with (hd.style) {
color="black";
fontSize="9mm";
fontWeight="bold";
fontStyle="normal";
}
hd.width="50";
}
</SCRIPT>
</HEAD>
<BODY ID="bod">
<H1 ID="head" onMouseover="changeTag(head)"
onMouseout="restoreTag(head)"> ЗАГОЛОВОК ТЕКСТУ </H1>
<IMG name="image" src="fish.gif"
onMouseover="changeTag(this)"
onMouseout="restoreTag(this)">
</BODY>
</HTML>

Заголовок