What is unobtrusive JavaScript?

Unobtrusive JavaScript is a programming practice that separates JavaScript code from HTML markup, promoting cleaner and more maintainable code. The main principles of unobtrusive JavaScript include:

1. Separation of Concerns: JavaScript functionality is kept separate from HTML structure. This means that event handlers and JavaScript logic are not embedded directly within HTML attributes (e.g., onclick, onmouseover).

2. Use of Event Listeners: Instead of using inline event handlers, unobtrusive JavaScript attaches event listeners using methods like addEventListener. This keeps the HTML clean and allows for easier updates to the JavaScript code without modifying the HTML.

   Example of unobtrusive JavaScript:

   <button id="myButton">Click Me</button>
   <script>
       document.getElementById("myButton").addEventListener("click", function() {
           alert("Button clicked!");
       });
   </script>

3. Progressive Enhancement: The approach supports progressive enhancement, where the basic functionality of a web page is accessible without JavaScript, and JavaScript is used to enhance the user experience. This ensures that users with JavaScript disabled can still access the core content.

4. Maintainability: By keeping JavaScript separate from HTML, it becomes easier to maintain and update the code. Changes to the JavaScript logic do not require changes to the HTML structure, reducing the risk of introducing errors.

5. Readability: Unobtrusive JavaScript improves the readability of both HTML and JavaScript code, making it easier for developers to understand and work with the codebase.

Overall, unobtrusive JavaScript leads to cleaner, more organized, and more maintainable web applications.