Download - Web2.0 with jQuery
![Page 1: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/1.jpg)
Web2.0 med jQuery
faster, easier and a lot more fun
![Page 2: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/2.jpg)
Hej
2
Lau Bech Lauritzen
![Page 3: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/3.jpg)
Dagens menu
Web
Browseren
Javascript
jQuery
Plugins
Tips
3
![Page 4: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/4.jpg)
Web 1.0
• Monolog
• Mange sideskift
• Kort tid på hver side
4
![Page 5: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/5.jpg)
Web 2.0
• Dialog – user-generated content
• Øget interaktion
• Brugeroplevelsen
• Webapplikationen
5
![Page 6: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/6.jpg)
6
![Page 7: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/7.jpg)
7
Hi, I’mJavaScript
And I’mXMLHttpRequest
![Page 8: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/8.jpg)
Client-Side Teknologi
8
AjaxEvents
Animation
KommunikationInteraktionLir
![Page 9: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/9.jpg)
9
Ajax
![Page 10: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/10.jpg)
10
Asyncronous javascript and xML
XMLHttpRequest
![Page 11: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/11.jpg)
11
/ajax/form
Serv
er
XML/JSON
![Page 12: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/12.jpg)
12
Javascript
![Page 13: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/13.jpg)
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
![Page 14: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/14.jpg)
Javascript
• Underligt navn
• Komplet sprog
• Objektorienteret
• First-class funktioner
• Dynamiske typer
• General-purpose
14
![Page 15: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/15.jpg)
15
Document Object Model
CSS HTML
Javascriptlayout
![Page 16: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/16.jpg)
<!DOCTYPE HTML <html><head>
<title>Index</head></head><body>
DOM
Webserver
16
DOM != kildekode
![Page 17: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/17.jpg)
// Mozilla, Opera and webkit nightlies currently support this eventif ( document.addEventListener ) {// Use the handy event callbackdocument.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 iframesdocument.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 readyif ( 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
ARGH!
![Page 18: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/18.jpg)
18
$(document).ready(…);
![Page 19: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/19.jpg)
newDiv = document.createElement("div");newDiv.innerHTML = "<h1>Hej!</h1>";orgDiv = document.getElementById("orgDiv");document.body.insertBefore(newDiv, orgDiv);
Træls API
19
![Page 20: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/20.jpg)
20
$(“#orgDiv”).before(“<h1>Hej!</h1>”);
![Page 21: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/21.jpg)
<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>
Spaghetti
21
![Page 22: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/22.jpg)
22
<script src=“common.js”/>
<a class=“language” href=“/de/"><img src=“/img/debig.png“/>
</a>
<a class=“login” href=“/login/“>Log ind</a>
![Page 23: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/23.jpg)
Sproget
23
![Page 24: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/24.jpg)
Javascript toolkits
24
![Page 25: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/25.jpg)
25
![Page 26: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/26.jpg)
26
![Page 27: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/27.jpg)
27
![Page 28: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/28.jpg)
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
![Page 29: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/29.jpg)
Dig?
29
![Page 30: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/30.jpg)
30
![Page 31: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/31.jpg)
IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome
Kompatibilitet
31
![Page 32: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/32.jpg)
32
![Page 33: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/33.jpg)
jQuery is designed to change the way you write Javascript
33
![Page 34: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/34.jpg)
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
![Page 35: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/35.jpg)
jQuery-måden
$( Find Things )
. Do Stuff ();
35
![Page 36: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/36.jpg)
jQuery-måden
$( Find Things )
. Do Stuff ();jQuery
selector
metode
36
![Page 37: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/37.jpg)
$(”div”).hide();
$(”input”).remove();
$(”form”).submit();
$(”p”).addClass(”highlight”);
$(”span”).fadeIn(”fast”);
37
![Page 38: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/38.jpg)
jQuery objektet
• Liste af DOM elementer
• Array-like
• Metoder
– Implicit og eksplicit iteration
– Nogle bruger kun det første element
38
![Page 39: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/39.jpg)
Selectors
$(”#menu”)
$(”.redButton”)
$(”p > a”)
$(”tr:even”)
$(”h1, h2, h3”)
$(”input[name=email]”)
$(”li:visible”)
http://docs.query.com/Selectors
39
![Page 40: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/40.jpg)
Chaining
$(”a”).addClass(”active”).css(”color”, ”yellow”).show();
40
![Page 41: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/41.jpg)
jQuery API
• Kortfattet, naturlig, konsistent
• Logisk, ofte gætbar
• Nemt at læse, forstå og huske
41
![Page 42: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/42.jpg)
jQuery’s fokus
• DOM manipulation
• Events
• Ajax
• Animation
42
![Page 43: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/43.jpg)
DOM
• .next() .prev()
• .find() .children()
• .parent() .parents()
• .filter()
43
![Page 44: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/44.jpg)
Manipulation
• .text() .html()
• .attr() .removeAttr(), .val()
• .remove(), .clear()
• .css(), .clone()
• .wrap() .wrapInner(), .wrapAll()
44
![Page 45: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/45.jpg)
CSS
• .css(key, value)
• .css({key: values, key: value, ...})
• .addClass() .removeClass()
• .toggleClass()
45
![Page 46: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/46.jpg)
DOM opbygning
• .append() .prepend()
• .before() .after()
• .insertBefore() .insertAfter()
• $(”<div>Nyt element</div>”)
46
![Page 47: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/47.jpg)
jQuery overload
• $(selector)
• $(HTML)
• $(DOM-element)
• $(funktion)
47
![Page 48: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/48.jpg)
48
![Page 49: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/49.jpg)
DEMO
49
![Page 50: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/50.jpg)
Demo - The basics
– Includer jquery.js
– jQuery-objektet
– Ready handler
50
![Page 51: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/51.jpg)
Demo - tabel
• Selectors
• CSS
• Manipulation
51
![Page 52: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/52.jpg)
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
![Page 53: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/53.jpg)
Event handler callbacks
• this peger altid på DOM-elementet
• Eventet tages med som parameter
53
$(”a”).click(function(event) { alert(event.type);alert(this.href);alert($(this).attr(”href”));
});
![Page 54: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/54.jpg)
Ajax
• .load(url)
• .load(url + ” ” + selector)
• $.get()
• $.post()
• $.getJSON()
• $.getScript()
• $.ajax()
54
![Page 55: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/55.jpg)
Animationer
• .show() .hide() .toggle()
• .fadeIn() .fadeOut() .fadeTo()
• .slideUp() .slideDown() .slideToggle()
• .animate() .stop()
55
![Page 56: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/56.jpg)
Diverse
• .data(navn, værdi)
• Hjælpefunktioner
– $.browser $.each() $.extend() $.merge()
56
![Page 57: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/57.jpg)
DEMO
57
![Page 58: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/58.jpg)
Demo - popup
• Events
• Ajax
• Unobtrusive
58
![Page 59: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/59.jpg)
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
![Page 60: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/60.jpg)
60
<script src=”jquery.js”/><script src=”jquery.cookie.js”/><script src=”jquery.lightbox.js”/>
![Page 61: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/61.jpg)
Skriv et plugin
$.fn.popup = function() {var url = $(this).attr(”href”);if (url) {
$(”#dialog”).load(url, function() {$(this).show();
});}return $(this);
};
61
![Page 62: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/62.jpg)
Skriv et plugin
|(function($) {$.fn.popup = function() {
var url = $(this).attr(”href”);if (url) {
$(”#dialog”).load(url, function() {$(this).show();
});}return $(this);
};|})(jQuery);
62
![Page 63: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/63.jpg)
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
![Page 64: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/64.jpg)
Flot
64
![Page 65: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/65.jpg)
Integration
$.plot(”#plot”, data);
http://code.google.com/p/flot/
65
![Page 66: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/66.jpg)
jQuery UI
66
![Page 67: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/67.jpg)
Tips
• Javascript i filer
• Google CDN
• Profile kode
• Brug plugins!
• Minify kode
67
![Page 68: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/68.jpg)
Performance
$(”#id”) $(”form[name*=email]”)
68
var form = $(”form[name*=email]”);$(”input[name=address]”, form).val();form.submit();
![Page 69: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/69.jpg)
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
![Page 70: Web2.0 with jQuery](https://reader035.vdocument.in/reader035/viewer/2022062418/5558be8bd8b42aa52a8b50d1/html5/thumbnails/70.jpg)
Horisonten
• Javascriptfortolkere
• Ny jQuery pluginside
• Flere features
• Desktop Javascript
70