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
Document Object Model (DOM)
В браузере дерево элементов разметки (рис. 1) преобразуется в структуру данных, подобную приведенной на рис. 2. Это представление основывается на спецификации Объектной Модели Документа ( DOM ), разработанной и поддерживаемой W3C (актуальная версия стандарта — DOM Level 3). DOM описывает веб-страницу в виде иерархии объектов, наделенных набором обязательных и опциональных свойств и методов. В нотации DOM эти объекты, представляющие теги разметки, называются узлами.
Архитектура модели DOM состоит из трех частей: ядра (Core), HTML и XML. Ядро DOM обеспечивает низкоуровневый набор объектов, которые могут представлять любой структурированный документ. Однако, непосредственное обращение к объектам ядра не всегда оправданно. Спецификации HTML и XML обеспечивают дополнительные, более удобные интерфейсы верхнего уровня, которые представляют более простой и прямой доступ к документам определенного типа.
Рис. 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).
Рис. 4. DOM и CSS
Вычисленные стили, так же как и атрибуты, доступны через интерфейсы DOM как свойства объектов JavaScript.
DHTML в действии
Hello function sayHello()Click Me
После загрузки этой страницы в браузере будет выстроена модель DOM, приведенная на рис. 5а. Однако, после того как пользователь кликнет на тексте, документ изменится и его структура станет такой, как на рис. 5б.
Рис. 5. Изменение DOM после выполнения скрипта
Практическое применение DHTML
Несколько примеров, демонстрирующих некоторые возможности, представляемые DHTML:
- Очень простой онлайн-калькулятор;