Upload
bretticus
View
1.104
Download
0
Embed Size (px)
DESCRIPTION
A brief introduction to unobtrusive JavaScript.
Citation preview
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?