DHTML, Dynamic HTML — концепція створення вебсайту, що розглядає HTML-документ як об'єктну структуру, використовує поєднання статичної мови розмітки HTML, вбудованої скриптової мови JavaScript (сценарії виконуються на стороні клієнта), CSS (каскадних таблиць стилів) і DOM (об'єктної моделі документа). Ця концепція може бути використана для створення застосунку в браузері: наприклад для навігації або для додання інтерактивності формам. Також DHTML може бути використана для динамічного перетягування елементів по екрану і як інструмент для створення заснованих на браузері відео-ігор.
Конкуруючі технології: Macromedia Flash, Microsoft Silverlight, Adobe AIR для анімації і аплети (applets).
Структура Web-сторінки
Зазвичай web-сторінка, що використовує DHTML, виглядає так:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Заголовок сторінки</title>
</head>
<body>
<div id="navigation"></div>
<script>
window.onload = function () {
myObj = document.getElementById("navigation");
// ... manipulate myObj
};
</script>
</body>
</html>
Часто програма на JavaScript зберігається у зовнішньому файлі, а вебсторінка просто зв'язується з ним. Це дуже зручно, коли декілька сторінок використовують один і той самий програмний код:
<script src="myjavascript.js"></script>
Приклад: відображення додаткового блоку тексту
Наведений код ілюструє часто використовувану функцію. Додаткова частина сторінки (тестовий блок) відображатиметься на екрані, тільки коли користувач робить запит. У електронному навчанні така функція може використовуватися для виведення підказки або правильної відповіді для студента. Але спочатку цієї інформації не видно.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using a DOM function</title>
<style>
a {background-color:#eee;}
a:hover {background:#ff0;}
#toggleMe {background:#cfc; display:none; margin:30px 0; padding:1em;}
</style>
</head>
<body>
<h1>Using a DOM function</h1>
<h2><a id="showhide" href="#">Show paragraph</a></h2>
<p id="toggleMe">This is the paragraph that is only displayed on request.</p>
<p>The general flow of the document continues.</p>
<script>
changeDisplayState = function (id) {
var d = document.getElementById('showhide'),
e = document.getElementById(id);
if (e.style.display === 'none' || e.style.display === '') {
e.style.display = 'block';
d.innerHTML = 'Hide paragraph';
}
else {
e.style.display = 'none';
d.innerHTML = 'Show paragraph';
}
};
document.getElementById('showhide').onclick = function () {
changeDisplayState('toggleMe');
return false;
};
</script>
</body>
</html>
Див. також
Посилання
