Menu
Home
People
Places
Arts
History
Plants & Animals
Science
Life & Culture
Technology
Reference.org
Unobtrusive JavaScript
open-in-new
<h2 id="overview">Overview</h2> <p>A typical <a href="/facts/Client-side_dynamic_web_page/psjqGKBx">client-side dynamic web page</a> can be conceived as consisting of four parts: the <a href="/facts/Markup_language/WwhlNVIu">marked-up</a> content (<a href="/facts/HTML/sSc3fT78">HTML</a>), the style sheet (<a href="/facts/CSS/tA90XBQo">CSS</a>), <a href="/facts/Client-side_JavaScript/XhhIIEsl">client-side JavaScript</a>, and embedded objects such as images.<a class="footnote-ref" id="fnref:6" href="#fn:6"><sup>6</sup></a>: 5 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.<a class="footnote-ref" id="fnref:7" href="#fn:7"><sup>7</sup></a>: 3 </p><p>The concept of "unobtrusiveness" in relation to client-side JavaScript was coined in 2002 by <a href="/facts/Stuart_Langridge/V0TjRuPK">Stuart Langridge</a><a class="footnote-ref" id="fnref:8" href="#fn:8"><sup>8</sup></a> in the article "Unobtrusive DHTML, and the power of unordered lists".<a class="footnote-ref" id="fnref:9" href="#fn:9"><sup>9</sup></a> In the article Langridge argued for a way to keep all JavaScript code, including event handlers, outside of the HTML when using <a href="/facts/Dynamic_HTML/XrmcmIv5">dynamic HTML</a> (DHTML).<a class="footnote-ref" id="fnref:10" href="#fn:10"><sup>10</sup></a> 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 not affecting those whose browsers cannot", while also making scripting easier for <a href="/facts/Web_developer/Cd0mJftL">web developers</a>.<a class="footnote-ref" id="fnref:11" href="#fn:11"><sup>11</sup></a> 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".<a class="footnote-ref" id="fnref:12" href="#fn:12"><sup>12</sup></a> In other words, for Langridge, "unobtrusive" principally refers to users' experience of the absence of JavaScript features in a given situation.<a class="footnote-ref" id="fnref:13" href="#fn:13"><sup>13</sup></a> </p> <h2 id="variant-definitions">Variant definitions</h2> <p>Other authors have described variations on the essential elements of unobtrusiveness. </p><p>David Flanagan's book <i>JavaScript: The Definitive Guide</i> (2006) said that while there is no specific formula, there are three main goals of unobtrusive JavaScript:<a class="footnote-ref" id="fnref:14" href="#fn:14"><sup>14</sup></a> </p> <ul><li>To separate JavaScript from HTML markup, as well as keeping modules of JavaScript independent of other modules using basic conventions such as the use of <a href="/facts/Namespace/9efXwMtV">namespaces</a> to prevent namespace collisions and the use of module initialization code;</li> <li>To degrade gracefully—all content should be available without all or any of the JavaScript running successfully;</li> <li>To not impede the <a href="/facts/Web_accessibility/JsA6wN2l">accessibility of the HTML</a>, and ideally to improve it, whether the user has personal disabilities or are using an unusual, or unusually configured, browser.</li></ul> <p>The <a href="/facts/Web_Standards_Project/joUUVkPD">Web Standards Project</a>, in its <i>JavaScript Manifesto</i> (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 <a href="/facts/Document_Object_Model/GglE6jGx">DOM</a> scripting:<a class="footnote-ref" id="fnref:15" href="#fn:15"><sup>15</sup></a> </p> <ol><li><a href="/facts/Web_usability/IMSfem43">Usability</a>: An unobtrusive DOM script does not draw the attention of the user—"visitors just use it without thinking about it."</li> <li><a href="/facts/Graceful_degradation/rasrYlJk">Graceful degradation</a>: Unobtrusive DOM scripts never generate error messages, in any browser, even when they fail. If features cannot be presented properly, they silently disappear.</li> <li><a href="/facts/Web_accessibility/JsA6wN2l">Accessibility</a>: If any script fails, the page still delivers its core functions and information via the markup, stylesheets and/or server-side scripting.</li> <li><a href="/facts/Separation_of_concerns/Tx8jawNT">Separation</a>: For the benefit of other and future web developers, all JavaScript code is maintained separately, without impacting other files of script, markup or code.</li></ol> <p>For the Paris <a href="/facts/The_Web_Conference/lQRv2DzI">Web Conference</a> in 2007, Christian Heilmann identified seven rules of unobtrusive JavaScript, some of which were wider in scope than other narrower definitions of "unobtrusive":<a class="footnote-ref" id="fnref:16" href="#fn:16"><sup>16</sup></a> </p> <ol><li>"Do not make any assumptions": <a href="/facts/Defensive_programming/Vt5bb1pY">Defensive programming</a> 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.</li> <li>"Find your hooks and relationships", such as IDs and other aspects of the expected HTML.</li> <li>Leave traversing individual DOM objects to the experts, such as to the CSS handler built into the browser where possible.</li> <li>"Understand browsers and users", particularly how browsers fail, what assumptions users make, and unusual configurations or usages.</li> <li>"Understand <a href="/facts/DOM_events/1KoczpWr">events</a>", including how they 'bubble' and the features of the Event object that is passed to most event handlers.</li> <li>Play well with other scripts by avoiding global function and variable names.</li> <li>"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.</li></ol> <p>The broader definitions of unobtrusive JavaScript have much in common with general programming best practices, such as <a href="/facts/Information_hiding/dnSDPMaz">encapsulation</a> and <a href="/facts/Abstraction_layer/EV8c84SY">abstraction layers</a>, avoidance of <a href="/facts/Global_variable/XWF9zC08">global variables</a>, meaningful <a href="/facts/Naming_conventions_(programming)/4IVCWpSU">naming conventions</a>, use of appropriate <a href="/facts/Design_patterns/bHvkoxsu">design patterns</a>, and systematic <a href="/facts/Software_testing/VoXzG9Tb">testing</a>.<a class="footnote-ref" id="fnref:17" href="#fn:17"><sup>17</sup></a> </p> <h2 id="further-reading">Further reading</h2> <ul><li>Amery, Luke (March 2009). "Unobtrusive JavaScript Explained". <i><a href="/facts/APC_(magazine)/5GC59H0Q">APC</a></i>. 29 (3). <a href="/facts/Bauer_Media_Group/SI8pcXc5">Bauer Media Group</a>: 89.</li> <li>Brinzarea-Iamandi, Bogdan; Hendix, Audra; Darie, Cristian (2009). "Unobtrusive JavaScript". <i>AJAX and PHP: Building Modern Web Applications</i> (2nd ed.). Birmingham, UK: <a href="/facts/Packt_Publishing/eT0RTSSK">Packt Publishing</a>. pp. 205–206. <a href="/facts/ISBN_(identifier)/15AdSPa9">ISBN</a> 9781847197726. <a href="/facts/OCLC_(identifier)/Yqad8waq">OCLC</a> <a href="https://search.worldcat.org/oclc/607690639">607690639</a>.</li> <li>Johansen, Christian (2011). "Unobtrusive JavaScript". <i>Test-driven JavaScript Development</i>. Developer's Library Series. Upper Saddle River, NJ: <a href="/facts/Addison-Wesley/A7UFATEG">Addison-Wesley</a>. pp. 177–196. <a href="/facts/ISBN_(identifier)/15AdSPa9">ISBN</a> 9780321683915. <a href="/facts/OCLC_(identifier)/Yqad8waq">OCLC</a> <a href="https://search.worldcat.org/oclc/613420202">613420202</a>.</li> <li>Kyrnin, Jennifer (2015). "Unobtrusive JavaScript". <i>Sams Teach Yourself Responsive Web Design in 24 Hours</i>. Sams Teach Yourself in 24 Hours. Indianapolis, IN: Sams. pp. <a href="https://books.google.com/books?id=1pCKBQAAQBAJ&pg=PA95">95–101</a>. <a href="/facts/ISBN_(identifier)/15AdSPa9">ISBN</a> 9780672338380. <a href="/facts/OCLC_(identifier)/Yqad8waq">OCLC</a> <a href="https://search.worldcat.org/oclc/872430002">872430002</a>.</li> <li>Skinner, Jesse (2007). <i>Unobtrusive Ajax</i>. O'Reilly Short Cuts. Sebastopol, CA: <a href="/facts/O%2527Reilly_Media/Fr3Kv7sm">O'Reilly Media</a>. <a href="/facts/ISBN_(identifier)/15AdSPa9">ISBN</a> 9780596510244. <a href="/facts/OCLC_(identifier)/Yqad8waq">OCLC</a> <a href="https://search.worldcat.org/oclc/172622153">172622153</a>.</li> <li>Smith, Peter (2013). "Unobtrusive JavaScript". <i>Professional Website Performance: Optimizing the Front-end and Back-end</i>. Indianapolis, IN: Wiley. p. 120. <a href="/facts/ISBN_(identifier)/15AdSPa9">ISBN</a> 9781118487525. <a href="/facts/OCLC_(identifier)/Yqad8waq">OCLC</a> <a href="https://search.worldcat.org/oclc/809561237">809561237</a>.</li> <li><a href="https://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript">"The Principles of Unobtrusive JavaScript"</a>. <i>www.w3.org</i>. <a href="/facts/W3C/lGWmhF6M">W3C</a> Web Standards Curriculum. 2011. Retrieved 2021-07-05.</li> <li>Vora, Pawan (2009). <a href="https://archive.org/details/webapplicationde0000vora/page/347">"Unobtrusive JavaScript"</a>. <i>Web Application Design Patterns</i>. Amsterdam; London: <a href="/facts/Morgan_Kaufmann_Publishers/HfefrWju">Morgan Kaufmann Publishers</a>. pp. <a href="https://archive.org/details/webapplicationde0000vora/page/347">347–349</a>. <a href="/facts/ISBN_(identifier)/15AdSPa9">ISBN</a> 9780123742650. <a href="/facts/OCLC_(identifier)/Yqad8waq">OCLC</a> <a href="https://search.worldcat.org/oclc/255902089">255902089</a>.</li></ul> <h2 id="references">References</h2> <ol> <li id="fn:1"><p>Langridge, Stuart (2005). DHTML Utopia: Modern Web Design Using JavaScript & DOM. Collingwood, VIC, Australia: SitePoint. p. 75. ISBN 9780957921894. OCLC 60690615. 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: Langridge, Stuart (2005-06-01). "DHTML Utopia: Modern Web Design Using JavaScript & DOM". articles.sitepoint.com. Archived from the original on 2010-04-21. Retrieved 2016-10-18. <a href="9780957921894" target="_blank">9780957921894</a> <a href="#fnref:1" class="footnote-back-ref">↩</a></p></li> <li id="fn:2"><p>Keith, Jeremy (2006-06-20). "Behavioral Separation". www.alistapart.com. Retrieved 2007-01-27. Separating out behavior from markup like this is called unobtrusive JavaScript. <a href="https://www.alistapart.com/articles/behavioralseparation" target="_blank">https://www.alistapart.com/articles/behavioralseparation</a> <a href="#fnref:2" class="footnote-back-ref">↩</a></p></li> <li id="fn:3"><p>Olsson, Tommy (2007-02-06). "Graceful Degradation & Progressive Enhancement". accessites.org. Archived from the original on 2017-05-17. Retrieved 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. <a href="https://web.archive.org/web/20170517143009/http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/2" target="_blank">https://web.archive.org/web/20170517143009/http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/2</a> <a href="#fnref:3" class="footnote-back-ref">↩</a></p></li> <li id="fn:4"><p>Flanagan, David (2006). "Unobtrusive JavaScript". JavaScript: The Definitive Guide (5th ed.). O'Reilly Media. p. 241–242. ISBN 9780596101992. OCLC 64313259. <a href="9780596101992" target="_blank">9780596101992</a> <a href="#fnref:4" class="footnote-back-ref">↩</a></p></li> <li id="fn:5"><p>Connor, Joshue O. (2012). "Unobtrusive JavaScript". Pro HTML5 Accessibility: Building an Inclusive Web. Berkeley, CA: Apress. pp. 71. doi:10.1007/978-1-4302-4195-9_3. ISBN 9781430241942. OCLC 757486357. <a href="9781430241942" target="_blank">9781430241942</a> <a href="#fnref:5" class="footnote-back-ref">↩</a></p></li> <li id="fn:6"><p>Goodman, Danny; Morrison, Michael; Novitski, Paul; Rayl, Tia Gustaff (2010). "JavaScript's Role in the World Wide Web and Beyond". JavaScript Bible (7th ed.). Indianapolis, IN: Wiley. pp. 3–13. ISBN 9780470526910. OCLC 435731997. <a href="9780470526910" target="_blank">9780470526910</a> <a href="#fnref:6" class="footnote-back-ref">↩</a></p></li> <li id="fn:7"><p>Goodman, Danny; Morrison, Michael; Novitski, Paul; Rayl, Tia Gustaff (2010). "JavaScript's Role in the World Wide Web and Beyond". JavaScript Bible (7th ed.). Indianapolis, IN: Wiley. pp. 3–13. ISBN 9780470526910. OCLC 435731997. <a href="9780470526910" target="_blank">9780470526910</a> <a href="#fnref:7" class="footnote-back-ref">↩</a></p></li> <li id="fn:8"><p>"Building dynamic websites". www.netmag.co.uk. 2006-08-09. Archived from the original on 2010-12-05. Retrieved 2010-05-18. <a href="https://web.archive.org/web/20101205235951/http://www.netmag.co.uk/zine/dhtml-1/building-dynamic-websites" target="_blank">https://web.archive.org/web/20101205235951/http://www.netmag.co.uk/zine/dhtml-1/building-dynamic-websites</a> <a href="#fnref:8" class="footnote-back-ref">↩</a></p></li> <li id="fn:9"><p>Langridge, Stuart (November 2002). "Unobtrusive DHTML, and the power of unordered lists". www.kryogenix.org. Archived from the original on 2002-12-04. Retrieved 2008-08-07. <a href="http://www.kryogenix.org/code/browser/aqlists/" target="_blank">http://www.kryogenix.org/code/browser/aqlists/</a> <a href="#fnref:9" class="footnote-back-ref">↩</a></p></li> <li id="fn:10"><p>"Building dynamic websites". www.netmag.co.uk. 2006-08-09. Archived from the original on 2010-12-05. Retrieved 2010-05-18. <a href="https://web.archive.org/web/20101205235951/http://www.netmag.co.uk/zine/dhtml-1/building-dynamic-websites" target="_blank">https://web.archive.org/web/20101205235951/http://www.netmag.co.uk/zine/dhtml-1/building-dynamic-websites</a> <a href="#fnref:10" class="footnote-back-ref">↩</a></p></li> <li id="fn:11"><p>"Building dynamic websites". www.netmag.co.uk. 2006-08-09. Archived from the original on 2010-12-05. Retrieved 2010-05-18. <a href="https://web.archive.org/web/20101205235951/http://www.netmag.co.uk/zine/dhtml-1/building-dynamic-websites" target="_blank">https://web.archive.org/web/20101205235951/http://www.netmag.co.uk/zine/dhtml-1/building-dynamic-websites</a> <a href="#fnref:11" class="footnote-back-ref">↩</a></p></li> <li id="fn:12"><p>Langridge, Stuart (2005). DHTML Utopia: Modern Web Design Using JavaScript & DOM. Collingwood, VIC, Australia: SitePoint. p. 75. ISBN 9780957921894. OCLC 60690615. 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: Langridge, Stuart (2005-06-01). "DHTML Utopia: Modern Web Design Using JavaScript & DOM". articles.sitepoint.com. Archived from the original on 2010-04-21. Retrieved 2016-10-18. <a href="9780957921894" target="_blank">9780957921894</a> <a href="#fnref:12" class="footnote-back-ref">↩</a></p></li> <li id="fn:13"><p>Langridge, Stuart (2005). DHTML Utopia: Modern Web Design Using JavaScript & DOM. Collingwood, VIC, Australia: SitePoint. p. 75. ISBN 9780957921894. OCLC 60690615. 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: Langridge, Stuart (2005-06-01). "DHTML Utopia: Modern Web Design Using JavaScript & DOM". articles.sitepoint.com. Archived from the original on 2010-04-21. Retrieved 2016-10-18. <a href="9780957921894" target="_blank">9780957921894</a> <a href="#fnref:13" class="footnote-back-ref">↩</a></p></li> <li id="fn:14"><p>Flanagan, David (2006). "Unobtrusive JavaScript". JavaScript: The Definitive Guide (5th ed.). O'Reilly Media. p. 241–242. ISBN 9780596101992. OCLC 64313259. <a href="9780596101992" target="_blank">9780596101992</a> <a href="#fnref:14" class="footnote-back-ref">↩</a></p></li> <li id="fn:15"><p>"The JavaScript Manifesto". www.webstandards.org. Web Standards Project. Archived from the original on 2006-06-14. Retrieved 8 Feb 2011. <a href="https://www.webstandards.org/action/dstf/manifesto/" target="_blank">https://www.webstandards.org/action/dstf/manifesto/</a> <a href="#fnref:15" class="footnote-back-ref">↩</a></p></li> <li id="fn:16"><p>Heilmann, Christian (2007). "The seven rules of Unobtrusive JavaScript". icant.co.uk. Archived from the original on 2 May 2011. Retrieved 8 February 2011. See also: Heilmann, Christian (2006). "Unobtrusive JavaScript". In Thatcher, Jim; Burks, Michael R.; Heilmann, Christian; Henry, Shawn Lawton; Kirkpatrick, Andrew; Lauke, Patrick H.; Lawson, Bruce; Regan, Bob; Rutter, Richard; Urban, Mark (eds.). Web Accessibility: Web Standards And Regulatory Compliance. Berkeley, CA: Friends of Ed; distributed by Springer-Verlag. pp. 301–331. doi:10.1007/978-1-4302-0188-5_10. ISBN 1590596382. <a href="1590596382" target="_blank">1590596382</a> <a href="#fnref:16" class="footnote-back-ref">↩</a></p></li> <li id="fn:17"><p>White, Alexei (2009). "Unobtrusive JavaScript". JavaScript Programmer's Reference. Wrox Programmer to Programmer. Chichester, UK; Hoboken, NJ: Wiley. p. 311. ISBN 9780470344729. OCLC 421783941. <a href="9780470344729" target="_blank">9780470344729</a> <a href="#fnref:17" class="footnote-back-ref">↩</a></p></li> </ol>