Unobtrusive JavaScript

Last updated

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

Contents

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. [6] : 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. [6] : 3 

The concept of "unobtrusiveness" in relation to client-side JavaScript was coined in 2002 by Stuart Langridge [7] in the article "Unobtrusive DHTML, and the power of unordered lists". [8] 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). [7] 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 web developers. [7] 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". [1] In other words, for Langridge, "unobtrusive" principally refers to users' experience of the absence of JavaScript features in a given situation. [1]

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: [4]

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]

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.

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 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.

Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design ; authoring, including standardised code and proprietary software; user experience design ; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term "web design" is normally used to describe the design process relating to the front-end design of a website including writing markup. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and be up to date with web accessibility guidelines.

Cross-site scripting (XSS) is a type of security vulnerability that can be found in some web applications. XSS attacks enable attackers to inject client-side scripts into web pages viewed by other users. A cross-site scripting vulnerability may be used by attackers to bypass access controls such as the same-origin policy. During the second half of 2007, XSSed documented 11,253 site-specific cross-site vulnerabilities, compared to 2,134 "traditional" vulnerabilities documented by Symantec. XSS effects vary in range from petty nuisance to significant security risk, depending on the sensitivity of the data handled by the vulnerable site and the nature of any security mitigation implemented by the site's owner network.

Web development is the work involved in developing a website for the Internet or an intranet. Web development can range from developing a simple single static page of plain text to complex web applications, electronic businesses, and social network services. A more comprehensive list of tasks to which Web development commonly refers, may include Web engineering, Web design, Web content development, client liaison, client-side/server-side scripting, Web server and network security configuration, and e-commerce development.

Web standards are the formal, non-proprietary standards and other technical specifications that define and describe aspects of the World Wide Web. In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods.

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.

<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.

Browser sniffing is a set of techniques used in websites and web applications in order to determine the web browser a visitor is using, and to serve browser-appropriate content to the visitor. It is also used to detect mobile browsers and send them mobile-optimized websites. This practice is sometimes used to circumvent incompatibilities between browsers due to misinterpretation of HTML, Cascading Style Sheets (CSS), or the Document Object Model (DOM). While the World Wide Web Consortium maintains up-to-date central versions of some of the most important Web standards in the form of recommendations, in practice no software developer has designed a browser which adheres exactly to these standards; implementation of other standards and protocols, such as SVG and XMLHttpRequest, varies as well. As a result, different browsers display the same page differently, and so browser sniffing was developed to detect the web browser in order to help ensure consistent display of content.

<span class="mw-page-title-main">Progressive enhancement</span> Web design strategy putting emphasis web content first

Progressive enhancement is a strategy in web design that puts emphasis on web content first, allowing everyone to access the basic content and functionality of a web page, whilst users with additional browser features or faster Internet access receive the enhanced version instead. This strategy speeds up loading and facilitates crawling by web search engines, as text on a page is loaded immediately through the HTML source code rather than having to wait for JavaScript to initiate and load the content subsequently, meaning content ready for consumption "out of the box" is served immediately, and not behind additional layers.

A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields. For example, forms can be used to enter shipping or credit card data to order a product, or can be used to retrieve search results from a search engine.

<span class="mw-page-title-main">Dojo Toolkit</span> Open-source modular JavaScript library

Dojo Toolkit is an open-source modular JavaScript library designed to ease the rapid development of cross-platform, JavaScript/Ajax-based applications and web sites. It was started by Alex Russell, Dylan Schiemann, David Schontzler, and others in 2004 and is dual-licensed under the modified BSD license or the Academic Free License.

ASP.NET AJAX, formerly called Atlas, is a set of extensions to ASP.NET developed by Microsoft for implementing Ajax functionality. It is released under the Microsoft Public License (Ms-PL).

<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.

JsonML, the JSON Markup Language is a lightweight markup language used to map between XML and JSON. It converts an XML document or fragment into a JSON data structure for ease of use within JavaScript environments such as a web browser, allowing manipulation of XML data without the overhead of an XML parser.

<span class="mw-page-title-main">Firebug (software)</span> Web development add-on for Firefox

Firebug is a discontinued free and open-source web browser extension for Mozilla Firefox that facilitated the live debugging, editing, and monitoring of any website's CSS, HTML, DOM, XHR, and JavaScript.

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

SWFObject is an unmaintained open-source JavaScript library used to embed Adobe Flash content onto Web pages and to protect the flash game against piracy, which is supplied as one small JavaScript file. The library can also detect the installed Adobe Flash Player plug-in in all major web browsers, on all major operating systems (OS), and can redirect the visitor to another webpage or show alternate HTML content if the installed plug-in is not suitable.

ZK is an open-source Ajax Web application framework, written in Java, that enables creation of graphical user interfaces for Web applications with little required programming knowledge.

In web development, hydration or rehydration is a technique in which client-side JavaScript converts a web page that is static from the perspective of the web browser, delivered either through static rendering or server-side rendering, into a dynamic web page by attaching event handlers to the HTML elements in the DOM. Because the HTML is pre-rendered on a server, this allows for a fast "first contentful paint", but there is a period of time afterward where the page appears to be fully loaded and interactive, but is not until the client-side JavaScript is executed and event handlers have been attached.

References

  1. 1 2 3 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.
  2. ↑ 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.
  3. ↑ 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.
  4. 1 2 Flanagan, David (2006). "Unobtrusive JavaScript". JavaScript: The Definitive Guide (5th ed.). O'Reilly Media. p.  241–242. ISBN   9780596101992. OCLC   64313259.
  5. ↑ 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.
  6. 1 2 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.
  7. 1 2 3 "Building dynamic websites". www.netmag.co.uk. 2006-08-09. Archived from the original on 2010-12-05. Retrieved 2010-05-18.
  8. ↑ 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.
  9. ↑ "The JavaScript Manifesto". www.webstandards.org. Web Standards Project. Archived from the original on 2006-06-14. Retrieved 8 Feb 2011.
  10. ↑ 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.
  11. ↑ White, Alexei (2009). "Unobtrusive JavaScript". JavaScript Programmer's Reference. Wrox Programmer to Programmer. Chichester, UK; Hoboken, NJ: Wiley. p.  311. ISBN   9780470344729. OCLC   421783941.

Further reading

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.