javascript 101: adding interactivity to your site with the worlds most popular programming language*...

JavaScript 101: Adding Interactivity to Your Site With the World’s Most Popular Programming Language*

Rob Larsen1.28.2010

htmlcssjavascript.com | drunkenfist.com@robreact

htmlcssjavascript.com/downloads/javascript.ppt

*Douglas Crockford http://javascript.crockford.com/popular.html

Who is this Guy Anyway?

• 12+ years HTML/CSS/JavaScript. My day job since 1999.

• 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

We’re 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 we’ll 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”I’m working on a series of blog posts. The hope is to document the way I go about making web sites. Tonight we’re 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

Tonight’s Scope (accessibility, findability, usability, etc)

Starter Assets

• http://code.google.com/p/starter-assets/

http://code.google.com/p/starter-assets/

http://code.google.com/p/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;})

Let’s Do This

Let’s get the script on the page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Let's Make a Web Page</title><link href="_assets/styles/screen.css" rel="stylesheet" type="text/css"></head><body><div id="container"> <div id="header"> <h1>Let's Make a Web Page </h1> </div> <div id="main"> <div id="sidebar"> <ul> <li><a href="http://twitter.com/" id="make-it-so">Show Tweets</a></li> </ul> </div> <div id="ads">This is an ad</div> <div id="content"> <h1>H1 Header for topics Lorem Ipsum Dolor Sit Amet, Consector Adipiscing </h1> <div id="twitter">  </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat

ut turpis. <a href="#"><a> Link treatment urna nibh</a>, viverra non, semper suscipit, posuere a, pede. <abbr title="ABBR"><abbr></abbr> or <!—snip

</div> </div> <div id="footer">Released Under the The MIT License. Copyright (c) 2010 Rob Larsen</div></div><script type="text/javascript" src="_assets/scripts/demo.js"></script></body></html>

Your own script

Let’s get the script on the page



</div> </div> <div id="footer">Released Under the The MIT License. Copyright (c) 2010 Rob Larsen</div></div><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script><script type="text/javascript" src="_assets/scripts/demo.js"></script></body></html>

jQuery

What’s 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://developer.yahoo.com/performance/rules.html#js_bottom

http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html#sec8.1.4

While The Previous is Good, It Can Be Made Better



</div> </div> <div id="footer">Released Under the The MIT License. Copyright (c) 2010 Rob Larsen</div></div><script type="text/javascript" src=“http://cdn.example.com/_assets/scripts/demo.min.0001.js"></script></body></html>

One scripts file. Served off site CDN or other non-cookied domain. Minified and gzipped.

Why’s 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

http://developer.yahoo.com/yui/articles/hosting/

 <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/yuiloader-dom-event/yuiloader-dom-event.js&2.8.0r4/build/selector/selector-min.js&2.8.0r4/build/event-delegate/event-delegate-min.js&2.8.0r4/build/event-mouseenter/event-mouseenter-min.js&2.8.0r4/build/element/element-min.js&2.8.0r4/build/element-delegate/element-delegate-min.js&2.8.0r4/build/event-simulate/event-simulate-min.js&2.8.0r4/build/cookie/cookie-min.js&2.8.0r4/build/storage/storage-min.js"></script>

http://developer.yahoo.com/yui/articles/hosting/

Minified?

http://yui.2clics.net/

function writeTwitterSearchResults(obj) {if ($("#twitter-list")) {

$("#twitter-list").remove();}$("#twitter").append("<ul id='twitter-list'></ul>");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,"<a href='$1'>$1</a> ");

console.log(text);text=text.replace(/(@)([\S]*)(\s)/g,"<a href='http://twitter.com/$2'>$1$2$3</a>

")console.log(text);user = obj.results[i].from_user;$("#twitter-list").append("<li style='background-

image:url("+obj.results[i].profile_image_url+")' class='"+theClass+"' ><a href='http://twitter.com/" + user + "'>" + user + ":</a> " + text +"<span class='time'>"+ obj.results[i].created_at +"GMT</span></li>" )

};};

Minified?

http://yui.2clics.net/

function writeTwitterSearchResults(obj){if($("#twitter-list")){$("#twitter-list").remove();}$("#twitter").append("<ul id='twitter-list'></ul>");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,"<a href='$1'>$1</a> ");console.log(text);text=text.replace(/(@)([\S]*)(\s)/g,"<a href='http://twitter.com/$2'>$1$2$3</a> ");console.log(text);user=obj.results[i].from_user;$("#twitter-list").append("<li style='background-image:url("+obj.results[i].profile_image_url+")' class='"+theClass+"' ><a href='http://twitter.com/"+user+"'>"+user+":</a> "+text+"<span class='time'>"+obj.results[i].created_at+"GMT</span></li>");}}

//14% savings. Gzip is much more importnt.

Let’s 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

Initializefunction 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)

It’s the framework within which we interact with stuff on the page.In this sense, I’m using the DOM to refer to all of the markup (content) on the page. Once that’s 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

Let’s 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


if(i % 2) { twitterLI.className="even";


text=text.replace(/(http\:\/\/[\S]*)/g,"<a href='$1'>$1</a> ");text=text.replace(/(@)([\S]*)(\s)/g,"<a

href='http://twitter.com/$2'>$1$2$3</a> ")user = obj.results[i].from_user;

twitterLI.style.backgroundImage="url('"+obj.results[i].profile_image_url+"')"twitterA.href= "http://twitter.com/"+user;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

Testing/Debugging

We’ve 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• http://javascript.crockford.com/• http://ejohn.org/apps/learn/• http://api.jquery.com/• http://www.quirksmode.org/• http://www.nczonline.net/• http://www.alistapart.com/articles/

behavioralseparation• http://yui.2clics.net/• http://www.stevesouders.com/blog/2009/04/27/

loading-scripts-without-blocking/• http://developer.yahoo.com/performance/• http://developer.yahoo.com/yui/articles/hosting/

http://javascript.crockford.com/

http://ejohn.org/apps/learn/

javascript 101: adding interactivity to your site with the worlds most popular programming language*...

Documents

web page

javascript javascript

sample page slide

webex slide

progress slide

comyuiarticleshosting

wikipedia slide

compstarterassets slide