Войти
Динамический HTML, или DHTML, представляет собой набор технологий, используемых вместе для создания интерактивных и анимированных веб-сайтов с помощью комбинации статического языка разметки (например, HTML ), язык сценариев на стороне клиента (например, JavaScript ), язык определения представления (например, CSS ) и объектной модели документа (DOM). Приложение 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 предлагает способы:
Реже используется для создания браузерных игр. Хотя ряд игр был создан с использованием DHTML в конце 1990-х - начале 2000-х годов, различия между браузерами усложняли задачу: многие методы приходилось реализовывать в коде, чтобы игры могли работать на нескольких платформах. В последнее время браузеры переходят на веб-стандарты, что сделало дизайн игр 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, настраивается следующим образом:
Пример DHTML
Следующий код иллюстрирует часто используемую функцию. Дополнительная часть веб-страницы будет отображаться только по запросу пользователя.
Использование функции DOM Динамический HTML - Dynamic HTML
Это абзац, который отображается только по запросу.
Общий поток документа продолжается.
DHTML сам по себе не является технологией; скорее, это продукт трех взаимосвязанных и дополнительных технологий: HTML, каскадных таблиц стилей (CSS) и JavaScript. Чтобы позволить скриптам и компонентам получать доступ к функциям HTML и CSS, содержимое документа представляется как объекты в модели программирования, известной как объектная модель документа (DOM).
DOM API - это основа DHTML, обеспечивающая структурированный интерфейс, который позволяет получать доступ и управлять практически всем в документе. Элементы HTML в документе доступны в виде иерархического дерева отдельных объектов, что позволяет исследовать и изменять элемент и его атрибуты путем чтения и установки свойств и путем вызова методов. Текст между элементами также доступен через свойства и методы DOM.
DOM также предоставляет доступ к действиям пользователя, таким как нажатие клавиши и щелчок мышью. Эти и другие события можно перехватывать и обрабатывать, создав функции и подпрограммы обработчиков событий. Обработчик событий получает управление каждый раз, когда происходит данное событие, и может выполнять любое соответствующее действие, в том числе использовать DOM для изменения документа.
Динамические стили - ключевая особенность DHTML. Используя CSS, можно быстро изменить внешний вид и форматирование элементов в документе без добавления или удаления элементов. Это помогает сделать документы небольшими, а сценарии, управляющие документом, быстрее.
Объектная модель обеспечивает программный доступ к стилям. Это означает, что вы можете изменять встроенные стили для отдельных элементов и изменять правила стиля, используя простое программирование на JavaScript.
Встроенные стили - это назначения стилей CSS, которые были применены к элементу с помощью атрибута style. Вы можете проверить и установить эти стили, получив объект стиля для отдельного элемента. Например, чтобы выделить текст в заголовке, когда пользователь наводит на него указатель мыши, вы можете использовать объект стиля, чтобы увеличить шрифт и изменить его цвет, как показано в следующем простом примере.
Динамические стили Динамический HTML - Dynamic HTML
Мы только начали!
 | JavaScript / DHTML |
