jQuery

Transcript

1. jQuery a bad-ass Javascript framework Wednesday, September 19, 12
2. Where Javascript ends and jQuery begins Wednesday, September 19, 12
3. Javascript • Scripting language • Not compiled • Traditionally client-side • Run on the user’s computer • Heavy Wednesday, September 19, 12
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
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
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
7. window html div#container section section p Wednesday, September 19, 12
8. The DOM • A great way to semantically label and identify elements. • A great way to then access those elements Wednesday, September 19, 12
9. Selecting Elements • CSS #box { background: white; } • jQuery $('#box') $('#box .phrase') Wednesday, September 19, 12
10. A Few Examples • Change text • Add a class to an element • Move an element • Hide an element Wednesday, September 19, 12
11. Events • Old and busted (inline Javascript) <div id="box"> <p onclick="javascript:this.style.color='red';">I like to <span class="phrase">do things and such</span>.</p> </div> • New hotness (unobtrusive jQuery) $('.phrase').click(function(){ $(this).css('color', 'red'); }); <div id="box"> <p>O hai!</p> </div> Wednesday, September 19, 12
12. Demo! Wednesday, September 19, 12
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
14. Resources • Javascript • Javascript: The Good Parts • jQuery • http://docs.jquery.com • jQuery in Action • Ryan L. Cross (@slant) Wednesday, September 19, 12
15. Enclave Discussions • Photoshop (August 16th) • Bob Crum (Midsummer Night’s Design) • Typography (September 20th) • Gordon Brander (Crowd Favorite) Wednesday, September 19, 12
16. Thanks! Wednesday, September 19, 12