Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Web2.0 med jQuery faster, easier and a lot more fun."— Presentation transcript:

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

2

3 Hej Lau Bech Lauritzen ★ 3

4 Dagens menu Web Browseren Javascript jQuery Plugins Tips ★ 4

5 Web 1.0 • Monolog • Mange sideskift • Kort tid på hver side ★ 5

6 Hi, I’m JavaScript! ★ 6 AND I’m XMLHttpRequest

7 Web 2.0 • Dialog – user-generated content • Øget interaktion • Brugeroplevelsen • Webapplikationen ★ 7

8 ★ 8

9 Client-Side Teknologi Ajax Events Animation Kommunikation Interaktion Lir ★ 9

10 Ajax ★ 10

11 A syncronous j avascript a nd x ML XMLHttpRequest ★ 11

12 /ajax/form Server XML/JSON ★ 12

13 Javascript ★ 13

14 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

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

16 Document Object Model CSS HTML Javascript layout ★ 16

17 { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.com/7/1909997/slides/slide_17.jpg", "name": "

18 // 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; } })(); } ARGH! ★ 18

19 $(document).ready(…); ★ 19

20 var newDiv = document.createElement("div"); newDiv.innerHTML = " Hej! "; var orgDiv = document.getElementById("orgDiv"); document.body.insertBefore(newDiv, orgDiv); Træls API ★ 20

21 $(“#orgDiv”).before(“ Hej! ”); ★ 21

22 function setLogout(obj) {... } Log ind Spaghetti ★ 22

23 Log ind ★ 23

24 Sproget ★ 24

25 Javascript toolkits ★ 25

26 ★ 26

27 ★ 27

28 ★ 28

29 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

30 Dig? ★ 30

31 ★ 31

32 IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome Kompatibilitet ★ 32

33 ★ 33

34 jQuery is designed to change the way you write Javascript ” ★ 34

35 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

36 jQuery-måden $( Find Things ). Do Stuff (); ★ 36

37 jQuery-måden $( Find Things ). Do Stuff (); jQuery selector metode ★ 37

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

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

40 Selectors $(”#menu”) $(”.redButton”) $(”p > a”) $(”tr:even”) $(”h1, h2, h3”) $(”input[name=email]”) $(”li:visible”) http://docs.query.com/Selectors ★ 40

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

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

43 jQuery’s fokus • DOM manipulation • Events • Ajax • Animation ★ 43

44 DOM •.next().prev() •.find().children() •.parent().parents() •.filter() ★ 44

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

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

47 DOM opbygning •.append().prepend() •.before().after() •.insertBefore().insertAfter() • $(” Nyt element ”) ★ 47

48 jQuery overload • $(selector) • $(HTML) • $(DOM-element) • $(funktion) ★ 48

49 ★ 49

50 DEMO ★ 50

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. ★ 51

52 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

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

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

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

56 DEMO ★ 56

57 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

58 ★ 58

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

60 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

61 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

62 Flot ★ 62

63 Integration $.plot(”#plot”, data); http://code.google.com/p/flot/ ★ 63

64 DEMO ★ 64

65 jQuery UI ★ 65

66 ★ 66

67 jQuery Mobile • Cross-platform • Markup-baseret • Progressive enhancement • Events • Ensartet UI ★ 67

68 DEMO ★ 68

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

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

71 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

72 Horisonten • Javascriptfortolkere • Ny jQuery pluginside • Flere features • Desktop Javascript • HTML5 ★ 72

73 Tak! lau@iola.dk yayart.com


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

Similar presentations


Ads by Google