DHTML
Материал из Википедии — свободной энциклопедии
Dynamic HTML или DHTML — это способ создания интерактивного веб-сайта, используя сочетание статичного языка разметки HTML, встраиваемого (и выполняемого на стороне клиента) скриптового языка JavaScript, CSS (каскадных таблиц стилей) и DOM (объектной модели документа).
Он может быть использован для создания приложения в Web-браузере: например для более простой навигации или для придания интерактивности форм. DHTML может быть использован для динамического перетаскивания элементов по экрану. Также он может служить как инструмент для создания основанных на браузере видео-игр.
DHTML приложения, которые вполне автономны в браузере, без серверной поддержки, такой как база данных, иногда вынуждены обращаться к Single Page Applications, или SPA. Смотри Comparison of layout engines (DOM) , чтобы узнать больше о списке API-функций, доступных в каждом браузере для использования в DHTML-приложении.
Конкурирующая техника включает в себя Macromedia Flash для анимации и апплеты (applets).
Содержание |
[править] Структура Web-страницы
Обычно web-страница, использующая DHTML, выглядит следующим образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>ng''Курсивное начертание''/title>
<script type="text/javascript">
function init() {
myObj = document.getElementById("navigation");
// .... какой-то код
}
window.onload=init;
</script>
</head>
<body>
<div id="navigation">
</div>
</body>
</html>
Часто программа на JavaScript хранится во внешнем файле, а веб-страница просто связывается с ним. Это очень удобно, когда несколько страниц используют один и тот же программный код:
<script type="text/javascript" src="myjavascript.js"></script>
See also DOM Events
[править] Пример: Отображение дополнительного блока текста
Нижеследующий код иллюстрирует часто используемую функцию. Дополнительная часть страницы (тестовой блок) будет отображаться на экране если только пользователь запросит его. В электронном обучении такая функция может использоваться для вывода подсказки или правильного ответа для студента. Но первоначально эта информация не видна.
<!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>
[править] Презентации
S5 — это DHTML-презентация, которая может выполняться в современных браузерах. Единый XHTML-файл включает набор слайдов, которые могут просматриваться в режиме слайд-шоу (кадр за кадром, в полноэкранном представлении), а также распечатаны как пресс-релиз. С помощью DHTML легко реализуется динамическая навигация и простые анимационные эффекты. Разметка осуществляется с помощью CSS.
[править] См. также
[править] Ссылки
- QuirksMode, a comprehensive site with test examples and instructions on how to write DHTML code which runs on several browsers
- Cross-Browser, two cross-browser JavaScript libraries and demos
- DHTML Central, a web site with a DHTML library and several javascript components for menus, trees, and a library for simplifying cross-browser DHTML programming.
- HTML & DHTML Reference on MSDN
