Динамический HTML

Динамический HTML или DHTML — это термин, который использовался некоторыми поставщиками браузеров для описания комбинации HTML , таблиц стилей и клиентских сценариев ( JavaScript , VBScript или любых других поддерживаемых сценариев), которые позволяли создавать интерактивные и анимированные документы. . ^[1]^[2] Применение DHTML было представлено Microsoft с выпуском Internet Explorer 4 в 1997 году. ^[3]^{[ ненадежный источник? ]}

DHTML позволяет языкам сценариев изменять переменные в языке определения веб-страницы, что, в свою очередь, влияет на внешний вид и функционирование «статического» содержимого HTML-страницы после полной загрузки страницы и во время процесса просмотра. Таким образом, динамическая характеристика DHTML заключается в том, как он функционирует во время просмотра страницы, а не в его способности генерировать уникальную страницу при каждой загрузке страницы.

Напротив, динамическая веб-страница — это более широкое понятие, охватывающее любую веб-страницу, созданную по-разному для каждого пользователя, случая загрузки или определенных значений переменных. Сюда входят страницы, созданные с помощью сценариев на стороне клиента, а также страницы, созданные с помощью сценариев на стороне сервера (например, PHP , Python , JSP или ASP.NET ), где веб-сервер генерирует контент перед отправкой его клиенту.

DHTML является предшественником Ajax , и страницы DHTML по-прежнему основаны на запросе/перезагрузке. В модели DHTML после загрузки страницы взаимодействие между клиентом и сервером может отсутствовать; вся обработка происходит на стороне клиента. Напротив, Ajax расширяет возможности DHTML, позволяя странице инициировать сетевые запросы (или «подзапросы») к серверу даже после загрузки страницы для выполнения дополнительных действий. Например, если на странице имеется несколько вкладок , подход на чистом DHTML будет загружать содержимое всех вкладок, а затем динамически отображать только активную, в то время как AJAX может загружать каждую вкладку только тогда, когда она действительно необходима.

Использование

DHTML позволяет авторам добавлять на свои страницы эффекты, которых иначе было бы трудно достичь, путем изменения объектной модели документа (DOM) и стиля страницы. Сочетание HTML, CSS и JavaScript позволяет:

Анимируйте текст и изображения в документе.
Встройте тикер или другой динамический дисплей, который автоматически обновляет свое содержимое последними новостями, котировками акций или другими данными.
Используйте форму для сбора вводимых пользователем данных, а затем обрабатывайте, проверяйте эти данные и отвечайте на них без необходимости отправлять данные обратно на сервер.
Включите кнопки прокрутки или раскрывающиеся меню.

Менее распространенное использование — создание браузерных экшен-игр. Хотя в конце 1990-х — начале 2000-х годов с использованием DHTML было создано несколько игр, ^[4] различия между браузерами усложняли задачу: многие методы приходилось реализовывать в коде, чтобы игры могли работать на нескольких платформах. С тех пор браузеры приблизились к веб-стандартам , что сделало дизайн игр DHTML более жизнеспособным. В эти игры можно играть во всех основных браузерах, а также в приложениях для настольных компьютеров и устройств, поддерживающих встроенный контекст браузера.

Термин «DHTML» в последние годы вышел из употребления, поскольку он ассоциировался с практиками и соглашениями, которые, как правило, не очень хорошо работали между различными веб-браузерами. ^[5]

Поддержка 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, хотя лучшее соответствие стандартам браузеров уменьшило необходимость в этом.

Структура веб-страницы

Обычно веб-страница, использующая DHTML, настраивается следующим образом:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>DHTML example</title>
</head>
<body bgcolor="red">
    <script>
        function init() {
            let 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="my-javascript.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="toggle-me">This is the paragraph that is only displayed on request.</p>
        
    <p>The general flow of the document continues.</p>
        
    <script>
        function changeDisplayState(displayElement, textElement) {
            if (displayElement.style.display === "none" || displayElement.style.display === "") {
                displayElement.style.display = "block";
                textElement.innerHTML = "Hide paragraph";
            } else {
                displayElement.style.display = "none";
                textElement.innerHTML = "Show paragraph";
            }
        }
        
        let displayElement = document.getElementById("toggle-me");
        let textElement = document.getElementById("showhide");
        textElement.addEventListener("click", function (event) {
            event.preventDefault();
            changeDisplayState(displayElement, textElement);
        });
    </script>
</body>
</html>

Объектная модель документа

DHTML сам по себе не является технологией; скорее, это продукт трех связанных и взаимодополняющих технологий: HTML, каскадных таблиц стилей (CSS) и JavaScript . Чтобы скрипты и компоненты могли получать доступ к функциям HTML и CSS, содержимое документа представляется в виде объектов в модели программирования, известной как объектная модель документа (DOM).

DOM API — это основа DHTML, предоставляющая структурированный интерфейс, который позволяет получать доступ и манипулировать практически всем в документе. Элементы HTML в документе доступны в виде иерархического дерева отдельных объектов, что позволяет проверять и изменять элемент и его атрибуты путем чтения и установки свойств, а также путем вызова методов. Текст между элементами также доступен через свойства и методы DOM.

DOM также предоставляет доступ к действиям пользователя, таким как нажатие клавиши и щелчок мыши. Эти и другие события можно перехватывать и обрабатывать, создавая функции и подпрограммы- обработчики событий . Обработчик событий получает управление каждый раз, когда происходит данное событие, и может выполнять любые соответствующие действия, включая использование DOM для изменения документа.

Динамические стили

Динамические стили — ключевая особенность DHTML. С помощью CSS можно быстро изменить внешний вид и форматирование элементов документа, не добавляя и не удаляя элементы. Это помогает сохранять документы небольшими, а сценарии, которые манипулируют документом, — быстрыми.

Объектная модель обеспечивает программный доступ к стилям. Это означает, что вы можете изменять встроенные стили для отдельных элементов и изменять правила стиля, используя простое программирование на JavaScript.

Встроенные стили — это назначения стилей CSS, которые были применены к элементу с помощью атрибута стиля. Вы можете просмотреть и установить эти стили, получив объект стиля для отдельного элемента. Например, чтобы выделить текст в заголовке, когда пользователь наводит на него указатель мыши, вы можете использовать объект стиля, чтобы увеличить шрифт и изменить его цвет, как показано в следующем простом примере.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Dynamic Styles</title>
    <style>
        ul { display: none; }
    </style>
</head>

<body>
    <h1 id="first-header">Welcome to Dynamic HTML</h1>

    <p><a id="clickable-link" href="#">Dynamic styles are a key feature of DHTML.</a></p>

    <ul id="unordered-list">
        <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("first-header").style.color = "#990000";
            document.getElementById("unordered-list").style.display = "block";
        }

        document.getElementById("clickable-link").addEventListener("click", function (event) {
            event.preventDefault();
            showMe();
        });
    </script>
</body>
</html>

См. также

Динамическая веб-страница

Ссылки

^ «Часто задаваемые вопросы по объектной модели документа» . W3C . 22 октября 2003 года . Проверено 16 февраля 2022 г.
^ «Таблицы веб-стилей» . W3C . 22 июля 1999 года . Проверено 7 апреля 2018 г.
^ Педамкар, Прия (19 июля 2020 г.). «DHTML | Краткий обзор DHTML с компонентами, функциями и потребностями» . ЭДУКБА . Проверено 13 октября 2022 г.
^ Даунс, Стивен (18 августа 1999 г.). «Развлечение и игры с DHTML» . Сеть Стивена . Проверено 27 августа 2022 г.
^ Фергюсон, Расс; Хейльманн, Кристиан (2013). Начинаем JavaScript со сценариями DOM и Ajax (PDF) . Беркли, Калифорния: Apress. стр. 49–68. дои : 10.1007/978-1-4302-5093-7 . ISBN 978-1-4302-5092-0 . S2CID 20526670 . Проверено 30 мая 2022 г.

Внешние ссылки

QuirksMode — подробный сайт с тестовыми примерами и инструкциями по написанию кода DHTML, который работает в нескольких браузерах.
Вводное руководство по DHTML

[1] «Часто задаваемые вопросы по объектной модели документа» . W3C . 22 октября 2003 года . Проверено 16 февраля 2022 г.

[2] «Таблицы веб-стилей» . W3C . 22 июля 1999 года . Проверено 7 апреля 2018 г.

[3] Педамкар, Прия (19 июля 2020 г.). «DHTML | Краткий обзор DHTML с компонентами, функциями и потребностями» . ЭДУКБА . Проверено 13 октября 2022 г.

[4] Даунс, Стивен (18 августа 1999 г.). «Развлечение и игры с DHTML» . Сеть Стивена . Проверено 27 августа 2022 г.

[5] Фергюсон, Расс; Хейльманн, Кристиан (2013). Начинаем JavaScript со сценариями DOM и Ajax (PDF) . Беркли, Калифорния: Apress. стр. 49–68. дои : 10.1007/978-1-4302-5093-7 . ISBN 978-1-4302-5092-0 . S2CID 20526670 . Проверено 30 мая 2022 г.

[1]

[2]

[3]

[4]

[5]