web2.0 with jquery
Post on 17-May-2015
2.214 Views
Preview:
DESCRIPTION
TRANSCRIPT
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!
lau@iola.dk
yayart.com
71
top related