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

Hi, I’m
JavaScript
And I’m
XMLHttpRequest

7

Client-Side Teknologi

Ajax Kommunikation
Events Interaktion
Animation Lir

8

Asyncronous javascript and xML
XMLHttpRequest

10

/ajax/form

Server
XML/JSON

11

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

Javascript toolkits

24

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

Kompatibilitet

IE 6.0+, FF 2+, Safari 3.0+,
Opera 9.0+, Chrome

31

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

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 - 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

Integration

$.plot(”#plot”, data);

http://code.google.com/p/flot/
65

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (18)

Web2.0 with jQuery