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

HTML
Сравнения

Динамический HTML, или же DHTML, представляет собой набор технологий, используемых вместе для создания интерактивных и анимированных веб-сайты[1] с помощью комбинации статических язык разметки (Такие как HTML ), а клиентские сценарии язык (например, JavaScript ), язык определения представления (например, CSS ), а Объектная модель документа (ДОМ).[2] Применение DHTML было введено Microsoft с выпуском Internet Explorer 4 в 1997 году. Сегодня ссылки на ненавязчивый JavaScript кодирование (сценарии DOM) заменило использование термина DHTML.

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

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

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

Использует

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

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

Менее распространенное использование - создание браузерных экшн-игр. Хотя ряд игр был создан с использованием DHTML в конце 1990-х - начале 2000-х годов,[нужна цитата ] различия между браузерами усложняли задачу: многие методы пришлось реализовать в коде, чтобы игры могли работать на нескольких платформах. В последнее время браузеры стремятся к веб-стандарты, что сделало дизайн игр DHTML более жизнеспособным. В эти игры можно играть во всех основных браузерах, а также их можно портировать на Плазма за KDE, Виджеты для macOS и гаджеты для Виндоус виста, основанные на коде 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+ и Опера 7.0+ принял общий ДОМ унаследовано от ECMAScript.

В последнее время, Библиотеки JavaScript Такие как jQuery отвлеклись от многих повседневных трудностей, связанных с кроссбраузерными манипуляциями с DOM.

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

Смотрите также: События DOM

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

<!DOCTYPE html><html язык="en">    <голова>        <мета кодировка=«УТФ-8»>        <заглавие>Пример DHTML</заглавие>    </голова>    <тело>        <div я бы="навигация"></div>        <сценарий>            функция в этом() {                вар myObj = документ.getElementById("навигация");                // ... манипулируем myObj            }            окно.в процессе = в этом;        </сценарий>        <!--        Часто код хранится во внешнем файле; закончено        путем связывания файла, содержащего JavaScript.        Это полезно, когда на нескольких страницах используется один и тот же сценарий:        -->        <сценарий src="myjavascript.js"></сценарий>    </тело></html>

Пример: отображение дополнительного блока текста

Следующий код иллюстрирует часто используемую функцию. Дополнительная часть веб-страницы будет отображаться только по запросу пользователя.

<!DOCTYPE html><html>    <голова>        <мета кодировка=«УТФ-8»>        <заглавие>Использование функции DOM</заглавие>        <стиль>            а { фоновый цвет: #eee; }            а:парить { фон: # ff0; }            #toggleMe { фон: #cfc; отображать: никто; поле: 30px 0; набивка: 1Эм; }        </стиль>    </голова>    <тело>        <h1>Использование функции DOM</h1>                <h2><а я бы="показать спрятать" href="#">Показать абзац</а></h2>                <п я бы="toggleMe">Этот абзац отображается только по запросу.</п>                <п>Общий поток документа продолжается.</п>                <сценарий>            функция changeDisplayState(я бы) {                вар d = документ.getElementById('показать спрятать'),                    е = документ.getElementById(я бы);                если (е.стиль.отображать === 'никто' || е.стиль.отображать === '') {                    е.стиль.отображать = 'блокировать';                    d.innerHTML = 'Скрыть абзац';                } еще {                    е.стиль.отображать = 'никто';                    d.innerHTML = 'Показать абзац';                }            }            документ.getElementById('показать спрятать').addEventListener('щелкнуть', функция (е) {                е.preventDefault();                changeDisplayState('toggleMe');            });        </сценарий>    </тело></html>

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

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

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

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

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

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

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

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

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

<!DOCTYPE html><html язык="en">    <голова>        <мета кодировка=«УТФ-8»>        <заглавие>Динамические стили</заглавие>        <стиль>            ул { отображать: никто; }        </стиль>    </голова>    <тело>        <h1 я бы="firstHeader">Добро пожаловать в динамический HTML</h1>        <п><а я бы="clickableLink" href="#">Динамические стили - ключевая особенность DHTML.</а></п>        <ул я бы="неупорядоченный список">            <Ли>Изменение цвета, размера и шрифта текста</Ли>            <Ли>Показать и скрыть текст</Ли>            <Ли>И многое, многое другое</Ли>        </ул>        <п>Мы только начали!</п>        <сценарий>            функция Покажите мне() {                документ.getElementById("firstHeader").стиль.цвет = "#990000";                документ.getElementById("неупорядоченный список").стиль.отображать = "блокировать";            }            документ.getElementById("clickableLink").addEventListener("щелкнуть", функция (е) {                е.preventDefault();                Покажите мне();            });        </сценарий>    </тело></html>

Смотрите также

Рекомендации

  1. ^ «Объектная модель документа W3C». www.w3.org. Получено 7 апреля 2018.
  2. ^ "Таблицы веб-стилей". www.w3.org. Получено 7 апреля 2018.

внешняя ссылка