Unobtrusive js

Unobtrusive JavaScript

Brett MillettOctober 6th, 2011

What is JavaScript?Powerful scripting language that your

web browser executes.Built into every major web browser.Standardized (for the most part) for all

web browsers.

<script>alert(“hello world!”);</script>

Why JavaScript?

•Makes rich interaction possible with a webpage!•AJAX: asynchronous JavaScript and XML.•The Internet would be a far less interesting place without it.

What’s “obtrusive” JavaScript? HTML markup allows use of JavaScript

via event attributes. The “old way” and an “obtrusive” JavaScript practice.

<a href="#" onclick="javascript:window.open('page.html','popup',

'width=400,height=200'); return false;">View new page</a>

What’s so bad about that?Web pages are easier to update when

functionality and layout are uncoupled.JavaScript must be part of the

document body instead of in a cacheable external file.

href=“#” example when JavaScript disabled.

Everybody code like it’s 1999!

What’s unobtrusive JavaScript? Separates behavior from markup.Allows for “graceful degradation.”

<a href=“page.html” class=“popup”>View new page</a>

Unobtrusive JavaScript Examplewindow.onload = function() { var elems = document.getElementsByClassName('popup'); for (var i=0;i<elems.length;i++) {

elems[i].onclick = function () { window.open(this.href,'popup’, ‘width=400,height=200’); return false;

} }};•Completely separate from markup.•Reusable and globally accessible. Easier to change one function then all your markup!•Degrades gracefully.

jQuery (jquery.com)Popular JavaScript framework.Extremely powerful selector syntax.

$(function(){ $('a.popup').click(function(){ window.open(this.href,'popup’, ‘width=400,height=200); return false; });});

Guidelines for accessibilityBuild a website without any JavaScript.Once the website functions without

JavaScript, use JavaScript to enhance the user experience. Easier interactionPerformanceFun

These guidelines only make sense when using unobtrusive JavaScript!

Questions?