Unobtrusive Javascript

What is unobtrusive javascript?

When we talk about web application there are two things, one is Presentation and other one is Behaviour.
Presentation is done by HTML and behaviour is implemented using Javascript.

Now take simple example and understand scenario

To create simple textbox we will write following HTML code
/*code*/
(opening angle bracket) input id="btn1" type="Button" value="Click to Run Javascript" (closing angle bracket)

output of above code:

above code will generate simple button.

Now i want to add behaviour to button. behaviour means i want to show alert box when i click on the button.

Following is the code for above scenario:

Here i have added onclick event to button.

output of above code:

If you want to change the behaviour (for e.g onchange event instead of onclick) then you need to modify your presentation code i.e HTML code. so i can separate this presentation and behaviour and make HTML code more clean.

Unobtrusive javascript separates the presentation from the behaviour.

Step 1: Create separate javascript file (myscript.js) and write down following code into myscript.js

Step 2: refer this js file onto your HTML page and final code looks like
Here we have moved onclick event to separate file called myscript.js so our HTML code is now clean and simple.

Output of above code:

If you like this post then please comment and you can also give suggestion to improve this.