Динамический 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-код Ланг="Ан">
<головы>
<мета кодировка="UTF-8"не>
<название>для DHTML пример</заголовок>
</голова>
<тело>
<див ИД="навигация"></див>
<скрипт>
функция инициализации() {
ВАР myObj = документ.getElementById ("навигация");
//... манипулировать myobj
}
окно .onload = init;
< / script>>
--
Часто код хранится во внешнем файле; это делается путем связывания файла, содержащего JavaScript. Это полезно, когда несколько страниц используют один и тот же скрипт: -->>
< script src = "myjavascript.Я. С. " >>< / 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>
Welcome to Dynamic HTML
<a id="clickableLink" href="#">Dynamic styles are a key feature of DHTML.</a>
- Change the color, size, and typeface of text
- Show and hide text
- And much, much more
We've only just begun!
<script>
function showMe() {
document.getElementById("firstHeader").style.color = "#990000";
document.getElementById("unorderedList").style.display = "block";
}
document.getElementById("clickableLink").addEventListener ("щелчок", функция (e ) {
e .preventDefault ();
showMe ();
});
< / script>>
< / body>>
< / html>