Jax Code Camp 2010

Good morning

iPhone Dev

•How to develop for the iOS 4

jQuery 1.4 and ASP.NETJax Code Camp 2010

About Me

•David Fekke

•Software Engineer

•Lender Processing Services

•Fekke L.L.C.

•iPhone, iPad and Android Apps

•ASP.NET and ColdFusion

Douglas Crockford “Good architecture is necessary to give programs enough structure to be able to grow large without collapsing into a puddle of confusion.”

John Resig“The DOM is a mess!”

jQuery

•Javascript Framework

•2006

•Included with Visual Studio

•20% of all websites

•31% of top 10,000 websites

Licensing

•FREE

•MIT License

•Included with Visual Studio

•Tell the lawyers to relax

jQuery features

•Do a lot with very little code

•Chain multiple commands together

•AJAX Library

•UI Library

Sample jQuery

$(“div.myClass”).fadeOut().addClass(“myNewClass”);

Microsoft Support

•Microsoft on JQuery Board

•Supported since Visual Studio 2008 sp1

•Intellisense support

•Libraries come included in certain projects

Getting Started

•Download from jquery.com

•Can use a CDN such as Google

•Include jQuery library in your html

<script src="scripts/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

jQuery();</script>

<script type="text/javascript">

$();</script>

jQuery plays with others

•$ is an Alias of jQuery

•jQuery.noConflict(); will turn off $ alias

•Must be run in document ready()

Page Load

•onload can be used, but not preferred

•$(document).ready() same as onload

•$() will work as a shortcut

Sizzle Selector Library

•Selector Library now its own project

•Core to how jQuery works

•CSS 1-3 selectors for matching elements

Querying in jQuery

•select any DOM element

•$(document); // Document object

•$(p); // all paragraph elements

•$(tr:nth-child(1)); // first row of each table

•$(p > a); // all anchors inside paragraph tags

Trigger Events

•$(a#home).bind(“click”,fn);

•$(a#home).click(fn);

•$(a#home).live(“click”,fn);

Utility functions

•$.trim(someString);

•$.makeArray(obj);

•$.unique(array)

Traversing

•next(expr)

•previous(expr)

•parents(expr)

•siblings(expr)

•children(expr)

Chaining

•$(‘p’).next().css(‘font’,’Times’).append(‘<br/>’);

Use Each with Wrapped Sets

•$(a) returns array

•var single_item = $(a)[0];

•Each(function(){ //do something })

AJAX

•jQuery.getJSON();

•jQuery.ajax();

{"menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] }}}

jQuery and .NET•Use REST over SOAP

•Try to use JSON over XML if possible

•WCF can output JSON

•var svc = new Sys.Data.DataService("j.svc")

•ASP.NET MVC can handle JSON actions

Plugins

•jQuery is extensible

•Write your own

•jQuery.fn.mypluginname = fn()

•Huge Ecosystem of Plugins

New to 1.4

•$().live(“eventType”, fn);

•$().closest(“eventType”, fn);

•$().proxy(fn, context);

Demo

Resources

•jQuery.com

•http://jqueryui.com

•http://jquery14.com

•http://www.manning.com/bibeault/

?Questions

?

How to Contact me

•davidfekke @ gmail dot com

•twitter @davidfekke

•Blog at http://www.fekke.com/blog/