1 / 12

JavaScript Frameworks

JavaScript Frameworks. Presented by Kyle Goins Also see: http://www.jQuery.com. Agenda. JavaScript Overview Object-Oriented Programming Document Object Model (DOM) What are Frameworks? Why do we care? JQuery. JavaScript Overview. Object oriented programming language

umika
Download Presentation

JavaScript Frameworks

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript Frameworks Presented by Kyle Goins Also see: http://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 <head> <script src=“sourcehere.js”></script> </head>

  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 • select compression level • hit “Download”

  11. “Rainbows” Script program <scriptsrc="jquery.js" type="text/javascript"></script> <scriptsrc="rainbows.js" type="text/javascript"></script> <scripttype="text/javascript"> rainbows.init({ selector: '.rainbows’, gradient: true, from: '#ffffff’, to: '#000000’, shadow: true, highlight: true }); </script>

  12. Interactive fades $('#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) }) • http://dragoninteractive.com

More Related