что такое динамический html
DHTML отличается от Ajax тем, что страница DHTML по-прежнему основана на запросах / перезагрузках. При использовании DHTML после загрузки страницы между клиентом и сервером может не быть никакого взаимодействия; вся обработка происходит в JavaScript на стороне клиента. Напротив, страница Ajax использует функции DHTML для инициирования запроса (или «подзапроса») к серверу для выполнения дополнительных действий. Например, если на странице есть несколько вкладок, чистый подход DHTML будет загружать содержимое всех вкладок, а затем динамически отображать только ту, которая активна, в то время как AJAX может загружать каждую вкладку только тогда, когда это действительно необходимо.
Содержание
Использование
DHTML позволяет авторам добавлять на свои страницы эффекты, которые иначе трудно достичь, путем изменения объектной модели документа (DOM ) и стиль страницы. Комбинация HTML, CSS и JavaScript предлагает способы:
Структура веб-страницы
Обычно веб-страница, использующая DHTML, настраивается следующим образом:
Пример: отображение дополнительного блока текста
Следующий код иллюстрирует часто используемую функцию. Дополнительная часть веб-страницы будет отображаться только по запросу пользователя.
Объектная модель документа
DOM также предоставляет доступ к действиям пользователя, таким как нажатие клавиши и щелчок мышью. Эти и другие события можно перехватывать и обрабатывать, создав функции и подпрограммы обработчиков событий. Обработчик событий получает управление каждый раз, когда происходит данное событие, и может выполнять любое соответствующее действие, в том числе использовать DOM для изменения документа.
Динамические стили
Объектная модель обеспечивает программный доступ к стилям. Это означает, что вы можете изменять встроенные стили для отдельных элементов и изменять правила стиля, используя простое программирование на JavaScript.
Динамический HTML
Вы будете перенаправлены на Автор24
Динамический HTML (Dynamic HTML, или DHTML) представляет собой развитие традиционного языка HTML, которое позволяет создать интерактивные, так называемые живые, HTML-документы. Стремление сделать веб-страницу динамичной и интерактивной, т.е. легко изменяющейся, управляемой пользователем было всегда.
Одним из методов реализации идеи динамичности стало дополнение разработчиками языка HTML и встраивание в браузеры средств обработки специальных языков программирования (JavaScript, JScript и VBScript). Сами сценарии (скрипты), т. е. программы, созданные с помощью этих языков, размещаются совместно с основным содержанием и разметкой HTML-документа. Исходные тексты подобных программ перемещаются в сети Интернет, а компилируются и выполняются после загрузки в конкретный браузер.
Все события браузера (например, нажатие кнопки) отслеживаются и обрабатываются с помощью программ, созданных на одном из выше перечисленных языков. Важность подобных событий заключается в организации ими взаимодействия между программой и браузером. К примеру, программой определяется время выхода пользователя со страницы, и выполняются при этом определенные действия.
С другой стороны часть функций HTML принимает на себя, снимая таким образом с него часть ограничений, язык иерархических стилевых спецификаций (Cascading Style Sheets, CSS). Главной целью CSS является отделение структуры документа от его оформления, что позволяет автору или пользователю самим решать, какой вид примет определенный элемент содержания HTML-страницы. Другое достоинство таблиц стилей заключается в обеспечении единого стиля оформления определенного набора HTML-документов (например, контрольных работ).
На стыке этих расширений HTML – языка стилей и языка сценариев – и возник набор технологий, называемый динамическим HTML. Основная идея динамического HTML состоит в полном контроле языка сценариев над всеми элементами документа, а также параметрами их оформления и размещения и даже над текстом страницы. Благодаря чему любые элементы HTML-документа могут менять свое содержание и внешний вид. Далее рассмотрим образцы применения DHTML, которые одинаково отображаются всеми браузерами.
Готовые работы на аналогичную тему
Стили и таблицы стилей
Таблица (лист) стилей CSS является набором правил отображения, которые применяются в сопутствующем ей документе. Все свойства таблиц стилей условно подразделяют на несколько групп, которые управляют:
Использование стилей
Одним из способов подключения стиля к веб-странице является применение в заголовке документа контейнера :
Включенный в данный контейнер атрибут TYPE=»text/css» указывает браузеру на содержание в нем описания стилей. Данный атрибут принимает только указанные значения, в случае же когда он не указывается, некоторые браузеры игнорируют всю таблицу стилей.
Непосредственное описание стиля состоит из селектора тега, в котором указываются имя тега данного правила стиля и фигурные скобки, в которых заключены одна или несколько пар объявлений вида «свойство_стиля:значение», разделенных точкой с запятой:
При использовании одного правила точка с запятой не ставится.
Задание значений
Значения в правилах таблиц стилей задаются с использованием корректного синтаксиса.
Задать цвет (color), также как и в тегах HTML, можно 2 способами: наименованием и численным значением. В спецификации CSS1 («Спецификации каскадных таблиц стилей, уровень 1»), разработанной Консорциумом World Wide Web (W3C), перечисляются лишь 16 названий цветов, которые можно использовать в таблице стилей:
aqua gray navy silver
black green olive teal
blue lime purple white
fuchsia maroon red yellow
Другие же названия из полного списка цветов тоже поддерживаются некоторыми браузерами.
Когда цвет задается численным значением, возможно использование шестнадцатеричных значений или значений из тройки вида rgb (red, green, blue), где red, green и blue представлены числами от 0 до 255 или процентными величинами, которые определяют яркость каждой составляющей цвета в RGB. Значениями 255 или 100% указывается максимальная яркость соответствующей составляющей цвета; значениями 0 или 0% – полное отсутствие составляющей цвета.
Единицы длины (length) задаются числом, после которого без пробела савится двухсимвольное обозначение единицы измерения (em, ex, in, cm и др.) Единицы измерения еm и ех обозначают общую высоту шрифта и высоту буквы «х» соответственно. Единицей измерения рх обозначается размер пикселя на экране, а in, cm, mm, pt и рс обозначают дюймы, сантиметры, миллиметры, пункты и цицеро соответственно. Один дюйм содержит 25,4 мм или 72,27 пункта, а в цицеро – 12 пунктов. При значении, равном нулю, обозначение единицы измерения опускается. Некоторые значения задаются процентами (percent). Их вычисляют как процент от другого свойства элемента, обычно его размера.
Чтобы указать местоположение ресурса используют его URL-адрес. После ключевого слова url сразу (без пробела) ставится открывающая круглая скобка, затем URL, заключенный в одиночные или двойные кавычки, и закрывающая правая скобка.
Некоторые значения представляют собой последовательности (list) других величин и описываются как список некоторых значений. Список может состоять из одного или нескольких допустимых значений, разделенных запятыми.
Классы стилей
При создании HTML-документов часто возникает необходимость выделения блоков информации определенным образом, подчеркивая их уникальность либо логическую нагрузку. Стандартный HTML содержит теги логической разметки (например, тег используется для выделения длинных цитат). CSS позволяет автору самому придумать логическую конструкцию и описать ее внешний вид.
Для выделений используется селектор класса CLASS.
Каскадные таблицы стилей
Одной из основных особенностей таблиц стилей является каскадность, которая обозначает, что обработка стилей идет с использованием специального механизма каскадирования. Для одного документа могут указываться разные наборы правил. Один набор будет определять разработчик документа, другие могут задаваться пользователем. Помимо этого, каждый браузер содержит набор правил, которые используются по умолчанию (если свойство явно не определено). Средствами каскадирования собираются и объединяются различные правила, а также разрешаются возникающие при этом конфликты.
Свойство каскадности тесно связано со способом подключения стилей к HTML-документу, которое можно выполнить 3 способами: inline-описанием, описанием в секции заголовка и использованием внешнего файла.
Самым простым является inline-описание или описание, которое встроено в тег. С помощью дополнительного атрибута STYLE определяются необходимые стилевые параметры в любом теге. Основным недостатком данного способа является действие определения стиля только в пределах одного тега.
Намного удобнее заранее определять все стили оформления и в дальнейшем применять их к соответствующим тегам, т.е. использовать способ описания стилей в секции заголовка. Таблица стилей, подключенная подобным образом, действует на весь HTML-документ.
В данном случае таблица будет действовать на все файлы, содержащие такое описание. При необходимости изменения внешнего вида группы документов можно будет только откорректировать стилевой файл.
На практике приходится применять все три способа, и здесь начинает работать каскадность стилей, которая позволяет переопределить стили. Приведенный выше список способов подключения таблиц стилей соответствует порядку переопределения: вышерасположенный способ может переопределять нижерасположенный.
Часть IV.
Динамические Веб-страницы:
технологии DHTML
«Фильм должен начинаться с землетрясения, а потом
напряжение должно нарастать.»
Глава 4.1. Введение в Dynamic HTML
4.1.1. Что такое Dynamic HTML?
Последние годы развитие World Wide Web происходит по знаком Dynamic HTML (сокращенно DHTML). Трудно найти публикацию, посвященную WWW, в которой не шла бы речь о DHTML, но еще труднее найти публикацию, в которой это понятие было бы четко сформулировано. В этом разделе мы попытаемся дать определение Dynamic HTML, приемлемое для практического использования, и проследить этапы его становления.
В самом общем виде можно сказать, что Dynamic HTML это набор технологий, работающих на стороне клиента и призванных преодолеть статичность традиционных Веб-страниц. Точнее говоря, это технологии, которые обеспечивают
Для достижения перечисленных целей используются следующие методы:
Все эти явно разнородные методы покоятся, в действительности, на двух китах. Первым из них является интеграция HTML-документа, каскадных стилей и сценариев клиента, основанная на объектной модели документа. Вторым использование компонентного программирования, позволяющего нам встраивать однажды разработанные компоненты во вновь создаваемые документы.
Что же дает DHTML разработчику Веб-узлов? По нашему мнению, основных преимуществ три:
См. также мою статью WDH+: Влияние DHTML на трафик.
Если присмотреться внимательнее, то противодействие распространению DHTML вызвано совершенно другой причиной. Дело в том, что до сих пор создание Веб-страниц не требовало специальных знаний, кроме знакомства с HTML и умения минимально манипулировать графикой. С появлением DHTML ситуация изменилась в корне: разработка динамической страницы требует программирования на сценарном языке, сопряженного с пониманием работы обозревателя на уровне генерации и обработки событий, владением основами пользовательского интерфейса и т. п. Иными словами, Веб-дизайн востребовал специалистов, что у многих вызывает неприятие. На самом деле, демократическая сущность WWW от этого не пострадала. По-прежнему любой желающий может создать, скажем, свою домашнюю страничку на уровне своих знаний, и DHTML этому не помеха. Другое дело, что профессиональные разработки должны соответствовать по уровню лучшим из наличествующих технологий, но на то они и называются профессиональными.
4.1.2. Краткая история DHTML
Dymanic HTML родился в процессе конкурентной борьбы между Веб-обозревателями корпораций Netscape и Microsoft. Он появился в обозревателе Netscape Navigator 4, где были введены два новых тега LAYER и ILAYER, которые позволяли создавать на Веб-страницы слои с динамически изменяемыми свойствами (положением на странице, стилями отображения и т. п.). В ответ на это Microsoft в Internet Explorer 4 предложили намного более мощную поддержку динамических страниц, которая не использовала нестандартных тегов и опиралась на единый подход к HTML-документу как к дереву объектов с динамически изменяемыми атрибутами и свойствами стилей.
Основное различие между двумя подходами состояло в парадигме самого понятия «динамическая страница». Netscape под этим понимал динамическое формирование Веб-страницы в процессе ее загрузки и последующую косметическую правку в ответ на действия пользователя без существенных изменений содержания страницы. Microsoft с самого начала занял позицию динамического формирования и изменения любых элементов страницы в любой момент ее существования.
Понятно, что такое различие моделей DHTML в основных обозревателях никак не соответствует базовой концепции WWW как платформо-независимой информационной сети. Поэтому W3C был вынужден предпринять усилия по стандартизации Dynamic HTML и начал с разработки спецификации объектной модели документа (DOM), в основу которой была положена модель Microsoft, предложенная W3C в качестве Веб-стандарта. В результате в октябре 1998 г. был принята рекомендация W3C по первому уровню DOM (DOM 1), а в ноябре 2000 г. приняты рекомендации по второму уровню DOM (DOM 2), существенно расширяющему DOM 1.
Тем временем Microsoft выпустил обозреватели Internet Explorer 5 и 5.5, которые существенно расширили возможности DHTML, причем во многом в направлениях, не предусмотренных стандартами W3C. Параллельно шла работа над обозревателем Netscape 6, который был призван вернуть часть рынка, завоеванного Microsoft (летом 2000 г. 86% пользователей WWW использовали Internet Explorer и только 14% Netscape). С этой целью была создана независимая группа Mozilla.org 
, которая опубликовала в Сети исходные тексты обозревателя Netscape и собрала группу независимых разработчиков для приведения его в соответствие стандарту. Результатом их работы стало ядро обозревателя Gecko, почти в полной мере соответствующее стандартам HTML 4.0, CSS1 и DOM 1 (поддержка стандартов CSS2 и DOM 2 реализована частично) и одновременно сохранившее некоторую совместимость с моделью Netscape 4. Gecko является основой обозревателя Netscape 6, который после двух с половиной лет обещаний вышел, наконец, в свет в конце 2000 г. Выпущенная версия Netscape 6 пока очень сырая, и в ближайшее время следует ожидать появления ее новых сборок, которые должны будут заменить Netscape 4.
Таким образом, сегодня на рынке присутствуют:
В соответствии со сказанным, наше описание Dynamic HTML построено следующим образом. В этой части мы рассматриваем спецификацию объектной модели документа согласно стандартам W3C и ее реализацию в MSHTML и Gecko. Нестандартные возможности Microsoft DHTML и Gecko DHTML рассматриваются в статьях WDH+ (за исключением объекта window, который пока не стандартизован, и в силу своей важности рассматривается здесь (см. гл. 4.13 и 4.14). Динамическую модель Netscape 4.x мы решили не описывать, как представляющую скорее исторический интерес, чем практический (решающим аргументом здесь послужил тот факт, что сама корпорация Netscape отказалась от поддержки слоев в новом обозревателе).
О Gecko-обозревателях см. также: WDH+: Богач, бедняк.
1 Сторонникам этого романтического подхода можно посоветовать только одно: заключайте весь документ в теги PRE это единственный шанс, что ваша страница будет отображаться более или менее одинаково во всех обозревателях. Что касается политического подтекста подобной позиции (обычно связанного с пресловутым лозунгом «Microsoft must die»), то этот справочник написан не для борцов с монополиями, а для тех, кто хочет создавать качественные продукты, пользуясь для этого всеми доступными средствами.
Национальная библиотека им. Н. Э. Баумана
Bauman National Library
Персональные инструменты
Dynamic HTML
 | |
| Семейство | HTML |
|---|---|
| Первый появившийся | 1997 |
| Язык физической реализации | HTML |
| Платформа | web-браузеры Microsoft и Netscape |
| OS | Windows, MAC |
| Формат файлов | .dhtml |
Динамическая веб-страница представляет собой широкую концепцию, которая может охватывать любую веб-страницу, сгенерированную персонально для каждого пользователя, вхождение загрузки или конкретных значений переменных. Эта концепция включает в себя страницы, созданные с помощью скриптов на стороне клиента и страницы, созданные с помощью скриптов на стороне сервера (PHP, Perl, JSP или ASP.NET), где веб сервер генерирует контент перед отправкой его клиенту.
DHTML отличается от Ajax тем, что DHTML основана на запросах и перегрузках. При использовании DHTML может вовсе отсутствовать взаимодействие между клиентом и сервером после загрузки страницы, так как вся обработка происходит в JavaScript на стороне клиента. Страница Ajax использует функции DHTML для инициации запроса (либо подзапроса) к серверу для выполнения дополнительных действий. Например, если на странице имеется несколько вкладок, DHTML будет подгружать содержимое всех вкладок и динамически отображать только ту, которую необходимо отобразить в данный момент. В то время как Ajax подгружает каждую из вкладок только тогда, когда это необходимо.
Содержание
Использование
DHTML позволяет авторам добавлять на страницы эффекты, которые трудно достичь с помощью объектной модели документа или каскадной таблицы стилей. Например, с помощью использования сочетания HTML, CSS и JavaScript возможно осуществить:
Структура веб-страницы
Пример настройки страницы на DHTML.
Отличия DHTML от HTML
Несмотря на то, что по своей сути DHTML является ответвлением семейства HTML, а в настоящее время он был заменен HTML5, который обладает тем же и большим функционалом, между HTML и непосредственно DHTML существует ряд значительных различий. [Источник 2]
Среди этих различий выделяют:
Объектная модель документа
Кроме того, DOM обеспечивает доступ к действиям пользователя, например, таким, как нажатие клавиши или щелчок мыши. Можно перехватывать и обрабатывать подобные события, создавая функции и процедуры обработчика событий. Обработчик событий, в свою очередь, будет получать управление каждый раз, когда происходит заданное событие и будет выполнять любые соответствующие действия, включая использование DOM для изменения документа.
Каскадные таблицы стилей
Динамические возможности DHTML
Возможности DHTML позволяют создавать полностью интерактивные сайты. Это полезно в практических целях. Например, на сайтах интернет-магазинов с помощью DHTML пользователь может выбирать товары, задавать вопросы и получать ответы, созвать заявки и оформлять заказы. И все это осуществляется при помощи запрограммированных на определенное реагирование скриптов.
С помощью DHTML можно создавать сайты-презентации, слайд-шоу, проводить рекламные промоакции, развлекать и увлекать потенциальных клиентов. Разумеется, DHTML придумывали не для игр, а именно для решения практических коммерческих задач, для которых в обычном сайте требовалось наличии живого менеджера для ответов на вопросы посетителей.
Однако DHTML сегодня уже прошлый век. В настоящее время для создания динамических сайтов реализуется новая версия HTML 5. Этот инновационный язык гипертекста представляет собой своего рода компиляцию наработок всех предыдущих версий HTML.
Сайты на основе HTML 5 одинаково выглядят как на стационарных, так и на мобильных компьютерах. А также и на любых операционных системах.
Для HTML 5 даже не предусмотрено использование Flash-плейера для просмотра видео. Все реализовано за счет тегов HTML 5. [Источник 3]
DHTML
DHTML (динамический HTML) – это набор средств, которые позволяют создавать более интерактивные Web-страницы без увеличения загрузки сервера. Другими словами, определенные действия посетителя ведут к изменениям внешнего вида и содержания страницы без обращения к серверу.
DHTML построен на объектной модели документа (Document Object Model, DOM), которая расширяет традиционный статический HTML-документ. DOM обеспечивает динамический доступ к содержимому документа, его структуре и стилям. В DOM каждый элемент Web-страницы является объектом, который можно изменять. DOM не определяет новых тегов и атрибутов, а просто обеспечивает возможность программного управления всеми тегами, атрибутами и каскадными листами стилей (CSS).
События динамичеcкого HTML
На WEB-страницах можно обеспечить реакцию на определенные действия посетителя или изменения состояния документа или окна, которые вызывают определенные события.
Посетитель генерирует события при передвижении мыши, нажатии кнопок мыши и клавиатуры. Изменения состояния документа генерируют события при загрузке документа, изображений или объектов, при появлении ошибки на странице или переходе фокуса от одного элемента к другому.
Модель событий DHTML связана с определенной иерархией HTML-контейнеров и основана на всплывании событий и действии по умолчанию.
Всплывание событий заключается в том, что на событие может быть получена реакция не только от элемента-источника события, но также и от всех его родительских элементов вплоть до тела документа и самого документа. Событие может быть обработано на любом уровне. В приведенном ниже примере обработчик щелчков мышью на ссылке будет также обрабатывать щелчки мышью на изображении.
Пример 1
Всплывание события
Для получения информации можно щелкнуть мышкой как на изображении, так и на тексте:
Связывание событий
Установление связи между определенным событием и сценарием называется связыванием событий. События можно связать с помощью специальных атрибутов любого элемента или с помощью тега script.
Связывание событий с атрибутами удобно, но требует расширения языка HTML каждый раз при изобретении нового события. А так как HTML развивается медленно, данный подход используется только для небольшого набора встроенных событий. Как атрибуты любого элемента в DHTML представлены события мыши и клавиатуры.
Пример 2
Смена графического объекта
Для смены графического объекта переместите на него мышку – Иоганн Себастьян Бах сменит Людвига ван Бетховена.
Уведите с него мышку – Людвиг ван Бетховен сменит Иоганна Себастьяна Баха.
Пример 3
Изменение вида данного элемента
Для изменения цвета и шрифта данного текста нажимайте и отпускайте кнопку мыши
Обратите внимание на то, что в примере 2 область действия обработчика события определена с помощью идентификатора B_B, а в примере 3 – с помощью указателя this.
Применение script является более общим механизмом связывания события со сценарием. Все события представлены как свойства в DOM. Используя это, перепишем наш пример в таком виде:
Пример 4
Можно также использовать метод addEventListener():
Пример 5
События мыши
События клавиатуры
Событие прокручивания
События фокуса
Пример 6
События формы
Пример 7
OnReset Возникает после щелчка на кнопке Reset. Назначение – вывод предупреждения о сбросе.
События документа
Пример 8
OnUnload Возникает при выгрузке страницы. Используется для освобождения каких-либо ресурсов и вывода дополнительных сообщений. OnAbort Возникает при срыве загрузки графического объекта. OnError Возникает лишь при неудачной загрузке графического элемента или всей WEB-страницы. Все остальные ошибки это событие не отлавливает. Если в примере 9 файл m.gif не будет найден, то на экране появится предусмотренное сообщение.
Пример 9
Событие помощи
Объект event
Для получения информации о событии служит объект event.
Свойства объекта event
Пример 10
type Определение события. Имя события возвращается в нижнем регистре без префикса on.
Пример 11
Пример 12
altKey Состояние клавиши (true/false). ctrlKey Состояние клавиши (true/false). shiftKey Состояние клавиши (true/false). keyCode ASCII-код нажатой клавиши.
Динамическое содержание
Содержание HTML-документа можно менять после загрузки страницы.
Свойства динамического содержания
Пример 13
Данные свойства динамического содержания могут обращаться к элементу или его содержанию только как к целому. Если, например, требуется изменить лишь один символ в параграфе, то придется заново переписать весь параграф. Однако, можно напрямую манипулировать любой частью HTML-документа. Такую возможность предоставляет объект TextRange, который будет рассмотрен чуть позже.
Методы Adjacent
Кроме перечисленных четырех свойств динамического содержания имеются еще два метода для вставки содержания:
insertAdjacentText Вставка текста. insertAdjacentHTML Вставка HTML.
Оба метода Adjacent имеют по два аргумента: место вставки и содержание. Место вставки определяется ключами:
Пример 14
Методы Adjacent удобно использовать для вставки новых параграфов или элементов списков.
Объект TextRange
Используя объект TextRange можно редактировать любой текст, а также менять текст, выделенный посетителем на экране.
Свойства доступа к тексту
Метод вставки HTML
Методы позиционирования объекта TextRange
Методы move, moveStart и moveEnd возвращают число, равное расстоянию перемещения. Если будет задано перемещение на 100 слов в документе, содержащим 50 слов, то объект TextRange будет помещен в последнее слово, а метод возвратит расстояние перемещения. Для проверки успешности проведения перемещения возвращаемое значение сравнивается с заданным расстоянием перемещения.
Пример 15
moveToPoint(prm1, prm2) Определяет элемент, который выведен в точке, координаты которой заданы параметрами prm1, prm2. Работает не совсем корректно. В чем можно убедиться на примере.