What is Unobtrusive JavaScript?

Unobtrusive JavaScript embodies a methodology wherein the JavaScript language is skillfully partitioned between Document Content and Script Content. This distinction serves to delineate these elements clearly and effectively. Just as we adhere to the practice of segregating structural and presentational aspects through the segregation of CSS into a distinct file and the avoidance of inline style attributes, a similar separation is recommended between HTML structure and JavaScript behavior. The rationale underlying this principle remains consistent: it compartmentalizes concerns, fosters code hygiene, and facilitates the manipulation of JavaScript code independently of both HTML and CSS. In essence, it entails the isolation of JavaScript behavior from HTML presentation. This paradigm bears numerous advantages, imbuing our code with enhanced reliability, facilitating updates, and streamlining debugging processes.

The fundamental principle of unobtrusive programming entails utilizing JavaScript as an augmentative element for our web pages rather than an obligatory component. This approach advocates for the selective use of JavaScript based on necessity; if JavaScript is unnecessary, static content functions seamlessly with pure HTML and CSS. Unfortunately, numerous developers prematurely integrate code libraries without assessing their actual requirements. Notably, jQuery has often been overused, overshadowing the potential of achieving fundamental objectives through CSS and native JavaScript. Unobtrusive JavaScript introduces a paradigm shift, counteracting the conventional notion of exclusively JavaScript-driven dynamic web pages. Instead, it encourages a reversal: prioritize 100% standard, static web pages and subsequently introduce an additional stratum of JavaScript, almost as an afterthought, for supplementary enhancement.

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'); };

Conclusion

Unobtrusive JavaScript is a development philosophy that advocates using JavaScript to enhance web pages rather than making it a mandatory requirement. It encourages selectively applying JavaScript where needed, allowing static content to function effectively with HTML and CSS alone. This approach promotes cleaner, more accessible code and avoids overreliance on JavaScript libraries, aligning with a paradigm that prioritizes graceful degradation.






Related Topics
  1. JavaScript Interview Questions (Part2)
  2. JavaScript Interview Questions (Part3)
  3. Is JavaScript a true OOP language?
  4. Advantages and Disadvantages of JavaScript
  1. Difference Between JavaScript and ECMAScript?
  2. What is noscript tag?
  3. Escaping Special Characters in JavaScript
  4. What is undefined x 1 in JavaScript?
  5. Logical operators in JavaScript
  6. Difference between '=', '==' and '===' operators in JS
  7. How to loop through objects in JavaScript?
  8. How to write html code dynamically using JavaScript?
  9. How to add html elements dynamically with JavaScript?
  10. How to load another html page from javascript?
  11. What Is The Disadvantages Using InnerHTML In JavaScript?
  12. What is Browser Object Model
  13. How to detect the OS on the client machine in JavaScript?
  14. Difference between window, document, and screen in Javascript?
  15. Difference between the substr() and substring() in JavaScript?
  16. How to replace all occurrences of a string in JavaScript?
  17. Test a string as a literal and as an object in JavaScript
  18. What is Associative Array in JavaScript
  19. What is an anonymous function in JavaScript?
  20. What is the use of 'bind' method in JavaScript?
  21. Pure functions Vs. Impure functions in javascript
  22. Is Javascript a Functional Programming Language?
  23. What's the Difference Between Class and Prototypal Inheritance?
  24. Javascript, Pass by Value or Pass by Reference?
  25. How to prevent modification of an object in Javascript?
  26. What is 'this' keyword in JavaScript?
  27. How Does Function Hoisting Work in JavaScript?
  28. What do mean by NULL in Javascript?
  29. What does the delete operator do in JavaScript?
  30. What is the Infinity property used for in Javascript?
  31. Event bubbling and Event Capturing in JavScript?
  32. What is "strict mode" and how is it used in JavaScript?
  33. What is the difference between call and apply in JavaScript
  34. Entire content of a JavaScript source file in a function block?
  35. What is an immediately-invoked function expression?
  36. What is escape & unescape String functions in JavaScript?
  37. Instanceof operator in JavaScript
  38. What Are RESTful (REpresentational State Transfer)Web Services?
  39. What Does JavaScript Void(0) Mean?
  40. What are JavaScript Cookies?
  41. Difference between Client side JavaScript and Server side JavaScript
  42. TypeError: document.getelementbyid(...) is null
  43. Uncaught TypeError: Cannot read property of undefined In JavaScript
  44. Null and Undefined in JavaScript