jQuery

Transcript

1. jQuery
   a bad-ass Javascript framework
   Wednesday, September 19, 12
   

   View Slide

2. Where
   Javascript ends and
   jQuery begins
   Wednesday, September 19, 12
   

   View Slide

3. Javascript
   • Scripting language
   • Not compiled
   • Traditionally client-side
   • Run on the user’s computer
   • Heavy
   Wednesday, September 19, 12
   

   View Slide

4. jQuery
   • What is it?
   • A Javascript framework
   • What’s a Javascript framework?
   • A library of pre-written
   Javascript code to allow for
   easier development.
   Wednesday, September 19, 12
   

   View Slide

5. It’s dangerous to go alone...
   take this.
   • Understand the DOM
   • jQuery is primary used to
   manipulate the DOM.
   • How to wrap jQuery code
   • We’ll see this in the demo
   Wednesday, September 19, 12
   

   View Slide

6. The DOM
   • DOM: Document Object Model
   • Used in HTML, XHTML and XML
   • Used to describe and provide
   access to all elements in a markup
   document.
   Wednesday, September 19, 12
   

   View Slide

7. window
   html
   div#container
   section
   section
   p
   Wednesday, September 19, 12
   

   View Slide

8. The DOM
   • A great way to semantically label
   and identify elements.
   • A great way to then access those
   elements
   Wednesday, September 19, 12
   

   View Slide

9. Selecting Elements
   • CSS
   #box {
   background: white;
   }
   • jQuery
   $('#box')
   $('#box .phrase')
   Wednesday, September 19, 12
   

   View Slide

10. A Few Examples
    • Change text
    • Add a class to an element
    • Move an element
    • Hide an element
    Wednesday, September 19, 12
    

    View Slide

11. Events
    • Old and busted (inline Javascript)
    
    I like to class="phrase">do things and such.
    
    • New hotness (unobtrusive jQuery)
    $('.phrase').click(function(){
    $(this).css('color', 'red');
    });
    
    O hai!
    
    Wednesday, September 19, 12
    

    View Slide

12. Demo!
    Wednesday, September 19, 12
    

    View Slide

13. Alternative
    Frameworks
    • MooTools
    • Prototype and Scriptaculous
    • Dojo
    • Ext JS
    • YUI
    • Lots more...
    http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
    Wednesday, September 19, 12
    

    View Slide

14. Resources
    • Javascript
    • Javascript: The Good Parts
    • jQuery
    • http://docs.jquery.com
    • jQuery in Action
    • Ryan L. Cross (@slant)
    Wednesday, September 19, 12
    

    View Slide

15. Enclave Discussions
    • Photoshop (August 16th)
    • Bob Crum (Midsummer Night’s Design)
    • Typography (September 20th)
    • Gordon Brander (Crowd Favorite)
    Wednesday, September 19, 12
    

    View Slide

16. Thanks!
    Wednesday, September 19, 12
    

    View Slide