Your SlideShare is downloading. ×
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,828

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
1,828
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Sour
  • Transcript

    • 1. How I Learned To Stop Worrying and Love jQueryDavid Giard, Sogeti USA C# MVP MCTS, MCSD, MCSE, MCDBADavidGiard.com@DavidGiard
    • 2. BEFORE
    • 3. AFTER
    • 4. JavaScript in your page• <script type="text/javascript"> … </script>• <script type="text/javascript“ src=“xxx.js"> </script>
    • 5. JavaScript: The Good Parts• Interactive web pages• Fast• Ajax
    • 6. JavaScript: The Bad Parts• Cross-browser issues• Cross-platform issues
    • 7. JavaScript Frameworks• jQuery jQuery• Prototype• Dojo• Mootools• ExtJs• etc…
    • 8. jQuery• JavaScript Abstraction• Cross-Browser• Built-In Functions• Fast• Unobtrusive• Popular• Ships with Visual Studio 2010 and 2012
    • 9. jQuery PopularitySource: http://royal.pingdom.com
    • 10. jQuery PopularitySource: http://royal.pingdom.com
    • 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. 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. Enable jQuery• Download from jQuery.com• <script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
    • 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. 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. 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. 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. Getting an Element<script type="text/javaScript"> var id = "Div1"; var myDiv = document.GetElementById(id);</script>…<div id="Div1"> …</div>
    • 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. jQuery Syntax• jQuery keyword• Selectors• Events• Functions / Methods
    • 21. “jQuery” Keyword• jQuery• $• Represents the jQuery object• Indicates what follows is jQuery
    • 22. Selectors• Returns a set of objects• Call method on each object• Bind event to each object
    • 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. 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. (document).ready$(document).ready(function(){ …});
    • 26. Events$(document).ready(function(){ $("#MyDiv").click(function(){ … });});
    • 27. Methods$(document).ready(function(){ $(“#MyDiv”).click(function(){ $(“a”).attr(“target”, “_blank”); });});
    • 28. Methods$(document).ready(function(){ $(“#MyDiv”).click(function(){ $(“a”).attr(“target”, “_blank”); });});
    • 29. Methods$(function(){ $(“#MyDiv”).click(function(){ $(“a”).attr(“target”, “_blank”); });});
    • 30. Combining Selectors• Containership $(‘selector1 selector2’) Ex: $(‘div a’)• Narrow scope $(‘Selector1Selector2’) Ex: $(‘a#MyLink’)
    • 31. Set-based Selectors• $("div:first")• $("div:last")• $("div:even")• $("div:odd")
    • 32. Ajax• Call web service from jQuery
    • 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. Plug-Ins• jQuery is extensible!• jQueryUI
    • 35. jQuery UI
    • 36. Help!• docs.jquery.com• api.jquery.com• jqueryui.com/demos
    • 37. More resources• http://codylindley.com/jqueryselectors/• http://www.paulstovell.com/jquerypad
    • 38. David Giard• DavidGiard.com• TechnologyAndFriends.com• @DavidGiard.com

    ×