Jquery, write less do more

Transcript

1. jQuery write less, do more. Alessandro Fazzi @Pioneer_Skies Torino Coding Society 26 maggio 2014 Filippo Gangi Dino @mukkoo
2. Jquery?
3. Fast, small, and feature-rich JavaScript library HTML document traversal and manipulation, event handling, animation Ajax much simpler with an easy-to-use API Used by over 80% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today. Plugins Cross browser
4. Javascript is boring jQuery is funny!
5. History
6. Created by this man in august 2005 John Resig American developer with a Computer Science degree Working in Japan Author of “Secrets of the JavaScript Ninja”
7. In 2005 was Behaviour (JS Library) “The premise for the library is as follows: Using the power of Pseudo-CSS Selectors, bind your Javascript functions to various HTML elements in the DOM.” “Looking at how Behaviour works, I’ve never been completely happy – it simply seems too tedious and verbose for everyday use.”
8. You can’t do any heirarchical selectors. For example, binding to “#foo bar” and “#foo bar .baz” fall under two completely different statements. It seems as if this could/should be streamlined. The Behaviour object doesn’t provide any sort of binding- enhancers to make attaching to an event (e.g. “click”) easier to do. The resulting Behaviour code is simply too verbose and too ugly – there is an excess of characters/formatting which will probably scare off a casual Javascript programmer.
9. Behaviour Behaviour.register({ '#foo ol li': function(a) { a.title = "List Items!"; a.onclick = function(){alert('Hello!');}; }, '#foo ol li.tmp': function(a) { a.style.color = 'white'; }, '#foo ol li.tmp .foo': function(a) { a.style.background = 'red'; } }); $('#foo ol li') .set('title','List Items!') .bind('click',function(){alert('Hello!');}) .select('.tmp') .style('color','white') .select('.foo') .style('background','red'); jQuery
10. Ben Nolan (Behaviour creator) “Jquery is like behaviour that has been sent back from the future by a secret fucking government lab”
11. BarCampNYC january 2006 first jQuery release “ this code revolutionizes the way you can get Javascript to interact with HTML”
12. aRound jQuery wOrld
13. There are two version already developed by jQuery team: 1 & 2 The main difference between two versions, more than some deprecated functions, is the browser support. Since the v2 first release was removed IE 6-8 support for performance improvement and reduce filesize. Versions
14. Sizzle jQuery galaxy
15. Learn jQuery in 30 days 1 week 1 hour 5 minutes!
16. jQuery offers a powerful set of tools for matching a set of elements in a document. 1. Selectors class selector $(‘.class’) element selector $(‘element’) id selector $(‘#class’) button selectors $(‘:button’), $(‘:checked’)... ...and more. You can use all the CSS selectors
17. These methods get and set CSS-related properties of elements. 2. CSS .addClass() .css() .height() .toggleClass() .width() .scrollLeft() .scrollTop()
18. These methods are used to register behaviors to take effect when the user interacts with the browser. 3. Events .change() .click() .preventDefault() .hover() .mouseenter() .resize() .ready()
19. Add animation to a web page. 4. Effects .animate() .fadeIn() .slideToggle() .show() .toggle() .delay()
20. The functions and methods therein allow us to load data from the server without a browser page refresh. 5. Ajax .ajaxSend() .ajaxComplete() .ajaxError() .ajaxSuccess() .get() .getJSON()
22. ...and now LIVE CODING LIVE MAGIC github.com/pioneerskies/tcs_jquery_excercises