Динамічний HTML (DHTML) являє собою комбінацію таких web-технологій, як CSS (форматує об'єкти на web-сторінці), JavaScript (змінює об'єкти на web-сторінці), DOM (знаходить об'єкти на web-сторінці), призначених для збільшення інтерактивності web-сторінок. Каскадні таблиці стилів (CSS) визначають властивості елементів на сторінці. Об'єктна модель документа (Document Object Model, DOM) визначає ієрархію всіх об'єктів у вікні браузера. За допомогою JavaScript створюються прості програмні коди, які виконуються браузером на стороні клієнта без звернення до web-сервера (клієнтські скрипти) і управляють функціонуванням об'єктів на сторінці.
Програмний код на мові JavaScript оформляється у вигляді функцій. Синтаксис визначення функції показано нижче:
</head>
<script language="JavaScript">
function [ім'я функції]([список параметрів]){
[рядка тіла функції];
return значення [];
}
</script>
<body>
У сценарії JavaScript можна використовувати змінні, посилаючись на них по імені. Змінні бувають глобальні (певні поза будь-якої функції), так і локальні (певні всередині функції). Для оголошення змінної використовується наступний синтаксис:
var [ім'я змінної];
Тип змінної при її оголошенні не вказується. Тип змінної визначається з того значення, яке змінної присвоюється. Присвоїти значення змінної можна за допомогою оператора привласнення (=). В JavaScript розрізняють такі типи:
- число, наприклад 12 або 34.79;
- рядок, наприклад "функція";
- логічний, можуть приймати тільки два значення true або false;
Оператори мови JavaScript повторюють загальновідомі оператори мови. Унарні оператори: "-" - зміна знака на протилежний; "++" - збільшення значення змінної на 1; "--" - зменшення значення зміною на 1. Бінарні оператори: "+" - складання; "-" - віднімання; "*" - множення; "/" - поділ; "%" - обчислення залишку від ділення. Оператори відносини: ">" - більше; ">=" - більше або дорівнює; "<" - менше; "<=" - менше або дорівнює; "==" - одно; "!=" - не одно. Логічні оператори: "||" - логічне; АБО "&&" - логічне; І "&!quot; - логічне заперечення. Крім звичайного оператора присвоювання "х", у мові JavaScript, так само як і у С, можна використовувати оператори привласнення зі складанням "+=", з вирахуванням "-=", з множенням "*=", з поділом "/=", з обчисленням залишку від ділення "%=".
Умовний оператор мови JavaScript повторює умовний оператор мови. Загальний вид умовного оператора наступний:
if ([умова]){
[оператори]
}
else{
[оператори]
}
Оператори циклу мови JavaScript також повторюють аналогічні оператори мови З. Загальний вигляд циклу з лічильником наступний:
for ([ініціалізація лічильника]; [умова]; [оновлення лічильника]){
[оператори]
}
Загальний вигляд циклу з умовою наступний:
while ([умова]){
[оператори]
}
Модель DOM дозволяє знаходити адреса для різних елементів на сторінці. Потім, знаючи адреса елемента, з допомогою JavaScript можна змінити ті або інші властивості об'єкта або визначити його реакцію на ту чи іншу подію. Для ідентифікації об'єкту на сторінці (визначення його ідентифікатора) використовується атрибут тега ID, значення якого має бути унікальним в межах сторінки. Також у моделі DOM визначені два важливих об'єкта - document та window.
Об'єкт document являє собою сторінку у вікні браузера і використовується для доступу до об ’ єктів на сторінці, їх зміни, додавання і видалення. Об'єкт window являє собою вікно браузера і надає можливість доступу до сторінки, завантаженої в браузер, інформації про браузері та події у вікні браузера.
Подіями називаються будь-які дії у вікні браузера, ініціатором яких зазвичай є користувач. Перелік подій, які використовуються найчастіше:
- onload - відбувається після завантаження об'єкта;
- onunload - відбувається при вивантаження об'єкта;
- onfocus - відбувається при отриманні елементом фокусу вводу;
- onblur - відбувається при втраті елементом фокусу вводу;
- onmouseover - відбувається при попаданні вказівника миші на область, займаної елементом;
- onmouseout - відбувається при виході вказівника миші з області, займаної елементом;
- onclick - відбувається при клацанні мишею на області, займаної елементом;
- onmousedown - відбувається при натисканні кнопки миші на області, займаної елементом;
- onmouseup - відбувається при відпусканні кнопки миші на області, займаної елементом;
- onmousemove - відбувається при переміщенні миші над областю, займаної елементом;
- onkeydown - відбувається при натисканні клавіші на клавіатурі;
- onkeyup - відбувається при відпускання клавіші на клавіатурі;
- onkeypress - відбувається при натисканні і відпускання клавіші на клавіатурі.
Обробник подій (event handler) дозволяє визначити дії, пов'язані з будь-яким подією. Для створення обробника події необхідно вказати як атрибут тега ім'я події і або функцію JavaScript, викликану при настанні події, або код на мові JavaScript. Синтаксис обробника події наступний:
<тег подія="функція JavaScript()">
або
<тег подія="код на JavaScript">
Для отримання доступу до об'єкту на сторінці необхідно або послатися на його ідентифікатор, або скористатися методом getElementByID об'єкта document, як параметр якого вказується ідентифікатор об'єкту, укладений в лапки. Для зміни ознаки об'єкта необхідно присвоїти йому потрібне значення.
ID.атрибут=значення;
або
var obj=document.getElementByID("ID");
obj.атрибут=значення;
Щоб змінити параметри стилю об'єкта необхідно використовувати атрибут style, після якого вказується ім'я параметра стилю.
ID.style.параметр=значення;
або
var obj=document.getElementByID("ID");
obj.style.параметр=значення;
Для передачі інформації про подію функції JavaScript, що викликається при обробці подій, необхідно вказати параметр функції з назвою event. Використовуючи об'єкт event можна визначити об'єкт, для якого сталася подія, стан клавіш клавіатури у момент події, положення курсора миші і стан клавіш миші.
<тег подія="функція JavaScript(event)">
Для виведення повідомлень на екран можна скористатися функцією мови JavaScript alert:
alert("текст повідомлення");
У браузері Internet Explorer можна також вивести повідомлення в статусний рядок вікна, використовуючи властивість status об'єкта window:
window.status="текст повідомлення";
Для визначення розмірів об'єкта на сторінці, його положення, видно, перекривання з іншими об'єктами, необхідно скористатися моделлю DOM. Для зміни ширини і висоти об'єкта використовуються властивості style.width і style.height. Для зміни положення верхнього лівого кута об'єкта використовуються властивості style.top і style.left. Для зміни тривимірного положення об'єкта використовується властивість style.zIndex. Для управління видимістю об'єкта використовуються властивість style.visibility зі значеннями visible або hidden або властивість style.display зі значеннями none, inline або block.
Модель DOM дозволяє динамічно змінювати стильовий клас об'єктів на сторінці. Для цієї мети використовується властивість className об'єкта.
Для визначення і зміни вмісту об'єкта на сторінці необхідно використовувати властивості innerHTML і innerText об'єкта. Різниця між цими властивостями полягає в тому, що властивість innerText надає доступ тільки до текстового змісту об'єкта, у той час як властивість innerHTML дозволяє змінювати зміст об'єкту на мові HTML.
