Динамический HTML
Динамический HTMLили DHTML будет, это обобщающий термин для семейства технологий, используемых вместе, чтобы создать интерактивные и анимированные веб-сайты[1] , используя сочетание статичного языка разметки (такие как HTML-код), а на стороне клиента скриптовый язык (например, на JavaScript), презентация определение языка (как в CSS), а объектной модели документов (дом).[2] применение DHTML было введено Microsoft с выпуском Internet Explorer 4 в 1997 году.
DHTML позволяет скриптовым языкам изменять переменные на языке определения веб-страницы, что, в свою очередь, влияет на внешний вид и функцию "статического" содержимого HTML-страницы после полной загрузки страницы и во время просмотра. Таким образом, динамическая характеристика DHTML-это то, как он функционирует во время просмотра страницы, а не в его способности генерировать уникальную страницу при каждой загрузке страницы.
Напротив, динамическая веб-страница-это более широкое понятие, охватывающее любую веб-страницу, созданную по-разному для каждого пользователя, вхождения загрузки или определенных значений переменных. Это включает страницы, созданные клиентскими скриптами, и страницы, созданные серверными скриптами (например, PHP, Python, JSP или ASP.NET ) где веб-сервер генерирует контент перед отправкой клиенту.
DHTML отличается от Ajax тем, что страница DHTML по-прежнему запрашивает/перезагружает. С DHTML не может быть никакого взаимодействия между клиентом и сервером после загрузки страницы; вся обработка происходит в JavaScript на стороне клиента. Напротив, страница Ajax использует функции DHTML для инициирования запроса (или "подзапроса") к серверу для выполнения дополнительных действий. Например, если на странице несколько вкладок, чистый подход DHTML будет загружать содержимое всех вкладок, а затем динамически отображать только тот, который активен, в то время как AJAX может загружать каждую вкладку только тогда, когда это действительно необходимо.
Использует[править]
DHTML позволяет авторам добавлять на свои страницы эффекты, которые в противном случае трудно достичь, изменяя объектную модель документа (DOM) и стиль страницы. Сочетание HTML, CSS и JavaScript предлагает способы:
- Анимация текста и изображений в документе.
- Встроить тикер или другой динамический дисплей, который автоматически обновляет его содержимое с последними новостями, котировками акций или другими данными.
- Используйте форму для записи пользовательского ввода, а затем обработки, проверки и ответа на эти данные без необходимости отправлять данные обратно на сервер.
- Включите кнопки опрокидывания или выпадающие меню.
Менее распространенное использование-создание браузерных экшенов. Хотя много игр были созданы, используя DHTML в течение конца 1990-х и начала 2000-х, различия между браузерами сделали это трудным: много методов должны были быть реализованы в коде, чтобы позволить играм работать на многократных платформах. В последнее время браузеры стали приближаться к веб-стандартам , что сделало дизайн игр DHTML более жизнеспособным. Эти игры можно играть на всех основных браузерах, и они также могут быть портированы на Plasma для KDE, виджеты для macOS и гаджеты для Windows Vista, которые основаны на коде DHTML.
Термин "DHTML" вышел из употребления в последние годы, поскольку он был связан с практикой и соглашениями, которые, как правило, не работают хорошо между различными веб-браузерами. DHTML теперь можно назвать ненавязчивым кодированием JavaScript (DOM Scripting), чтобы сделать акцент на согласованных лучших практиках, позволяя аналогичные эффекты доступным, совместимым со стандартами способом .
Поддержка DHTML с широким доступом к DOM была представлена в Internet Explorer 4.0 . Хотя существовала базовая динамическая система с Netscape Navigator 4.0, не все HTML-элементы были представлены в DOM. Когда методы DHTML-стиля стали широко распространенными, различные степени поддержки среди веб-браузеров для используемых технологий затруднили их разработку и отладку . Разработка стала проще, когда Internet Explorer 5.0+, Mozilla Firefox 2.0+ и Opera 7.0+ приняли общий DOM, унаследованный от ECMAScript .
Совсем недавно библиотеки JavaScript, такие как jQuery, абстрагировали многие из повседневных трудностей в кросс-браузерных манипуляциях с DOM.
Структура веб страницы[править]
См. также: события DOM
Обычно веб-страница с помощью DHTML настраивается следующим образом:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DHTML example</title>
</head>
<body>
<div id="navigation"></div>
<script>
function init() {
var 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>Пример: отображение дополнительного блока текста[править]
Следующий код иллюстрирует часто используемые функции. Дополнительная часть веб-страницы будет отображаться только в том случае, если пользователь запросит ее.
<!DOCTYPE html>
<html>
<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>The general flow of the document continues.
<script>
function changeDisplayState(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').addEventListener('click', function (e) {
e.preventDefault();
changeDisplayState('toggleMe');
});
</script>
</body>
</html>Объектная модель документа[править]
Основная статья: Объектная модель документа
DHTML-это не технология сама по себе; скорее, это продукт трех связанных и взаимодополняющих технологий: HTML, каскадные таблицы стилей (CSS) и JavaScript . Чтобы разрешить скриптам и компонентам доступ к функциям HTML и CSS, содержимое документа представляется в виде объектов в программной модели, известной как объектная модель документа (DOM).
DOM API является основой DHTML, обеспечивая структурированный интерфейс, который позволяет доступ и манипуляции практически ничего в документе. Элементы HTML в документе доступны как иерархическое дерево отдельных объектов, то есть вы можете исследовать и изменять элемент и его атрибуты, читая и устанавливая свойства и вызывая методы. Текст между элементами также доступен через свойства и методы DOM.
DOM также предоставляет доступ к пользовательским действиям, таким как нажатие клавиши и щелчок мыши. Эти и другие события можно перехватывать и обрабатывать, создавая функции и процедуры обработчика событий. Обработчик событий получает управление каждый раз, когда происходит данное событие, и может выполнять любое соответствующее действие, включая использование DOM для изменения документа.
Динамические стили[править]
Динамические стили являются ключевой особенностью DHTML. С помощью CSS можно быстро изменить внешний вид и форматирование элементов в документе без добавления или удаления элементов. Это помогает сохранить ваши документы маленькими и сценарии, которые управляют документом быстро.
Объектная модель предоставляет программный доступ к стилям. Это означает, что вы можете изменять встроенные стили для отдельных элементов и правила стиля с помощью простого программирования JavaScript.
Встроенные стили-это назначения стилей CSS, которые были применены к элементу с помощью атрибута style. Вы можете изучить и задать эти стили, извлекая объект стиля для отдельного элемента. Например, чтобы выделить текст в заголовке при наведении на него указателя мыши, можно использовать объект style для увеличения шрифта и изменения его цвета, как показано в следующем простом примере.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dynamic Styles</title>
<style>
ul { display: none; }
</style>
</head>
<body>
<h1 id="firstHeader">Welcome to Dynamic HTML</h1>
<p><a id="clickableLink" href="#">Dynamic styles are a key feature of DHTML.</a></p>
<ul id="unorderedList">
<li>Change the color, size, and typeface of text</li>
<li>Show and hide text</li>
<li>And much, much more</li>
</ul>
<p>We've only just begun!</p>
<script>
function showMe() {
document.getElementById("firstHeader").style.color = "#990000";
document.getElementById("unorderedList").style.display = "block";
}
document.getElementById("clickableLink").addEventListener("click", function (e) {
e.preventDefault();
showMe();
});
</script>
</body>
</html>