Web2.0 med jQuery faster, easier and a lot more fun

Web2.0 med jQuery

faster, easier and a lot more fun

DISCLAIMER

Hej

Lau Bech Lauritzen

★ 3

Dagens menu

WebBrowserenJavascript

jQueryPlugins

Tips

★ 4

Web 1.0

• Monolog• Mange sideskift• Kort tid på hver side

★ 5

Hi, I’mJavaScript!

★ 6

AND I’mXMLHttpRequest

Web 2.0

• Dialog – user-generated content• Øget interaktion• Brugeroplevelsen• Webapplikationen

★ 7

★ 8

Client-Side Teknologi

AjaxEvents

Animation

KommunikationInteraktionLir

★ 9

Ajax

★ 10

Asyncronous javascript and xML

XMLHttpRequest

★ 11

/ajax/form

Serv

er

XML/JSON

★ 12

Javascript

★ 13

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

Javascript

• Underligt navn• Komplet sprog• Objektorienteret• First-class funktioner• Dynamiske typer• General-purpose

★ 15

Document Object Model

CSS HTML

Javascriptlayout

★ 16

<!DOCTYPE HTML <html> <head> <title>Index</head> </head> <body>

DOM

WebserverDOM != kildekode

CSS

JSJS

★ 17

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

$(document).ready(…);

★ 19

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

Træls API

★ 20

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

★ 21

<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

<script src=“common.js”/>

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

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

★ 23

Sproget

★ 24

Javascript toolkits

★ 25

★ 26

★ 27

★ 28

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

Dig?

★ 30

★ 31

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

Kompatibilitet

★ 32

★ 33

jQuery is designed to change the way you write Javascript”

★ 34

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

jQuery-måden

$( Find Things ). Do Stuff ();

★ 36

jQuery-måden

$( Find Things ). Do Stuff ();jQuery

selector

metode

★ 37

$(”div”).hide();$(”input”).remove();$(”form”).submit();$(”p”).addClass(”highlight”);$(”span”).fadeIn(”fast”);

★ 38

jQuery objektet

• Liste af DOM elementer• Array-like• Metoder– Implicit og eksplicit iteration– Nogle bruger kun det første element

$★ 39

Selectors

$(”#menu”)$(”.redButton”)$(”p > a”)$(”tr:even”)$(”h1, h2, h3”)$(”input[name=email]”)$(”li:visible”)

http://docs.query.com/Selectors★ 40

Chaining

$(”a”).addClass(”active”) .css(”color”, ”yellow”) .show();

★ 41

jQuery API

• Kortfattet, naturlig, konsistent• Logisk, ofte gætbar• Nemt at læse, forstå og huske

★ 42

jQuery’s fokus

• DOM manipulation• Events• Ajax• Animation

★ 43

DOM

• .next() .prev()• .find() .children()• .parent() .parents()• .filter()

★ 44

Manipulation

• .text() .html()• .attr() .removeAttr(), .val()• .remove(), .clear()• .css(), .clone()• .wrap() .wrapInner(), .wrapAll()

★ 45

CSS

• .css(key, value)• .css({key: values, key: value, ...})• .addClass() .removeClass()• .toggleClass()

★ 46

DOM opbygning

• .append() .prepend()• .before() .after()• .insertBefore() .insertAfter()• $(”<div>Nyt element</div>”)

★ 47

jQuery overload

• $(selector)• $(HTML)• $(DOM-element)• $(funktion)

★ 48

★ 49

DEMO

★ 50

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

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

Ajax

• .load(url)• .load(url + ” ” + selector)• $.get()• $.post()• $.getJSON()• $.getScript()• $.ajax()

★ 53

Animationer

• .show() .hide() .toggle()• .fadeIn() .fadeOut() .fadeTo()• .slideUp() .slideDown() .slideToggle()• .animate() .stop()

★ 54

Diverse

• .data(navn, værdi)• Hjælpefunktioner– $.browser $.each() $.extend() $.merge()

★ 55

DEMO

★ 56

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

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

★ 58

Skriv et plugin

$.fn.popup = function() { var url = $(this).attr(”href”); if (url) { $(”#dialog”).load(url, function() { $(this).show(); }); } return $(this);};

★ 59

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

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

Flot

★ 62

Integration

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

http://code.google.com/p/flot/★ 63

DEMO

★ 64

jQuery UI

★ 65

★ 66

jQuery Mobile

• Cross-platform• Markup-baseret• Progressive enhancement• Events• Ensartet UI

★ 67

DEMO

★ 68

Tips

• Javascript i filer• Google CDN• Profile kode• Brug plugins!• Minify kode

★ 69

Performance

$(”#id”) vs $(”form[name*=email]”)

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

★ 70

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

Horisonten

• Javascriptfortolkere• Ny jQuery pluginside• Flere features• Desktop Javascript• HTML5

★ 72

[email protected]

Documents

Web2.0 med jQuery faster, easier and a lot more fun