To understand what unobtrusive JavaScript is it's easiest to start with knowing what JavaScript is or does.
Web pages are a static affair. They resemble Word documents but then on the web, displayed in your browser. You don't expect your Word document to have snowflakes falling across it nor would you open Microsoft Word to start playing a game. A document is a document is a document.
That, in short, is what a web page is: static text on a page.
INTRODUCING: JAVASCRIPT
JavaScript is a computer programming language: a set of instructions that can help tell a computer what to do, how to do it and when to do it.
With it you can make animations, games, cool effects, tools... You can turn a web page into a functional calculator or a game.
In other words, JavaScript can turn your static web page into a dynamic affair.
OBTRUSIVE & OBSTRUCTIVE JAVASCRIPT
For years most JavaScript on web pages has been of a very obstructive type: if your computer or web browser doesn't have the JavaScript programming language (or it's turned off for security reasons), the web page's main functionality will not work.
What does that mean?
Well, it could mean that the nice dropdown menu when clicked on ... does nothing. Nothing at all.
It could mean that the contact form on your business site cannot be filled out.
It could mean that all kinds of crazy effects and functions your web designer has relied on to get your marketing message across and your product sold ... are never seen by a whole bunch of people.
So what's a girl to do? Go with the cool JavaScript but alienate some users ... or forget all about it?
Fortunately, these days that is a false dilemma.
INTRODUCING: UNOBTRUSIVE JAVASCRIPT
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.
The result are web pages that can work 100% in any browser at any time. And those people who have browsers with JavaScript? They get extra stuff: 110%!
This type of design ensures that menu's, forms and hyperlinks on your site work at all times and are prettied up when a browser uses JavaScript.
IT'S COMMON SENSE DESIGN LOGIC
If you've ever have wanted to use a vending machine that accepter dollar coins but only had 4 quarters you know how unnecessary and illogic some design choices are.
Why make an obstructive, profit-reducing choice? Make the machine so that it accepts a dollar in dollar coins, quarters, cents, dimes, bills -- whatever.
Same goes for web pages: why make a page which forces an obstructive, profit-reducing choice upon its visitors when -- just as simply -- you can have it all?
WHAT UNOBTRUSIVE JAVASCRIPT LOOKS LIKE
GOOD: NO JAVASCRIPT
This is an example of a normal static clickable link on a web page:
The part you and I would see on the web page is:
BAD: (OBTRUSIVE, OBSTRUCTIVE) JAVASCRIPT
Now the link has been turned from static to dynamic. The dynamic (" do something") part is that it would open the link in a new browser window:
Someone with JavaScript will click on it and have a new browser window open up and it will go to the www.bing.com address.
Someone without JavaScript will click on it and nothing will happen. Nothing. At. All. Not even a warning
BETTER: (OBTRUSIVE) JAVASCRIPT
Here there is a normal static part of the link and a dynamic, JavaScript part.
The JavaScript is not obstructive: it doesn't take the place or the normal code so that when a user without JavaScript clicks the link, it works. On the other hand, when someone with JavaScript clicks it will execute the JavaScript part and open the link in a new browser window.
Because we can see the JavaScript in the same part where the rest of the things happen we call it obtrusive: it sticks out.
BEST: UNOBTRUSIVE JAVASCRIPT
100% unobtrusive JavaScript doesn't happen inline with the rest of the code. Instead, somewhere else in the web document a little bit of code is added which only executes when JavaScript is enabled on a computer. Once it executes it adds all the code it needs to what's already on the page.
DOES IT MATTER?
On average 2% of people online have JavaScript disabled. In some markets that can be much higher, in some lower. Certain B2B markets have much less JavaScript-enabled people as IT departments sometimes disable JavaScript to better secure a company's intranet.
If right now you have obtrusive JavaScript you can calculate the ROI of investing in unobtrusive JavaScript to see if it makes sense to go after it right now.
If not, simply add the requirement "unobtrusive JavaScript" to your spec sheet.
IS NOT HAVING UNOBTRUSIVE JAVASCRIPT BAD FOR SEO?
Not necessarily.
On a purely technical level search engines are much better then they used to be at reading and following links that are stuffed away in JavaScript. Still, given that we don't have to choose one or the other we prefer a "better safe than sorry" policy if the ROI for modifying JavaScript is there.
On an indirect level, potentially ticking people off and have them talk about a negative, limited experience they had on your site is not something we like to see. Like Google, we don't believe that any publicity is good publicity.
From a user perspective we have to be honest: as long as the use of JavaScript on your site isn't obstructive, it's "good enough". But good enough can be better " and squeezing every ounce of traffic you have on a site for what it's worth is best.
Of course, if youre starting from scratch, using an outdated way of implementing JavaScript is just not needed: your money should buy you the best.
WHO DO I ASK ABOUT THIS?
When looking at an existing site you can ask the person responsible for your site (your webmaster or web design company) or test for yourself (see below)
Unobtrusive JavaScript is a web design requirement. It should be included on the requirements spec sheet for your web site.
When talking with the people responsible for making your web site you make the requirement know by stating: "where JavaScript is used we want it to be unobtrusive JavaScript".
Good web developers/designers will know what this means. If they don't seem to be sure or you're not sure you're getting your message across you can send them a link to Operation Cleanout in process or have them read this article.
HOW CAN I TEST IF MY SITE RELIES ON JAVASCRIPT?
Temporarily disable JavaScript in your browser.
Then visit and browse through your web site, taking notes of what works and doesn't work. Try executing common tasks: if yours is a shopping site, try the buying process; if you invite prospects to contact you, try submitting your contact form.