What is Unobtrusive JavaScript?
Unobtrusive JavaScript is the way of writing JavaScript language in which we properly separate Document Content and Script Content thus allowing us to make a clear distinction between them. Just as we should separate our structure and presentation by putting all CSS in a separate file and eschewing the use of style attributes or other such presentational markup, we should also separate our HTML structure and JavaScript behaviour . The reasons are the same: it separates your concerns, keeps your code clean, and allows you to work on the JavaScript without touching either HTML or CSS. So it is basically separating behavior or javascript from presentation or html. This approach is useful in so many ways as it makes our code less error prone, easy to update and to debug. The basic concept of unobtrusive programming is that JavaScript should be used as an enhancement to our web page instead of an absolute requirement. If you do not need JavaScript , then don't use it; your static content will display just fine with plain old HTML and CSS. So many developers make the mistake of importing code libraries before even figuring out if they will be even required. jQuery for example has been so much mis-used when all our basic needs can be easily fulfilled by CSS and pure JavaScript code. The idea of unobtrusive JavaScript is to turn old school design on its head: instead of making 100% JavaScript-powered, dynamic web pages make 100% regular, static web pages and then, almost as an afterthought, add an "also" layer of JavaScript. 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');
};
Related Topics
- JavaScript Interview Questions (Part2)
- JavaScript Interview Questions (Part3)
- Is JavaScript a true OOP language?
- Advantages and Disadvantages of JavaScript
- Difference Between JavaScript and ECMAScript?
- What is noscript tag?
- Escaping Special Characters in JavaScript
- What is undefined x 1 in JavaScript?
- JavaScript : Logical Operators
- Difference between '=', '==' and '===' operators?
- How to reload a page using JavaScript?
- How to write html code dynamically using JavaScript?
- How to add html elements dynamically with JavaScript?
- How to load another html page from javascript?
- What Is The Disadvantages Using InnerHTML In JavaScript?
- What is Browser Object Model
- How to detect the OS on the client machine in JavaScript?
- Difference between window, document, and screen in Javascript?
- Difference between the substr() and substring() in JavaScript?
- How to replace all occurrences of a string in JavaScript?
- How to test a string as a literal and as an object ?
- What is Associative Array? How do we use it?
- What is an anonymous function in JavaScript?
- What is the use of 'bind' method in JavaScript?
- Pure functions Vs. Impure functions in javascript
- Is Javascript a Functional Programming Language?
- What's the Difference Between Class and Prototypal Inheritance?
- Javascript, Pass by Value or Pass by Reference?
- How to prevent modification of an object in Javascript?
- What is 'this' keyword in JavaScript?
- How Does Function Hoisting Work in JavaScript?
- What do mean by NULL in Javascript?
- What does the delete operator do in JavaScript?
- What is the Infinity property used for in Javascript?
- Event bubbling and Event Capturing in JavScript?
- What is "strict mode" and how is it used in JavaScript?
- What is the difference between .call() and .apply()?
- Entire content of a JavaScript source file in a function block?
- What is an immediately-invoked function expression?
- What is escape & unescape String functions in JavaScript?
- What is the instanceof operator in JavaScript?
- What Are RESTful (REpresentational State Transfer)Web Services?
- What Does JavaScript Void(0) Mean?
- What are JavaScript Cookies?
- Difference between Client side JavaScript and Server side JavaScript
- TypeError: document.getelementbyid(...) is null
- Uncaught TypeError: Cannot read property of undefined In JavaScript
- What's the difference between Null and Undefined?