Web2.0 with jQuery in English

Web2.0 with jQuery

faster, easier and a lot more fun

Hello!

Lau Bech Lauritzen

★2

Todays menu
Web
Browser
Javascript
jQuery
Plugins
Tips

★3

Web 1.0
• Monologue
• A lot of page changes
• Short time on each page

★4

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

★5

Web 2.0
• Dialogue – user-generated content
• Increased interaction
• User experience
• Webapplications

★6

Client-Side Technology

Communication
Ajax
Interaction
Events
Animation
Bling

★8

Asyncronous javascript and xML
XMLHttpRequest

★ 10

/ajax/form

Server
XML/JSON

★ 11

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

Javascript
• Weird name
• Complete language
• Object orientered
• First-class functions
• Dynamically typed
• General purpose

★ 14

CSS HTML

Document Object Model

Javascript
layout

★ 15

DOM

CSS
<!DOCTYPE HTML JS
<html> JS

DOM != source code <head>
<title>Index</head>
</head>
<body> Webserver

★ 16

ARGH!

// 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;
}
})();
}

★ 17

$(document).ready(…);

★ 18

Annoying API

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

★ 19

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

★ 20

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

★ 21

<a class=“language” href=“/de/">
<img src=“/img/debig.png“/>
</a>
<a class=“login” href=“/login/“>Log ind</a>
<script src=“common.js”/>

★ 22

The Language

★ 23

Javascript toolkits

★ 24

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

Compatibility

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

★ 31

jQuery is designed to change
the way you write Javascript

★ 33

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

The jQuery Way

$( Find Things )
. Do Stuff ();

★ 35

The jQuery Way
selector

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

★ 36

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

★ 37

The jQuery Object
• List of DOM elements
• Array-like
• Methods
– Implicit og explicit iteration
– Some act only on the first 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
• Concise, natural, consistant
• Logical, often guessable
• Easy to read, understand and remember

★ 41

jQuery’s Focus
• DOM manipulation
• Events
• Ajax
• Animation

★ 42

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

★ 43

Manipulation
• .text() .html()
• .attr() .removeAttr() .val()
• .remove() .empty()
• .css() .clone()
• .wrap() .wrapInner() .wrapAll()

★ 44

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

★ 45

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

var jDom = $(response);
$(”.content”, jDom).appendTo(”body”);

★ 46

jQuery Overload
• $(selector)
• $(HTML)
• $(DOM element)
• $(function)

★ 47

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

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

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

★ 52

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

★ 53

Misc
• .data(key, value)
• Utility functions
– $.browser $.each() $.extend() $.merge() $.grep()

★ 54

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

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

Writing a Plugin
|(function($) {
return this.click(function() {
if (url) {
$(this).dialog();
});
}
return false;
});
};
|})(jQuery);

★ 59

Writing a Plugin
|(function($) {
if (url) {
$(this).dialog();
});
}
return false;
});
};
|})(jQuery);

$(”.popup”).popup();

★ 60

Writing a 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).dialog();
});
}
return false;
});
};
})(jQuery);
$(”.popup”).popup(”#dialog”, {attribute: ”name”});

★ 61

Integration

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

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

jQuery Mobile
• Cross-platform
• Markup-based
• Progressive enhancement
• Events
• Unified UI

★ 67

Tips
• Keep Javascript in files
• Google CDN
• Profile code
• Use plugins!
• Minify code

★ 69

Performance

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

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

★ 70

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

The Horison
• Javascript interpreters
• Desktop Javascript
• HTML5
• Mobile

★ 72

Web2.0 with jQuery in English

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (17)

Similar to Web2.0 with jQuery in English

Similar to Web2.0 with jQuery in English (20)

Recently uploaded

Recently uploaded (20)

Web2.0 with jQuery in English

Editor's Notes