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