An introduction to jQuery in danish for the danish labour union Prosa.
English version available here: http://www.slideshare.net/Nightreaver/web20-with-jquery-in-english
13. 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
15. CSS HTML
Document Object Model
Javascript
layout
15
16. DOM
<!DOCTYPE HTML
<html>
DOM != kildekode <head>
<title>Index</head>
</head>
<body> Webserver
16
17. 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
28. 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
34. 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
59. 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