DHTML Dynamic HTML концепція створення вебсайту що розглядає HTML документ як об єктну структуру використовує поєднання

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>

Див. також

AJAX

Посилання

QuirksMode [ 7 лютого 2011 у Wayback Machine.](англ.) — вичерпний сайт з прикладами та інструкціями як створювати DHTML-код, що працює в різних браузерах.
Початковий курс DHTML [ 16 травня 2011 у Wayback Machine.](англ.) для тих, хто робить перші кроки з DHTML.
(англ.)