Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How I Learned to Stop Worrying and Love jQuery (Jan 2013)

2,826 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

How I Learned to Stop Worrying and Love jQuery (Jan 2013)

  1. 1. How I Learned To Stop Worrying and Love jQueryDavid Giard, Sogeti USA C# MVP MCTS, MCSD, MCSE, MCDBADavidGiard.com@DavidGiard
  2. 2. BEFORE
  3. 3. AFTER
  4. 4. JavaScript in your page• <script type="text/javascript"> … </script>• <script type="text/javascript“ src=“xxx.js"> </script>
  5. 5. JavaScript: The Good Parts• Interactive web pages• Fast• Ajax
  6. 6. JavaScript: The Bad Parts• Cross-browser issues• Cross-platform issues
  7. 7. JavaScript Frameworks• jQuery jQuery• Prototype• Dojo• Mootools• ExtJs• etc…
  8. 8. jQuery• JavaScript Abstraction• Cross-Browser• Built-In Functions• Fast• Unobtrusive• Popular• Ships with Visual Studio 2010 and 2012
  9. 9. jQuery PopularitySource: http://royal.pingdom.com
  10. 10. jQuery PopularitySource: http://royal.pingdom.com
  11. 11. jQuery Popularity• Twitter.com• Wikipedia.org• MLB.com• Amazon.com• Bing.com• Microsoft.com• Bit.ly• ESPN.com• Digg.com• Reddit.com• Netflix.com• WordPress.com
  12. 12. Unobtrusive JavaScript• Obtrusive <a href=“” onclick=“DoSomething();”> Click Me </a>• Unobtrusive <script type="text/javascript"> $(document).ready(function(){ $(“#Link1”).click(function(){ DoSomething(); }); </script> <a href=“” id=“Link1”> Click Me </a>
  13. 13. Enable jQuery• Download from jQuery.com• <script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
  14. 14. Content Delivery Network• <script type="text/javascript" src=“http://ajax.microsoft.com/ajax/jquery/jquery-1.8.3.min.js"> </script>• <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>• <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js "> </script>
  15. 15. Non-Minified JavaScript/*! * jQuery JavaScript Library v1.8.2 * http://jquery.com/ * * Includes Sizzle.js * http://sizzlejs.com/ * * Copyright 2012 jQuery Foundation and other contributors * Released under the MIT license * http://jquery.org/license * * Date: Thu Sep 20 2012 21:13:05 GMT-0400 (Eastern Daylight Time) */(function( window, undefined ) {var// A central reference to the root jQuery(document)rootjQuery,// The deferred used on DOM ready
  16. 16. Minified JavaScript(function(a,b){function G(a){var b=F[a]={};returnp.each(a.split(s),function(a,c){b[c]=!0}),b}functionJ(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(I,"-$1").toLowerCase();d=a.getAttribute(e);if(typeofd=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:+d+""===d?+d:H.test(d)?p.parseJSON(d):d}catch(f){}p.data(a,c,d)}else d=b}return d}function K(a){var b;for(b ina){if(b==="data"&&p.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function ba(){return!1}function bb(){return!0}functionbh(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function bi(a,b){doa=a[b];while(a&&a.nodeType!==1);return a}functionbj(a,b,c){b=b||0;if(p.isFunction(b))return p.grep(a,function(a,d){vare=!!b.call(a,d,a);return e===c});if(b.nodeType)return p.grep(a,function(a,d){returna===b===c});if(typeof b=="string"){var d=p.grep(a,function(a){returna.nodeType===1});if(be.test(b))return p.filter(b,d,!c);b=p.filter(b,d)}returnp.grep(a,function(a,d){return p.inArray(a,b)>=0===c})}function bk(a){varb=bl.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}function bC(a,b){returna.getElementsByTagName(b)[0]||a.appendChild(a.ownerDocument.createElement(b))}f
  17. 17. Document Object Model (DOM)<html> <head> <title>My Page</title> <script type="text/javascript“ src="http://code.jquery.com/jquery-1.7.1.min.js "> Document </script> </head> <body> Head Body <div> <p> Title a <a href="Page2.htm">link</a> Div This Script Div </p> </div> <div> P UL Colors: <ul> <li>Red</li> A LI LI LI <li>Orange</li> <li>Yellow</li> </ul> </div> </body></html>
  18. 18. Getting an Element<script type="text/javaScript"> var id = "Div1"; var myDiv = document.GetElementById(id);</script>…<div id="Div1"> …</div>
  19. 19. Cross-Browser• Javascriptvar id = "Div1";var elm = null; if (document.getElementById) { elm = document.getElementById(id); } else if (document.all) { elm = document.all[id]; } else if (document.layers) { elm = document.layers[id]; }• jQueryvar elm = $("#Div1");
  20. 20. jQuery Syntax• jQuery keyword• Selectors• Events• Functions / Methods
  21. 21. “jQuery” Keyword• jQuery• $• Represents the jQuery object• Indicates what follows is jQuery
  22. 22. Selectors• Returns a set of objects• Call method on each object• Bind event to each object
  23. 23. CSS Selectorsh2 { font-family: "Calibri"; Tag name font-size: 66pt; font-weight: bold;}.FootNote { font-family: "Calibri"; Class name font-size: 18pt; font-weight: bold;}#MyElement { font-family: “Times New Roman"; Element ID font-color: red;}div#MyDiv { font-family: “Arial"; Combine selectors font-size: 48pt;}
  24. 24. jQuery Selectors• $(selector)• where selector is:Selector Select by… Example "#xxx" Id $("#MyDiv") ".xxx" className $(".MyClass") "xxx" element type $("a") xxx variable name $(document)
  25. 25. (document).ready$(document).ready(function(){ …});
  26. 26. Events$(document).ready(function(){ $("#MyDiv").click(function(){ … });});
  27. 27. Methods$(document).ready(function(){ $(“#MyDiv”).click(function(){ $(“a”).attr(“target”, “_blank”); });});
  28. 28. Methods$(document).ready(function(){ $(“#MyDiv”).click(function(){ $(“a”).attr(“target”, “_blank”); });});
  29. 29. Methods$(function(){ $(“#MyDiv”).click(function(){ $(“a”).attr(“target”, “_blank”); });});
  30. 30. Combining Selectors• Containership $(‘selector1 selector2’) Ex: $(‘div a’)• Narrow scope $(‘Selector1Selector2’) Ex: $(‘a#MyLink’)
  31. 31. Set-based Selectors• $("div:first")• $("div:last")• $("div:even")• $("div:odd")
  32. 32. Ajax• Call web service from jQuery
  33. 33. Ajax$.ajax({ url: "CustomerWs.asmx/GetCustomerName", dataType: "text", type: "POST", data: {}, error: function (err) { // Code to run when error returned }, success: function (data) { // Code to run when successfully returned }
  34. 34. Plug-Ins• jQuery is extensible!• jQueryUI
  35. 35. jQuery UI
  36. 36. Help!• docs.jquery.com• api.jquery.com• jqueryui.com/demos
  37. 37. More resources• http://codylindley.com/jqueryselectors/• http://www.paulstovell.com/jquerypad
  38. 38. David Giard• DavidGiard.com• TechnologyAndFriends.com• @DavidGiard.com

×