Динамический HTML , или DHTML , представляет собой набор технологий, используемых вместе для создания интерактивных и анимированных веб-сайтов с использованием комбинации статического языка разметки (например, HTML ), языка сценариев на стороне клиента (например, JavaScript ), языка определения представления. (например, CSS ) и объектной модели документа (DOM). [1] Приложение DHTML было представлено Microsoft с выпуском Internet Explorer 4 в 1997 году. Сегодня ссылки на ненавязчивый JavaScript кодирование (сценарии DOM) заменило использование термина DHTML.
DHTML позволяет языкам сценариев изменять переменные на языке определения веб-страницы, что, в свою очередь, влияет на внешний вид и функцию «статического» содержимого HTML-страницы после полной загрузки страницы и во время процесса просмотра. Таким образом, динамическая характеристика DHTML - это способ его функционирования во время просмотра страницы, а не его способность создавать уникальную страницу при каждой загрузке страницы.
Напротив, динамическая веб-страница - это более широкое понятие, охватывающее любую веб-страницу, созданную по-разному для каждого пользователя, возникновения нагрузки или определенных значений переменных. Сюда входят страницы, созданные с помощью сценариев на стороне клиента, и страницы, созданные с помощью сценариев на стороне сервера (например, PHP , Python , JSP или ASP.NET ), где веб-сервер генерирует контент перед его отправкой клиенту.
DHTML отличается от Ajax тем, что страница DHTML по-прежнему основана на запросе / перезагрузке. С DHTML может не быть никакого взаимодействия между клиентом и сервером после загрузки страницы; вся обработка происходит в JavaScript на стороне клиента. Напротив, страница Ajax использует функции DHTML для инициирования запроса (или «подзапроса») к серверу для выполнения дополнительных действий. Например, если на странице есть несколько вкладок, чистый подход DHTML будет загружать содержимое всех вкладок, а затем динамически отображать только ту, которая активна, в то время как AJAX может загружать каждую вкладку только тогда, когда это действительно необходимо.
Использует
DHTML позволяет авторам добавлять на свои страницы эффекты, которые иначе трудно достичь, путем изменения объектной модели документа (DOM) и стиля страницы. Комбинация HTML, CSS и JavaScript предлагает способы:
- Анимируйте текст и изображения в своем документе.
- Встраивайте тикер или другое динамическое отображение, которое автоматически обновляет свое содержимое с помощью последних новостей, котировок акций или других данных.
- Используйте форму для сбора данных, вводимых пользователем, а затем обрабатывайте, проверяйте и отвечайте на эти данные без необходимости отправлять данные обратно на сервер.
- Включите кнопки перехода или раскрывающиеся меню.
Менее распространенное использование - создание браузерных экшн-игр. Хотя в конце 1990-х и начале 2000-х годов с использованием DHTML был создан ряд игр, [ необходима цитата ] различия между браузерами усложняли задачу: многие методы приходилось реализовывать в коде, чтобы игры могли работать на нескольких платформах. В последнее время браузеры переходят на веб-стандарты , что сделало дизайн игр DHTML более жизнеспособным. В эти игры можно играть во всех основных браузерах, а также их можно портировать на Plasma для KDE , виджеты для macOS и гаджеты для Windows Vista , которые основаны на коде DHTML.
Термин «DHTML» в последние годы вышел из употребления, поскольку он был связан с практиками и соглашениями, которые, как правило, не работали между различными веб-браузерами. DHTML теперь может называться ненавязчивым кодированием JavaScript (сценариями DOM), чтобы сделать упор на согласованные передовые практики, одновременно допуская аналогичные эффекты доступным и совместимым со стандартами способом .
Поддержка 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 настраивается следующим образом:
< html lang = "en" > < head > < meta charset = "utf-8" > < title > Пример DHTML title > head > < body bgcolor = "red" > < сценарий > function init () { var myObj = document . getElementById ( "навигация" ); // ... манипулировать myObj } окно . onload = init ; скрипт > Часто код хранится во внешнем файле; это делается путем связывания файла, содержащего JavaScript. Это полезно, когда на нескольких страницах используется один и тот же сценарий: -> < script src = "myjavascript.js" > script > body > html >
Пример: отображение дополнительного блока текста
Следующий код иллюстрирует часто используемую функцию. Дополнительная часть веб-страницы будет отображаться только по запросу пользователя.
< html > < head > < meta charset = "utf-8" > < title > Использование функции DOM title > < style > a { background-color : #eee ; } a : hover { фон : # ff0 ; } # toggleMe { background : #cfc ; дисплей : нет ; поле : 30 пикселей 0 ; обивка : 1 эм ; } style > head > < body > < h1 > Использование функции DOM h1 > < H2 > < ID = "ПоказатьСкрыть" HREF = "#" > Показать пункт > h2 > < p id = "toggleMe" > Этот абзац отображается только по запросу. p > < p > Общий поток документа продолжается. p > < скрипт > function changeDisplayState ( id ) { var d = document . getElementById ( 'showhide' ), e = документ . getElementById ( id ); if ( e . style . display === 'none' || e . style . display === '' ) { e . стиль . дисплей = 'блок' ; d . innerHTML = 'Скрыть абзац' ; } else { e . стиль . display = 'нет' ; d . innerHTML = 'Показать абзац' ; } } документ . getElementById ( 'показать скрыть' ). addEventListener ( 'нажмите' , функция ( е ) { е . 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. Вы можете проверить и установить эти стили, получив объект стиля для отдельного элемента. Например, чтобы выделить текст в заголовке, когда пользователь наводит на него указатель мыши, вы можете использовать объект стиля, чтобы увеличить шрифт и изменить его цвет, как показано в следующем простом примере.
< html lang = "en" > < head > < meta charset = "utf-8" > < title > Динамические стили title > < style > ul { display : none ; } style > head > < body > < h1 id = "firstHeader" > Добро пожаловать в динамический HTML h1 > < Р > < ID = "clickableLink" HREF = "#" > Динамические стили являются ключевой особенностью DHTML. a > p > < ul id = "unorderedList" > < li > Изменить цвет, размер и шрифт текста li > < li > Показать и скрыть текст li > < li > И многое, многое другое li > ul > < p > Мы только начали! p > < сценарий > функция showMe () { документ . getElementById ( "первый заголовок" ). стиль . цвет = "# 990000" ; документ . getElementById ( "unorderedList" ). стиль . display = "блок" ; } документ . getElementById ( "clickableLink" ). addEventListener ( "щелчок" , функция ( е ) { е . preventDefault (); ShowMe (); }); script > body > html >
Смотрите также
Рекомендации
- ^ "Таблицы веб-стилей" . www.w3.org . Проверено 7 апреля 2018 года .
Внешние ссылки
- QuirksMode , всеобъемлющий сайт с примерами тестов и инструкциями по написанию кода DHTML, который работает в нескольких браузерах.
- Вводное руководство по DHTML