Presentation is loading. Please wait.

Presentation is loading. Please wait.

JavaScript 101: Adding Interactivity to Your Site With the Worlds Most Popular Programming Language* Rob Larsen 1.28.2010 htmlcssjavascript.com | drunkenfist.com.

Similar presentations


Presentation on theme: "JavaScript 101: Adding Interactivity to Your Site With the Worlds Most Popular Programming Language* Rob Larsen 1.28.2010 htmlcssjavascript.com | drunkenfist.com."— Presentation transcript:

1 JavaScript 101: Adding Interactivity to Your Site With the Worlds Most Popular Programming Language* Rob Larsen 1.28.2010 htmlcssjavascript.com | drunkenfist.com @robreact htmlcssjavascript.com/downloads/javascript.ppt *Douglas Crockford http://javascript.crockford.com/popular.html

2 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

3 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

4 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.

5 The Sample Page

6 I Told You This Was a Work in Progress

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

8 Starter Assets http://code.google.com/p/starter-assets/

9 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]

10 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; })

11 Lets Do This

12 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 { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.com/241443/1/slides/slide_11.jpg", "name": "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.", "description": "Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Link treatment urna nibh, viverra non, semper suscipit, posuere a, pede. or

13 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 { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.com/241443/1/slides/slide_12.jpg", "name": "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.", "description": "Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Link treatment urna nibh, viverra non, semper suscipit, posuere a, pede. or

14 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 http://developer.yahoo.com/performance/rules.html#js_bottom

15 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 { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.com/241443/1/slides/slide_14.jpg", "name": "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.", "description": "Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Link treatment urna nibh, viverra non, semper suscipit, posuere a, pede. or

16 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.

17 YUI is Awesome http://developer.yahoo.com/yui/articles/hosting/

18 Minified? http://yui.2clics.net/ function writeTwitterSearchResults(obj) { if ($("#twitter-list")) { $("#twitter-list").remove(); } $("#twitter").append(" "); var user, text; var test = obj.results.length; for (var i=0; i { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.com/241443/1/slides/slide_17.jpg", "name": "Minified.", "description": "http://yui.2clics.net/ function writeTwitterSearchResults(obj) { if ($( #twitter-list )) { $( #twitter-list ).remove(); } $( #twitter ).append( ); var user, text; var test = obj.results.length; for (var i=0; i

19 Minified? http://yui.2clics.net/ 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 ");console.log(text);text=text.replace(/(@)([\S]*)(\s)/g," $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.

20 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?

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

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

23 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

24 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.

25 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

26 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 { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.com/241443/1/slides/slide_25.jpg", "name": "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

27 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 "); text=text.replace(/(@)([\S]*)(\s)/g," $1$2$3 ") 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

28 Lets Take a Quick Look at the Function function results(e) { $.getJSON("http://search.twitter.com/search.json?q=javascript&count=10&callback=?", 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 { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.com/241443/1/slides/slide_27.jpg", "name": "Lets Take a Quick Look at the Function function results(e) { $.getJSON( http://search.twitter.com/search.json?q=javascript&count=10&callback=? , 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

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

30 FireBug (f12) Console

31 FireBug DOM Inspector

32 FireBug Breakpoints

33 Safari (ctrl +alt + i)

34 Internet Explorer 8 (f12)

35 Chrome (ctrl + shft + j)

36 Advanced Tools? Unit Testing? Testing Automation?

37 Any Questions?

38 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://www.stevesouders.com/blog/2009/04/27/loading -scripts-without-blocking/ http://developer.yahoo.com/performance/ http://developer.yahoo.com/yui/articles/hosting/


Download ppt "JavaScript 101: Adding Interactivity to Your Site With the Worlds Most Popular Programming Language* Rob Larsen 1.28.2010 htmlcssjavascript.com | drunkenfist.com."

Similar presentations


Ads by Google