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

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

  • автор:

DHTML

одна из возможностей создания интерактивного веб-сайта при помощи языка разметки HTML, встраиваемого скриптового языка JavaScript, CSS и DOM.

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

DHTML приложения, как вполне автономные в браузере и без серверной поддержки, такой как база данных, иногда бываю вынуждены обращаться к Single Page Applications, или SPA.

S5 является DHTML-презентацией, выполняющейся в современных веб-браузерах. Единый XHTML-файл включает набор слайдов, которые могут просматриваться в режиме слайд-шоу (кадр за кадром, в полноэкранном представлении), а также распечатаны как пресс-релиз.

Похожие темы: нет

Синонимы: нет
Все термины на букву «D»
Все термины в глоссарии

Друзья, теперь вы можете поддержать SEOnews https://pay.cloudtips.ru/p/8828f772
Ваши донаты помогут нам развивать издание и дальше радовать вас полезным контентом.

Глава 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
    • Рекомендации

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

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

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

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