Властивості

Більшість HTML-дескрипторів мають атрибути. Наприклад, контейнер <А ...>... </А> має атрибут href, який перетворює його в гіпертекстове посилання:

<А href=kuku.htm>kuku</A>

Якщо розглядати елемент, що задається контейнером <А ...>... </А>, як об'єкт, то атрибут href буде задавати властивість об'єкта гіперпосилання. Програміст може змінити значення атрибута і, як наслідок, властивість об'єкта:

document.links[0].href="kuku1.htm";

Для загальності властивостями в JavaScript наділені також об'єкти, які не мають аналогів у HTML-розмітці, наприклад, середовище виконання, яке називається window або вікно броузера.

Методи

У термінології JavaScript методи об'єкта визначають функції зміни його властивостей. Наприклад, з об'єктом document (документ) зв'язані методи ореn(), write(), close(). Ці методи дозволяють згенерувати або змінити вміст документа:

Лістинг 2.4

function hello()

{

id=window.open("","example","width=400, height=150");

id.focus();

id.document.open();

id.document.write("<h1>Hello JavaScript</h1>");

id. document. write( "<hr><form>");

id.document.write("<input type=button"+"value='Закрити вікно' ");

id.document.write("onClick='window.opener.focus();

window.close();' > ");

id.document.close();

}

У цьому прикладі метод ореn() об'єкта window створює нове вікно. Метод focus() об'єкта window робить створене вікно активним. Метод ореn() об'єкта document відкриває потік запису в документ, метод write() здійснює запис у документ фрагменту HTML-коду, метод close() закриває потік запису в документ.

Події

Крім властивостей і методів об'єкти характеризуються подіями, які з ними можуть відбуватися. Власне суть програмування на JavaScript полягає в написанні підпрограм (функцій) опрацювання цих подій. Наприклад, з об'єктом button (задається дескриптором <INPUT TYPE=BUTTON> — кнопка форми) може відбуватися подія «Click» — тобто на кнопку можуть натиснути. Для цього атрибути дескриптора <INPUT> розширені атрибутом onClick для обробки події «Click». Як значення цього атрибута вказується програма опрацювання події, яку необхідно написати автору HTML-документа на JavaScript:

<INPUT TYPE=BUTTON VALUE="He клацайте тут" onClick=

"alert (' Повторюємо ще раз: НЕ КЛАЦАЙТЕ ТУТ ')" ; >

Підпрограми опрацювання подій викликаються у дескрипторах тих об'єктів, з якими ці події зв'язані. Наприклад, об'єкт BODY визначає властивості всього документа, тому підпрограма опрацювання події завершення завантаження всього документа вказується у дескрипторі <BODY> як значення атрибута onLoad.

Після завантаження документа, код якого наведено нижче, виводиться вікно, в якому з'являється повідомлення про завершення процесу завантаження.

Лістинг 2.5

<HTML>

<HEAD>

<ТІТLЕ>Використання атрибута оnLоad <TITLE>

<!--

function loaded()

{ alert('Документ завантажено!' );

}

//-->

</SCRIPT>

</HEAD>

Простий документ

</BODY>

</HTML>

Події, які можуть бути опрацьовані JavaScript-програмою, можна поділити на декілька категорій:

— події, що стосуються документів (наприклад, завантаження документа);

– події, що стосуються гіперпосилань (наприклад, активізація гіперзв'язку);

— події, що стосуються форм (клацання миші на кнопках, контрольних перемикачах тощо);

— події, що стосуються рисунків (завантаження рисунка, переривання завантаження рисунка);

— події, пов'язані з мишею (поміщення вказівника на гіперзв'язок).

У таблиці 2.1 подано можливі події й елементи документа HTML, в яких вони можуть опрацьовуватись.

Таблиця 2.1.Події, що можуть бути опрацьовані в JavaScript-програмі

ПОДІЯ	ЗАСТОСОВУЄТЬ-СЯ ДО ОБ'ЄКТІВ	КОЛИ ВІДБУВАЄТЬСЯ ПОДІЯ	ВІДПОВІДНИЙ АТРИБУТ
Abort	image	користувач відмовляється від завантаження зображення	OnAbort
Blur	window і всі об'єкти форми	втрата об'єктом фокуса	onBlur
Change	text, textarea, select	користувач змінює значення елемента	onChange
Click	button, radio, checkbox, submit, reset, link	користувач клацає кнопкою миші на елементі форми чи гіперзв'язку	onClick
DragDrop	window	користувач перетягує мишею об'єкт у вікно броузера, наприклад, файл	onDragDrop
Error	image, window	завантаження документа чи зображення викликає помилку	onError
Focus	window і всі об'єкти форми	вікно або елемент форми отримує фокус	onFocus
KeyDown	document, image, link, textarea	користувач натискує на клавішу клавіатури	onKeyDown
KeyPress	document, image, link, textarea	користувач утримує натис-нутою клавішу клавіатури	onKeyPress
KeyUp	document, image, link, textarea	користувач відпускає клавішу клавіатури	onKeyUp
Load	тіло документа	завантажується документ у броузер	onload
MouseDown	document, button, link	користувач натискує кнопку миші	onMouseDown
MouseMove	—	користувач переміщує вказівник миші	onMouseMove
MouseOut	area, link	користувач переміщує курсор миші з області зображення або з гіперзв'язку	onMouseOut
MouseOver	link	користувач переміщує курсор над гіперзв'язком	onMouseOver
MouseUp	document, button, link	користувач відпускає кнопку миші	onMouseUp
Move	window	користувач або сценарій переміщують вікно	onMove
Reset	form	користувач натискує кнопку Reset форми	onReset
Resize	window	користувач або сценарій змінюють розміри вікна	onResize
Select	text, textarea	користувач вибирає поле введення елемента форми	onSelect
Submit	form	користувач натискує на кнопку Submit	onSubmit
Unload	тіло документа	користувач закриває документ	onUnload

У наступному прикладі атрибут onClick використовується для опрацювання події клацання кнопкою миші на двох кнопках форми:

Лістинг 2.5

<HTML>

<HEAD>

<ТІТLЕ>Приклад опрацювання подій</TITLЕ>

<!-

function whatsnew() {

alert("Bи натиснули на кнопку: ЩО НОВОГО");

}

function catalogO {

alert("Bи натиснули на кнопку: ПОШУК У КАТАЛОЗІ");

}

//-->

</SCRIPT>

</HEAD>

<BODY>

<FORM>

</FORM>

</BODY>

</HTML>

Коли користувач клацає лівою кнопкою миші на кнопці, викликається або функція whatsnew(), або функція catalog() (виклик тієї чи іншої функції залежить від вибраної кнопки форми). При цьому з допомогою метода alert() на екран виводиться повідомлення про те, яка кнопка активована.