DHTML

DHTML е абревиатура на Dynamic Hypertext Markup Language (динамичен хипертекстов маркиращ език), с която се означава съвкупността от технологии за създаването на интерактивни и анимирани уебсайтове, използващи комбинация от статичен маркиращ език (какъвто е HTML), клиентски скриптов език (какъвто е JavaScript), език за описание на стилове (като CSS), и стандартизирания документен обектен модел (Document Object Model, DOM).

DHTML позволява на скриптовите езици да сменят променливите на езика, описващ уебстраницата, което на свой ред повлиява на изгледа и функционалността на иначе „статичното“ HTML съдържание след като страницата се зареди напълно, както и в процеса на преглеждането ѝ. Така динамичната характеристика на езика DHTML се изразява в начина, по който той функционира по време на прегледа на страницата, а не в способност да се създава уникално съдържание при всяко зареждане на страницата.

За сравнение, понятието за динамична уебстраница е по-широко формулирано като уебстраница, която зарежда различно съдържание за всеки отделен потребител, при всяко презареждане или за различните стойности на специфични променливи. В това число влизат страници създадени или с клиентски скриптове, или със сървърни скриптове (като PHP или Perl), при които съдържанието се генерира от уеб-сървъра преди да се изпрати до клиента.

Употреба[редактиране | редактиране на кода]

DHTML често се използва за интерактивни уебстраници или динамични елементи като rollover бутони (променящи се при преминаване с мишката над тях) и падащи менюта. По-рядко езикът се използва за създаване на браузърно базирани игри.

През последните години езикът започва да изпада от употреба, поради честите несъвместимости на DHTML скриптовете с различни уеб браузъри. По-нови техники като unobtrusive JavaScript („ненатрапчив JavaScript“) позволяват подобни ефекти, но по достъпен и съобразен със стандартите начин чрез стратегията Progressive Enhancement.

Някои недостатъци на DHTML се изразяват в затруднената разработка и отстраняване на бъговете, поради различните степени на поддръжка на DHTML при различните браузъри и зависимостта на крайния изглед от конкретната резолюция на екрана. Базова DHTML поддръжка е въведена за първи път при Internet Explorer 4.0, макар че и при Netscape Navigator 4.0. е положена основа за динамична система. Споделеният документен обектен модел е внедрен в относително по-нови браузъри като Internet Explorer 5.0+, Mozilla Firefox 2.0+, и Opera 7.0+.

Структура на уебстраница[редактиране | редактиране на кода]

Обичайно, уебстраниците, използващи DHTML, изглеждат по следния начин:

<!doctype html>
<html lang="en">
     <head>
          <meta charset="utf-8">
          <title>DHTML example</title>
     </head>
     <body>
          <div id="navigation"></div>

          <script>
               var init = function () {
                    myObj = document.getElementById("navigation");
                    // ... manipulate myObj
               };
               window.onload = init;
          </script>

          <!--
          Often the code is stored in an external file; this is done
          by linking the file that contains the JavaScript.
          This is helpful when several pages use the same script:
          -->
          <script src="myjavascript.js"></script>
     </body>
</html>

В горния програмен код, маркираният в синьо код представлява декларацията за документния тип (DOCUMENT TYPE), който определя коя версия на маркиращия език е използвана при изграждането на сайта. Маркираният в червено код показва, че браузърът е открил код на Javascript, което позволява уебстраниците да се приспособят към изискванията и приложните стандарти на браузъра.

Пример: Показване на допълнителен текстов блок

Програмният код по-долу илюстрира една често използвана функционалност. Уебстраницата съдържа допълнителен текстов блок, който се показва само тогава, когато потребителят изрично пожелае да го види. Тази функционалност намира приложение при електронното обучение, като извежда подсказка или верния отговор в тест, въпреки че отначало тези допълнителни текстови блокове не са видими за обучаемия.

<!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>

Тази страница частично или изцяло представлява превод на страницата DHTML в Уикипедия на английски. Оригиналният текст, както и този превод, са защитени от Лиценза „Криейтив Комънс – Признание – Споделяне на споделеното“, а за съдържание, създадено преди юни 2009 година – от Лиценза за свободна документация на ГНУ. Прегледайте историята на редакциите на оригиналната страница, както и на преводната страница, за да видите списъка на съавторите.

ВАЖНО: Този шаблон се отнася единствено до авторските права върху съдържанието на статията. Добавянето му не отменя изискването да се посочват конкретни източници на твърденията, които да бъдат благонадеждни.