Что такое динамический html
Перейти к содержимому

Что такое динамический html

  • автор:

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

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

  • 1 Использует
  • 2 Структура веб-страницы
  • 3 Пример: отображение дополнительного блока текста
  • 4 Объектная модель документа
  • 5 Динамические стили
  • 6 См. Также
  • 7 Ссылки
  • 8 Внешние ссылки

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

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

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

Реже используется для создания браузерных игр. Хотя ряд игр был создан с использованием 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, настраивается следующим образом:

Динамический HTML. DOM и клиентские скрипты

По мере развития индустрии создания веб-сайтов возникла потребность расширить возможности использовать мультимедиа как инструмента дизайнера для создания интерактивных страниц. Эта возможность появилась с внедрением технологии, получившей название Dynamic HTML (DHTML).

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

DHTML = HTML + CSS + DOM + JavaScript.

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

О многозначности термина

С другой стороны, «динамическая веб-страница» — более широкое понятие, охватывающее любую веб-страницу, сгенерированную по-разному для каждого пользователя или набора исходных данных. Оно включает и те страницы, что созданы сценариями на стороне клиента, и те, что созданы серверными приложениями (на языках PHP, Perl, JSP, Ruby и проч.), когда веб-сервер генерирует содержимое перед отправкой клиенту.

HTML

В теме «Основы HTML» была рассмотрена обобщенная структура гипертекстового документа, которая может быть представлена в виде дерева элементов разметки. Проиллюстрируем сказанное на простом примере веб-страницы, исходный код которой приведен в Листинге 1, а структура — на рис. 1.

     Hello   

Let's start with the classical:

Hello, World

Рис. 1. Дерево элементов гипертекста

Архитектура DOM 3

Архитектура DOM 3

Document Object Model (DOM)

В браузере дерево элементов разметки (рис. 1) преобразуется в структуру данных, подобную приведенной на рис. 2. Это представление основывается на спецификации Объектной Модели Документа ( DOM ), разработанной и поддерживаемой W3C (актуальная версия стандарта — DOM Level 3). DOM описывает веб-страницу в виде иерархии объектов, наделенных набором обязательных и опциональных свойств и методов. В нотации DOM эти объекты, представляющие теги разметки, называются узлами.

Архитектура модели DOM состоит из трех частей: ядра (Core)​​, HTML и XML. Ядро DOM обеспечивает низкоуровневый набор объектов, которые могут представлять любой структурированный документ. Однако, непосредственное обращение к объектам ядра не всегда оправданно. Спецификации HTML и XML обеспечивают дополнительные, более удобные интерфейсы верхнего уровня, которые представляют более простой и прямой доступ к документам определенного типа.

Инспектор DOM

Рис. 2. Представление DOM

Каждый узел DOM имеет, по меньшей мере, следующие свойства:

  • nodeName — имя узла в соответствии со спецификацией: тег разметки HTML или XML в заданном пространстве имен, предопределенное имя в нотации DOM (#text, #comment и т.д.);
  • localName — локальное имя узла (если не переопределено, то соответствует nodeName);
  • prefix — имя (не адрес) пространства имен, описывающего узел (см. лекцию Расширяемый язык разметки XML);
  • namespaceURI — адрес файла описания спецификации (например, http://www.w3.org/1999/xhtml);
  • nodeType — целочисленный идентификатор типа узла (1 — элемент; 3,8 — содержимое, 9 — документ, 10 — тип документа и т.п.);
  • nodeValue — содержимое элемента (непосредственно данные);
  • id — уникальный в пределах документа идентификатор узла;
  • class — имя класса CSS.

Атрибуты тегов в DOM представлены в виде атрибутов же узлов в формате «name=value» (рис. 3).

Атрибуты узлов

Рис. 3. Атрибуты узлов

API DOM

Для обращения к DOM из скриптов и внешних программ используется стандартизованный объектно-ориентированный интерфейс ( API ), в котором каждый узел представлен в виде объекта с набором публичных свойств, методов и событий.

«Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated.» W3C

В этом определении DHTML, данном Консорциумом W3C не указывается, какой именно скриптовый язык должен быть использован в качестве инструмента доступа к DOM при разработке динамических страниц. В общем смысле, для управления поведением веб-страницы может быть использован любой код, который позволяет изменять содержание и внешний вид документа, или иным образом взаимодействовать с пользователем через веб-браузер. Тем не менее, исторически сложилось так, что основным языком разработки динамических страниц стал JavaScript и многое из того, что относится к DHTML вращается вокруг этого скриптового языка.

Правила CSS

Каждому узлу DOM сопоставлен набор правил CSS, куда входят стили по умолчанию, пользовательские и авторские стили. Исходя из этого набора и с учетом приоритетов для узла формируется вычисленная таблица стилей, которая и используется при его отображении (рис. 3).

Правила CSS

Рис. 4. DOM и CSS

Вычисленные стили, так же как и атрибуты, доступны через интерфейсы DOM как свойства объектов JavaScript.

DHTML в действии

     Hello function sayHello() 

Click Me

После загрузки этой страницы в браузере будет выстроена модель DOM, приведенная на рис. 5а. Однако, после того как пользователь кликнет на тексте, документ изменится и его структура станет такой, как на рис. 5б.

Инспектор DOM

Рис. 5. Изменение DOM после выполнения скрипта

Практическое применение DHTML

Несколько примеров, демонстрирующих некоторые возможности, представляемые DHTML:

  • Очень простой онлайн-калькулятор;

Глава 6 Динамический HTML

Динамический HTML (Dynamic HTML, или DHTML) — это развитие традиционного языка HTML, позволяющее создавать интерактивные, «живые» HTML-документы. Стремлению сделать Web-страницу динамичной и интерактивной, то есть легко изменяющейся, управляемой пользователем, столько же лет, сколько и самому WWW.

Один из методов реализации идеи динамичности заставил разработчиков «дополнить» HTML и встроить в браузеры средства обработки специальных языков программирования, таких как JavaScript, JScript и VBScript. Сами сценарии (скрипты), т. е. программы, написанные на одном из этих языков, можно размещать вместе с основным содержанием и разметкой HTML-документа. Программы на этих языках перемещаются по сети Интернет в виде исходных текстов, а компилируются и выполняются после загрузки в конкретный браузер.

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

С противоположного фланга на HTML наступает, принимая на себя часть его функций и снимая тем самым часть его ограничений, язык иерархических стилевых спецификаций (Cascading Style Sheets, CSS). Главная цель CSS (эту технологию часто называют каскадные таблицы стилей.) — отделить структуру документа от его оформления и позволить автору или пользователю самому решать, как должен выглядеть тот или иной элемент содержания HTML-страницы. Другим достоинством таблиц (иногда называемых листами) стилей является возможность обеспечить единый стиль оформления некоторого набора HTML-документов, например курсовых или дипломных работ.

На стыке этих двух расширений HTML — языка стилей и языка сценариев — и возник тот набор технологий, который сейчас принято называть динамическим HTML. Основную идею динамического HTML можно сформулировать очень просто: полный контроль языка сценариев над всеми без исключения элементами документа, параметрами их оформления и размещения (как подразумеваемыми в HTML, так и задаваемыми с помощью CSS) и даже над самим текстом страницы. Благодаря этому любой элемент HTML-документа может изменять свое содержание и внешний вид.

К сожалению, два варианта реализации динамического HTML, предлагаемые компаниями Netscape Communications Corporation и Microsoft — разработчиками двух наиболее популярных браузеров, имеют между собой очень мало общего, особенно если судить по документации самих этих компаний. Различиям между этими реализациями и рекомендациям по подготовке HTML-страниц, совместимых с разными браузерами, посвящено много статей в Интернет. В этой главе рассматриваются образцы применения DHTML, одинаково отображаемые этими браузерами, и даются советы, как достичь такого «взаимопонимания».

Book navigation

  • Содержание
  • Глава 1 Основы информатики
  • Глава 2 Операционные системы и сети
  • Глава 3 Графика на компьютере
  • Глава 4 Обработка текста
  • Глава 5 Основы языка HTML
  • Глава 6 Динамический HTML
    • Стили и таблицы стилей
    • Язык JavaScript
    • Рекомендации

    Что такое DHTML. Плюсы и минусы технологии Dynamic HTML

    DHTML (Dynamic HTML) – это технология, позволяющая создавать интерактивные и динамические веб-страницы. DHTML объединяет в себе языки разметки HTML, стилизации CSS и программирования JavaScript.

    История создания DHTML

    DHTML появился в конце 1990-х годов и был результатом поиска новых способов улучшения пользовательского опыта на веб-сайтах. Разработчики начали использовать технологии JavaScript и CSS для создания более интерактивных и анимированных элементов на страницах.

    Как работает DHTML?

    DHTML использует DOM (Document Object Model), чтобы изменять содержимое, стиль и расположение элементов на странице. С помощью JavaScript можно изменить свойства элемента или его содержимое при определенном событии, таком как щелчок мыши или наведение курсора.

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

    Что такое DHTML (Dynamic HTML) – как работает и примеры

    Пример использования DHTML

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

    Преимущества и недостатки DHTML

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

    Недостатком DHTML является то, что он может потребовать от пользователя браузера или устройства достаточно мощной конфигурации для обработки большого количества динамических элементов на странице. Кроме того, использование DHTML может затруднить SEO-оптимизацию веб-сайта.

    Заключение

    DHTML это технология, которая позволяет создавать интерактивные и динамические веб-страницы с помощью HTML, CSS и JavaScript. Она имеет свои преимущества и недостатки, но все же остается одним из основных инструментов для создания современных веб-сайтов.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *