jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)


Published on

Get frustrated by cross-browser incompatibility? Hate to develop application using JavaScript? jQuery is a powerful JavaScript library that can enhance your websites regardless of your background. jQuery is fast, lean, simple and hugely expandable, enabling you to build compelling web applications quickly and easily. In this session, we will start with a quick introduction of jQuery, illustrate what’s so good about jQuery, and demonstrate step by step how to develop jQuery Ajax application efficiently with database, web services, OData, NetFlix and ASP.NET MVC. Microsoft is now shipping, supporting, and contributing to jQuery, with ASP.NET and Visual Studio. New features which will be available in the next release of jQuery such as globalization, templating and data-linking will be introduced in the session as well.

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)

  1. jQuery Makes Writing JavaScriptFun Again Doris Chen Ph.D. Developer Evangelist Microsoft http://blogs.msdn.com/b/dorischen/
  2. 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, OReilly, 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)
  3. Agenda• Essentials of jQuery• New jQuery Plugins: Templates, DataLink, Globalization• Working with OData, JSONP, Netflix• Working with Web Services, Database and OData• Summary
  4. 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
  5. “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
  6. Solutions• JavaScript Toolkits > Wrap up ajax details in javascript libraries > jQuery, Dojo, prototype+scriptaculous, Yahoo,...
  7. jQuery Adoptionhttp://trends.builtwith.com/javascript/JQuery
  8. 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
  9. 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
  10. 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>
  11. jQuery PhilosophyFind someone Do something to from HTML it (selector) (method)
  12. 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”)
  13. 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")
  14. Do something with the found elements• Attributes get/set• Manipulation• Events• Effects• AJAX
  15. 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")
  16. 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
  17. Events• click, hover, change.... $(“#target”).click(function(){....});• bind $(“#target”).bind(“click”, function(){....});• Chain event handlers $(“#target”).click(....).hover(...); Events Demo
  18. 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
  19. 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 });
  20. 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
  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’); 21
  22. Agenda• Essentials of jQuery• New jQuery Plugins: Templates, DataLink, Globalization• Working with OData, JSONP, Netflix• Working with Web Services, Database and OData• Summary
  23. 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
  24. 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>
  25. 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>
  26. 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
  27. Agenda• Essentials of jQuery• New jQuery Plugins: Templates, DataLink, Globalization• Working with OData, JSONP, Netflix• Working with Web Services, Database and OData• Summary
  28. Develop Netflix Movie Search Application usingjQuery, OData, JSONP and Netflix Technologies JSONP Ajax Call OData Query http://odata.netflix.com/Catalo g/Titles?$filter=Name%20eq%2 Netflix OData 0Star%20Trek Provider OData in JSON Callback Render on jQuery Template
  29. 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/
  30. Netflix OData in Atom
  31. Netflix OData in Feeder Reading View
  32. Netflix OData Diagram Query Stringhttp://odata.netflix.com/Catalog/Titles?$filter=Name%20eq%20Star%20Trek
  33. 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/
  34. Style<head> <title>Search Movies</title> <style type="text/css"> #movieTemplateContainer div { width:400px; padding: 10px; margin: 10px; border: black solid 1px; } </style></head>
  35. 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>
  36. 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 }); });
  37. Callback and Template<div id="movieTemplateContainer"></div> function callback(result) {<script id="movieTemplate" type=" text/x- // unwrap resultjquery-tmpl "> var movies = result.d.results; <div> <img src="${BoxArt.LargeUrl}" /> $("#movieTemplateContainer") <strong>${Name}</strong> .empty(); <br/> $("#movieTemplate").tmpl(mov <button id="playButton" movieID=${Netflix ies).appendTo("#movieTemplateConApiId} onclick="play(this)">Play Now</button> tainer"); <p> } {{html Synopsis}} </p> </div></script>
  38. 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 ACCOUNTKEY); }</script><script src="http://jsapi.netflix.com/us/api/js/api.js"></script></body>
  39. Agenda• Essentials of jQuery• New jQuery Plugins: Templates, DataLink, Globalization• Working with OData, JSONP, Netflix• Working with Web Services, Database and OData• Summary
  40. 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
  41. Favorite Movie Site OverviewInsert Data into Database Displaying Movie List
  42. 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
  43. Create a Data Model
  44. Approach 3: Create OData Service
  45. Approach 3: Insert Data Using OData ServiceCreate WCF Data Service (OData AddMovie.aspxService) $("#btnAdd").click(function () {public class MovieService : DataService<Movies // Convert the form into an objectEntities> 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); }
  46. 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/
  47. Agenda• Essentials of jQuery• New jQuery Plugins: Templates, DataLink, Globalization• Working with OData, JSONP, Netflix• Working with Web Services, Database and OData• Summary
  48. 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
  49. 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
  50. Upcoming Web Camps1 Day MVC and jQuery Web Camp Feb. 26th, 2011, Mountain View, CA March 25th, 2011, Seattle, WAFree, learning innovative web technology,hands on experience Detail and Registration http://bit.ly/gT9sBb
  51. jQuery Makes Writing JavaScriptFun Again Doris Chen Ph.D. doris.chen@microsoft.com Developer Evangelist Microsoft http://blogs.msdn.com/b/dorischen/