Web2.0 with jQueryfaster, easier and a lot more fun
Hello!Lau Bech Lauritzen                              ★2
Todays menu      Web  BrowserJavascript   jQuery   Plugins      Tips                ★3
Web 1.0• Monologue• A lot of page changes• Short time on each page                            ★4
Hi, I’mJavaScript!       AND I’m              XMLHttpRequest                               ★5
Web 2.0•   Dialogue – user-generated content•   Increased interaction•   User experience•   Webapplications               ...
★7
Client-Side Technology  Communication      Ajax  Interaction    EventsAnimation  Bling                             ★8
Ajax       ★9
Asyncronous javascript and xML       XMLHttpRequest                                 ★ 10
/ajax/form               ServerXML/JSON             ★ 11
Javascript             ★ 12
The History of Javascript•   1995 JavaScript in Netscape•   1996 JScript in Internet Explorer•   1997 ECMAScript standard•...
Javascript•   Weird name•   Complete language•   Object orientered•   First-class functions•   Dynamically typed•   Genera...
CSS                  HTML       Document Object ModelJavascript                           layout                          ...
DOM                                             CSS                     <!DOCTYPE HTML            JS                     <...
ARGH!// Mozilla, Opera and webkit nightlies currently support this eventif ( document.addEventListener ) {  // Use the han...
$(document).ready(…);                        ★ 18
Annoying APIvar newDiv = document.createElement("div");newDiv.innerHTML = "<h1>Hej fra Danmark!</h1>";var orgDiv = documen...
$(“#orgDiv”).before(“<h1>Hej!</h1>”);                                        ★ 20
Spaghetti<script>  function setLogout(obj) { ... }</script><ahref="javascript:toggle(textde);document.getElementById(texte...
<a class=“language” href=“/de/">  <img src=“/img/debig.png“/></a><a class=“login” href=“/login/“>Log ind</a><script src=“c...
The Language               ★ 23
Javascript toolkits                      ★ 24
★ 25
★ 26
★ 27
jQuery•   Started January 2006•   Simplify and speed up webdevelopment•   DOM query language with CSS-notation•   Minimal ...
Dig?       ★ 29
★ 30
CompatibilityIE 6.0+, FF 2+, Safari 3.0+,Opera 9.0+, Chrome                               ★ 31
★ 32
jQuery is designed to changethe way you write Javascript                               ★ 33
jQuery basics•   Include a single Javascript file•   jQuery uses 19 KB•   Only adds ”jQuery” to the global scope•   Everyt...
The jQuery Way$( Find Things )                   . Do Stuff ();                                    ★ 35
The jQuery Way         selector  $( Find Things )jQuery               . Do Stuff ();                        method        ...
$(”div”).hide();$(”input”).remove();$(”form”).submit();$(”p”).addClass(”highlight”);$(”span”).fadeIn(”fast”);             ...
The jQuery Object• List of DOM elements• Array-like• Methods  – Implicit og explicit iteration  – Some act only on the fir...
Selectors$(”#menu”)$(”.redButton”)$(”p > a”)$(”tr:even”)$(”h1, h2, h3”)$(”input[name=email]”)$(”li:visible”)              ...
Chaining$(”a”).addClass(”active”)      .css(”color”, ”yellow”)      .show();                                ★ 40
jQuery API• Concise, natural, consistant• Logical, often guessable• Easy to read, understand and remember                 ...
jQuery’s Focus•   DOM manipulation•   Events•   Ajax•   Animation                               ★ 42
DOM•   .next() .prev()•   .find() .children()•   .parent() .parents()•   .filter() siblings()                             ...
Manipulation•   .text() .html()•   .attr() .removeAttr() .val()•   .remove() .empty()•   .css() .clone()•   .wrap() .wrapI...
CSS•   .css(key, value)•   .css({key: value, key: value, ...})•   .addClass() .removeClass()•   .toggleClass()            ...
DOM Construction•   .append() .prepend()•   .before() .after()•   .insertBefore() .insertAfter()•   $(”<div>New element</d...
jQuery Overload•   $(selector)•   $(HTML)•   $(DOM element)•   $(function)                               ★ 47
★ 48
DEMO       ★ 49
Events•   .click(function) .click()•   .toggle(function1, function2, ...) .toggle()•   .bind(name, function)•   .one(name,...
Event Handler Callbacks• this always points to the DOM element• The event is passed as the first argument   $(”a”).click(f...
Ajax•   .load(url)•   .load(url + ” ” + selector)•   $.get()•   $.post()•   $.getJSON()•   $.getScript()•   $.ajax()      ...
Animations•   .show() .hide() .toggle()•   .fadeIn() .fadeOut() .fadeTo()•   .slideUp() .slideDown() .slideToggle()•   .an...
Misc• .data(key, value)• Utility functions  – $.browser $.each() $.extend() $.merge() $.grep()                            ...
DEMO       ★ 55
Plugin System• Goal: keep a small jQuery core• Plugin system provides extensibility• >4.500 plugins  – Ajax, animations, f...
<script src=”jquery.js”/><script src=”jquery.cookie.js”/><script src=”jquery.lightbox.js”/>                               ...
Writing a Plugin$.fn.popup = function() {  this.click(function() {    var url = $(this).attr("href");    if (url) {      $...
Writing a Plugin|(function($) {  $.fn.popup = function() {     return this.click(function() {       var url = $(this).attr...
Writing a Plugin|(function($) {  $.fn.popup = function() {     return this.click(function() {       var url = $(this).attr...
Writing a Plugin(function($) {  $.fn.popup = function(container, options) {|   var settings= $.extend({|     attribute: ”h...
Flot       ★ 62
Integration$.plot(”#plot”, data);               http://code.google.com/p/flot/                                           ★...
DEMO       ★ 64
jQuery UI            ★ 65
★ 66
jQuery Mobile•   Cross-platform•   Markup-based•   Progressive enhancement•   Events•   Unified UI                        ...
DEMO       ★ 68
Tips•   Keep Javascript in files•   Google CDN•   Profile code•   Use plugins!•   Minify code                             ...
Performance$(”#id”)     $(”form[name*=email]”) var form = $(”form[name*=email]”); $(”input[name=address]”, form).val(); fo...
Development Environment• Firefox• Firebug   –   Javascript consol   –   HTTP requests   –   Profiler   –   Plugins – cooki...
The Horison•   Javascript interpreters•   Desktop Javascript•   HTML5•   Mobile                                ★ 72
Happy coding!    lau@iola.dk
Upcoming SlideShare
Loading in …5
×

Web2.0 with jQuery in English

1,982 views

Published on

An easy-to-follow introduction to jQuery.

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

No Downloads
Views
Total views
1,982
On SlideShare
0
From Embeds
0
Number of Embeds
340
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Lau: uni, 27 år, nørd – Gaja 1982, nørdet, nørdet på en anden måde IOLA: 3 år, ungt softwarefirma, webapplikationer jQuery + Python!
  • Webudviklere? Javascript? DOM? AJAX? jQuery?
  • Pardigmeskifte – opføre sig mere som applikationer, webplatformen smooth, ingen installation Brugeradfæren ændrede sig, ikke længere sidde passivt, facebook, forums, open source software Få sideskift, længe på hver side Brugeroplevelsen – fra information -&gt; en oplevelse, meninger og holdninger Højere kompleksitet – krav til udvilkingsværktøj
  • Nem interaction, intuitivt, umiddelbart, nemt at interagere, web2.0 deisgn = simplicitet, ellers går brugerne et andet sted hed
  • Document Object Model (DOM) Webplatformen Bruges mere og mere til forretnings applikationer
  • 1995: kendt som DHTML, ingen ajax XHR: 1999 MS, 2000-2002 Mozilla, standard 2006
  • I/O, adobe air Navn: LiveScript, standardiseret som ECMAScript Anden halvdel af bogen, webdelen, det dårlige ry, browser wars
  • Dom indeholder: xml struktur, styles, event, data Gennemgå hvorfor js har dårligt ry, danner grundlaget for jquery
  • Browser implementationer, ingen standard, mange bugs, Mozilla i 1995, Microsoft jScript 1996
  • Vedligeholdelse, SEO, tilgængelighed
  • Mange amatører, ingen klasser, dynamiske typer
  • Mon vores utopiske drømme om at have et kortfattet lækkert nemt-at-huske grænseflade til DOMen kan komme i opfyldelse? 2 hovedfokus for js libs, browser forskelligheder og gør almindelige opgaver nemmere
  • DOM, events, animationer og Ajax
  • jQuery er et forholdsvist nyt toolkit
  • Stor test suite, depricated IE 5.5
  • Stort community, solidt, mange udvilkere, MIT licens
  • DOM mulipulation
  • Et par eksempler
  • Ren javascript, jquery plugin,
  • IE8 og Safari har også dev
  • Fortolkere, ny browser krig, Features: lokal data store, cross-site XHR Desktop: AIR, adobe suite
  • Web2.0 with jQuery in English

    1. 1. Web2.0 with jQueryfaster, easier and a lot more fun
    2. 2. Hello!Lau Bech Lauritzen ★2
    3. 3. Todays menu Web BrowserJavascript jQuery Plugins Tips ★3
    4. 4. Web 1.0• Monologue• A lot of page changes• Short time on each page ★4
    5. 5. Hi, I’mJavaScript! AND I’m XMLHttpRequest ★5
    6. 6. Web 2.0• Dialogue – user-generated content• Increased interaction• User experience• Webapplications ★6
    7. 7. ★7
    8. 8. Client-Side Technology Communication Ajax Interaction EventsAnimation Bling ★8
    9. 9. Ajax ★9
    10. 10. Asyncronous javascript and xML XMLHttpRequest ★ 10
    11. 11. /ajax/form ServerXML/JSON ★ 11
    12. 12. Javascript ★ 12
    13. 13. The History of Javascript• 1995 JavaScript in Netscape• 1996 JScript in Internet Explorer• 1997 ECMAScript standard• 1999-2005 – Ajax roll-out• 2006 XHR standard• 95% Javascript enabled• Huge platform ★ 13
    14. 14. Javascript• Weird name• Complete language• Object orientered• First-class functions• Dynamically typed• General purpose ★ 14
    15. 15. CSS HTML Document Object ModelJavascript layout ★ 15
    16. 16. DOM CSS <!DOCTYPE HTML JS <html> JSDOM != source code <head> <title>Index</head> </head> <body> Webserver ★ 16
    17. 17. ARGH!// Mozilla, Opera and webkit nightlies currently support this eventif ( document.addEventListener ) { // Use the handy event callback document.addEventListener( "DOMContentLoaded", function(){ document.removeEventListener( "DOMContentLoaded", arguments.callee, false ); jQuery.ready(); }, false );// If IE event model is used} else if ( document.attachEvent ) { // ensure firing before onload, // maybe late but safe also for iframes document.attachEvent("onreadystatechange", function(){ if ( document.readyState === "complete" ) { document.detachEvent( "onreadystatechange", arguments.callee ); jQuery.ready(); } }); // If IE and not an iframe // continually check to see if the document is ready if ( document.documentElement.doScroll && window == window.top ) (function(){ if ( jQuery.isReady ) return; try { // If IE is used, use the trick by Diego Perini // http://javascript.nwbox.com/IEContentLoaded/ document.documentElement.doScroll("left"); } catch( error ) { setTimeout( arguments.callee, 0 ); return; } })();} ★ 17
    18. 18. $(document).ready(…); ★ 18
    19. 19. Annoying APIvar newDiv = document.createElement("div");newDiv.innerHTML = "<h1>Hej fra Danmark!</h1>";var orgDiv = document.getElementById("orgDiv");document.body.insertBefore(newDiv, orgDiv); ★ 19
    20. 20. $(“#orgDiv”).before(“<h1>Hej!</h1>”); ★ 20
    21. 21. Spaghetti<script> function setLogout(obj) { ... }</script><ahref="javascript:toggle(textde);document.getElementById(textes).style.display =none;document.getElementById(textfr).style.display =none;document.getElementById(textgb).style.display =none;void(0);"><img src="/img/debig.png" style="margin:5px;"></a><a href="javascript:void(0);"onclick="toggle(loginMenu);setLogout(this);void(0);"onfocus="blur();">Log ind</a> ★ 21
    22. 22. <a class=“language” href=“/de/"> <img src=“/img/debig.png“/></a><a class=“login” href=“/login/“>Log ind</a><script src=“common.js”/> ★ 22
    23. 23. The Language ★ 23
    24. 24. Javascript toolkits ★ 24
    25. 25. ★ 25
    26. 26. ★ 26
    27. 27. ★ 27
    28. 28. jQuery• Started January 2006• Simplify and speed up webdevelopment• DOM query language with CSS-notation• Minimal core – extendable through plugins• Unobtrusive• Test suite 50 browsers, 11 platforms• Large community – lots of plugins ★ 28
    29. 29. Dig? ★ 29
    30. 30. ★ 30
    31. 31. CompatibilityIE 6.0+, FF 2+, Safari 3.0+,Opera 9.0+, Chrome ★ 31
    32. 32. ★ 32
    33. 33. jQuery is designed to changethe way you write Javascript ★ 33
    34. 34. jQuery basics• Include a single Javascript file• jQuery uses 19 KB• Only adds ”jQuery” to the global scope• Everything is accessed through the jQuery object• $ is a shortcut ★ 34
    35. 35. The jQuery Way$( Find Things ) . Do Stuff (); ★ 35
    36. 36. The jQuery Way selector $( Find Things )jQuery . Do Stuff (); method ★ 36
    37. 37. $(”div”).hide();$(”input”).remove();$(”form”).submit();$(”p”).addClass(”highlight”);$(”span”).fadeIn(”fast”); ★ 37
    38. 38. The jQuery Object• List of DOM elements• Array-like• Methods – Implicit og explicit iteration – Some act only on the first element ★ 38
    39. 39. Selectors$(”#menu”)$(”.redButton”)$(”p > a”)$(”tr:even”)$(”h1, h2, h3”)$(”input[name=email]”)$(”li:visible”) http://docs.query.com/Selectors ★ 39
    40. 40. Chaining$(”a”).addClass(”active”) .css(”color”, ”yellow”) .show(); ★ 40
    41. 41. jQuery API• Concise, natural, consistant• Logical, often guessable• Easy to read, understand and remember ★ 41
    42. 42. jQuery’s Focus• DOM manipulation• Events• Ajax• Animation ★ 42
    43. 43. DOM• .next() .prev()• .find() .children()• .parent() .parents()• .filter() siblings() ★ 43
    44. 44. Manipulation• .text() .html()• .attr() .removeAttr() .val()• .remove() .empty()• .css() .clone()• .wrap() .wrapInner() .wrapAll() ★ 44
    45. 45. CSS• .css(key, value)• .css({key: value, key: value, ...})• .addClass() .removeClass()• .toggleClass() ★ 45
    46. 46. DOM Construction• .append() .prepend()• .before() .after()• .insertBefore() .insertAfter()• $(”<div>New element</div>”) var jDom = $(response); $(”.content”, jDom).appendTo(”body”); ★ 46
    47. 47. jQuery Overload• $(selector)• $(HTML)• $(DOM element)• $(function) ★ 47
    48. 48. ★ 48
    49. 49. DEMO ★ 49
    50. 50. Events• .click(function) .click()• .toggle(function1, function2, ...) .toggle()• .bind(name, function)• .one(name, function)• .trigger(name)• .live(name, function), .die(name)• .hover(function, function), etc. ★ 50
    51. 51. Event Handler Callbacks• this always points to the DOM element• The event is passed as the first argument $(”a”).click(function(event) { alert(event.type); alert(this.href); alert($(this).attr(”href”)); }); ★ 51
    52. 52. Ajax• .load(url)• .load(url + ” ” + selector)• $.get()• $.post()• $.getJSON()• $.getScript()• $.ajax() ★ 52
    53. 53. Animations• .show() .hide() .toggle()• .fadeIn() .fadeOut() .fadeTo()• .slideUp() .slideDown() .slideToggle()• .animate() .stop() ★ 53
    54. 54. Misc• .data(key, value)• Utility functions – $.browser $.each() $.extend() $.merge() $.grep() ★ 54
    55. 55. DEMO ★ 55
    56. 56. Plugin System• Goal: keep a small jQuery core• Plugin system provides extensibility• >4.500 plugins – Ajax, animations, forms, menus, widgets• Easy to build• Lots of small plugins ★ 56
    57. 57. <script src=”jquery.js”/><script src=”jquery.cookie.js”/><script src=”jquery.lightbox.js”/> ★ 57
    58. 58. Writing a Plugin$.fn.popup = function() { this.click(function() { var url = $(this).attr("href"); if (url) { $("#dialog").load(url, function() { $(this).dialog(); }); } return false; }); return this;}; ★ 58
    59. 59. Writing a Plugin|(function($) { $.fn.popup = function() { return this.click(function() { var url = $(this).attr("href"); if (url) { $("#dialog").load(url, function() { $(this).dialog(); }); } return false; }); };|})(jQuery); ★ 59
    60. 60. Writing a Plugin|(function($) { $.fn.popup = function() { return this.click(function() { var url = $(this).attr("href"); if (url) { $("#dialog").load(url, function() { $(this).dialog(); }); } return false; }); };|})(jQuery);$(”.popup”).popup(); ★ 60
    61. 61. Writing a Plugin(function($) { $.fn.popup = function(container, options) {| var settings= $.extend({| attribute: ”href”| }, options); return this.click(function() { var url = $(this).attr(settings.attribute); if (url) { $(container).load(url, function() { $(this).dialog(); }); } return false; }); };})(jQuery);$(”.popup”).popup(”#dialog”, {attribute: ”name”}); ★ 61
    62. 62. Flot ★ 62
    63. 63. Integration$.plot(”#plot”, data); http://code.google.com/p/flot/ ★ 63
    64. 64. DEMO ★ 64
    65. 65. jQuery UI ★ 65
    66. 66. ★ 66
    67. 67. jQuery Mobile• Cross-platform• Markup-based• Progressive enhancement• Events• Unified UI ★ 67
    68. 68. DEMO ★ 68
    69. 69. Tips• Keep Javascript in files• Google CDN• Profile code• Use plugins!• Minify code ★ 69
    70. 70. Performance$(”#id”) $(”form[name*=email]”) var form = $(”form[name*=email]”); $(”input[name=address]”, form).val(); form.submit(); ★ 70
    71. 71. Development Environment• Firefox• Firebug – Javascript consol – HTTP requests – Profiler – Plugins – cookies, speed test, etc.• Web Developer• Fiddler – Ajax debugging• Good editor – Syntax highlighting – Indention – TextMate, Notepad++, Emacs ★ 71
    72. 72. The Horison• Javascript interpreters• Desktop Javascript• HTML5• Mobile ★ 72
    73. 73. Happy coding! lau@iola.dk

    ×