How I Learned              To Stop Worrying              and Love jQueryDavid Giard, Sogeti USA     C# MVP     MCTS, MCSD,...
BEFORE
AFTER
JavaScript in your page• <script type="text/javascript">   …  </script>• <script type="text/javascript“   src=“xxx.js">  <...
JavaScript: The Good Parts• Interactive web pages• Fast• Ajax
JavaScript: The Bad Parts• Cross-browser issues• Cross-platform issues
JavaScript Frameworks•   jQuery     jQuery•   Prototype•   Dojo•   Mootools•   ExtJs•   etc…
jQuery•   JavaScript Abstraction•   Cross-Browser•   Built-In Functions•   Fast•   Unobtrusive•   Popular•   Ships with Vi...
jQuery PopularitySource: http://royal.pingdom.com
jQuery PopularitySource: http://royal.pingdom.com
jQuery Popularity•   Twitter.com•   Wikipedia.org•   MLB.com•   Amazon.com•   Bing.com•   Microsoft.com•   Bit.ly•   ESPN....
Unobtrusive JavaScript• Obtrusive  <a href=“” onclick=“DoSomething();”>  Click Me  </a>• Unobtrusive  <script type="text/j...
Enable jQuery• Download from jQuery.com• <script     type="text/javascript"     src="scripts/jquery-1.8.3.min.js"></script>
Content Delivery Network• <script   type="text/javascript"   src=“http://ajax.microsoft.com/ajax/jquery/jquery-1.8.3.min.j...
Non-Minified JavaScript/*! * jQuery JavaScript Library v1.8.2 * http://jquery.com/ * * Includes Sizzle.js * http://sizzlej...
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(...
Document Object Model (DOM)<html> <head>  <title>My Page</title>  <script    type="text/javascript“    src="http://code.jq...
Getting an Element<script type="text/javaScript">  var id = "Div1";  var myDiv = document.GetElementById(id);</script>…<di...
Cross-Browser• Javascriptvar id = "Div1";var elm = null; if (document.getElementById) {   elm = document.getElementById(id...
jQuery Syntax•   jQuery keyword•   Selectors•   Events•   Functions / Methods
“jQuery” Keyword•   jQuery•   $•   Represents the jQuery object•   Indicates what follows is jQuery
Selectors• Returns a set of objects• Call method on each object• Bind event to each object
CSS Selectorsh2 {       font-family: "Calibri";               Tag name       font-size: 66pt;       font-weight: bold;}.Fo...
jQuery Selectors• $(selector)• where selector is:Selector   Select by…      Example "#xxx"    Id              $("#MyDiv") ...
(document).ready$(document).ready(function(){     …});
Events$(document).ready(function(){    $("#MyDiv").click(function(){     …    });});
Methods$(document).ready(function(){    $(“#MyDiv”).click(function(){     $(“a”).attr(“target”, “_blank”);    });});
Methods$(document).ready(function(){    $(“#MyDiv”).click(function(){     $(“a”).attr(“target”, “_blank”);    });});
Methods$(function(){    $(“#MyDiv”).click(function(){     $(“a”).attr(“target”, “_blank”);    });});
Combining Selectors• Containership  $(‘selector1 selector2’)  Ex:      $(‘div a’)• Narrow scope  $(‘Selector1Selector2’)  ...
Set-based Selectors•   $("div:first")•   $("div:last")•   $("div:even")•   $("div:odd")
Ajax• Call web service from jQuery
Ajax$.ajax({      url: "CustomerWs.asmx/GetCustomerName",      dataType: "text",      type: "POST",      data: {},      er...
Plug-Ins• jQuery is extensible!• jQueryUI
jQuery UI
Help!• docs.jquery.com• api.jquery.com• jqueryui.com/demos
More resources• http://codylindley.com/jqueryselectors/• http://www.paulstovell.com/jquerypad
David Giard• DavidGiard.com• TechnologyAndFriends.com• @DavidGiard.com
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
Upcoming SlideShare
Loading in …5
×

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

2,195
-1

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,195
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Sour
  • 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×