This document discusses unobtrusive JavaScript and how it separates JavaScript behavior from HTML markup. Unobtrusive JavaScript allows web pages to degrade gracefully when JavaScript is disabled, as the functionality is not coupled to the document structure. It provides an example of unobtrusive JavaScript that is completely separate from the markup and reusable. The document recommends using frameworks like jQuery to select elements and enhance the user experience with JavaScript after the site functions without it.

1. Unobtrusive JavaScriptBrett MillettOctober 6th, 2011

2. 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>

3. Why JavaScript?Makes rich interaction possible with a webpage!

4. AJAX: asynchronous JavaScript and XML.

5. 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.

6. 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!

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

8. Unobtrusive JavaScript ExampleCompletely separate from markup.

9. Reusable and globally accessible. Easier to change one function then all your markup!

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