Download presentation
Presentation is loading. Please wait.
1
Web2.0 med jQuery faster, easier and a lot more fun
3
Hej Lau Bech Lauritzen ★ 3
4
Dagens menu Web Browseren Javascript jQuery Plugins Tips ★ 4
5
Web 1.0 • Monolog • Mange sideskift • Kort tid på hver side ★ 5
6
Hi, I’m JavaScript! ★ 6 AND I’m XMLHttpRequest
7
Web 2.0 • Dialog – user-generated content • Øget interaktion • Brugeroplevelsen • Webapplikationen ★ 7
8
★ 8
9
Client-Side Teknologi Ajax Events Animation Kommunikation Interaktion Lir ★ 9
10
Ajax ★ 10
11
A syncronous j avascript a nd x ML XMLHttpRequest ★ 11
12
/ajax/form Server XML/JSON ★ 12
13
Javascript ★ 13
14
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 ★ 14
15
Javascript • Underligt navn • Komplet sprog • Objektorienteret • First-class funktioner • Dynamiske typer • General-purpose ★ 15
16
Document Object Model CSS HTML Javascript layout ★ 16
17
<!DOCTYPE HTML Index DOM Webserver DOM != kildekode CSS JS ★ 17
18
// 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; } })(); } ARGH! ★ 18
19
$(document).ready(…); ★ 19
20
var newDiv = document.createElement("div"); newDiv.innerHTML = " Hej! "; var orgDiv = document.getElementById("orgDiv"); document.body.insertBefore(newDiv, orgDiv); Træls API ★ 20
21
$(“#orgDiv”).before(“ Hej! ”); ★ 21
22
function setLogout(obj) {... } Log ind Spaghetti ★ 22
23
Log ind ★ 23
24
Sproget ★ 24
25
Javascript toolkits ★ 25
26
★ 26
27
★ 27
28
★ 28
29
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 ★ 29
30
Dig? ★ 30
31
★ 31
32
IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome Kompatibilitet ★ 32
33
★ 33
34
jQuery is designed to change the way you write Javascript ” ★ 34
35
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() {... }); ★ 35
36
jQuery-måden $( Find Things ). Do Stuff (); ★ 36
37
jQuery-måden $( Find Things ). Do Stuff (); jQuery selector metode ★ 37
38
$(”div”).hide(); $(”input”).remove(); $(”form”).submit(); $(”p”).addClass(”highlight”); $(”span”).fadeIn(”fast”); ★ 38
39
jQuery objektet • Liste af DOM elementer • Array-like • Metoder – Implicit og eksplicit iteration – Nogle bruger kun det første element $ ★ 39
40
Selectors $(”#menu”) $(”.redButton”) $(”p > a”) $(”tr:even”) $(”h1, h2, h3”) $(”input[name=email]”) $(”li:visible”) http://docs.query.com/Selectors ★ 40
![Selectors $( #menu ) $( .redButton ) $( p > a ) $( tr:even ) $( h1, h2, h3 ) $( input[name= ] ) $( li:visible ) ★ 40](http://images.slideplayer.com./7/1909997/slides/slide_40.jpg "Selectors $( #menu ) $( .redButton ) $( p > a ) $( tr:even ) $( h1, h2, h3 ) $( input[name= ] ) $( li:visible ) ★ 40")
41
Chaining $(”a”).addClass(”active”).css(”color”, ”yellow”).show(); ★ 41
42
jQuery API • Kortfattet, naturlig, konsistent • Logisk, ofte gætbar • Nemt at læse, forstå og huske ★ 42
43
jQuery’s fokus • DOM manipulation • Events • Ajax • Animation ★ 43
44
DOM •.next().prev() •.find().children() •.parent().parents() •.filter() ★ 44
45
Manipulation •.text().html() •.attr().removeAttr(),.val() •.remove(),.clear() •.css(),.clone() •.wrap().wrapInner(),.wrapAll() ★ 45
46
CSS •.css(key, value) •.css({key: values, key: value,...}) •.addClass().removeClass() •.toggleClass() ★ 46
47
DOM opbygning •.append().prepend() •.before().after() •.insertBefore().insertAfter() • $(” Nyt element ”) ★ 47
48
jQuery overload • $(selector) • $(HTML) • $(DOM-element) • $(funktion) ★ 48
49
★ 49
50
DEMO ★ 50
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. ★ 51
52
Event handler callbacks •this peger altid på DOM-elementet • Eventet tages med som parameter $(”a”).click(function(event) { alert(event.type); alert(this.href); alert($(this).attr(”href”)); }); ★ 52
53
Ajax •.load(url) •.load(url + ” ” + selector) • $.get() • $.post() • $.getJSON() • $.getScript() • $.ajax() ★ 53
54
Animationer •.show().hide().toggle() •.fadeIn().fadeOut().fadeTo() •.slideUp().slideDown().slideToggle() •.animate().stop() ★ 54
55
Diverse •.data(navn, værdi) • Hjælpefunktioner – $.browser $.each() $.extend() $.merge() ★ 55
56
DEMO ★ 56
57
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 ★ 57
58
★ 58
59
Skriv et plugin $.fn.popup = function() { var url = $(this).attr(”href”); if (url) { $(”#dialog”).load(url, function() { $(this).show(); }); } return $(this); }; ★ 59
60
Skriv et plugin |(function($) { $.fn.popup = function() { var url = $(this).attr(”href”); if (url) { $(”#dialog”).load(url, function() { $(this).show(); }); } return $(this); }; |})(jQuery); $(”.popup”).popup(); ★ 60
61
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); $(”.popup”).popup(”#dialog”, {attribute: ”name”}); ★ 61
62
Flot ★ 62
63
Integration $.plot(”#plot”, data); http://code.google.com/p/flot/ ★ 63
64
DEMO ★ 64
65
jQuery UI ★ 65
66
★ 66
67
jQuery Mobile • Cross-platform • Markup-baseret • Progressive enhancement • Events • Ensartet UI ★ 67
68
DEMO ★ 68
69
Tips • Javascript i filer • Google CDN • Profile kode • Brug plugins! • Minify kode ★ 69
70
Performance var form = $(”form[name*=email]”); $(”input[name=address]”, form).val(); form.submit(); ★ 70
![Performance var form = $( form[name*= ] ); $( input[name=address] , form).val(); form.submit(); ★ 70](http://images.slideplayer.com./7/1909997/slides/slide_70.jpg "Performance var form = $( form[name*= ] ); $( input[name=address] , form).val(); form.submit(); ★ 70")
71
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 ★ 71 ―Visual Studio (jQuery Intellisense) ―http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4-vsdoc.js
72
Horisonten • Javascriptfortolkere • Ny jQuery pluginside • Flere features • Desktop Javascript • HTML5 ★ 72
73
Tak! lau@iola.dk yayart.com
Similar presentations
