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

More Related Content

What's hot

Viewers also liked

Similar to Web2.0 with jQuery in English

Recently uploaded

Web2.0 with jQuery in English

Editor's Notes