Front-end Masters day 1

1. Front-end Mastersday 1 • pres.learningjquery.com/femasters/

2. Outline • Philosophy of jQuery and API Walkthrough • Dev Tools • Bare-bones JavaScript • jQuery Selectors and Traversing

3. DOM Scripting

4. DOM Scripting • Based on web standards • Tests features, not browsers • Unobtrusive

5. DOM ScriptingBooks Peter-Paul Koch Jeremy Keith Jonathan Snook domscripting.com quirksmode.org snook.ca

6. index.html style.css custom.js Unobtrusive Behavior Content Presentation

7. DOM Scripting • Verbose if (!document.getElementsByTagName) { return false; } var quotes = document.getElementsByTagName("blockquote"); for (var i=0; i<quotes.length; i++) { var source = quotes[i].getAttribute("cite"); if (source) { var link = document.createElement("a"); link.setAttribute("href",source); var text = document.createTextNode("source");//!? link.appendChild(text); var para = document.createElement("p"); para.className = "attribution"; para.appendChild(link); quotes[i].appendChild(para); } }

8. jQuery • Interaction for the Masses

9. Just a few of jQuery's Benefits • Lets you move quickly from beginner to advanced • Improves developer efficiency • Excellent documentation // pats self on back • Unobtrusive from the ground up • Reduces browser inconsistencies • At its core, a simple concept

10. index.html style.css jquery.js custom.js Unobtrusive Behavior Content Presentation

11. Reduces browser inconsistencies • Example:Get the height of the viewport…

12. DOM Scripting var x,y; if (self.innerHeight) { // all except Explorer x = self.innerWidth; y = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode x = document.documentElement.clientWidth; y = document.documentElement.clientHeight; } else if (document.body) { // other Explorers x = document.body.clientWidth; y = document.body.clientHeight; }

13. jQuery var x = $(window).width(); var y = $(window).height();

14. Documentation &Support • API: api.jquery.com • Forum: forum.jquery.com • IRC: irc.freenode.net, #jquery • Coming Soon: learn.jquery.com

15. Simple Concept • Find something • Do something

16. Find Something • "Select" elements in the document

17. $

18. $( )

19. $('div')

20. $('#id')

21. Do Something

22. Do Something • Let elements "listen" for something to happen … • the document is ready • user does something • another "listener" acts • a certain amount of time elapses

23. Do Something • … and then do something • Manipulate elements • Animate elements • Communicate with the server

24. Dev Tools

25. Dev Tools • up to five browsers to test against • Firefox • Chrome • Internet Explorer • Safari • Opera • developer tools can make your life much easier

26. Browser Support • Modernizr • http://www.modernizr.com • Can I Use? • http://caniuse.com

27. Code Sharing • jsfiddle • http://jsfiddle.net/ • jsbin • http://jsbin.com

28. Text EditorsMac OS X • TextMate • jQuery Bundle:http://github.com/kswedberg • JavaScript Tools Bundle:http://github.com/subtleGradient • Sublime Text 2 • MacVim • Espresso • jQuery Sugar: • code.google.com/p/espresso-jquery-sugar

29. Text EditorsWindows • E • jQuery Bundle:http://github.com/kswedberg • Eclipse / Aptana • Notepad++ • Visual Studio • and so on.

30. Firefox: Firebug • Console • DOM Viewer • JavaScript debugger • Net view • Lots of extensionshttp://getfirebug.com/wiki/index.php/Firebug_Extensions

31. Chrome Developer Tools • In many ways, leapfrogging Firebug • Live debugging, code changing • Lots of "hidden" goodies • http://code.google.com/chrome/devtools/ • Paul Irish screencast: http://youtu.be/nOEw9iiopwI

32. Safari: Developer Menu • Included since Safari 3.1 • Similar to Chrome Dev Tools, but not as advanced • Activate via Preferences > Advanced

33. Internet Explorer 8+: Developer Tools • Much, much better than in previous versions. • Finally includes a console.

34. Internet Explorer <= 7 • CompanionJS:tinyurl.com/companionjs • IETester:tinyurl.com/dbtester • MS Developer Toolbar: tinyurl.com/msdevtoolbar • Script Debugger: tinyurl.com/msscriptdebug • None of them comes even close to the tools available in other browsers

35. Bare-bones JavaScript

36. The Basics • Strings: textual content. wrapped in quotation marks (single or double). • 'hello, my name is Karl' • "hello, my name is Karl" • Numbers: integer (2) or floating point (2.4) or octal (012) or hexadecimal (0xff) or exponent literal (1e+2) • Booleans: true or false In JavaScript, you can work with the following things:

37. The Basics • Arrays: simple lists. indexed starting with 0 • ['Karl', 'Sara', 'Ben', 'Lucia'] • ['Karl', 2, 55] • [ ['Karl', 'Sara'], ['Ben', 'Lucia']] • Objects: lists of key, value pairs • {firstName: 'Karl', lastName: 'Swedberg'} • {parents: ['Karl', 'Sara'], kids: ['Ben', 'Lucia']} In JavaScript, you can work with the following things:

38. Variables • Always declare your variables! • If you don't, they will be placed in the global scope(more about that later). • bad: myName = 'Karl'; • good:var myName = 'Karl'; • still good: var myName = 'Karl'; // more stuff myName = 'Joe';

39. Conditionals and Operators • conditionals: • if, else • switch • operators: • +, -, *, %, ++, -- • >, <, ==, !=, >=, <=, ===, !== • !, &&, ||

40. Loops • Loops iterate through a list of some kind. • A common pattern in JavaScript is to build a list, or collection, and then do something with each item in that list.

41. Loops • CSS uses implicit iteration. • div { color: red; } /* applies to ALL divs */ • JavaScript relies on explicit iteration. Must explicitly loop through each div • jQuery allows for both (because it does the looping for you)

42. Loops • The two most common loops... • for loops — for general-purpose iteration. Used with arrays or array-like objects) • for-in loops — used with arrays or objects (but don't use with arrays) • The other two are... • while loops • do-while loops

43. for Loops • three statements and a code block • initial value • condition • increment for (initial value; condition; increment) { // code block }

44. for Loops • for (vari=0; i<3; i++) { • alert(i+1); • } This is your variable, so it can be anything! (but developers often use “i”)

45. for Loops • var divs =document.getElementsByTagName('div'); • for (var i =0; i < divs.length; i++) { • // do something with each div individually • divs[i].style.color='red'; • }

46. for Loops • var divs =document.getElementsByTagName('div'); • // better to store length in variable first • var divCount = divs.length • for (var i =0; i < divCount; i++) { • // do something with each div individually • divs[i].style.color='red'; • }

47. for Loops • var divs =document.getElementsByTagName('div'); • // can store it directly in the initializer • for (var i=0, divCount=divs.length; i < divCount; i++) { • // do something with each div individually • divs[i].style.color='red'; • }

48. for-in Loops • varfamily= { • dad: 'Karl', • mom: 'Sara', • son: 'Benjamin', • daughter: 'Lucia' • } • for (varpersonin family) { • alert('The '+ person +' is '+ family[person]); • } This is your variable, so it can be anything!

49. while and do-while • var i =1; • while (i <4) { • alert(i); • i++; • } • var j =1; • // code block always executed at least once • do { • alert(j); • j++; • } while (j <4)

50. Functions