JavaScript 101: Adding Interactivity to Your Site With the Worlds Most Popular Programming Language* Rob Larsen htmlcssjavascript.com | htmlcssjavascript.com/downloads/javascript.ppt *Douglas Crockford

Who is this Guy Anyway? 12+ years HTML/CSS/JavaScript. My day job since For one more day: Principal Presentation Engineer at Cramer Next Week: Molecular PAST: AdvisorTech, Compete, Demandware, The Weekly Dig, Gillette, Museum of Science, Boston, PC Connection, State Street, Webex

What Are We Going To Talk About Were going to walk, step by step, through adding some simple interactivity to a web page using JavaScript. There will be three levels for every step: For beginners this is how you do it For intermediate this is why we do it this way For advanced users well touch on some details/enhancements/cool stuff

The Basic Idea I get a lot of Google Traffic along the lines of how to include javascript in html Im working on a series of blog posts. The hope is to document the way I go about making web sites. Tonight were skipping ahead to the JavaScript section.

The Sample Page

I Told You This Was a Work in Progress

The Basic Concepts HTML + CSS + JavaScript Content + Style + Behavior As fast as possible (by default) Make as much sense as possible + A Bunch of Other Stuff Outside of Tonights Scope (accessibility, findability, usability, etc)

Starter Assets

JavaScript JavaScript is an object-oriented scripting language used to enable programmatic access to objects within both the client application and other applications. It is primarily used in the form of client-side JavaScript, implemented as an integrated component of the web browser, allowing the development of enhanced user interfaces and dynamic websites. JavaScript is a dialect of the ECMAScript standard and is characterized as a dynamic, weakly typed, prototype-based language with first-class functions. [wikipedia]

The Important Bits (that you need to worry about right now) Weakly Typed console.log("4" * "5") 20 Functions are first class Objects doStuff(function(){ var someObject = doSomeOtherStuff(); return someObject; })

Lets Do This

Lets get the script on the page Let's Make a Web Page Let's Make a Web Page Show Tweets This is an ad H1 Header for topics Lorem Ipsum Dolor Sit Amet, Consector Adipiscing Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. <a> Link treatment urna nibh, viverra non, semper suscipit, posuere a, pede. <abbr> or <!snip Released Under the The MIT License. Copyright (c) 2010 Rob Larsen Your own script

Lets get the script on the page Let's Make a Web Page Let's Make a Web Page Show Tweets This is an ad H1 Header for topics Lorem Ipsum Dolor Sit Amet, Consector Adipiscing Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. <a> Link treatment urna nibh, viverra non, semper suscipit, posuere a, pede. <abbr> or <!snip Released Under the The MIT License. Copyright (c) 2010 Rob Larsen jQuery

Whats Up With That? Why do we put the script at the bottom? The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames. HTTP/1.1 specification

While The Previous is Good, It Can Be Made Better Let's Make a Web Page Let's Make a Web Page Show Tweets This is an ad H1 Header for topics Lorem Ipsum Dolor Sit Amet, Consector Adipiscing Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. <a> Link treatment urna nibh, viverra non, semper suscipit, posuere a, pede. <abbr> or <!snip Released Under the The MIT License. Copyright (c) 2010 Rob Larsen One scripts file. Served off site CDN or other non-cookied domain. Minified and gzipped.

Whys That Better? It looks like the first example. Two script files (jQuery + application code) minified and combined into one. 1 less download. 1 less DNS lookup. Minfication/gzipping reduces file size significantly. There are plugins/libraries/whatevers out there that can help you concatenate scripts. Or, of course, you can also do it manually.

YUI is Awesome

Minified? function writeTwitterSearchResults(obj) { if ($("#twitter-list")) { $("#twitter-list").remove(); } $("#twitter").append(" "); var user, text; var test = obj.results.length; for (var i=0; i<test; i++) { if(i % 2) { theClass="even"; } else { theClass="odd" }; text = obj.results[i].text; console.log(text); text=text.replace(/(http\:\/\/[\S]*)/g," $1 "); console.log(text); $1$2$3 ") console.log(text); user = obj.results[i].from_user; $("#twitter-list").append(" " + user + ": " + text +" "+ obj.results[i].created_at +"GMT " ) };

Minified? function writeTwitterSearchResults(obj){if($("#twitter-list")){$("#twitter-list").remove();}$("#twitter").append(" ");var user,text;var test=obj.results.length;for(var i=0;i $1 $1$2$3 ");console.log(text);user=obj.results[i].from_user;$("#twitter-list").append(" "+user+": "+text+" "+obj.results[i].created_at+"GMT ");}} //14% savings. Gzip is much more importnt.

Lets Get the Script on the Page Where does this fall apart? HTML5, Scope Anyone Using Any Advanced Techniques? Maybe some of the kind of stuff this guy wrote about in his book?

Initialize $(document).ready( function() { $("#make-it-so").click(results); } ); jQuery

Initialize function init() { document.getElementById("make-it-so").addEventListener("click", results, false); } window.addEventListener("DOMContentLoaded", init, false); Raw JS

Initialize We want to keep out behavior out of our content. To do that we create a function init contains all of the instructions we want to run when the page loads. We set that function to run when the DOM is loaded. It attaches an event to an element with the id make-it-so

DOM? The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents (wikipedia again) Its the framework within which we interact with stuff on the page. In this sense, Im using the DOM to refer to all of the markup (content) on the page. Once thats done downloading, the browser sets up the DOM framework. We can then work with it in a predictable manner.

Why Do We Care When the DOM is Loaded? We want to change the page as soon as possible, but not too soon. This moment when the DOM is loaded is the sweet spot for that manipulation

Lets Take a Quick Look at the Function function results(e) { var twitterJSON = document.createElement("script"); twitterJSON.type="text/javascript"; twitterJSON.src="_assets/scripts/search.json"; document.body.appendChild(twitterJSON); e.preventDefault(); }; function writeTwitterSearchResults(obj) { var twitterDIV = document.getElementById("twitter"); if (document.getElementById("twitter-list")) { twitterDIV.innerHTML=""; } var twitterUL = document.createElement("UL"); twitterUL.setAttribute("id","twitter-list"); var user, text, test = obj.results.length, twitterSPAN, twitterA, twitterLI; for (var i=0; i<test; i++) { twitterSPAN = document.createElement("SPAN"); twitterA = document.createElement("A"); twitterLI = document.createElement("LI"); //continued Raw JS

Lets Take a Quick Look at the Function if(i % 2) { twitterLI.className="even"; }; text = obj.results[i].text; text=text.replace(/(http\:\/\/[\S]*)/g," $1 "); $1$2$3 ") user = obj.results[i].from_user; twitterLI.style.backgroundImage="url('"+obj.results[i].profile_image_url+"')" twitterA.href= " twitterA.appendChild(document.createTextNode(user+":")); twitterSPAN.appendChild(document.createTextNode(obj.results[i].created_at+" GMT")); twitterSPAN.className="time"; twitterLI.appendChild(twitterA); twitterLI.innerHTML+= " "+text; twitterLI.appendChild(twitterSPAN); twitterUL.appendChild(twitterLI); }; twitterDIV.appendChild(twitterUL); }; Raw JS

Lets Take a Quick Look at the Function function results(e) { $.getJSON(" writeTwitterSearchResults ); e.preventDefault(); }; function writeTwitterSearchResults(obj) { if ($("#twitter-list")) { $("#twitter-list").remove(); } $("#twitter").append(" "); var user, text; var test = obj.results.length; for (var i=0; i<test; i++) { if(i % 2) { theClass="even"; } else { theClass="odd" }; text = obj.results[i].text; text=text.replace(/(http\:\/\/[\S]*)/g," $1 "); $1$2$3 ") user = obj.results[i].from_user; $("#twitter-list").append(" " + user + ": " + text +" "+ obj.results[i].created_at +"GMT " ) }; jQuery

Testing/Debugging Weve come in from the wilderness. Back in my day we had to walk both directions, uphill in the snow. console.log(rocks)

FireBug (f12) Console

FireBug DOM Inspector

FireBug Breakpoints

Safari (ctrl +alt + i)

Internet Explorer 8 (f12)

Chrome (ctrl + shft + j)

Advanced Tools? Unit Testing? Testing Automation?

Any Questions?

More Info scripts-without-blocking/ -scripts-without-blocking/