Javascript, DOM, browsers and frameworks basics
Upcoming SlideShare
Loading in...5
×
 

Javascript, DOM, browsers and frameworks basics

on

  • 3,264 views

An introduction to Javascript, Browsers, the DOM and JS Frameworks

An introduction to Javascript, Browsers, the DOM and JS Frameworks

Statistics

Views

Total Views
3,264
Views on SlideShare
2,830
Embed Views
434

Actions

Likes
3
Downloads
50
Comments
0

2 Embeds 434

http://www.netseven.it 418
http://netseven.it 16

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Javascript, DOM, browsers and frameworks basics Javascript, DOM, browsers and frameworks basics Presentation Transcript

  • Javascript, DOM, browsers  and frameworks basics NetSeven HQ - 29 March 2011 Simone Fonda fonda@netseven.it
  • AbstractJavascript basics (types, objects, .prototype, arguments,scope)Browsers (history, what they do)DOM (definition, example, history, scripting)Javascript Frameworks (examples)jQuery (chaining, .data(), events, onload/ready, bind vs live)Advanced topics (not covered)
  • Javascript .. basics
  • JAVASCRIPT - types .typeof "oh hai" // "another string", "", > "string"typeof 31512 // 1, 2, 3, .. 10.15, 3.1415, .. 134.1251 ..> "number"typeof true // false, 1 == 1, 1&&1, !1, !!!!!!0> "boolean"function f() { alert(oh hai); }typeof f> "function"typeof antani> "undefined"
  • JAVASCRIPT - types ..typeof [] // [1, 2], ["oh", "hai"], [1, true, function() { alert(oh hai)}]> "object"var array = [true, false, 1, 3.14, 1/3, function() {alert(oh hai)}]for (i in array) { console.log(i, array[i], typeof(array[i])) }> 0 true boolean> 1 false boolean> 2 1 number> 3 3.14 number> 4 0.3333333333333333 number> 5 function () {alert(oh hai);} function
  • JAVASCRIPT - types ...typeof {} // {a:1, b:2}, {a:"oh", b:"hai"}, {function() { alert(oh hai)}> "object"var ob = {a: true, b: false, c:1, d: 3.14, XYZ: 1/3, fufu: function(){ alert(oh hai) }}for (i in ob) { console.log(i, ob[i], typeof(ob[i])) }> a true boolean> b false boolean> c 1 number> d 3.14 number> XYZ 0.3333333333333333 number> fufu function () { alert(oh hai); } function
  • JAVASCRIPT - types .... objects?var ob = {a: true, b: false, c:1, d: 3.14}ob.d // or use ob[d]> 3.14var ar = [1, 2, 3/2]ar.length // an array!>3oh hai.length // a string !>6var fu = function() { alert(oh hai) }fu.toString()> "function() { alert(oh hai) }"
  • JAVASCRIPT - objects .prototypeString.prototype.evve = function() { return this.replace(/r/g, V) }"orrore un ramarro marrone".evve()> "oVVoVe un VamaVVo maVVone"- "Everything is an object"- "Objects can be extended"- "Theres no such thing as Class"
  • JAVASCRIPT - functions arguments .Overload?function add(a, b, c, d) { return a+b+c+d; }function add(a, b, c) { return a+b+c; }function add(a, b) { return a+b; }add(1, 2)> .. == 3 ??add(1, 2, 3)> .. == 6 ??add(1, 2, 3, 4)> .. == 10 ??
  • JAVASCRIPT - functions arguments ..Overload? NO! Last definition prevails!function add(a, b, c, d) { return a+b+c+d; }function add(a, b, c) { return a+b+c; }function add(a, b) { return a+b; }add(1, 2)>3add(1, 2, 3) // 3rd argument is just ignored ..>3add(1, 2, 3, 4) // 3rd and 4th arguments are ignored>3
  • JAVASCRIPT - functions arguments ...Overload? Kind of, use arguments !function add() { var r=0; for (i=0; i<arguments.length; i++) r += arguments[i]; return r;}add(1, 2, 3, 4, 5, 6, 7)> 28add(1, 3/5, Math.PI, Math.pow(2, 1.55), Math.sqrt(2), -5)> 4.083977607854139
  • JAVASCRIPT - functions arguments ....Overload? Kind of, use arguments !function add() { var r=0; for (i=0; i<arguments.length; i++) r += arguments[i]; return r;}add(1, 2, 3, 4, oh hai)> .. == ?add(oh hai, 2, 3, 4, 5)> .. == ?
  • JAVASCRIPT - functions arguments .....Overload? Kind of, use arguments !function add() { var r=0; for (i=0; i<arguments.length; i++) r += arguments[i]; return r;}add(1, 2, 3, 4, oh hai) // + used for string concatenation as soon> "10oh hai" // as a string is... addedadd(oh hai, 2, 3, 4, 5) // r is initially equal to 0 (the number)> "0oh hai2345"
  • JAVASCRIPT - scope .Javascript (as a language) does NOT have a global scope.... it comes from the browser: window (and its an object!!)<script> // outside everything (objects/functions)var foo = "oh hai";</script>window.foo = "oh hai"; // directly attached to window objectwindow[foo] = "oh hai";function doSomething() { // in a object/function without var foo = "oh hai";}
  • JAVASCRIPT - scope ..var foo = oh hai;function doSomething() { var foo = Goodbye; return foo;}console.log(foo, doSomething())> .. == ??var foo = oh hai;function doSomething() { foo = Goodbye; return foo;}console.log(foo, doSomething())> .. == ??
  • JAVASCRIPT - scope ...var foo = oh hai;function doSomething() { var foo = Goodbye; return foo;}console.log(foo, doSomething()) // global foo remains the same> oh hai Goodbyevar foo = oh hai;function doSomething() { foo = Goodbye; return foo;}console.log(foo, doSomething()) // foo hasnt changed yet!! :P> oh hai Goodbye // next console.log() "Goodbye Goodbye"!
  • Browsersretrieving, presenting, and traversing informationresources on the World Wide Web, since 1980s.
  • Browsers - a little bit of history .The history of the Web browser dates back in to the late 1980s,when a variety of technologies laid the foundation for the firstWeb browser, WorldWideWeb, by Tim Berners-Lee in 1991.That browser brought together a variety of existing and newsoftware and hardware technologies.Ted Nelson and Douglas Engelbart developed the conceptof hypertext long before Berners-Lee and CERN. It became thecore of the World Wide Web. Berners-Lee does acknowledgeEngelbarts contribution.
  • Browsers - a little bit of history ..The introduction of the NCSA Mosaic Web browser in 1993 – one of the first graphicalWeb browsers – led to an explosion in Web use. Marc Andreessen, the leader of theMosaic team at the National Center for Supercomputing Applications (NCSA), soonstarted his own company, named Netscape, and released the Mosaic-influenced Netscape Navigator in 1994, which quickly became the worlds most popularbrowser, accounting for 90% of all Web use at its peak (see usage share of webbrowsers). Microsoft responded with its browser Internet Explorer in 1995 (also heavilyinfluenced by Mosaic), initiating the industrys first browser war. By bundling InternetExplorer with Windows, Microsoft was able to leverage its dominance in the operatingsystem market to take over the Web browser market; Internet Explorer usage sharepeaked at over 95% by 2002. The usage share of Internet Explorer has declined fromover 62.1% in January 2010 to 56.0% in January 2011 according to NetApplications. In February 2011 its share has increased again to 56.8%.
  • Browsers - a little bit of history ...Opera first appeared in 1996; although it has never achieved widespread use, it holds a stable shareof in between 2.1% and 2.4%, and it has a substantial share of the fast-growingmobile phone Webbrowser market, being preinstalled on over 40 million phones. It is also available on severalother embedded systems, including Nintendos Wii video game console. In 1998, Netscape launchedwhat was to become the Mozilla Foundation in an attempt to produce a competitive browser usingthe open source software model. That browser would eventually evolve into Firefox, whichdeveloped a respectable following while still in the beta stage of development; shortly after therelease of Firefox 1.0 in late 2004, Firefox (all versions) accounted for 7.4% of browser use. TheFirefox usage share has slowly declined in 2010, from 24.4% in January to 21.7% in February 2011.Apples Safari had its first beta release in January 2003; it has a dominant share of Apple-based Webbrowsing, having risen from 4.5% usage share in January 2010 to 6.7% in February 2011. Itsrendering engine, called WebKit, is also running in the standard browsers of several mobile phoneplatforms, including Apple iOS, Google Android, Nokia S60 and PalmwebOS. The most recentmajor entrant to the browser market is Googles WebKit-based Chrome, first released in September2008. Its market share has quickly risen; its usage share has doubled from 5.2% in January 2010 to10.9% in February 2011, but in recent months its growth is not as drastic as before.
  • Browsers - a little bit of history ....The primary purpose of a web browser is to bring information resources to the user. This process begins when the user inputs aUniform Resource Identifier (URI), for example http://en.wikipedia.org/, into the browser. The prefix of the URI determines howthe URI will be interpreted. The most commonly used kind of URI starts with http: and identifies a resource to be retrieved overthe Hypertext Transfer Protocol (HTTP). Many browsers also support a variety of other prefixes, such as https: for HTTPS, ftp:for the File Transfer Protocol, and file: for local files. Prefixes that the web browser cannot directly handle are often handed offto another application entirely. For example, mailto: URIs are usually passed to the users default e-mail application and news:URIs are passed to the users default newsgroup reader. In the case of http, https, file, and others, once the resource has beenretrieved the web browser will display it. HTML is passed to the browsers layout engine to be transformed from markup to aninteractive document. Aside from HTML, web browsers can generally display any kind of content that can be part of a webpage. Most browsers can display images, audio, video, and XML files, and often have plug-ins to support Flash applicationsand Java applets. Upon encountering a file of an unsupported type or a file that is set up to be downloaded rather thandisplayed, the browser often prompts the user to save the file to disk or identify a program that can open it. Interactivity in a webpage can also be supplied by JavaScript, which usually does not require a plugin. JavaScript can be used along with othertechnologies to allow "live" interaction with the web pages server via Ajax. In the most advanced browsers, JavaScriptprograms can produce interactive 2D graphics using the canvas API and fully rendered 3D graphics using WebGL. Informationresources may contain hyperlinks to other information resources. Each link contains the URI of a resource to go to. When a linkis clicked, the browser navigates to the resource indicated by the links target URI, and the process of bringing content to theuser begins again. Available web browsers range in features from minimal, text-based user interfaces with bare-bones supportfor HTML to rich user interfaces supporting a wide variety of file formats and protocols. Browsers which include additionalcomponents to support e-mail, Usenet news, and Internet Relay Chat (IRC), are sometimes referred to as "Internet suites"rather than merely "web browsers". All major web browsers allow the user to open multiple information resources at the sametime, either in different browser windows or in different tabs of the same window. Major browsers also include pop-up blockersto prevent unwanted windows from "popping up" without the users consent. Most web browsers can display a list of web pagesthat the user has bookmarked so that the user can quickly return to them. Bookmarks are also called "Favorites" in InternetExplorer. In addition, all major web browsers have some form of built-in web feed aggregator. In Mozilla Firefox, web feeds areformatted as "live bookmarks" and behave like a folder of bookmarks corresponding to recent entries in the feed. In Opera, amore traditional feed reader is included which stores and displays the contents of the feed. Furthermore, most browsers can beextended via plug-ins, downloadable components that provide additional features. Early web browsers supported only a very simpleversion of HTML. The rapid development of web browsers led to the development of non-standard dialects of HTML, leading to problemswith interoperability. Modern web browsers support a combination of standards-based and de facto HTML and XHTML, which should berendered in the same way by all browsers.
  • Browsers - what they do for you- Downloads the requested page- Downloads included assets (css, javascript, images, ..)... progressive content loading ...- Elements size- Float, positioning- User interaction (keyboard, mouse)- Handles events (keyboard, mouse, ajax, timers, ..)- Creates a DOM representation to interact with .......... ??
  • DOMthe Document Object Model
  • DOM : Document Object Model .The Document Object Model (DOM) is anapplication programming interface (API) forvalid HTML and well-formed XML documents.It defines the logical structure of documents andthe way a document is accessed andmanipulated
  • DOM : Document Object Model ..<html> <head> <title>Oh hai</title> </head> <body> <span></span> <div>Immagine: <img src=> </div> </body><html>
  • DOM : Document Object Model ...JavaScript was released by Netscape Communications in1996 within Netscape Navigator 2.0. Netscapes competitor,Microsoft, released Internet Explorer 3.0 later the same yearwith a port of JavaScript called JScript. JavaScript and JScriptlet web developers create web pages with client-sideinteractivity. The limited facilities for detecting user-generatedevents and modifying the HTML document in the firstgeneration of these languages eventually became known as"DOM Level 0" or "Legacy DOM". No independent standardwas developed for DOM Level 0, but it was partly described inthe specification of HTML4. For example, a form input elementcould be accessed as either "document.formName.inputName" or "document.forms[0].elements[0]". The LegacyDOM enabled client-side form validation and the popular"rollover" effect.
  • DOM : Document Object Model ....In 1997, Netscape and Microsoft released version 4.0 ofNetscape Navigator and Internet Explorer, adding support forDynamic HTML (DHTML), functionality enabling changes toa loaded HTML document. The Intermediate DOMs enabledthe manipulation of Cascading Style Sheet (CSS) propertieswhich influence the display of a document. They alsoprovided access to a new feature called "layers" via the"document.layers" property (Netscape Navigator) and the"document.all" property (Internet Explorer). Because of thefundamental incompatibilities in the Intermediate DOMs,cross-browser development required special handling foreach supported browser.
  • DOM : Document Object Model .....The World Wide Web Consortium (W3C), founded in 1994 to promote openstandards for the World Wide Web, brought Netscape Communications andMicrosoft together with other companies to develop a standard for browserscripting languages, called "ECMAScript". After the release of ECMAScript, W3Cbegan work on a standardized DOM. The initial DOM standard, known as "DOMLevel 1", was recommended by W3C in late 1998. About the same time, InternetExplorer 5.0 shipped with limited support for DOM Level 1. DOM Level 1provided a complete model for an entire HTML or XML document, includingmeans to change any portion of the document. Non-conformant browsers suchas Internet Explorer 4.x and Netscape 4.x were still widely used as late as 2000.DOM Level 2 was published in late 2000. It introduced the "getElementById"function as well as an event model and support for XML namespaces and CSS.DOM Level 3, the current release of the DOM specification, published in April2004, added support for XPath and keyboard event handling, as well as aninterface for serializing documents as XML. By 2005, large parts of W3C DOMwere well-supported by common ECMAScript-enabled browsers, includingMicrosoft Internet Explorer version 6 (2001), Opera, Safari and Gecko-basedbrowsers (like Mozilla, Firefox, SeaMonkey and Camino).
  • DOM scripting .// Change the style of an H1 tagif (document.getElementsByTagName(h1).length > 0) { h = document.getElementsByTagName(h1)[0]; h.style.color = red; h.style.fontFamily = Arial; h.style.fontWeight = bold; h.style.borderStyle = solid; h.style.borderColor = #c00; h.style.borderWidth = 1px;}
  • DOM scripting ..window.onload = function() { // Call when document is loaded alert(oh hai);}What if we need to call more than a single function?
  • DOM scripting ...window.onload = function() { // Call when document is loaded alert(oh hai);}function addLoadEvent(func) { // ADD a function to call when.. var oldonload = window.onload; if (typeof window.onload != function) { window.onload = func; } else { window.onload = function() { oldonload(); func(); } }}addLoadEvent(function() { alert(oh hai) });
  • DOM scripting ....// call a function when user clicks on the first A inside a// certain container ..var container = document.getElementById(containerId);if (!container) { return; }if (container.getElementsByTagName(a).length > 0) { var a = container.getElementsByTagName(a)[0]; a.onclick= function() { doSomething() } ;}
  • DOM scripting .....// Get x,y coordinates from a mouse click eventfunction doSomething(e) { var posx = 0, posy = 0; if (!e) var e = window.event; // some passes e, some dont if (e.pageX || e.pageY) { posx = e.pageX; // safari and opera, NOT IE posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft+ document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop+ document.documentElement.scrollTop; } // Use posx and posy ....}
  • DOM scripting ......function getData() { var xhr; try { xhr = new ActiveXObject(Msxml2.XMLHTTP); } // Internet Explorer catch (e) { try { xhr = new ActiveXObject(Microsoft.XMLHTTP); } // Another IE catch (e2) { try { xhr = new XMLHttpRequest(); } // Firefox, Safari, .. catch (e3) { xhr = false; } } } xhr.onreadystatechange = function() { // Called quite often.. 1, 2, 3, 4 .. if (xhr.readyState == 4) { // 4 = transaction finished if (xhr.status == 200) document... = "Received:" + xhr.responseText; else document... = "Error code " + xhr.status; } }; xhr.open(GET, "data.txt", true); // Start the connection! xhr.send(null);}
  • DOM scripting .......document.createElement() event.targetdocument.createTextNode() event.currentTargetdocument.createAttribute() event.bubbles.... ....node.nodeName stylesheet.hrefnode.firstChild stylesheet.itemnode.previousSibling stylesheet.insertRulenode.attributes stylesheet.deleteRulenode.insertBefore() ....node.replaceChild() cssrule.cssTextnode.hasChildNodes() cssrule.parentRulenode.replaceChild() cssrule.typenode.hasAttributes() ........ nodeIterator.nextNode()object.getAttribute() nodeInterator.previousNode()object.setAttribute() ....object.getElementsByTagName() range.setStart().... range.setEnd()object.addEventListener() range.setStartBefore()object.dispatchEvent() range.setEndBefore() range.cloneContents()
  • Javascript Frameworks TO THE RESCUE!
  • Javascript frameworks to the rescue! Cross browserDOM scripting made easy (selectors, events, ..)Ajax made easy (get, post, ..)More goodies (each(), map(), grep(), ...)Spice up your page with effects (slideUp(), hide(1000), ..)Large community (sharing problems and solutions)Tons of available scripts/plugins (too many??)
  • Javascript frameworks to the rescue! .if (document.getElementsByTagName(h1).length > 0) { h = document.getElementsByTagName(h1)[0]; h.style.color = red; h.style.borderStyle = solid; h.style.borderColor = #c00; h.style.borderWidth = 1px;}Using jQuery for Selectors:$(h1:first).css({color: red, border: 1px solid #c00})$(h1) ~= document.getElementsByTagName(h1)$(#foo) ~= document.getElementById(foo)
  • Javascript frameworks to the rescue! ..window.onload = function() { // Call when document is loaded alert(oh hai);}Using jQuery for events:$(document).ready(function() { alert(oh hai);});As many as you want, for free!(Not exactly the same behaviour.. more on this later.)
  • Javascript frameworks to the rescue! ...// call a function when click on the first A inside a certain// container ..var container = document.getElementById(containerId);if (!container) { return; }if (container.getElementsByTagName(a).length > 0) { var a = container.getElementsByTagName(a)[0]; a.onclick = function() { doSomething() } ;}Using jQuery for selectors and events:$(#containerId a:first).click(function() { doSomething() });
  • Javascript frameworks to the rescue! ....function getData() { var xhr; try { xhr = new ActiveXObject(Msxml2.XMLHTTP); } // Internet Explorer catch (e) { try { xhr = new ActiveXObject(Microsoft.XMLHTTP); } // Another IE catch (e2) { try { xhr = new XMLHttpRequest(); } // Firefox, Safari, .. catch (e3) { xhr = false; } } } xhr.onreadystatechange = function() { // Called quite often.. 1, 2, 3, 4 .. if (xhr.readyState == 4) { // 4 = transaction finished if (xhr.status == 200) document... = "Received:" + xhr.responseText; else document... = "Error code " + xhr.status; } }; xhr.open(GET, "data.txt", true); // Start the connection! xhr.send(null);}Using jQuery for ajax:$.ajax({ url: "data.txt", success: function(data) { $(#foo).val(data); }});
  • jQueryrandom tips and tricks
  • jQuery .Chaining: jQuery returns itself (sort of ......)$(#foo); // == jQuery object$(#foo).css({border: 1px solid red}); // == jQuery object$(#foo).click(function() { alert(Nice click) }); // == jQuery object$(#foo).hover(function() { alert(Over!) }); // == jQuery object ..... all of them are jQuery objects .....
  • jQuery .Chaining: jQuery returns itself (sort of ......)$(#foo); // == jQuery object$(#foo).css({border: 1px solid red}); // == jQuery object$(#foo).click(function() { alert(Nice click) }); // == jQuery object$(#foo).hover(function() { alert(Over!) }); // == jQuery object ..... all of them are jQuery objects .....$(#foo) .css({border: 1px solid red}) .click(function() { alert(Nice click) }) .hover(function() { alert(Over!)}); // == jQuery object
  • jQuery ...data(): linking custom data to elements$(#foo).data(uri, http://my_precious_URI); // storing$(#foo).data(type, IIP image); // storingif ($(#foo).data(type) === IIP image)) // retrieving uri = $(#foo).data(uri);$(#foo).removeData(); // deleting
  • jQuery ...events: onload? document ready? Which order??<html> <script src=http://code.jquery.com/jquery-1.5.js></script> <script> $(document).ready(function() { console.log(document is ready); }); window.onload = function() { console.log(window is loaded ); } console.log(This is executed); </script> <body> </body></html>
  • jQuery ...events: onload? document ready? Which order??$(document).ready(): called BEFORE window.onload !! DOMready to be manipulated (hide, addclass, remove..)window.onload(): all the assets has been loaded (images,banners, ..)Answer:> This is executed> document is ready> window is loaded
  • jQuery ...events: onload? document ready? Which order??<html> <script src=http://code.jquery.com/jquery-1.5.js></script> <script> $(#foo).html("Goodbye!"); </script> <body> <div id=foo>Oh hai!</div> </body></html>page == ??
  • jQuery ...events: onload? document ready? Which order??<html> <script src=http://code.jquery.com/jquery-1.5.js></script> <script> $(#foo).html("Goodbye!"); </script> <body> <div id=foo>Oh hai!</div> </body></html>page == "Oh hai!": the div does not exist yet .... :(
  • jQuery ...events: onload? document ready? Which order??<html> <script src=http://code.jquery.com/jquery-1.5.js></script> <script> $(document).ready(function() { $(#foo).html("Goodbye!"); }); </script> <body> <div id=foo>Oh hai!</div> </body></html>page == "Goodbye!"
  • jQuery ....events: bind() versus live() $(.foo).click(function() { }) == $(foo).bind(click, function() { }) BUT $(foo).bind(click, function() { }) != $(foo).live(click, function() { });
  • jQuery ....events: bind() versus live()<html> <script src=http://code.jquery.com/jquery-1.5.js></script> <script> $(div.foo).click(function() { $(body).append("<div class=foo>... Oh hai!!</div>") }); </script> <body><div class=foo>Oh hai!</div></body></html>What does this do? ..
  • jQuery ....events: bind() versus live()<html> <script src=http://code.jquery.com/jquery-1.5.js></script> <script> $(div.foo).click(function() { $(body).append("<div class=foo>... Oh hai!!</div>") }); </script> <body><div class=foo>Oh hai!</div></body></html>What does this do? .. NOTHING! div doesnt exist yet!!! ;)
  • jQuery ....events: bind() versus live()<html> <script src=http://code.jquery.com/jquery-1.5.js></script> <script> $(document).ready(function() { $(div.foo).click(function() { $(body).append("<div class=foo>... Oh hai!!</div>") }); }); </script> <body><div class=foo>Oh hai!</div></body></html>What does this do? ..
  • jQuery ....events: bind() versus live()<html> <script src=http://code.jquery.com/jquery-1.5.js></script> <script> $(document).ready(function() { $(div.foo).click(function() { $(body).append("<div class=foo>... Oh hai!!</div>") }); }); </script> <body><div class=foo>Oh hai!</div></body></html>What does this do? .. adds a div.foo "... Oh hai!!" item by clickingon the first div, the one coming from the original document.
  • jQuery ....events: bind() versus live()<html> <script src=http://code.jquery.com/jquery-1.5.js></script> <script> $(div.foo).live(click, function() { $(body).append("<div class=foo>... Oh hai!!</div>") }); </script> <body><div class=foo>Oh hai!</div></body></html>What does this do? ..
  • jQuery ....events: bind() versus live()<html> <script src=http://code.jquery.com/jquery-1.5.js></script> <script> $(div.foo).live(click, function() { $(body).append("<div class=foo>... Oh hai!!</div>") }); </script> <body><div class=foo>Oh hai!</div></body></html>What does this do? .. adds a div.foo "... Oh hai!!" item by clickingon any div.foo item!!Even the future ones!
  • Advanced topics .. are you curious?js closures ()()js meta-programming (code which modifies code)js timersjs events, this object and scopejs == vs ===js evaljs using callbacks (apply, call)js delayed script loadingHTML/js optimization to get a snappier user experience (sprites,scripts optimizations, ..)jQuery vs other frameworks (prototype, mootools, ..)jQuery animations and chained animationsjQuery ajax data retrieval (JSON?)jQuery plugins (how to build one)
  • Thats ALL!Download this presentaion in PDF from: http://bit.ly/ejLetd Simone Fonda fonda@netseven.it