Your SlideShare is downloading. ×
0
Unobtrusive JavaScript<br />Brett Millett<br />October 6th, 2011<br />
What is JavaScript?<br />Powerful scripting language that your web browser executes.<br />Built into every major web brows...
Why JavaScript?<br /><ul><li>Makes rich interaction possible with a webpage!
AJAX: asynchronous JavaScript and XML.
The Internet would be a far less interesting place without it.</li></li></ul><li>What’s “obtrusive” JavaScript? <br />HTML...
What’s so bad about that?<br />Web pages are easier to update when functionality and layout are uncoupled.<br />JavaScript...
What’s unobtrusive JavaScript? <br />Separates behavior from markup.<br />Allows for “graceful degradation.”<br />
Unobtrusive JavaScript Example<br /><ul><li>Completely separate from markup.
Reusable and globally accessible. Easier to change one function then all your markup!
Degrades gracefully.</li></li></ul><li>jQuery (jquery.com)<br />Popular JavaScript framework.<br />Extremely powerful sele...
Upcoming SlideShare
Loading in...5
×

Unobtrusive js

885

Published on

A brief introduction to unobtrusive JavaScript.

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
885
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Unobtrusive js"

  1. 1. Unobtrusive JavaScript<br />Brett Millett<br />October 6th, 2011<br />
  2. 2. What is JavaScript?<br />Powerful scripting language that your web browser executes.<br />Built into every major web browser.<br />Standardized (for the most part) for all web browsers.<script>alert(“hello world!”);</script><br />
  3. 3. Why JavaScript?<br /><ul><li>Makes rich interaction possible with a webpage!
  4. 4. AJAX: asynchronous JavaScript and XML.
  5. 5. The Internet would be a far less interesting place without it.</li></li></ul><li>What’s “obtrusive” JavaScript? <br />HTML markup allows use of JavaScript via event attributes. The “old way” and an “obtrusive” JavaScript practice.<br />
  6. 6. What’s so bad about that?<br />Web pages are easier to update when functionality and layout are uncoupled.<br />JavaScript must be part of the document body instead of in a cacheable external file.<br />href=“#” example when JavaScript disabled.<br />Everybody code like it’s 1999!<br />
  7. 7. What’s unobtrusive JavaScript? <br />Separates behavior from markup.<br />Allows for “graceful degradation.”<br />
  8. 8. Unobtrusive JavaScript Example<br /><ul><li>Completely separate from markup.
  9. 9. Reusable and globally accessible. Easier to change one function then all your markup!
  10. 10. Degrades gracefully.</li></li></ul><li>jQuery (jquery.com)<br />Popular JavaScript framework.<br />Extremely powerful selector syntax.<br />
  11. 11. Guidelines for accessibility<br />Build a website without any JavaScript.<br />Once the website functions without JavaScript, use JavaScript to enhance the user experience. <br />Easier interaction<br />Performance<br />Fun<br />These guidelines only make sense when using unobtrusive JavaScript!<br />
  12. 12. Questions?<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×