Web2.0 with jQuery

Web2.0 med jQuery

faster, easier and a lot more fun

Hej

2

Lau Bech Lauritzen

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

7

Hi, I’mJavaScript

And I’mXMLHttpRequest

Client-Side Teknologi

8

AjaxEvents

Animation

KommunikationInteraktionLir

9

Ajax

10

Asyncronous javascript and xML

XMLHttpRequest

11

/ajax/form

Serv

er

XML/JSON

12

Javascript

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

15

Document Object Model

CSS HTML

Javascriptlayout

<!DOCTYPE HTML <html><head>

<title>Index</head></head><body>

DOM

Webserver

16

DOM != kildekode

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

18

$(document).ready(…);

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

Træls API

19

20

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

<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

22

<script src=“common.js”/>

<a class=“language” href=“/de/"><img src=“/img/debig.png“/>

</a>

<a class=“login” href=“/login/“>Log ind</a>

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

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

Kompatibilitet

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

$( Find Things )

. Do Stuff ();jQuery

selector

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

• 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”));

});

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

60

<script src=”jquery.js”/><script src=”jquery.cookie.js”/><script src=”jquery.lightbox.js”/>

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]”)

68

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

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!

[email protected]

yayart.com

71

Technology

Web2.0 with jQuery