Jquery front end masters

Front-end Masters 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 DOM Scripting Books Jeremy Keith Peter-Paul Koch Jonathan Snook domscripting.com quirksmode.org snook.ca Unobtrusive custom.js Behavior Content index.html Presentation style.css 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); } } jQuery Interaction for the Masses 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 Unobtrusive jquery.js custom.js Behavior Content index.html Presentation style.css [...]... else if (document.body) { // other Explorers x = document.body.clientWidth; y = document.body.clientHeight; } jQuery var x = $(window).width(); var y = $(window).height(); Documentation & Support – API: api .jquery. com – Forum: forum .jquery. com – IRC: irc.freenode.net, #jquery – Coming Soon: learn .jquery. com Simple Concept • • Find something Do something Find Something "Select" elements in the document... jsfiddle • http://jsfiddle.net/ jsbin • http://jsbin.com Text Editors • TextMate Mac OS X 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 Text Editors Windows • • • • • E • jQuery Bundle: http://github.com/kswedberg Eclipse / Aptana Notepad++ Visual Studio . Front- end Masters pres.learningjquery.com/femasters/ Outline • Philosophy of jQuery and API Walkthrough • Dev Tools • Bare-bones JavaScript • jQuery Selectors and Traversing DOM. $(window).width(); var y = $(window).height(); jQuery Documentation & Support – API: api .jquery. com – Forum: forum .jquery. com – IRC: irc.freenode.net, #jquery – Coming Soon: learn .jquery. com Simple Concept • Find. document.createTextNode("source");//!? link.appendChild(text); var para = document.createElement("p"); para.className = "attribution"; para.appendChild(link); quotes[i].appendChild(para); } } jQuery Interaction