DHTML

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>

Див. також

Посилання