web2.0 with jquery in english
DESCRIPTION
An easy-to-follow introduction to jQuery.TRANSCRIPT
![Page 1: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/1.jpg)
Web2.0 with jQuery
faster, easier and a lot more fun
![Page 2: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/2.jpg)
Hello!
Lau Bech Lauritzen
★ 2
![Page 3: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/3.jpg)
Todays menu
Web
Browser
Javascript
jQuery
Plugins
Tips
★ 3
![Page 4: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/4.jpg)
Web 1.0
• Monologue
• A lot of page changes
• Short time on each page
★ 4
![Page 5: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/5.jpg)
Hi, I’m
JavaScript!
★ 5
AND I’m
XMLHttpRequest
![Page 6: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/6.jpg)
Web 2.0
• Dialogue – user-generated content
• Increased interaction
• User experience
• Webapplications
★ 6
![Page 7: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/7.jpg)
★ 7
![Page 8: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/8.jpg)
Client-Side Technology
AjaxEvents
Animation
CommunicationInteractionBling
★ 8
![Page 9: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/9.jpg)
Ajax
★ 9
![Page 10: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/10.jpg)
Asyncronous javascript and xML
XMLHttpRequest
★ 10
![Page 11: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/11.jpg)
/ajax/form
Serv
er
XML/JSON
★ 11
![Page 12: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/12.jpg)
Javascript
★ 12
![Page 13: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/13.jpg)
The History of Javascript
• 1995 JavaScript in Netscape
• 1996 JScript in Internet Explorer
• 1997 ECMAScript standard
• 1999-2005 – Ajax roll-out
• 2006 XHR standard
• 95% Javascript enabled
• Huge platform
★ 13
![Page 14: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/14.jpg)
Javascript
• Weird name
• Complete language
• Object orientered
• First-class functions
• Dynamically typed
• General purpose
★ 14
![Page 15: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/15.jpg)
Document Object Model
CSS HTML
Javascriptlayout
★ 15
![Page 16: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/16.jpg)
<!DOCTYPE HTML <html><head>
<title>Index</head></head><body>
DOM
Webserver
DOM != source code
CSS
JSJS
★ 16
![Page 17: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/17.jpg)
// 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;
}})();
}
ARGH!
★ 17
![Page 18: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/18.jpg)
$(document).ready(…);
★ 18
![Page 19: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/19.jpg)
var newDiv = document.createElement("div");newDiv.innerHTML = "<h1>Hej fra Danmark!</h1>";var orgDiv = document.getElementById("orgDiv");document.body.insertBefore(newDiv, orgDiv);
Annoying API
★ 19
![Page 20: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/20.jpg)
$(“#orgDiv”).before(“<h1>Hej!</h1>”);
★ 20
![Page 21: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/21.jpg)
<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
![Page 22: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/22.jpg)
<a class=“language” href=“/de/"><img src=“/img/debig.png“/>
</a>
<a class=“login” href=“/login/“>Log ind</a>
<script src=“common.js”/>
★ 22
![Page 23: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/23.jpg)
The Language
★ 23
![Page 24: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/24.jpg)
Javascript toolkits
★ 24
![Page 25: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/25.jpg)
★ 25
![Page 26: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/26.jpg)
★ 26
![Page 27: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/27.jpg)
★ 27
![Page 28: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/28.jpg)
jQuery
• Started January 2006
• Simplify and speed up webdevelopment
• DOM query language with CSS-notation
• Minimal core – extendable through plugins
• Unobtrusive
• Test suite 50 browsers, 11 platforms
• Large community – lots of plugins
★ 28
![Page 29: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/29.jpg)
Dig?
★ 29
![Page 30: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/30.jpg)
★ 30
![Page 31: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/31.jpg)
IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome
Compatibility
★ 31
![Page 32: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/32.jpg)
★ 32
![Page 33: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/33.jpg)
jQuery is designed to change the way you write Javascript
★ 33
![Page 34: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/34.jpg)
jQuery basics
• Include a single Javascript file
• jQuery uses 19 KB
• Only adds ”jQuery” to the global scope
• Everything is accessed through the jQuery object
• $ is a shortcut
★ 34
![Page 35: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/35.jpg)
The jQuery Way
$( Find Things )
. Do Stuff ();
★ 35
![Page 36: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/36.jpg)
The jQuery Way
$( Find Things )
. Do Stuff ();jQuery
selector
method
★ 36
![Page 37: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/37.jpg)
$(”div”).hide();
$(”input”).remove();
$(”form”).submit();
$(”p”).addClass(”highlight”);
$(”span”).fadeIn(”fast”);
★ 37
![Page 38: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/38.jpg)
The jQuery Object
• List of DOM elements
• Array-like
• Methods
– Implicit og explicit iteration
– Some act only on the first element
★ 38
![Page 39: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/39.jpg)
Selectors
$(”#menu”)
$(”.redButton”)
$(”p > a”)
$(”tr:even”)
$(”h1, h2, h3”)
$(”input[name=email]”)
$(”li:visible”)
http://docs.query.com/Selectors
★ 39
![Page 40: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/40.jpg)
Chaining
$(”a”).addClass(”active”).css(”color”, ”yellow”).show();
★ 40
![Page 41: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/41.jpg)
jQuery API
• Concise, natural, consistant
• Logical, often guessable
• Easy to read, understand and remember
★ 41
![Page 42: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/42.jpg)
jQuery’s Focus
• DOM manipulation
• Events
• Ajax
• Animation
★ 42
![Page 43: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/43.jpg)
DOM
• .next() .prev()
• .find() .children()
• .parent() .parents()
• .filter() siblings()
★ 43
![Page 44: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/44.jpg)
Manipulation
• .text() .html()
• .attr() .removeAttr() .val()
• .remove() .empty()
• .css() .clone()
• .wrap() .wrapInner() .wrapAll()
★ 44
![Page 45: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/45.jpg)
CSS
• .css(key, value)
• .css({key: value, key: value, ...})
• .addClass() .removeClass()
• .toggleClass()
★ 45
![Page 46: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/46.jpg)
DOM Construction
• .append() .prepend()
• .before() .after()
• .insertBefore() .insertAfter()
• $(”<div>New element</div>”)
★ 46
var jDom = $(response);$(”.content”, jDom).appendTo(”body”);
![Page 47: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/47.jpg)
jQuery Overload
• $(selector)
• $(HTML)
• $(DOM element)
• $(function)
★ 47
![Page 48: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/48.jpg)
★ 48
![Page 49: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/49.jpg)
DEMO
★ 49
![Page 50: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/50.jpg)
Events
• .click(function) .click()
• .toggle(function1, function2, ...) .toggle()
• .bind(name, function)
• .one(name, function)
• .trigger(name)
• .live(name, function), .die(name)
• .hover(function, function), etc.
★ 50
![Page 51: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/51.jpg)
Event Handler Callbacks
• this always points to the DOM element
• The event is passed as the first argument
$(”a”).click(function(event) { alert(event.type);alert(this.href);alert($(this).attr(”href”));
});
★ 51
![Page 52: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/52.jpg)
Ajax
• .load(url)
• .load(url + ” ” + selector)
• $.get()
• $.post()
• $.getJSON()
• $.getScript()
• $.ajax()
★ 52
![Page 53: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/53.jpg)
Animations
• .show() .hide() .toggle()
• .fadeIn() .fadeOut() .fadeTo()
• .slideUp() .slideDown() .slideToggle()
• .animate() .stop()
★ 53
![Page 54: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/54.jpg)
Misc
• .data(key, value)
• Utility functions
– $.browser $.each() $.extend() $.merge() $.grep()
★ 54
![Page 55: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/55.jpg)
DEMO
★ 55
![Page 56: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/56.jpg)
Plugin System
• Goal: keep a small jQuery core
• Plugin system provides extensibility
• >4.500 plugins
– Ajax, animations, forms, menus, widgets
• Easy to build
• Lots of small plugins
★ 56
![Page 57: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/57.jpg)
<script src=”jquery.js”/><script src=”jquery.cookie.js”/><script src=”jquery.lightbox.js”/>
★ 57
![Page 58: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/58.jpg)
Writing a Plugin
$.fn.popup = function() {this.click(function() {
var url = $(this).attr("href");if (url) {
$("#dialog").load(url, function() {$(this).dialog();
});}return false;
});return this;
};
★ 58
![Page 59: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/59.jpg)
Writing a Plugin
|(function($) {$.fn.popup = function() {
return this.click(function() {var url = $(this).attr("href");if (url) {
$("#dialog").load(url, function() {$(this).dialog();
});}return false;
});};
|})(jQuery);
★ 59
![Page 60: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/60.jpg)
Writing a Plugin
|(function($) {$.fn.popup = function() {
return this.click(function() {var url = $(this).attr("href");if (url) {
$("#dialog").load(url, function() {$(this).dialog();
});}return false;
});};
|})(jQuery);
$(”.popup”).popup();
★ 60
![Page 61: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/61.jpg)
Writing a Plugin
(function($) {$.fn.popup = function(container, options) {
| var settings= $.extend({| attribute: ”href”| }, options);
return this.click(function() {var url = $(this).attr(settings.attribute);if (url) {
$(container).load(url, function() {$(this).dialog();
});}return false;
});};
})(jQuery);$(”.popup”).popup(”#dialog”, {attribute: ”name”});
★ 61
![Page 62: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/62.jpg)
Flot
★ 62
![Page 63: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/63.jpg)
Integration
$.plot(”#plot”, data);
http://code.google.com/p/flot/
★ 63
![Page 64: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/64.jpg)
DEMO
★ 64
![Page 65: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/65.jpg)
jQuery UI
★ 65
![Page 66: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/66.jpg)
★ 66
![Page 67: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/67.jpg)
jQuery Mobile
• Cross-platform
• Markup-based
• Progressive enhancement
• Events
• Unified UI
★ 67
![Page 68: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/68.jpg)
DEMO
★ 68
![Page 69: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/69.jpg)
Tips
• Keep Javascript in files
• Google CDN
• Profile code
• Use plugins!
• Minify code
★ 69
![Page 70: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/70.jpg)
Performance
$(”#id”) $(”form[name*=email]”)
var form = $(”form[name*=email]”);$(”input[name=address]”, form).val();form.submit();
★ 70
![Page 71: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/71.jpg)
Development Environment
• Firefox• Firebug
– Javascript consol– HTTP requests– Profiler– Plugins – cookies, speed test, etc.
• Web Developer• Fiddler – Ajax debugging• Good editor
– Syntax highlighting– Indention– TextMate, Notepad++, Emacs
★ 71
![Page 72: Web2.0 with jQuery in English](https://reader033.vdocument.in/reader033/viewer/2022042623/54b79a574a795969608b4647/html5/thumbnails/72.jpg)
The Horison
• Javascript interpreters
• Desktop Javascript
• HTML5
• Mobile
★ 72