jQuery Makes Writing JavaScript Fun Again

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

Traditional Web AJAX
within a browser,
there is AJAX
engine

“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/jqu
ery.js"></script>

jQuery Philosophy

Find someone Do something to
from HTML it
(selector) (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()
Get
• $("p:first").text()
• $("input").val() • $("em").attr("title", "zupzip")
• $("label").html("zupzip")
Set
• $("p:first").text("zupzip")
• $("input").val("zupzip")

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]

21

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’);

22

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

Develop Netflix Movie Search Application using
jQuery, OData, JSONP and Netflix Technologies
JSONP Ajax Call

OData Query

http://odata.netflix.com/Catalo
g/Titles?$filter=Name%20eq%2 Netflix OData
0'Star%20Trek' Provider

OData in JSON
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 Feeder Reading View

Netflix OData Diagram

Query String

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

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/html">
<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>
function callback(result) {
<script id="movieTemplate" type="text/html"> // unwrap result
<div> var movies = result.d.results;
<img src="${BoxArt.LargeUrl}" />
<strong>${Name}</strong> $("#movieTemplateContainer")
<br/> .empty();
<button id="playButton" movieID=${Netflix $("#movieTemplate").tmpl(mov
ApiId} onclick="play(this)">Play Now</button> ies).appendTo("#movieTemplateCon
<p> tainer");
{{html Synopsis}} }
</p>
</div>
</script>

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

</body>

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 (WCF 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

Approach 1: Using Generic Handler
Generic Handler Default.htm
public class InsertMovie : IHttpHandler { <script
private MoviesDBEntities type="text/javascript">
_dataContext = new
MoviesDBEntities(); $("#btnAdd").click(functi
public void on () {
ProcessRequest(HttpContext context) {
// Extract form fields $.post("InsertMovie.as
… hx", $("form").serialize(),
// Create movie to insert insertCallback);
var movieToInsert = new Movie { });
…};
// Save new movie to DB function
_dataContext.AddToMovies(movie insertCallback(result) {
ToInsert); …
_dataContext.SaveChanges();
… }
}
} </script>

Approach 2: Using Ajax-enabled WCF
Service
WCF Service Default.htm
[ServiceBehavior(IncludeExceptionDetailInFaults=true)] <script type="text/javascript">
[ServiceContract(Namespace = "")] $("#btnAdd").click(function () {
// Convert the form into an object
[AspNetCompatibilityRequirements(RequirementsMode
= AspNetCompatibilityRequirementsMode.Allowed)] var data = { title: $("#title").val(),
director: $("#director").val() };
public class MovieService { // JSONify the data
private MoviesDBEntities _dataContext = new data = JSON.stringify(data);
MoviesDBEntities(); // Post it
[OperationContract] $.ajax({
public bool Insert(string title, string director) { type: "POST",
// Create movie to insert contentType: "application/json;
charset=utf-8",
var movieToInsert = new Movie { …};
url: "MovieService.svc/Insert",
// Save new movie to DB data: data,
_dataContext.AddToMovies(movieToInsert); dataType: "json",
_dataContext.SaveChanges(); success: insertCallback
// Return movie (with primary key) });
return true; }); …
}} </script>

Approach 3: Create OData Service

Approach 3: Insert Data Using OData
Service
Create WCF Data Service (OData AddMovie.aspx
Service) $("#btnAdd").click(function () {
public class MovieService : DataService<Movies // Convert the form into an object
Entities> var data1 = { Title: $("#title1").val(), Genre: $("#g
{// This method is called only once to initialize enre").val(), ImageURL: $("#imageUrl").val() };
service-wide policies. // JSONify the data
public static void InitializeService(DataServi var data = JSON.stringify(data1);
ceConfiguration config) // Post it
{// TODO: set rules to indicate which entity $.ajax({
sets and service operations are visible, updatabl type: "POST",
e, etc. contentType: "application/json; charset=utf-8",
// Examples: url: "/MovieService.svc/Movies",
config.SetEntitySetAccessRule("Movies", data: data,
EntitySetRights.All); dataType: "json",
// config.SetServiceOperationAccessRule( success: insertCallback
"MyServiceOperation", ServiceOperationRights. });
All); });
config.DataServiceBehavior.MaxProtocolV function insertCallback(result) {
ersion = DataServiceProtocolVersion.V2; var newMovie = result["d"];
} // Show primary key
} alert("Movie added with primary key " + newMov
ie.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/

Summary
• jQuery is easy to learn and use
– jQuery plugins, jQuery UI
• Microsoft is contributing to jQuery project
• jQuery works well with OData
– Easy to produce and consume OData
– ADO.NET Entity Data Model, WCF Data Service
easy to generate

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

jQuery Makes Writing JavaScript
Fun Again

Doris Chen Ph.D.
doris.chen@microsoft.com
Developer Evangelist
Microsoft
http://blogs.msdn.com/b/dorischen/

jQuery Makes Writing JavaScript Fun Again

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (8)

More from Doris Chen

More from Doris Chen (20)

Recently uploaded

Recently uploaded (20)

jQuery Makes Writing JavaScript Fun Again