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.
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,470 views

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
  • Be the first to comment

  • Be the first to like this

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

×