Unobtrusive js
description
Transcript of Unobtrusive js
![Page 1: Unobtrusive js](https://reader033.fdocuments.in/reader033/viewer/2022061103/5404fc188d7f729b768b49e5/html5/thumbnails/1.jpg)
Unobtrusive JavaScript
Brett MillettOctober 6th, 2011
![Page 2: Unobtrusive js](https://reader033.fdocuments.in/reader033/viewer/2022061103/5404fc188d7f729b768b49e5/html5/thumbnails/2.jpg)
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>
![Page 3: Unobtrusive js](https://reader033.fdocuments.in/reader033/viewer/2022061103/5404fc188d7f729b768b49e5/html5/thumbnails/3.jpg)
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.
![Page 4: Unobtrusive js](https://reader033.fdocuments.in/reader033/viewer/2022061103/5404fc188d7f729b768b49e5/html5/thumbnails/4.jpg)
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>
![Page 5: Unobtrusive js](https://reader033.fdocuments.in/reader033/viewer/2022061103/5404fc188d7f729b768b49e5/html5/thumbnails/5.jpg)
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!
![Page 6: Unobtrusive js](https://reader033.fdocuments.in/reader033/viewer/2022061103/5404fc188d7f729b768b49e5/html5/thumbnails/6.jpg)
What’s unobtrusive JavaScript? Separates behavior from markup.Allows for “graceful degradation.”
<a href=“page.html” class=“popup”>View new page</a>
![Page 7: Unobtrusive js](https://reader033.fdocuments.in/reader033/viewer/2022061103/5404fc188d7f729b768b49e5/html5/thumbnails/7.jpg)
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.
![Page 8: Unobtrusive js](https://reader033.fdocuments.in/reader033/viewer/2022061103/5404fc188d7f729b768b49e5/html5/thumbnails/8.jpg)
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; });});
![Page 9: Unobtrusive js](https://reader033.fdocuments.in/reader033/viewer/2022061103/5404fc188d7f729b768b49e5/html5/thumbnails/9.jpg)
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!
![Page 10: Unobtrusive js](https://reader033.fdocuments.in/reader033/viewer/2022061103/5404fc188d7f729b768b49e5/html5/thumbnails/10.jpg)
Questions?