My 10 minute presentation on jQuery to ESRI's Dev Meet Up on September 15, 2010

1. Introduction to jQuery James Johnson Founder and President, Inland Empire .NET User’s Group Technical Evangelist, ComponentOne

2. JavaScript Used to provide interactivity with a web page Enable programmatic access to a web page Dynamic Weakly typed Prototype-based Supports closures and higher order function

3. JavaScript Not to be confused with Java, it has a similar syntax {} and ; First released as LiveScript in September 1995 Renamed to JavaScript in December 1995 Easy to write functions, then copy and paste all over Quickly one of the most popular languages for web development But thought of as a kiddy language Advent of Ajax brought JavaScript attention by “professionals”

4. JavaScript Pros Dynamic Easy to develop with Easy to debug Similar syntax to “real” languages Cons Dynamic Easy to develop with Every browser seems to have it’s own JavaScript engine Difficult to have same behaviours across browsers

5. JavaScript libraries Pre-written JavaScript controls Easier development Many, many libraries Dojo, Echo, Ext, Google Web Toolkit, jQuery, MochiKit, MooTools, Prototype, qooxdoo, Rico, script.aculo.us, Spry, Yahoo! UI Library

6. jQuery Released in January 2006 by John Resig BarCamp (an international network of user-generated conferences ) Free, open source, dual-licensed under MIT and GNU Syntax is easier to navigate the DOM Handles events Creates animations Ajax grooviness baked in Used by over 39% of the top 10,000 websites Microsoft bundles with ASP.NET Ajax and ASP.NET MVC Full support from Microsoft

7. jQuery Syntax $(“some element”) or jQuery(“some element”) Can select by ID or className $(“#myElement”) gets the only ID=“myElement” $(“div.myElement”) gets all divs with class=“myElement” Easy to traverse $(“div.mainul li”) – all <li> within div class=“main” $(“div.main”).find(“li”) – same as above $(“div.main”).find(“li:odd”) – same as above but only ODD elements – zero-based http://api.jquery.com/category/selectors/

8. jQuery Events Two main methods to attach event $(document).ready(function(){ $(“myElement”).click(function() { doSomething(); });}); Fired when the DOM is completely loaded $(“myElement”).live(“click”, function() { doSomething(); }); Fired when the element is created in the DOM http://api.jquery.com/category/events/

9. jQuery Chaining Once an element is found, reference is kept Instead of $(“div.myElement”).hide(); $(“div.myElement”).html(“hi”); $(“div.myElement”).addClass(“red”); $(“div.myElement”).fadeIn(“slow”); Chain the actions $(“div.myElement”).hide().html(“hi”).addClass(“red”).fadeIn(“slow”);

10. jQuery stuff you can do Selectors – find elements in the DOM Attributes – get/set attributes of found elements Traversing – moving up/down elements in the DOM Manipulation – get/set contents of found elements CSS – get/set style attributes of found elements Events – fire on click, hover, load, etc. of found elements Effects – fadeIn, fadeOut, slideIn/Out, hide/show Ajax – full Ajax capabilities Utilities – inArray, isArray, makeArray, etc.

11. jQuery benefits Fast development Solid, standardized library Gracefully fails – no glaring errors or frozen pages Lots and lots and lots of examples Very easy to grok All the cool kids use it

12. Demo