Национальная библиотека им. Н. Э. Баумана
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. Работает не совсем корректно. В чем можно убедиться на примере.
Пример 16
Динамический 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-документ.
В данном случае таблица будет действовать на все файлы, содержащие такое описание. При необходимости изменения внешнего вида группы документов можно будет только откорректировать стилевой файл.
На практике приходится применять все три способа, и здесь начинает работать каскадность стилей, которая позволяет переопределить стили. Приведенный выше список способов подключения таблиц стилей соответствует порядку переопределения: вышерасположенный способ может переопределять нижерасположенный.
Динамический HTML
До этого язык JavaScript рассматривался в чистом виде. Правда, некоторые элементы, такие как окна сообщений, не принадлежат одному этому языку, но невозможно обойтись без ввода и вывода информации. Следующий шаг заключается в объединении JavaScript с HTML с технологиями, предоставляемыми браузерами, для создания смешанной технологии динамического HTML (DHTML).
В данной главе рассматривается:
Что такое динамический HTML
Примечание Чтобы рассмотреть проблему совместимости DHTML с разными браузерами (здесь речь идет не только о различиях между Netscape Navigator и Internet Explorer, но и о разных версиях), потребовалось бы написать еще несколько книг. Изложенный здесь материал касается только взаимодействия JavaScript с различными технологиями DHTML. Используемые примеры, насколько это возможно, подходят для всех браузеров. Более подробно ознакомиться с технологиями DHTML вы можете на следующих страницах, посвященных браузерам Internet Explorer и Netscape Navigator: http://msdn.microsoft.com/workshop и http://developer.netscape.com.
Основные принципы функционирования DHTML
DHTML включает в себя:
Примечание В настоящей книге динамические шрифты не рассматриваются.
Рекомендация Многие из вас, конечно, знакомы с этими технологиями. В таком случае можете либо пропустить, либо бегло просмотреть эту главу.
Объектно-ориентированное представление элементов страницы
Любой элемент страницы (раздел или секция, заголовок, параграф, изображение, список, форма и т.п.) считается объектом.
Каждой гиперссылке, заголовку или текстовому параграфу можно присвоить имя, атрибуты стиля или цвета текста и указать это имя в сценарии, имеющемся на данной странице. Сценарий может быть написан на любом существующем языке программирования (в том числе и на VBScript), но здесь подразумевается использование языка JavaScript. Элементы страницы впоследствии могут изменяться в результате определенного события, например при наведении курсора мыши, при щелчке, нажатии клавиши на клавиатуре либо после истечения заданного промежутка времени. Изменяться может не только стиль и цвет текста, но и весь объект, включая код HTML, текст или рисунок.
Таблицы стилей и разбиение на слои
Таблицы стилей (Style sheets) используются для описания применяемого по умолчанию стиля всего документа или какой-либо его части. Это касается таких параметров, как формат страницы, тип и размер шрифта для элементов текста.
По мере создания Web-страницы в таблице стилей помимо прочего указывается цвет фона по умолчанию или имеющееся на странице изображение, цвет гиперссылок и т.п. С помощью подобных таблиц можно согласовать оформление какой-либо группы страниц или всех страниц на Web-сайте, поскольку одну таблицу стилей можно присоединить ко многим или всем документам, образующим сайт.
Таблицы стилей используются также для того, чтобы разнообразить содержимое Web-страницы с помощью информационных слоев (Layers). Каждый из этих слоев содержит собственную информацию в виде текста или изображения. Они могут скрывать другие слои или накладываться поверх существующей информации. Слои могут появляться на странице в результате действий пользователя (например, нажатия клавиши) или как часть презентации.
Сценарии
Сценарии являются третьей составляющей DHTML, которой, собственно, и посвящена эта книга. Сценарии сейчас создаются повсеместно и в различных формах (JavaScript, VBScript, Java-апплеты, управляющие элементы ActiveX и т.д.), но возможности программирования, предоставляемые DHTML, относятся к более высокому уровню. Используя их, можно обратиться к большинству элементов страницы при помощи простого сценария.
Различия между браузерами
Начинающие Web-разработчики часто задаются вопросом, почему Netscape Navigator и Microsoft Internet Explorer так сильно различаются. Чтобы ответить на него, необходимо вспомнить историю браузеров и их производителей. Как и в случае разработки любой другой программы, каждый производитель браузеров шел своим путем. Возьмите, например, два любых текстовых редактора. У них тоже все разное: интерфейс и формат файлов, кнопки и команды. В результате пользователь привыкает к одному текстовому редактору и не хочет переходить на другой. Если бы все текстовые редакторы были унифицированы, они бы отличались только своими недоработками.
Представьте, что существует несколько различных телевизионных стандартов и посмотреть какую-либо программу можно только по определенному телевизору. Как бы вы к этому отнеслись? Стали бы вы покупать три или четыре телевизора, соответствующих всем этим стандартам? Конечно, нет. Примерно то же самое происходит и в сети. И пользователи, и разработчики устали преодолевать увеличивающееся с каждым днем расстояние между двумя браузерами.
К счастью, сейчас эта пропасть постепенно исчезает, но пройдут годы, прежде чем разрыв в технологиях и стандартах окончательно сойдет на нет.
А пока вам придется считаться с теми пользователями, которые еще не обзавелись последними версиями браузеров.
Что можно сделать с помощью DHTML
Возможности DHTML почти безграничны. Web-страницы теперь больше похожи на мини-приложения, чем на статичные документы. Если вам доводилось путешествовать по сети, то вы уже встречались с самыми различными вариантами использования DHTML. Показ слайдов, Web-сайты с определяемым пользователем интерфейсом, прокрутка изображений и анимация, интерактивное представление текста на экране, игры, заполнение форм, калькуляторы и многое, многое другое.
В последних главах книги вы узнаете, как пользоваться языком JavaScript для решения наиболее распространенных задач.
Рекомендация Продолжайте странствовать по Internet в поисках новых технологий. Посетите свои любимые сайты и поинтересуйтесь, используется ли на них DHTML, Определите, что вам нравится больше всего и что бы вы хотели повторить на своей странице.
Для работы с DHTML JavaScript должен обеспечить взаимодействие с двумя ключевыми технологиями. Это объектная модель браузера и таблица стилей (являющаяся частью объектной модели документа). Объектная модель контролирует браузер и загруженный в него документ, а таблица стилей управляет форматированием и расположением элементов страницы.
Динамический HTML и Объектная Модель Документа
Программный доступ к элементам
HTML-тэг элемента определяет тип сопоставленного ему объекта. Отдельные экземпляры объектов в документе могут идентифицироваться по их уникальному идентификатору (атрибуту/свойству id ), имени (атрибуту/свойству name ) или положению в дереве элементов DOM модели. Кроме этого есть ряд важнейших объектов, которые не имеют собственных тэгов. Это такие объекты как window (окно браузера), document (HTML-документ, загруженный в окно или фрейм), event (событие).
Объект window
Многие свойства объекта window сами являются объектами. Рассмотрим важнейшие из них.
Объект navigator
Объект navigator содержит информацию о браузере. Все его свойства доступны только по чтению и могут использоваться для программного определения свойств и методов, доступных в том или ином браузере.
Объект location
Свойство href является свойством по умолчанию. Две следующие инструкции идентичны.
Присвоение значения объекту location (как в приведенном примере) немедленно открывает заданный URL в текущем окне.
Объект history
Объект history (история) содержит информацию об адресах, посещенных пользователем с момента открытия браузера. Из соображений безопасности действительные адреса недоступны, имеются лишь три метода для перемещения по индексу на страницу относительно текущей.
Объект screen
Объект screen содержит информацию о мониторе: ширина ( width ), высота ( height ), глубина цвета ( colorDepth ), выраженная как число бит на пиксель, и другие. Если у пользователя несколько мониторов, отображаются данные того, в котором открыт браузер (или его большая часть).
