Dynamic HTML

Last updated

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. [1] [2] The application of DHTML was introduced by Microsoft with the release of Internet Explorer 4 in 1997. [3] [ unreliable source? ]

Contents


DHTML (Dynamic HTML) allows scripting languages, such as JavaScript, to modify variables and elements in a web page's structure, which in turn affect the look, behavior, and functionality of otherwise "static" HTML 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.

Uses

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:

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, [4] 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. [5]

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.

Structure of a web page

Typically a web page using DHTML is set up in the following way:

<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><title>DHTML example</title></head><bodybgcolor="red"><script>functioninit(){letmyObj=document.getElementById("navigation");// ... manipulate myObj}window.onload=init;</script><!--    Often the code is stored in an external file; this is done    by linking the file that contains the JavaScript.    This is helpful when several pages use the same script:    --><scriptsrc="my-javascript.js"></script></body></html>

Example: Displaying an additional block of text

The following code illustrates an often-used function. An additional part of a web page will only be displayed if the user requests it.

<!DOCTYPE html><html><head><metacharset="utf-8"><title>Using a DOM function</title><style>a{background-color:#eee;}a:hover{background:#ff0;}#toggleMe{background:#cfc;display:none;margin:30px0;padding:1em;}</style></head><body><h1>Using a DOM function</h1><h2><aid="showhide"href="#">Show paragraph</a></h2><pid="toggle-me">This is the paragraph that is only displayed on request.</p><p>The general flow of the document continues.</p><script>functionchangeDisplayState(displayElement,textElement){if(displayElement.style.display==="none"||displayElement.style.display===""){displayElement.style.display="block";textElement.innerHTML="Hide paragraph";}else{displayElement.style.display="none";textElement.innerHTML="Show paragraph";}}letdisplayElement=document.getElementById("toggle-me");lettextElement=document.getElementById("showhide");textElement.addEventListener("click",function(event){event.preventDefault();changeDisplayState(displayElement,textElement);});</script></body></html>

Document Object Model

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.

Dynamic styles

Dynamic styles are a key feature of DHTML. By using CSS, one can quickly change the appearance and formatting of elements in a document without adding or removing elements. This helps keep documents small and the scripts that manipulate the document fast.

The object model provides programmatic access to styles. This means you can change inline styles on individual elements and change style rules using simple JavaScript programming.

Inline styles are CSS style assignments that have been applied to an element using the style attribute. You can examine and set these styles by retrieving the style object for an individual element. For example, to highlight the text in a heading when the user moves the mouse pointer over it, you can use the style object to enlarge the font and change its color, as shown in the following simple example.

<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><title>Dynamic Styles</title><style>ul{display:none;}</style></head><body><h1id="first-header">Welcome to Dynamic HTML</h1><p><aid="clickable-link"href="#">Dynamic styles are a key feature of DHTML.</a></p><ulid="unordered-list"><li>Change the color, size, and typeface of text</li><li>Show and hide text</li><li>And much, much more</li></ul><p>We've only just begun!</p><script>functionshowMe(){document.getElementById("first-header").style.color="#990000";document.getElementById("unordered-list").style.display="block";}document.getElementById("clickable-link").addEventListener("click",function(event){event.preventDefault();showMe();});</script></body></html>

See also

Related Research Articles

<span class="mw-page-title-main">Document Object Model</span> Convention for representing and interacting with objects in HTML, XHTML, and XML documents

The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an HTML or XML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.

<span class="mw-page-title-main">HTML</span> HyperText Markup Language

Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The current de facto standard is governed by the industry group WHATWG and is known as the HTML Living Standard.

DOM Events are a signal that something has occurred, or is occurring, and can be triggered by user interactions or by the browser. Client-side scripting languages like JavaScript, JScript, VBScript, and Java can register various event handlers or listeners on the element nodes inside a DOM tree, such as in HTML, XHTML, XUL, and SVG documents.

In the field of computing and web design, a mouseover, also called a hover effect, is a graphical control element. This element responds when a user moves their mouse pointer over a designated area. This area can be a button, image, or hyperlink. This simple action can trigger different responses. The element's color or appearance can change. Additional information or interactive content can be displayed. The mouseover effect is an essential part of user interaction. It adds layers of interactivity and responsiveness to websites and applications.

JavaScript Style Sheets (JSSS) was a stylesheet language technology proposed by Netscape Communications in 1996 to provide facilities for defining the presentation of webpages. It was an alternative to the Cascading Style Sheets (CSS) technology.

A user interface markup language is a markup language that renders and describes graphical user interfaces and controls. Many of these markup languages are dialects of XML and are dependent upon a pre-existing scripting language engine, usually a JavaScript engine, for rendering of controls and extra scriptability.

In software engineering, inversion of control (IoC) is a design principle in which custom-written portions of a computer program receive the flow of control from an external source. The term "inversion" is historical: a software architecture with this design "inverts" control as compared to procedural programming. In procedural programming, a program's custom code calls reusable libraries to take care of generic tasks, but with inversion of control, it is the framework that calls the custom code. In essence, this means delegating the execution of tasks to generic code over specific code allowing for more versatility.

<span class="mw-page-title-main">Dynamic web page</span> Type of web page

A dynamic web page is a web page constructed at runtime, as opposed to a static web page, delivered as it is stored. A server-side dynamic web page is a web page whose construction is controlled by an application server processing server-side scripts. In server-side scripting, parameters determine how the assembly of every new web page proceeds, and including the setting up of more client-side processing. A client-side dynamic web page processes the web page using JavaScript running in the browser as it loads. JavaScript can interact with the page via Document Object Model (DOM), to query page state and modify it. Even though a web page can be dynamic on the client-side, it can still be hosted on a static hosting service such as GitHub Pages or Amazon S3 as long as there is not any server-side code included.

The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap. HTML5 Canvas also helps in making 2D games.

In HTML, the standard markup language for documents designed to be displayed in a web browser, <div> and <span> tags are elements used to define parts of a document, so that they are identifiable when a unique classification is necessary. Where other HTML elements such as <p> (paragraph), <em> (emphasis), and so on, accurately represent the semantics of the content, the additional use of <span> and <div> tags leads to better accessibility for readers and easier maintainability for authors. Where no existing HTML element is applicable, <span> and <div> can valuably represent parts of a document so that HTML attributes such as class, id, lang, or dir can be applied.

The Prototype JavaScript Framework is a JavaScript framework created by Sam Stephenson in February 2005 as part of Ajax support in Ruby on Rails. It is implemented as a single file of JavaScript code, usually named prototype.js. Prototype is distributed standalone, but also as part of larger projects, such as Ruby on Rails, script.aculo.us and Rico. As of March 2021, according to w3techs, Prototype is used by 0.6% of all websites.

<span class="mw-page-title-main">YUI Library</span>

The Yahoo! User Interface Library (YUI) is a discontinued open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML, and DOM scripting. YUI includes several cores CSS resources. It is available under a BSD License. Development on YUI began in 2005 and Yahoo! properties such as My Yahoo! and the Yahoo! front page began using YUI in the summer of that year. YUI was released for public use in February 2006. It was actively developed by a core team of Yahoo! engineers.

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animations, and Ajax. It is free, open-source software using the permissive MIT License. As of August 2022, jQuery is used by 77% of the 10 million most popular websites. Web analysis indicates that it is the most widely deployed JavaScript library by a large margin, having at least three to four times more usage than any other JavaScript library.

Unobtrusive JavaScript is a general approach to the use of client-side JavaScript in web pages so that if JavaScript features are partially or fully absent in a user's web browser, then the user notices as little as possible any lack of the web page's JavaScript functionality. The term has been used by different technical writers to emphasize different aspects of front-end web development. For some writers, the term has been understood more generally to refer to separation of functionality from a web page's structure/content and presentation, while other writers have used the term more precisely to refer to the use of progressive enhancement to support user agents that lack certain JavaScript functionality and users that have disabled JavaScript. Following the latter definition, unobtrusive JavaScript contributes to web accessibility insofar as it helps ensure that all users—whatever their computing platform—get roughly equal access to all of the web page's information and functionality.

Extensible HyperText Markup Language (XHTML) is part of the family of XML markup languages which mirrors or extends versions of the widely used HyperText Markup Language (HTML), the language in which Web pages are formulated.

<span class="mw-page-title-main">CSS</span> Style sheet language

Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

HTML attributes are special words used inside the opening tag to control the element's behaviour. HTML attributes are a modifier of a HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them. In HTML syntax, an attribute is added to a HTML start tag.

The Web platform is a collection of technologies developed as open standards by the World Wide Web Consortium and other standardization bodies such as the Web Hypertext Application Technology Working Group, the Unicode Consortium, the Internet Engineering Task Force, and Ecma International. It is the umbrella term introduced by the World Wide Web Consortium, and in 2011 it was defined as "a platform for innovation, consolidation and cost efficiencies" by W3C CEO Jeff Jaffe. Being built on The evergreen Web has allowed for the addition of new capabilities while addressing security and privacy risks. Additionally, developers are enabled to build interoperable content on a cohesive platform.

jQuery Mobile is a touch-optimized web framework, specifically a JavaScript library, developed by the jQuery project team. The development focuses on creating a framework compatible with many smartphones and tablet computers, made necessary by the growing but heterogeneous tablet and smartphone market. The jQuery Mobile framework is consistent with other mobile app frameworks and platforms such as PhoneGap, Worklight, etc.

References

  1. ↑ "Document Object Model FAQ". W3C. October 22, 2003. Retrieved 2022-02-16.
  2. ↑ "Web Style Sheets". W3C. 22 July 1999. Retrieved 7 April 2018.
  3. ↑ Pedamkar, Priya (2020-07-19). "DHTML | A Quick Glance of DHTML with Components, Features, Need". EDUCBA. Retrieved 2022-10-13.
  4. ↑ Downes, Stephen (Aug 18, 1999). "Fun and Games With DHTML". Stephen's Web. Retrieved 2022-08-27.
  5. ↑ Ferguson, Russ; Heilmann, Christian (2013). Beginning JavaScript with DOM Scripting and Ajax (PDF). Berkeley, CA: Apress. pp. 49–68. doi:10.1007/978-1-4302-5093-7. ISBN   978-1-4302-5092-0. S2CID   20526670 . Retrieved May 30, 2022.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.