What is Unobtrusive Javascript in layman terms? [closed]

by

Checkout the wikipedia article:

“Unobtrusive JavaScript” is a general
approach to the use of JavaScript in
web pages. Though the term is not
formally defined, its basic principles
are generally understood to include:

  • Separation of functionality (the “behavior layer”) from a Web page’s
    structure/content and presentation
  • Best practices to avoid the problems of traditional JavaScript
    programming (such as browser
    inconsistencies and lack of
    scalability)
  • Progressive enhancement to support user agents that may not
    support advanced JavaScript
    functionality[2]

So it is basically separating behavior or javascript from presentation or html.

Example:

<input type="button" id="btn" onclick="alert('Test')" />

That is not unobstrusive javascript because behaviour and presentation are mixed. The onclick shouldn’t be there in html and should be part of javascript itself not html.

With above example, you can go unobstrusive like this:

<input type="button" id="btn" />

JavaScript:

var el = document.getElementById('btn');
el.onclick = function(){
  alert('Test');
};

That time we have separated javascript from html with a very basic example.

Note:

There is more to unobstrusive javascript as can be checked out on wikipedia article.

More Related Contents:

  1. window.onload vs $(document).ready()
  2. Difference between obtrusive and unobtrusive javascript
  3. How to check browser for touchstart support using JS/jQuery?
  4. Why inline JavaScript is bad?
  5. I am missing something [closed]
  6. How to get height of entire document with JavaScript?
  7. `export const` vs. `export default` in ES6
  8. JavaScript seconds to time string with format hh:mm:ss
  9. Check if a JavaScript string is a URL
  10. Detect all changes to a (immediately) using JQuery
  11. When should I use Inline vs. External Javascript?
  12. Pass vars to JavaScript via the SRC attribute
  13. Get caret position in HTML input?
  14. Is there a way to round numbers into a reader friendly format? (e.g. $1.1k) [closed]
  15. JSLint is suddenly reporting: Use the function form of “use strict”
  16. Javascript library for human-friendly relative date formatting [closed]
  17. Adding images in JSfiddle [closed]
  18. Difference between this and self in JavaScript
  19. Call function with array of arguments
  20. How to retrieve all localStorage items without knowing the keys in advance?
  21. Javascript Submit does not include Submit Button Value
  22. Are double and single quotes interchangeable in JavaScript?
  23. Sort Keys in Javascript Object
  24. Optimize long lists of fixed string alternatives in regex
  25. How to make the value stored in the PHP session update with the Ajax submission
  26. Jenkins error – Blocked script execution in . because the document’s frame is sandboxed and the ‘allow-scripts’ permission is not set
  27. Execute function queue in javascript
  28. JSON to string variable dump
  29. Is it possible to make an in-app button that triggers the PWA “Add to Home Screen” install banner?
  30. Configure grunt copy task to exclude files/folders

Leave a Comment