Динамический 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>

См. также

• Динамическая веб-страница
• Динамические Каскадные Таблицы Стилей
• DHTMLEdit

Читать

/javascript.fandom.com/

• /wiki.jmol.org/index.php/
• /docs.joomla.org/

Пруф

.quirksmode.org/

• .yourhtmlsource.com/javascript/dhtmlexplained.html
• /msdn.microsoft.com/en-us/library/ms533050.aspx
• /codepen.io/ge1doot/#