DHTML

From BC$ MobileTV Wiki
Jump to: navigation, search

Dynamic Hypertext Markup Language (commonly abbreviated DHTML) is in fact not a language in and of itself, but rather a combination of static presentation languages (i.e. CSS and all modern flavors of HTML including XHTML, HTML+RDFa, sHTML, etc...) plus a dynamic client-side language which executes within a web browser such as JavaScript (and its associated versions) or VBscript.

From the modern web development community's perspective, DHTML is an archaic anti-pattern, however even two decades after its initial rise in popularity, it is still possible today. Of course using well-separated JavaScript/CSS/xHTML is in fact the best practice for many good reasons, however HTML DOM element-inline CSS is still possible via the "style" attribute and the same goes for JavaScript via any combination of href="javascript:doSomething();doSomethingElse();"' and/or event inline handlers such as onclick="doMoreStuff();" or onfocus="myFocusHandler();".

Such approaches are now frowned upon because of the goals of MVC, separation of concerns, and reusability of raw xHTML data in the DOM to ensure it can easily be validated and parsed.


EXAMPLE

Back then, keep in mind, people were "shouting" when using HTML tags, so everything other than the inline CSS/JS was usually in CAPS:

<A CLASS="expandable" HREF="#toggledText" ONCLICK="document.getElementById('toggledText').style.display = 'block'; this.innerHTML = 'Collapse';" ONDBLCLICK="document.getElementById('toggledText').style.display = 'none'; this.innerHTML = 'Expand';" title="1-click to EXPAND, 2-clicks to COLLAPSE">Expand</A><DIV CLASS="content" ID="toggledText" STYLE="display: none" ONCLICK="this.style.display = 'block';">This is where the text appears.</DIV>

Tools


Resources


Tutorials

External Links

References

  1. The Problem with innerHTML: http://www.julienlecomte.net/blog/2007/12/38/comment-page-1/index.html
  2. Problems with innerHTML: https://stackoverflow.com/questions/27902966/problems-with-innerhtml
  3. IE11 Problem with createElement, innerHTML and firstChild: https://social.msdn.microsoft.com/Forums/sqlserver/en-US/28c46d85-c8a1-405b-993e-14abf5b30d30/ie11-problem-with-createelement-innerhtml-and-firstchild
  4. Have Your DOM and Script It Too: https://24ways.org/2005/have-your-dom-and-script-it-too
  5. Convert HTML string to DOM element: http://krasimirtsonev.com/blog/article/Convert-HTML-string-to-DOM-element
  6. Can scripts be inserted with innerHTML?: https://stackoverflow.com/questions/1197575/can-scripts-be-inserted-with-innerhtml
  7. Facebook SDK for JavaScript: https://developers.facebook.com/docs/javascript/quickstart/v2.2#loading (remote script loading example)

See Also

HTML | HTML5 | xHTML | jQuery