Из Википедии, бесплатной энциклопедии
Перейти к навигации Перейти к поиску
HTML
Сравнения

Динамический HTML , или DHTML , представляет собой набор технологий, используемых вместе для создания интерактивных и анимированных веб-сайтов [1] с использованием комбинации статического языка разметки (например, HTML ), языка сценариев на стороне клиента (например, JavaScript ), язык определения представления (такой как CSS ) и объектная модель документа (DOM). [2] Приложение 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 может загружать каждую вкладку только тогда, когда это действительно необходимо.

Использует [ редактировать ]

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

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

Менее распространенное использование - создание браузерных экшн-игр. Хотя в конце 1990-х и начале 2000-х годов с использованием DHTML был создан ряд игр, [ необходима цитата ] различия между браузерами усложняли это: многие методы пришлось реализовать в коде, чтобы игры могли работать на нескольких платформах. В последнее время браузеры переходят на веб-стандарты , что сделало дизайн игр 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.

Структура веб-страницы [ править ]

См. Также: События DOM

Обычно веб-страница, использующая DHTML, настраивается следующим образом:

<! DOCTYPE html> < html  lang = "ru" >  < head >  < meta  charset = "utf-8" >  < title > Пример DHTML </ title >  </ head >  < body >  < div  id = "navigation" > </ div > < сценарий >  function  init ()  {  var  myObj  =  document . getElementById ( "навигация" );  // ... манипулировать myObj  }  окно . onload  =  init ;  </ скрипт > <! -  Часто код хранится во внешнем файле; это делается  путем связывания файла, содержащего JavaScript.  Это полезно, когда на нескольких страницах используется один и тот же сценарий:  ->  < script  src = "myjavascript.js" > </ script >  </ body > </ html >

Пример: отображение дополнительного блока текста [ править ]

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

<! DOCTYPE html> < html >  < head >  < meta  charset = "utf-8" >  < title > Использование функции DOM </ title >  < style >  a  {  background-color :  #eee ;  }  a : hover  {  фон :  # ff0 ;  }  # toggleMe  {  background :  #cfc ;  дисплей :  нет ;  поле:  30 пикселей  0 ;  обивка :  1 эм ;  }  </ style >  </ head >  < body >  < h1 > Использование функции DOM </ h1 >  < H2 > < ID = "ПоказатьСкрыть" HREF = "#" > Показать пункт </ > </ h2 >    < p  id = "toggleMe" > Этот абзац отображается только по запросу. </ p >  < p > Общий поток документа продолжается. </ p >  < скрипт >  function  changeDisplayState ( id )  {  var  d  =  document . getElementById ( 'showhide' ),  e  =  документ . getElementById ( id );  if  ( e . style . display  ===  'none'  ||  e . style . display  ===  '' )  {  e . стиль . дисплей  =  'блок';  d . innerHTML  =  'Скрыть абзац' ;  }  else  {  e . стиль . display  =  'нет' ;  d . innerHTML  =  'Показать абзац' ;  }  }  документ . getElementById ( 'показать скрыть' ). addEventListener ( 'нажмите' ,  функция  ( е )  {  е . preventDefault ();  changeDisplayState ( 'toggleMe' ); });  </ script >  </ body > </ html >

Объектная модель документа [ править ]

Основная статья: Объектная модель документа

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

DOM API - это основа DHTML, обеспечивающая структурированный интерфейс, который позволяет получать доступ и управлять практически всем в документе. Элементы HTML в документе доступны в виде иерархического дерева отдельных объектов, что позволяет исследовать и изменять элемент и его атрибуты путем чтения и установки свойств и путем вызова методов. Текст между элементами также доступен через свойства и методы DOM.

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

Динамические стили [ править ]

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

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

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

<! DOCTYPE html> < html  lang = "en" >  < head >  < meta  charset = "utf-8" >  < title > Динамические стили </ title >  < style >  ul  {  display :  none ;  }  </ style >  </ head > < body >  < h1  id = "firstHeader" > Добро пожаловать в динамический HTML </ h1 > < Р > < ID = "clickableLink" HREF = "#" > Динамические стили являются ключевой особенностью DHTML. </ a > </ p >   < ul  id = "unorderedList" >  < li > Изменение цвета, размера и шрифта текста </ li >  < li > Отображение и скрытие текста </ li >  < li > И многое, многое другое </ li >  </ ul > < p > Мы только начали! </ p > < сценарий >  функция  showMe ()  {  документ . getElementById ( "firstHeader" ). стиль . цвет  =  "# 990000" ;  документ . getElementById ( "unorderedList" ). стиль . display  =  "блок" ;  } документ . getElementById ( "clickableLink" ). addEventListener ( "щелчок" ,  функция  ( e )  {  e . preventDefault ();  showMe ();  });  </ script >  </ body > </ html >

См. Также [ править ]

  • Динамическая веб-страница
  • Динамические каскадные таблицы стилей
  • DHTMLEdit

Ссылки [ править ]

  1. ^ "Объектная модель документа W3C" . www.w3.org . Проверено 7 апреля 2018 .
  2. ^ «Таблицы веб-стилей» . www.w3.org . Проверено 7 апреля 2018 .

Внешние ссылки [ править ]

  • QuirksMode , всеобъемлющий сайт с тестовыми примерами и инструкциями по написанию кода DHTML, который работает в нескольких браузерах.
  • Вводное руководство по DHTML
  • Справочник по HTML и DHTML на MSDN