Сторінка не перевірена
DHTML,Dynamic HTML — концепція створення вебсайту, що розглядаєHTML-документ як об'єктну структуру, використовує поєднання статичної мови розмітки HTML, вбудованої скриптової мовиJavaScript (сценарії виконуються на стороні клієнта),CSS (каскадних таблиць стилів) іDOM (об'єктної моделі документа). Ця концепція може бути використана для створення застосунку в браузері: наприклад для навігації або для додання інтерактивності формам. Також DHTML можна використати для динамічного перетягування елементів по екрана і як інструмент для створення заснованих на браузерівідеоігор.
Конкуруючі технології:Macromedia Flash,Microsoft Silverlight,Adobe AIR для анімації іаплети (applets).
Зазвичай web-сторінка, що використовує DHTML, виглядає так:
<!doctype html><htmllang="en"><head><metacharset="utf-8"><title>Заголовок сторінки</title></head><body><divid="navigation"></div><script>window.onload=function(){myObj=document.getElementById("navigation");// ... manipulate myObj};</script></body></html>
Часто програма на JavaScript зберігається у зовнішньому файлі, а вебсторінка просто зв'язується з ним. Це дуже зручно, коли декілька сторінок використовують один і той самий програмний код:
<scriptsrc="myjavascript.js"></script>
Наведений код ілюструє часто використовувану функцію. Додаткова частина сторінки (тестовий блок) відображатиметься на екрані, тільки коли користувач робить запит. У електронному навчанні така функція може використовуватися для виведення підказки або правильної відповіді для студента. Але спочатку цієї інформації не видно.
<!doctype html><htmllang="en"><head><metacharset="utf-8"><title>Using a DOM function</title><style>a{background-color:#eee;}a:hover{background:#ff0;}#toggleMe{background:#cfc;display:none;margin:30px0;padding:1em;}</style></head><body><h1>Using a DOM function</h1><h2><aid="showhide"href="#">Show paragraph</a></h2><pid="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){vard=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');returnfalse;};</script></body></html>