1. JavaScript Frameworks Presented by Kyle Goins Also see: http://www.jQuery.comhttp://www.jQuery.com

2. Agenda  JavaScript Overview  Object-Oriented Programming  Document Object Model (DOM)  What are Frameworks?  Why do we care?  JQuery

3. JavaScript Overview  Object oriented programming language  Used in all major websites  Picks up where HTML and CSS leave off  Technology barrier of compatibility  JavaScript, XML  Uses:  Form validation  Dynamic alteration of CSS styles and HTML code  Performing calculations

4. Object-Oriented Programming  Objects are nouns  Methods are verbs  Properties are adjectives  Document Object Model (DOM) – turns webpage elements into JS accessible Objects

5. Document Object Model (DOM)

6. What are Frameworks  Pre-Created “Libraries” of code  General vs. Specialized  Designed to make JS easier  Free and anyone can use them  Simply external.js files  Compressed  Uncompressed

7. Adding a Library to your pages

8. Why do we care?  Cross-Browser compatibility  Simplification of normally complicated tasks  Standard functionality:  Selectors  DOM traversal  DOM manipulation  Utility functions  Event handling

9. jQuery  Event handling  Validation and String Manipulation  Increased access to the DOM  Full listing and documentation of all properties and methods on jquery.com

10. Downloading jQuery  http://jquery.com http://jquery.com  select compression level  hit “Download”

11. “Rainbows” Script program rainbows.init({ selector: '.rainbows’, gradient: true, from: '#ffffff’, to: '#000000’, shadow: true, highlight: true });

12. Interactive fades  http://dragoninteractive.com http://dragoninteractive.com $('#navigation li a').hover(function() { // Stuff that happens when you hover on $('.hover', this).animate({ 'opacity': 1 }, 700) },function() { // Stuff that happens when you unhover $('.hover', this).animate({ 'opacity': 0 }, 700) })