Динамический HTML: создание интерактивных веб-страниц
Dynamic HTML
Динамический HTML (DHTML): создание интерактивных и анимированных веб-страниц с помощью JavaScript и стилей. Обзор технологии и её отличия от динамических страниц.
Сравнивайте с английским: нажмите на абзац — оригинал откроется в окне. Кнопка EN под абзацем показывает его прямо в тексте.
Содержание
Введение
Кодирование интерактивных или анимированных веб-сайтов
Coding interactive or animated websites
Динамический HTML, или DHTML, – это термин, который некоторые производители браузеров использовали для описания комбинации HTML, таблиц стилей и клиентских скриптов (JavaScript, VBScript или любых других поддерживаемых скриптов), позволяющей создавать интерактивные и анимированные документы. Применение DHTML было представлено Microsoft с выпуском Internet Explorer 4 в 1997 году.
Dynamic HTML, or DHTML, is a term which was used by some browser vendors to describe the combination of HTML, style sheets and client side scripts (JavaScript, VBScript, or any other supported scripts) that enabled the creation of interactive and animated documents. The application of DHTML was introduced by Microsoft with the release of Internet Explorer 4 in 1997. Unreliable source: date=November 2022
DHTML позволяет скриптовым языкам изменять переменные в языке описания веб-страницы, что, в свою очередь, влияет на внешний вид и функциональность изначально "статического" содержимого HTML-страницы после её полной загрузки и в процессе просмотра. Таким образом, динамическая характеристика DHTML заключается в том, как он функционирует во время просмотра страницы, а не в его способности генерировать уникальную страницу при каждой загрузке. Динамическая веб-страница – это более широкое понятие, охватывающее любую веб-страницу, генерируемую по-разному для каждого пользователя, при каждом обращении или в зависимости от конкретных значений переменных. Это включает страницы, созданные с помощью клиентских скриптов, и страницы, созданные с помощью серверных скриптов (таких как PHP, Python, JSP или ASP.NET), где веб-сервер генерирует контент перед отправкой его клиенту. DHTML является предшественником Ajax, а страницы DHTML по-прежнему работают на основе запросов/перезагрузок. В модели DHTML взаимодействие между клиентом и сервером после загрузки страницы может отсутствовать; вся обработка происходит на стороне клиента. В отличие от этого, Ajax расширяет возможности DHTML, позволяя странице инициировать сетевые запросы (или "подзапросы") к серверу даже после загрузки страницы для выполнения дополнительных действий. Например, если на странице есть несколько вкладок, подход, основанный только на DHTML, загрузит содержимое всех вкладок, а затем динамически отобразит только активную, в то время как AJAX будет загружать каждую вкладку только тогда, когда она действительно потребуется.
DHTML allows scripting languages to change variables in a web page's definition language, which in turn affect the look and function of otherwise "static" HTML page content after the page has been fully loaded and during the viewing process. Thus the dynamic characteristic of DHTML is the way it functions while a page is viewed, not in its ability to generate a unique page with each page load. By contrast, a dynamic web page is a broader concept, covering any web page generated differently for each user, load occurrence, or specific variable values. This includes pages created by client side scripting and ones created by server side scripting (such as PHP, Python, JSP or ASP. NET) where the web server generates content before sending it to the client. DHTML is the predecessor of Ajax and DHTML pages are still request/reload based. Under the DHTML model, there may not be any interaction between the client and server after the page is loaded; all processing happens on the client side. By contrast, Ajax extends features of DHTML to allow the page to initiate network requests (or 'subrequest') to the server even after page load to perform additional actions. For example, if there are multiple tabs on a page, the pure DHTML approach would load the contents of all tabs and then dynamically display only the one that is active, while AJAX could load each tab only when it is really needed.
Применение
DHTML позволяет авторам добавлять эффекты на свои страницы, которые сложно достичь иным способом, изменяя модель объектов документа (DOM) и стиль страницы. Комбинация HTML, CSS и JavaScript предоставляет возможности:
DHTML allows authors to add effects to their pages that are otherwise difficult to achieve, by changing the Document Object Model (DOM) and page style. The combination of HTML, CSS, and JavaScript offers ways to:
Анимировать текст и изображения в документе. Встраивать тикер или другой динамический элемент отображения, который автоматически обновляет содержимое последними новостями, котировками акций или другими данными. Использовать форму для сбора пользовательского ввода, а затем обрабатывать, проверять и реагировать на эти данные без отправки их на сервер. Добавлять кнопки с эффектом наведения или выпадающие меню. Менее распространенное применение – создание браузерных игр. Хотя в конце 1990-х и начале 2000-х годов с помощью DHTML было создано множество игр, различия между браузерами затрудняли этот процесс: многие техники приходилось реализовывать в коде, чтобы обеспечить работу игр на разных платформах. С тех пор браузеры стали сходиться к веб-стандартам, что сделало разработку DHTML-игр более целесообразной. Эти игры можно запускать во всех основных браузерах, а также в настольных и мобильных приложениях, поддерживающих встроенные контексты браузера. Термин "DHTML" в последние годы вышел из употребления, поскольку он ассоциировался с практиками и соглашениями, которые часто плохо работали в разных веб-браузерах. Поддержка 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 в разных браузерах, хотя улучшенное соответствие стандартам в браузерах снизило потребность в этом.
Animate text and images in their document. Embed a ticker or other dynamic display that automatically refreshes its content with the latest news, stock quotes, or other data. Use a form to capture user input, and then process, verify and respond to that data without having to send data back to the server. Include rollover buttons or drop down menus. A less common use is to create browser based action games. Although a number of games were created using DHTML during the late 1990s and early 2000s, differences between browsers made this difficult: many techniques had to be implemented in code to enable the games to work on multiple platforms. Browsers have since then converged toward web standards, which has made the design of DHTML games more viable. Those games can be played on all major browsers and in desktop and device applications that support embedded browser contexts. The term "DHTML" has fallen out of use in recent years as it was associated with practices and conventions that tended to not work well between various web browsers. DHTML support with extensive DOM access was introduced with Internet Explorer 4.0. Although there was a basic dynamic system with Netscape Navigator 4.0, not all HTML elements were represented in the DOM. When DHTML style techniques became widespread, varying degrees of support among web browsers for the technologies involved made them difficult to develop and debug. Development became easier when Internet Explorer 5.0+, Mozilla Firefox 2.0+, and Opera 7.0+ adopted a shared DOM inherited from ECMAScript. Later, JavaScript libraries such as jQuery abstracted away many of the day to day difficulties in cross browser DOM manipulation, though better standards compliance among browsers has reduced the need for this.
Модель объекта документа
DHTML не является самостоятельной технологией; это скорее результат объединения трех связанных и взаимодополняющих технологий: HTML, каскадных таблиц стилей (CSS) и JavaScript. Для обеспечения доступа скриптов и компонентов к функциям HTML и CSS, содержимое документа представляется в виде объектов в программной модели, известной как модель объектов документа (DOM). DOM API является основой DHTML, предоставляя структурированный интерфейс для доступа и манипулирования практически любым элементом документа. HTML-элементы в документе доступны в виде иерархического дерева отдельных объектов, что позволяет исследовать и изменять элемент и его атрибуты путем чтения и установки свойств, а также вызова методов. Текст между элементами также доступен через свойства и методы DOM. DOM также обеспечивает доступ к действиям пользователя, таким как нажатие клавиш и щелчки мышью. Эти и другие события можно перехватывать и обрабатывать, создавая функции-обработчики событий и подпрограммы. Обработчик события получает управление каждый раз, когда происходит определенное событие, и может выполнять любые необходимые действия, включая изменение документа с помощью DOM.
DHTML is not a technology in and of itself; rather, it is the product of three related and complementary technologies: HTML, Cascading Style Sheets (CSS), and JavaScript. To allow scripts and components to access features of HTML and CSS, the contents of the document are represented as objects in a programming model known as the Document Object Model (DOM). The DOM API is the foundation of DHTML, providing a structured interface that allows access and manipulation of virtually anything in the document. The HTML elements in the document are available as a hierarchical tree of individual objects, making it possible to examine and modify an element and its attributes by reading and setting properties and by calling methods. The text between elements is also available through DOM properties and methods. The DOM also provides access to user actions such as pressing a key and clicking the mouse. It is possible to intercept and process these and other events by creating event handler functions and routines. The event handler receives control each time a given event occurs and can carry out any appropriate action, including using the DOM to change the document.