Unobtrusive JavaScript explained

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 (the "behavior layer") from a web page's structure/content and presentation,[1] 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.[2] 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.[3]

Overview

A typical client-side dynamic web page can be conceived as consisting of four parts: the marked-up content (HTML), the style sheet (CSS), client-side JavaScript, and embedded objects such as images.[4] The client-side JavaScript part can be conceived as enhancing the other parts by adding features or functionality that would not be possible without JavaScript.[4]

The concept of "unobtrusiveness" in relation to client-side JavaScript was coined in 2002 by Stuart Langridge[5] in the article "Unobtrusive DHTML, and the power of unordered lists".[6] In the article Langridge argued for a way to keep all JavaScript code, including event handlers, outside of the HTML when using dynamic HTML (DHTML).[5] He said that the purpose of this kind of organization of code was "providing a better user experience for people whose browsers can support it, and those whose browsers cannot", while also making scripting easier for web developers.[5] Langridge later expanded upon this thought and emphasized that the core meaning of "unobtrusive" is that "if a given Web browser doesn't support the DHTML features you're using, that absence should affect the user experience as little as possible".[7] In other words, for Langridge, "unobtrusive" principally refers to users' experience of the absence of JavaScript features in a given situation.[7]

Variant definitions

Other authors have described variations on the essential elements of unobtrusiveness.

David Flanagan's book JavaScript: The Definitive Guide (2006) said that while there is no specific formula, there are three main goals of unobtrusive JavaScript:[8]

The Web Standards Project, in its JavaScript Manifesto (2006), said that the "purpose of JavaScript is enhancing the usability of web pages by adding interaction to them", and described four benefits of unobtrusive DOM scripting:[9]

  1. Usability: An unobtrusive DOM script does not draw the attention of the user—"visitors just use it without thinking about it."
  2. Graceful degradation: Unobtrusive DOM scripts never generate error messages, in any browser, even when they fail. If features cannot be presented properly, they silently disappear.
  3. Accessibility: If any script fails, the page still delivers its core functions and information via the markup, stylesheets and/or server-side scripting.
  4. Separation: For the benefit of other and future web developers, all JavaScript code is maintained separately, without impacting other files of script, markup or code.

For the Paris Web Conference in 2007, Christian Heilmann identified seven rules of unobtrusive JavaScript, some of which were wider in scope than other narrower definitions of "unobtrusive":[10]

  1. "Do not make any assumptions": Defensive programming techniques should allow for the possibilities that JavaScript may not run, the browser may not support expected methods, the HTML may have changed, unexpected input devices may be in use and other scripts may either not be present or may be encroaching on the global namespace.
  2. "Find your hooks and relationships", such as IDs and other aspects of the expected HTML.
  3. Leave traversing individual DOM objects to the experts, such as to the CSS handler built into the browser where possible.
  4. "Understand browsers and users", particularly how browsers fail, what assumptions users make, and unusual configurations or usages.
  5. "Understand events", including how they 'bubble' and the features of the Event object that is passed to most event handlers.
  6. Play well with other scripts by avoiding global function and variable names.
  7. "Work for the next developer" by using self-explanatory variable and function names, creating logical and readable code, making dependencies obvious, and commenting any code that still might confuse.

The broader definitions of unobtrusive JavaScript have much in common with general programming best practices, such as encapsulation and abstraction layers, avoidance of global variables, meaningful naming conventions, use of appropriate design patterns, and systematic testing.[11]

Further reading

Notes and References

  1. Web site: Keith . Jeremy . Behavioral Separation . 2006-06-20 . www.alistapart.com . 2007-01-27 . Separating out behavior from markup like this is called unobtrusive JavaScript..
  2. Web site: Olsson . Tommy . Graceful Degradation & Progressive Enhancement . 2007-02-06 . accessites.org . https://web.archive.org/web/20170517143009/http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/2 . 2017-05-17 . 2009-01-03 . Progressive enhancement when it comes to JavaScript is becoming more common these days. The key to this is known as unobtrusive JavaScript. An unobtrusive script is silently ignored by user agents that do not support it, but is applied by more capable devices. Just like an external style sheet..
  3. Book: Connor, Joshue O. . 2012 . Unobtrusive JavaScript . Pro HTML5 Accessibility: Building an Inclusive Web . Berkeley, CA . . 71 . 9781430241942 . 757486357 . 10.1007/978-1-4302-4195-9_3.
  4. Book: Goodman . Danny . Danny Goodman . Morrison . Michael . Michael Morrison (author) . Novitski . Paul . Rayl . Tia Gustaff . 2010 . JavaScript's Role in the World Wide Web and Beyond . JavaScript Bible . 7th . Indianapolis, IN . Wiley . 3–13 . 9780470526910 . 435731997.
  5. Web site: Building dynamic websites . www.netmag.co.uk . 2006-08-09 . 2010-05-18 . https://web.archive.org/web/20101205235951/http://www.netmag.co.uk/zine/dhtml-1/building-dynamic-websites . 2010-12-05.
  6. Web site: Unobtrusive DHTML, and the power of unordered lists . Langridge . Stuart . November 2002 . 2008-08-07 . www.kryogenix.org . https://web.archive.org/web/20021204224748/http://www.kryogenix.org/code/browser/aqlists/ . 2002-12-04 . live.
  7. Book: Langridge, Stuart . DHTML Utopia: Modern Web Design Using JavaScript & DOM . Collingwood, VIC, Australia . SitePoint . 2005 . 9780957921894 . 60690615 . registration . 75 . An important design constraint when adding DHTML to your Websites is that it should be unobtrusive. By 'unobtrusive,' I mean that if a given Web browser doesn't support the DHTML features you're using, that absence should affect the user experience as little as possible. Errors should not be shown to the user: the site should be perfectly usable without the DHTML enhancements.. (Reference to the first edition, since it shows how the author pioneered the concept.) The same passage is in an article excerpted from the book: Web site: DHTML Utopia: Modern Web Design Using JavaScript & DOM . Langridge . Stuart . 2005-06-01 . 2016-10-18 . articles.sitepoint.com . https://web.archive.org/web/20100421102116/http://articles.sitepoint.com/article/dhtml-utopia-modern-web-design/4 . 2010-04-21.
  8. Book: Flanagan, David . Unobtrusive JavaScript . JavaScript: The Definitive Guide . 5th . 2006 . . 9780596101992 . 64313259 . 241–242.
  9. Web site: The JavaScript Manifesto . www.webstandards.org . . 8 Feb 2011 . https://web.archive.org/web/20060614102951/https://www.webstandards.org/action/dstf/manifesto/ . 2006-06-14 . live.
  10. Web site: The seven rules of Unobtrusive JavaScript . Heilmann . Christian . 8 Feb 2011 . 2007 . https://web.archive.org/web/20110502181859/http://icant.co.uk/articles/seven-rules-of-unobtrusive-javascript/ . icant.co.uk . 2 May 2011 . dead . dmy-all. See also: Book: Heilmann, Christian . 2006 . Unobtrusive JavaScript . Thatcher . Jim . Burks . Michael R. . Heilmann . Christian . Henry . Shawn Lawton . Kirkpatrick . Andrew . Lauke . Patrick H. . Lawson . Bruce . Regan . Bob . Rutter . Richard . Urban . Mark . Web Accessibility: Web Standards And Regulatory Compliance . Berkeley, CA . . 301–331 . 1590596382 . 10.1007/978-1-4302-0188-5_10.
  11. Book: White, Alexei . 2009 . Unobtrusive JavaScript . JavaScript Programmer's Reference . Wrox Programmer to Programmer . Chichester, UK; Hoboken, NJ . Wiley . 311 . 9780470344729 . 421783941.

This article is licensed under the GNU Free Documentation License. It uses material from the Wikipedia article "Unobtrusive JavaScript".

Except where otherwise indicated, Everything.Explained.Today is © Copyright 2009-2024, A B Cryer, All Rights Reserved. Cookie policy.