Slide 1

Slide 1 text

jQuery write less, do more. Alessandro Fazzi @Pioneer_Skies Torino Coding Society 26 maggio 2014 Filippo Gangi Dino @mukkoo

Slide 2

Slide 2 text

Jquery?

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Javascript is boring jQuery is funny!

Slide 5

Slide 5 text

History

Slide 6

Slide 6 text

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”

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Ben Nolan (Behaviour creator) “Jquery is like behaviour that has been sent back from the future by a secret fucking government lab”

Slide 11

Slide 11 text

BarCampNYC january 2006 first jQuery release “ this code revolutionizes the way you can get Javascript to interact with HTML”

Slide 12

Slide 12 text

aRound jQuery wOrld

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Sizzle jQuery galaxy

Slide 15

Slide 15 text

Learn jQuery in 30 days 1 week 1 hour 5 minutes!

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

These methods get and set CSS-related properties of elements. 2. CSS .addClass() .css() .height() .toggleClass() .width() .scrollLeft() .scrollTop()

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Add animation to a web page. 4. Effects .animate() .fadeIn() .slideToggle() .show() .toggle() .delay()

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

...and now LIVE CODING LIVE MAGIC github.com/pioneerskies/tcs_jquery_excercises