Web2.0 med jQuery

faster, easier and a lot more fun
Hej




Lau Bech Lauritzen



                           2
Dagens menu
       Web
Browseren
 Javascript
    jQuery
    Plugins
       Tips



                 3
Web 1.0
• Monolog
• Mange sideskift
• Kort tid på hver side




                             4
Web 2.0
•   Dialog – user-generated content
•   Øget interaktion
•   Brugeroplevelsen
•   Webapplikationen




           ...
6
Hi, I’m
JavaScript
                And I’m
             XMLHttpRequest




                              7
Client-Side Teknologi


     Ajax Kommunikation
   Events Interaktion
Animation Lir




                             8
Ajax




       9
Asyncronous javascript and xML
       XMLHttpRequest




                                 10
/ajax/form




             Server
XML/JSON




             11
Javascript



             12
Javascript historie
•   1995 JavaScript i Netscape
•   1996 JScript i Internet Explorer
•   1997 ECMAScript standardiserin...
Javascript
•   Underligt navn
•   Komplet sprog
•   Objektorienteret
•   First-class funktioner
•   Dynamiske typer
•   Ge...
CSS                  HTML

       Document Object Model

Javascript
                           layout



                 ...
DOM



                   <!DOCTYPE HTML
                   <html>

DOM != kildekode    <head>
                     <title...
ARGH!


// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
  // Use th...
$(document).ready(…);




                        18
Træls API


newDiv = document.createElement("div");
newDiv.innerHTML = "<h1>Hej!</h1>";
orgDiv = document.getElementById("...
$(“#orgDiv”).before(“<h1>Hej!</h1>”);




                                        20
Spaghetti
<script>
  function setLogout(obj) { ... }
</script>
<a
href="javascript:toggle('textde');document.getElementByI...
<script src=“common.js”/>
<a class=“language” href=“/de/">
  <img src=“/img/debig.png“/>
</a>
<a class=“login” href=“/logi...
Sproget




          23
Javascript toolkits




                      24
25
26
27
jQuery
•   Startet i januar 2006
•   Forenkle og optimere webudvikling
•   DOM querysprog med CSS-notation
•   Minimal fun...
Dig?




       29
30
Kompatibilitet


IE 6.0+, FF 2+, Safari 3.0+,
Opera 9.0+, Chrome




                               31
32
jQuery is designed to change
the way you write Javascript




                               33
jQuery basics
•   Inkluder en Javascript fil
•   jQuery fylder 19 KB
•   Tilføjer kun ”jQuery” til global scope
•   Alt er...
jQuery-måden


$( Find Things )
                   . Do Stuff ();




                                    35
jQuery-måden
         selector

  $( Find Things )
jQuery               . Do Stuff ();
                        metode




...
$(”div”).hide();
$(”input”).remove();
$(”form”).submit();
$(”p”).addClass(”highlight”);
$(”span”).fadeIn(”fast”);




    ...
jQuery objektet
• Liste af DOM elementer
• Array-like
• Metoder
  – Implicit og eksplicit iteration
  – Nogle bruger kun d...
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
• Kortfattet, naturlig, konsistent
• Logisk, ofte gætbar
• Nemt at læse, forstå og huske




                  ...
jQuery’s fokus
•   DOM manipulation
•   Events
•   Ajax
•   Animation




                               42
DOM
•   .next() .prev()
•   .find() .children()
•   .parent() .parents()
•   .filter()




                             43
Manipulation
•   .text() .html()
•   .attr() .removeAttr(), .val()
•   .remove(), .clear()
•   .css(), .clone()
•   .wrap(...
CSS
•   .css(key, value)
•   .css({key: values, key: value, ...})
•   .addClass() .removeClass()
•   .toggleClass()




  ...
DOM opbygning
•   .append() .prepend()
•   .before() .after()
•   .insertBefore() .insertAfter()
•   $(”<div>Nyt element</...
jQuery overload
•   $(selector)
•   $(HTML)
•   $(DOM-element)
•   $(funktion)




                               47
48
DEMO




       49
Demo - The basics
– Includer jquery.js
– jQuery-objektet
– Ready handler




                               50
Demo - tabel
• Selectors
• CSS
• Manipulation




                            51
Events
•   .click(funktion) .click()
•   .toggle(funktion1, funktion2, ...) .toggle()
•   .bind(navn, funktion)
•   .one(n...
Event handler callbacks
• thispeger altid på DOM-elementet
• Eventet tages med som parameter

   $(”a”).click(function(eve...
Ajax
•   .load(url)
•   .load(url + ” ” + selector)
•   $.get()
•   $.post()
•   $.getJSON()
•   $.getScript()
•   $.ajax(...
Animationer
•   .show() .hide() .toggle()
•   .fadeIn() .fadeOut() .fadeTo()
•   .slideUp() .slideDown() .slideToggle()
• ...
Diverse
• .data(navn, værdi)
• Hjælpefunktioner
  – $.browser $.each() $.extend() $.merge()




                          ...
DEMO




       57
Demo - popup
• Events
• Ajax
• Unobtrusive




                           58
Pluginsystemet
• Mål: lille jQuery core
• Plugin systemet giver mulighed for udvidelser
• 3.478 plugins
  – Ajax, animatio...
<script src=”jquery.js”/>
<script src=”jquery.cookie.js”/>
<script src=”jquery.lightbox.js”/>




                        ...
Skriv et plugin
$.fn.popup = function() {
  var url = $(this).attr(”href”);
  if (url) {
    $(”#dialog”).load(url, functi...
Skriv et plugin
|(function($) {
  $.fn.popup = function() {
     var url = $(this).attr(”href”);
     if (url) {
       $(...
Skriv et plugin
(function($) {
  $.fn.popup = function(container, options) {
|    var settings= $.extend({
|      attribut...
Flot




       64
Integration



$.plot(”#plot”, data);




               http://code.google.com/p/flot/
                                  ...
jQuery UI




            66
Tips
•   Javascript i filer
•   Google CDN
•   Profile kode
•   Brug plugins!
•   Minify kode




                        ...
Performance


$(”#id”)     $(”form[name*=email]”)



 var form = $(”form[name*=email]”);
 $(”input[name=address]”, form).v...
Udviklingsværktøjer
• Firefox
• Firebug
   –   Javascriptkonsol
   –   HTTP-forespørgsler
   –   Profiler
   –   Plugins –...
Horisonten
•   Javascriptfortolkere
•   Ny jQuery pluginside
•   Flere features
•   Desktop Javascript




               ...
Tak!
lau@iola.dk
yayart.com




              71
Upcoming SlideShare
Loading in …5
×

Web2.0 with jQuery

2,286
-1

Published on

An introduction to jQuery in danish for the danish labour union Prosa.

English version available here: http://www.slideshare.net/Nightreaver/web20-with-jquery-in-english

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,286
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
37
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web2.0 with jQuery

  1. 1. Web2.0 med jQuery faster, easier and a lot more fun
  2. 2. Hej Lau Bech Lauritzen 2
  3. 3. Dagens menu Web Browseren Javascript jQuery Plugins Tips 3
  4. 4. Web 1.0 • Monolog • Mange sideskift • Kort tid på hver side 4
  5. 5. Web 2.0 • Dialog – user-generated content • Øget interaktion • Brugeroplevelsen • Webapplikationen 5
  6. 6. 6
  7. 7. Hi, I’m JavaScript And I’m XMLHttpRequest 7
  8. 8. Client-Side Teknologi Ajax Kommunikation Events Interaktion Animation Lir 8
  9. 9. Ajax 9
  10. 10. Asyncronous javascript and xML XMLHttpRequest 10
  11. 11. /ajax/form Server XML/JSON 11
  12. 12. Javascript 12
  13. 13. Javascript historie • 1995 JavaScript i Netscape • 1996 JScript i Internet Explorer • 1997 ECMAScript standardisering • 1999-2005 – Ajax rulles ud • 2006 XHR standard • 95% Javascript slået til • Kæmpe platform 13
  14. 14. Javascript • Underligt navn • Komplet sprog • Objektorienteret • First-class funktioner • Dynamiske typer • General-purpose 14
  15. 15. CSS HTML Document Object Model Javascript layout 15
  16. 16. DOM <!DOCTYPE HTML <html> DOM != kildekode <head> <title>Index</head> </head> <body> Webserver 16
  17. 17. ARGH! // Mozilla, Opera and webkit nightlies currently support this event if ( 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. Træls API newDiv = document.createElement("div"); newDiv.innerHTML = "<h1>Hej!</h1>"; 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> <a href="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. <script src=“common.js”/> <a class=“language” href=“/de/"> <img src=“/img/debig.png“/> </a> <a class=“login” href=“/login/“>Log ind</a> 22
  23. 23. Sproget 23
  24. 24. Javascript toolkits 24
  25. 25. 25
  26. 26. 26
  27. 27. 27
  28. 28. jQuery • Startet i januar 2006 • Forenkle og optimere webudvikling • DOM querysprog med CSS-notation • Minimal funktionalitet – udvides med plugins • Unobtrusive • Test suite 50 browsere, 11 platforme • Stort community – masser af plugins 28
  29. 29. Dig? 29
  30. 30. 30
  31. 31. Kompatibilitet IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome 31
  32. 32. 32
  33. 33. jQuery is designed to change the way you write Javascript 33
  34. 34. jQuery basics • Inkluder en Javascript fil • jQuery fylder 19 KB • Tilføjer kun ”jQuery” til global scope • Alt er tilgængelig gennem jQuery-objektet • $ er en genvej • $(document).ready(function() { ... }); 34
  35. 35. jQuery-måden $( Find Things ) . Do Stuff (); 35
  36. 36. jQuery-måden selector $( Find Things ) jQuery . Do Stuff (); metode 36
  37. 37. $(”div”).hide(); $(”input”).remove(); $(”form”).submit(); $(”p”).addClass(”highlight”); $(”span”).fadeIn(”fast”); 37
  38. 38. jQuery objektet • Liste af DOM elementer • Array-like • Metoder – Implicit og eksplicit iteration – Nogle bruger kun det første 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 • Kortfattet, naturlig, konsistent • Logisk, ofte gætbar • Nemt at læse, forstå og huske 41
  42. 42. jQuery’s fokus • DOM manipulation • Events • Ajax • Animation 42
  43. 43. DOM • .next() .prev() • .find() .children() • .parent() .parents() • .filter() 43
  44. 44. Manipulation • .text() .html() • .attr() .removeAttr(), .val() • .remove(), .clear() • .css(), .clone() • .wrap() .wrapInner(), .wrapAll() 44
  45. 45. CSS • .css(key, value) • .css({key: values, key: value, ...}) • .addClass() .removeClass() • .toggleClass() 45
  46. 46. DOM opbygning • .append() .prepend() • .before() .after() • .insertBefore() .insertAfter() • $(”<div>Nyt element</div>”) 46
  47. 47. jQuery overload • $(selector) • $(HTML) • $(DOM-element) • $(funktion) 47
  48. 48. 48
  49. 49. DEMO 49
  50. 50. Demo - The basics – Includer jquery.js – jQuery-objektet – Ready handler 50
  51. 51. Demo - tabel • Selectors • CSS • Manipulation 51
  52. 52. Events • .click(funktion) .click() • .toggle(funktion1, funktion2, ...) .toggle() • .bind(navn, funktion) • .one(navn, funktion) • .trigger(navn) • .live(navn, funktion), .die(navn) • .hover(funktion, funktion), etc. 52
  53. 53. Event handler callbacks • thispeger altid på DOM-elementet • Eventet tages med som parameter $(”a”).click(function(event) { alert(event.type); alert(this.href); alert($(this).attr(”href”)); }); 53
  54. 54. Ajax • .load(url) • .load(url + ” ” + selector) • $.get() • $.post() • $.getJSON() • $.getScript() • $.ajax() 54
  55. 55. Animationer • .show() .hide() .toggle() • .fadeIn() .fadeOut() .fadeTo() • .slideUp() .slideDown() .slideToggle() • .animate() .stop() 55
  56. 56. Diverse • .data(navn, værdi) • Hjælpefunktioner – $.browser $.each() $.extend() $.merge() 56
  57. 57. DEMO 57
  58. 58. Demo - popup • Events • Ajax • Unobtrusive 58
  59. 59. Pluginsystemet • Mål: lille jQuery core • Plugin systemet giver mulighed for udvidelser • 3.478 plugins – Ajax, animationer, forms, menuer, widgets • Enkle at udvikle • Mange små plugins 59
  60. 60. <script src=”jquery.js”/> <script src=”jquery.cookie.js”/> <script src=”jquery.lightbox.js”/> 60
  61. 61. Skriv et plugin $.fn.popup = function() { var url = $(this).attr(”href”); if (url) { $(”#dialog”).load(url, function() { $(this).show(); }); } return $(this); }; 61
  62. 62. Skriv et plugin |(function($) { $.fn.popup = function() { var url = $(this).attr(”href”); if (url) { $(”#dialog”).load(url, function() { $(this).show(); }); } return $(this); }; |})(jQuery); 62
  63. 63. Skriv et plugin (function($) { $.fn.popup = function(container, options) { | var settings= $.extend({ | attribute: ”href” | }, options); var url = $(this).attr(settings.attribute); if (url) { $(container).load(url, function() { $(this).show(); }); } return $(this); }; })(jQuery); 63
  64. 64. Flot 64
  65. 65. Integration $.plot(”#plot”, data); http://code.google.com/p/flot/ 65
  66. 66. jQuery UI 66
  67. 67. Tips • Javascript i filer • Google CDN • Profile kode • Brug plugins! • Minify kode 67
  68. 68. Performance $(”#id”) $(”form[name*=email]”) var form = $(”form[name*=email]”); $(”input[name=address]”, form).val(); form.submit(); 68
  69. 69. Udviklingsværktøjer • Firefox • Firebug – Javascriptkonsol – HTTP-forespørgsler – Profiler – Plugins – cookies, loadhastighed, etc. • Web Developer • Fiddler – Ajax debugging • God editor – Syntax highlighting – Indrykning – TextMate, Notepad++, Emacs 69
  70. 70. Horisonten • Javascriptfortolkere • Ny jQuery pluginside • Flere features • Desktop Javascript 70
  71. 71. Tak! lau@iola.dk yayart.com 71

×