1 / 136

Front-end Masters day 1

Front-end Masters day 1. pres.learningjquery.com/femasters/. Outline. Philosophy of jQuery and API Walkthrough Dev Tools Bare-bones JavaScript jQuery Selectors and Traversing. DOM Scripting. DOM Scripting. Based on web standards Tests features, not browsers Unobtrusive.

guang
Download Presentation

Front-end Masters day 1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related