jQuery Makes Writing JavaScript

Fun Again

Doris Chen Ph.D. Developer Evangelist

Microsoft

http://blogs.msdn.com/b/dorischen/

Who am I?

• Developer Evangelist at Microsoft based in Silicon Valley, CA

– Blog: http://blogs.msdn.com/b/dorischen/

– Twitter @doristchen

– Email: doris.chen@microsoft.com

• Has over 13 years of experience in the software industry focusing on

web technologies

• Spoke and published widely at JavaOne, O'Reilly, SD West, SD

Forum and worldwide User Groups meetings

• Before joining Microsoft, Doris Chen was a Technology Evangelist at

Sun Microsystems

• Doris received her Ph.D. from the University of California at Los

Angeles (UCLA)

Agenda

• Essentials of jQuery

• New jQuery Plugins: Templates, DataLink, Globalization

• Working with OData, JSONP, Netflix

• Working with Web Services, Database and OData

• Summary

What is AJAX?

• Ajax= acronym for: > Asynchronous JavaScript And XML(or

XMLHTTPRequest )

• Browser client uses JavaScript to Asynchronously get data from a server and update page dynamically without refreshing the whole page

• More interactive user experience

“Naked” Ajax is too complex

• A lot of JavaScript programming involved > “It is buggy and broken”

> “Used for annoying people”

> Difficult to debug and maintain

> ...

• You need a deep understanding of Ajax techniques

• Have to handle all XmlHttpRequest interactions yourself

• Have to handle cross browser inconsistence yourself

Solutions • JavaScript Toolkits

> Wrap up ajax details in javascript libraries

> jQuery, Dojo, prototype+scriptaculous, Yahoo,...

jQuery Adoption

http://trends.builtwith.com/javascript/JQuery

What is jQuery?

• Created by John Resig and first announced Jan 2006 at BarCampNYC

• Most popular JavaScript library in use today > simplifies the interaction between HTML and JavaScript

• Free, open source (MIT, GPL)

• Cross Browser > IE6+, FF2+, Sarari 3+, Chrome, Opera 9+

• Find it at http://jquery.com

• It’s a joy to use

Why jQuery ? • Cross-browser compatibility • Fast & Small

– 24KB in size (Minified and Gzipped) – Core is minimum and add Plugins when

• Short Learning curve & Great Documentation • Tons of Plug-in: jQuery plugin repository • CSS3 Selectors Compliant • Helpful Utilities

– string trimming, easily extend objects, iteration, array manipulation, support function

• jQuery UI: jQuery User Interface • Widespread Adoption

– Google, Microsoft, Amazon, Twitter, Dell, Mozilla, Wordpress & Drupal, HP, IBM, Intel, Ruby on Rails

Getting Start

• Download jQuery at jquery.com – <script type="text/javascript" src="/js/jQuery. js"></script>

• Microsoft CDN or Google CDN – <script src="http://ajax.microsoft.com/ajax/jquery/jquery-

1.4.2.js" type="text/javascript"></script>

– <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

jQuery Philosophy

Find someone from HTML (selector)

Do something to it

(method)

Focus of jQuery

• Find someone in HTML and do something

$(“div”).addClass(“header”)

• JQuery object > Commonly used “$”

> Can also named “jQuery”

jQuery(“div”).addClass(“header”)

Find Someone: Selector • CSS Style

– $(“#myID”) // by id – $(“.myClass”) // by class name – $(“myTag”) // by tag (element name) – $(“#id, .class, tag”) // multiple

• Hierarchy – $("form input") // descendant – $("#main > *") // child – $("#prev ~ div") // sibling

• Form – $("form :radio") – $("#dvMainForm :checkbox") – $("input:disabled")

Do something with the found

elements

• Attributes get/set

• Manipulation

• Events

• Effects

• AJAX

Attribute

• $("em").attr("title")

• $("label").html()

• $("p:first").text()

• $("input").val() • $("em").attr("title", "zupzip")

• $("label").html("zupzip")

• $("p:first").text("zupzip")

• $("input").val("zupzip")

Get

Set

Manipulation

• Apply css style dynamically – $(“#target”).addClass(“css_class”);

• Toggle css style – $(“#target”).toggleClass(“css_class”);

• Append – $("p").append("<strong>Hello</strong>");

• appendTo – $("span").appendTo("#foo");

• prepend &prependTo • after

– $("p").after("<b>Hello</b>"); • before

– $("p").before("<b>Hello</b>"); Manipulations Demo

Events

• click, hover, change....

$(“#target”).click(function(){....});

• bind

$(“#target”).bind(“click”, function(){....});

• Chain event handlers

$(“#target”).click(....).hover(...);

Events Demo

Effects

• Show and Hide

– $(“#target”).show()

– $(“#target”).hide()

• Fade in and out

– $(“#target”).fadein()

– $(“#target”).fadeout()

• Slide up and down

– $(“#target”).slideup()

– $(“#target”).slidedown()

• Custom animation Animation Demo

AJAX • load(url, [data], callback)

> $(„#myContainer‟).load(„home/myHtmlSnippet‟);

• $.get(url, [data], callback)

• $.post(url, [data], callback)

• $.ajax(options) > $.ajax({ type : “GET” url : “url” data : data success : callback });

jQuery Stack & Chaining

$(‘body’) // [body]

.find(‘p’) // [p, p, p] > [body]

.find(‘a’) // [a, a] > [p, p, p] > [body]

.addClass(‘foo’)

.end() // [p, p, p] > [body]

.end() // [body]

20

jQuery Stack & Chaining

$(‘tr’) //get all rows

.filter(‘:odd’) //get all odd rows

.addClass(‘myOddClass’)

.end() //back to all rows

.filter(‘:even’) //get all even rows

.addClass(‘myEvenClass’);

21

Agenda

• Essentials of jQuery

• New jQuery Plugins: Templates, DataLink, Globalization

• Working with OData, JSONP, Netflix

• Working with Web Services, Database and OData

• Summary

Microsoft is Contributing to jQuery Library

• jQuery Templates plugin, Data Link plugin, and Globalization plugin have been accepted as officially supported plugins of the jQuery project

– jQuery Templates (with jQuery 1.4.2) and Datalink plugins (with jQuery 1.4.3) will be managed by the jQuery Core team

– jQuery Globalization plugin will become part of the jQuery UI project

– jQuery Templates plugin will be part of jQuery Core library 1.5

• API Documentation

– jQuery Templates http://api.jquery.com/category/plugins/templates/

– jQuery Data Link– http://api.jquery.com/category/plugins/data-link/

– jQuery Globalization– Available soon

• Download

– jQuery Templates – http://github.com/jquery/jquery-tmpl

– jQuery Datalink – http://github.com/jquery/jquery-datalink

– jQuery Globalization – http://github.com/jquery/jquery-global

• Full product support for jQuery

– Ship with Visual Studio with Great Intellisense support

Templates Plugin (jQuery 1.4.2) • create client templates

– e.g. format a set of database records from the server through an Ajax request

<body> <ul id="movieList"></ul> <script id="movieTemplate" type="text/x-jquery-tmpl"> <li><b>${Name}</b> (${ReleaseYear})</li> </script> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="http://nje.github.com/jquery-tmpl/jquery.tmpl.js"></script>

<script> var movies = [ { Name: "The Red Violin", ReleaseYear: "1998" }, { Name: "Eyes Wide Shut", ReleaseYear: "1999" }, { Name: "The Inheritance", ReleaseYear: "1976" } ]; $( "#movieTemplate" ).tmpl( movies ) .appendTo( "#movieList" ); </script> </body>

Datalink Plugin (jQuery 1.4.3) • Easily keep user interface and data synchronized

– automatically synchronize the input fields of a form with the properties of JavaScript product object

<script src="http://github.com/nje/jquery-datalink/raw/e3e3be4312c9b224a8d9b25031f4ac876e4f70fd/jquery.js"></script> <script src="http://github.com/nje/jquery-datalink/raw/master/jQuery.datalink.js"></script>

<form> <div> First Name: <input type="text" name="firstName" /> </div></form>

person.firstName: <span id="objFirst"></span><br/> <script> var person = {}; $("form").link(person); // Chain link the person object to these elements to show the results $("#objFirst").link(person, { firstName: { name: "objFirst", convertBack: function (value, source, target) { $(target).text(value); } } }); $(person).data("firstName", "John"); </script>

Globalization Plugin (jQuery 1.4.2)

• enables you to use different cultural conventions

• formatting or parsing numbers, dates and times, calendars, and currencies

• has information on over 350 cultures

• can use this plugin with the core jQuery library or plugins built on top of the jQuery library

Agenda

• Essentials of jQuery

• New jQuery Plugins: Templates, DataLink, Globalization

• Working with OData, JSONP, Netflix

• Working with Web Services, Database and OData

• Summary

Develop Netflix Movie Search Application using

jQuery, OData, JSONP and Netflix Technologies

OData Query

OData in JSON

http://odata.netflix.com/Catalog/Titles?$filter=Name%20eq%20'Star%20Trek'

Netflix OData Provider

JSONP Ajax Call

Callback Render on jQuery Template

OData

• Web protocol for querying and updating data • Uniform way of representing structured data

– Atom, JSON formats

• Uniform URL conventions – Navigation, filtering, sorting, paging, etc.

• /Bookmarks?$orderby=Name //sorting • /Bookmarks?$top=10&$skip=30 //paging

• Uniform operations – Addressability – GET, POST, PUT, DELETE

• http://www.odata.org/

Netflix OData in Atom

Netflix OData in Feeder Reading View

Netflix OData Diagram

http://odata.netflix.com/Catalog/Titles?$filter=Name%20eq%20'Star%20Trek'

Query String

Key Steps

• Start with an empty HTML page • Define style or you can put it in a css file • Develop start up page • Define the template of the response page • Compose the JSONP call • Implement callback routine and using jQuery template

– Microsoft has contributed jQuery template jquery.tmpl.js to jQuery project and it will be part jQuery in next release.

• Implement movie play using Netflix API – You need to apply a Netflix Developer API account and get the

key. – More information http://developer.netflix.com/

Style

<head> <title>Search Movies</title> <style type="text/css"> #movieTemplateContainer div { width:400px; padding: 10px; margin: 10px; border: black solid 1px; } </style> </head>

Start Up Page and Template Result Page

<body> <label>Search Movies:</label> <input id="movieName" size="50" /> <button id="btnLookup">Lookup</button> <div id="movieTemplateContainer"></div> <script id="movieTemplate" type="text/x-jquery-tmpl"> <div> <img src="${BoxArt.LargeUrl}" /> <strong>${Name}</strong> <br/> <button id="playButton" movieID=${NetflixApiId}

onclick="play(this)">Play Now</button> <p> {{html Synopsis}} </p> </div> </script>

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="Scripts/jquery.tmpl.js"></script>

Make JSONP Call <script type="text/javascript"> $("#btnLookup").click(function () { // Build OData query var movieName = $("#movieName").val(); var query = "http://odata.netflix.com/Catalog" // netflix base url + "/Titles" // top-level resource + "?$filter=substringof('" + escape(movieName) + "',Name)" //filter by movie name + "&$callback=callback" // jsonp request + "&$format=json"; // json request // Make JSONP call to Netflix $.ajax({ dataType: "jsonp", url: query, jsonpCallback: "callback", success: callback }); });

Callback and Template

<div id="movieTemplateContainer"></div> <script id="movieTemplate" type=" text/x-jquery-tmpl "> <div> <img src="${BoxArt.LargeUrl}" /> <strong>${Name}</strong> <br/> <button id="playButton" movieID=${NetflixApiId} onclick="play(this)">Play Now</button>

<p> {{html Synopsis}} </p> </div> </script>

function callback(result) {

// unwrap result var movies = result.d.results; $("#movieTemplateContainer")

.empty(); $("#movieTemplate").tmpl(movies).appendTo("#movieTemplateContainer"); }

Netflix Movie Play function play(mvInfo) { var id = $(mvInfo).attr("movieID").substring(45); javascript: nflx.openPlayer('http://api.netflix.com/catalog/movie/'+id, 0, 0, ‘YOUR NETFLIX DEVELOPER ACCOUNT KEY'); } </script> <script src="http://jsapi.netflix.com/us/api/js/api.js"></script>

</body>

Agenda

• Essentials of jQuery

• New jQuery Plugins: Templates, DataLink, Globalization

• Working with OData, JSONP, Netflix

• Working with Web Services, Database and OData

• Summary

Developing jQuery Application

• Server Agnostic • Server

– Data Model: entity framework, JPA, etc – Develop Restful Web Services (OData Services)

• Client – Invoke Restful Web Services (OData Services) $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "/MovieService.svc/Movies", data: data, dataType: "json", success: insertCallback }); – Retrieve data and Present

• JavaScript, jQuery, jQuery templates, jQuery plugins, HTML5

Favorite Movie Site Overview

Insert Data into Database

Displaying Movie List

Key Steps: Insert Data into Database

• Create ADO.NET Entity Data Model based on the

DB • Approach 1: Using generic handler

– low-level approach to interacting with .NET through jQuery

– Simple, just need jQuery library

• Approach 2: Using Ajax-enabled WCF Service – a little more work as need to serialize objects into JSON

• Approach 3 Using OData (WFC Data Service) – Taking advantage of open standards such as REST, JSON,

and OData – The OData protocol (WCF Data Services) works very

nicely with Ajax • quickly expose database data to an Ajax application

Create a Data Model

Approach 3: Create OData Service

Approach 3: Insert Data Using OData Service

Create WCF Data Service (OData Service) public class MovieService : DataService<MoviesEntities> {// This method is called only once to initialize service-wide policies. public static void InitializeService(DataServiceConfiguration config) {// TODO: set rules to indicate which entity sets and service operations are visible, updatable, etc. // Examples: config.SetEntitySetAccessRule("Movies", EntitySetRights.All); // config.SetServiceOperationAccessRule("MyServiceOperation", ServiceOperationRights.All); config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2; } }

AddMovie.aspx $("#btnAdd").click(function () { // Convert the form into an object var data1 = { Title: $("#title1").val(), Genre: $("#genre").val(), ImageURL: $("#imageUrl").val() }; // JSONify the data var data = JSON.stringify(data1); // Post it $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "/MovieService.svc/Movies", data: data, dataType: "json", success: insertCallback }); }); function insertCallback(result) { var newMovie = result["d"]; // Show primary key alert("Movie added with primary key " + newMovie.MovieID); }

Display Favorite Movies • Retrieving movie list from OData

– Approach 1: using jQuery and jQuery Plugin templates to create a table with pagination

– Approach 2: using jQuery, jQuery Plugin templates and Element Stack Plugin to create a fun Movie list

• http://www.marcofucci.com/tumblelog/15/mar/2010/elementstack_v1-1/

Agenda

• Essentials of jQuery

• New jQuery Plugins: Templates, DataLink, Globalization

• Working with OData, JSONP, Netflix

• Working with Web Services, Database and OData

• Summary

Summary

• jQuery is easy to learn and use

– jQuery plugins, jQuery UI

• Microsoft is contributing to jQuery project

• jQuery can work with different server platform

– Easy to produce and consume Restful Web Services, OData

Resources • jquery.com Downloading

• api.jquery.com Documentation

• forum.jquery.com Community

• meetups.jquery.com Local Community

• plugins.jquery.com Extending

• jqueryui.com UI Widgets and Effects

• odata.org OData Services

Upcoming Web Camps 1 Day MVC and jQuery Web Camp

Feb. 26th, 2011, Mountain View, CA

March 25th, 2011, Seattle, WA

Free, learning innovative web technology, hands on experience

Detail and Registration http://bit.ly/gT9sBb

jQuery Makes Writing JavaScript

Fun Again

Doris Chen Ph.D.

doris.chen@microsoft.com Developer Evangelist

Microsoft

http://blogs.msdn.com/b/dorischen/