Web2.0 with jQuery

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 5

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 standardisering • 1999-2005 – Ajax rulles ud • 2006 XHR standard • 95% Javascript slået til • Kæmpe platform 13

Javascript • Underligt navn • Komplet sprog • Objektorienteret • First-class funktioner • Dynamiske typer • General-purpose 14

CSS HTML Document Object Model Javascript layout 15

DOM <!DOCTYPE HTML <html> DOM != kildekode <head> <title>Index</head> </head> <body> Webserver 16

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

$(document).ready(…); 18

Træls API newDiv = document.createElement("div"); newDiv.innerHTML = "<h1>Hej!</h1>"; orgDiv = document.getElementById("orgDiv"); document.body.insertBefore(newDiv, orgDiv); 19

$(“#orgDiv”).before(“<h1>Hej!</h1>”); 20

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

Sproget 23

Javascript toolkits 24

25

26

27

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

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 tilgængelig gennem jQuery-objektet • $ er en genvej • $(document).ready(function() { ... }); 34

jQuery-måden $( Find Things ) . Do Stuff (); 35

jQuery-måden selector $( Find Things ) jQuery . Do Stuff (); metode 36

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

jQuery objektet • Liste af DOM elementer • Array-like • Metoder – Implicit og eksplicit iteration – Nogle bruger kun det første element 38

Selectors $(”#menu”) $(”.redButton”) $(”p > a”) $(”tr:even”) $(”h1, h2, h3”) $(”input[name=email]”) $(”li:visible”) http://docs.query.com/Selectors 39

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 41

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() .wrapInner(), .wrapAll() 44

CSS • .css(key, value) • .css({key: values, key: value, ...}) • .addClass() .removeClass() • .toggleClass() 45

DOM opbygning • .append() .prepend() • .before() .after() • .insertBefore() .insertAfter() • $(”<div>Nyt element</div>”) 46

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(navn, funktion) • .trigger(navn) • .live(navn, funktion), .die(navn) • .hover(funktion, funktion), etc. 52

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

Ajax • .load(url) • .load(url + ” ” + selector) • $.get() • $.post() • $.getJSON() • $.getScript() • $.ajax() 54

Animationer • .show() .hide() .toggle() • .fadeIn() .fadeOut() .fadeTo() • .slideUp() .slideDown() .slideToggle() • .animate() .stop() 55

Diverse • .data(navn, værdi) • Hjælpefunktioner – $.browser $.each() $.extend() $.merge() 56

DEMO 57

Demo - popup • Events • Ajax • Unobtrusive 58

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

Skriv et plugin $.fn.popup = function() { var url = $(this).attr(”href”); if (url) { $(”#dialog”).load(url, function() { $(this).show(); }); } return $(this); }; 61

Skriv et plugin |(function($) { $.fn.popup = function() { var url = $(this).attr(”href”); if (url) { $(”#dialog”).load(url, function() { $(this).show(); }); } return $(this); }; |})(jQuery); 62

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

Flot 64

Integration $.plot(”#plot”, data); http://code.google.com/p/flot/ 65

jQuery UI 66

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

Performance $(”#id”) $(”form[name*=email]”) var form = $(”form[name*=email]”); $(”input[name=address]”, form).val(); form.submit(); 68

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

Horisonten • Javascriptfortolkere • Ny jQuery pluginside • Flere features • Desktop Javascript 70

Tak! lau@iola.dk yayart.com 71

Web2.0 with jQuery

0 comments

Notes on slide 1

Favorites, Groups & Events