DHTML
Матеріал з Вікіпедії — вільної енциклопедії.
DHTML, Dynamic HTML — стандарт, що дозволяє працювати з HTML-документом як з об'єктною структурою, використовуючи поєднання статичної мови розмітки HTML, вбудованої скриптової мови JavaScript (сценарії виконуються на стороні клієнта), CSS (каскадних таблиць стилів) і DOM (об'єктній моделі документа). Він може бути використаний для створення додатку в Web-оглядачі: наприклад для простішої навігації або для додання інтерактивності форм. Також DHTML може бути використаний для динамічного перетягування елементів по екрану і може служити як інструмент для створення заснованих на оглядачі відео-ігор.
Конкуруючі технології: Macromedia Flash, Microsoft Silverlight, Adobe AIR для анімації і аплети (applets).
Зміст |
[ред.] Структура Web-сторінки
Зазвичай web-сторінка, що використовує DHTML, виглядає таким чином:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Заголовок сторінки</title>
<script type="text/javascript">
window.onload= function () {
myObj = document.getElementById("navigation");
// .... якийсь код
}
</script>
</head>
<body>
<div id="navigation">
</div>
</body>
</html>
Часто програма на JavaScript зберігається в зовнішньому файлі, а веб-сторінка просто зв'язується з ним. Це дуже зручно, коли декілька сторінок використовують один і той же програмний код:
<script type="text/javascript" src="myjavascript.js"></script>
[ред.] Приклад: Відображення додаткового блоку тексту
Наведений код ілюструє часто використовувану функцію. Додаткова частина сторінки (тестовою блок) відображатиметься на екрані, тільки коли користувач робить запит. У електронному навчанні така функція може використовуватися для виведення підказки або правильної відповіді для студента. Але спочатку цієї інформації не видно.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
h2 {background-color: lightblue; width: 100%}
a {font-size: larger; background-color: goldenrod}
a:hover {background-color: gold}
#example1 {display: none; margin: 3%; padding: 4%; background-color: limegreen}
</style>
<script type="text/javascript">
<!--
function changeDisplayState (id) {
e=document.getElementById(id);
if (e.style.display == 'none' || e.style.display =="") {
e.style.display = 'block';
showhide.innerHTML = 'Hide example';
} else {
e.style.display = 'none';
showhide.innerHTML = 'Show example';
}
}
//-->
</script>
</head>
<body>
<h2>How to use a DOM function</h2>
<p><a id="showhide" href="javascript:changeDisplayState('example1')">Show example</a></p>
<div id="example1">
This is the example. (Additional information, which is only displayed on request)
..............</div>
<p>The general text continues ....</p>
<p></p>
</body>
</html>
[ред.] Дивись також
[ред.] Зовнішні посилання
- QuirksModeангл. , вичерпний сайт з прикладами та інструкціями як створювати DHTML код, що працює в різних переглядачах.
- Початковий курс DHTMLангл. для тих, хто робить перші кроки з DHTML.
- Виклад HTML & DHTML на MSDNангл.
