prototype & scriptaculous

Prototypescript.aculo.us

Thomas Fuchs

Donnerstag, 19. November 2009

@thomasfuchs on Twitterhttp://mir.aculo.us

Donnerstag, 19. November 2009

Donnerstag, 19. November 2009

.prototype

.

Donnerstag, 19. November 2009

.prototype

.

Donnerstag, 19. November 2009

.prototype

.

Developers’ best friend

Donnerstag, 19. November 2009

JavaScriptDonnerstag, 19. November 2009

JavaScript

Donnerstag, 19. November 2009

Donnerstag, 19. November 2009

Donnerstag, 19. November 2009

?

Donnerstag, 19. November 2009

function  add(a,b){  return  a+b;  }

>  add(1,2);3

>  add('hello  ','world');'hello  world'

Donnerstag, 19. November 2009

Donnerstag, 19. November 2009

.prototype

.

Donnerstag, 19. November 2009

var  mrString  =  "All  work  and  no  play  makes  Mr.  String  a  dull  boy"

Donnerstag, 19. November 2009

"All  work  and  no  play  makes  Mr.  String  a  dull  boy".redrum();

Donnerstag, 19. November 2009

"All  work  and  no  play  makes  Mr.  String  a  dull  boy".redrum();

//  -­‐-­‐>  All  work  and  no  play  makes  Mr.  String  a  dull  boy  All  work  and  no  play  makes  Mr.  String  a  dull  boy  All  work  and  no  play  makes  Mr.  String  a  dull  boy  All  work  and  no  play  makes  Mr.  String  a  dull  boy  All  work  and  no  play  makes  Mr.  String  a  dull  boy

Donnerstag, 19. November 2009

"All  work  and  no  play  makes  Mr.  String  a  dull  boy".redrum();

//  -­‐-­‐>  All  work  and  no  play  makes  Mr.  String  a  dull  boy  All  work  and  no  play  makes  Mr.  String  a  dull  boy  All  work  and  no  play  makes  Mr.  String  a  dull  boy  All  work  and  no  play  makes  Mr.  String  a  dull  boy  All  work  and  no  play  makes  Mr.  String  a  dull  boy

Donnerstag, 19. November 2009

Donnerstag, 19. November 2009

All  work  and  no  play  makes  Mr.  String  a  dull  boy  All  work  and  no  play  makes  Mr.  String  a  dull  boy  All  work  and  no  play  makes  Mr.  String  a  dull  boy  All  work  and  no  play  makes  Mr.  String  a  dull  boy  All  work  and  no  play  makes  Mr.  String  a  dull  boyAll  work  and  no  play  makes  Mr.  String  a  dull  boy  All  work  and  no  play  makes  Mr.  String  a  dull  boy  All  work  and  no  play  makes  Mr.  String  a  dull  boy  All  work  and  no  play  makes  Mr.  String  a  dull  boy  All  work  and  no  play  makes  Mr.  String  a  dull  boy  All  work  and  no  play  makes  Mr.  String  a  dull  boy  All  work  and  no  play  makes  Mr.  String  a  dull  boy  All  work  and  no  play  makes  Mr.  String  a  dull  boy  All  work  and  no  play  makes  Mr.  String  a  dull  boy  All  work  and  no  play  makes  Mr.  String  a  dull  boy

Donnerstag, 19. November 2009

"All  work  and  no  play  makes  Mr.  String  a  dull  boy".redrum();

String.prototype.redrum  =  function(){    var  i  =  5,  str  ='';    while  (i-­‐-­‐)  {  str  +=  this  +'  ';  }    return  str;}

Donnerstag, 19. November 2009

String.prototype.redrum  =  function(){    var  i  =  5,  str  ='';    while  (i-­‐-­‐)  {  str  +=  this  +'  ';  }    return  str;}

Donnerstag, 19. November 2009

String.prototype.redrum  =  function(){    var  i  =  5,  str  ='';    while  (i-­‐-­‐)  {  str  +=  this  +'  ';  }    return  str;}

Donnerstag, 19. November 2009

String.prototype.redrum  =  function(){    var  i  =  5,  str  ='';    while  (i-­‐-­‐)  {  str  +=  this  +'  ';  }    return  str;}

//  -­‐-­‐>  All  work  and  no  play  makes  Mr.  String  a  dull  boy  All  work  and  no  play  makes  Mr.  String  a  dull  boy  All  work  and  no  play  makes  Mr.  String  a  dull  boy  All  work  and  no  play  makes  Mr.  String  a  dull  boy  All  work  and  no  play  makes  Mr.  String  a  dull  boy

Donnerstag, 19. November 2009

>  "Hello  <b>World</b>".stripTags();"Hello  World"

Donnerstag, 19. November 2009

>  document.forms[0]//  <form  action="/time/entries"  id="new_entry"  method="post">�

>  document.forms[0].serialize()"entry%5Bdate%5D=2009-­‐11-­‐16&entry%5Bminutes%5D=1"

Donnerstag, 19. November 2009

['Austria','Europe','World'].map(function(location){    return  'Hello  '+location+'!';}).sortBy(Math.random).invoke('toUpperCase').join('  ');

"HELLO  WORLD!  HELLO  AUSTRIA!  HELLO  EUROPE!"

Enumerables/Arrays

Donnerstag, 19. November 2009

['Austria','Europe','World'].map(function(location){    return  'Hello  '+location+'!';}).sortBy(Math.random).invoke('toUpperCase').join('  ');

"HELLO  WORLD!  HELLO  AUSTRIA!  HELLO  EUROPE!"

Array#mapreturns a new array

Donnerstag, 19. November 2009

['Austria','Europe','World'].map(function(location){    return  'Hello  '+location+'!';}).sortBy(Math.random).invoke('toUpperCase').join('  ');

"HELLO  WORLD!  HELLO  AUSTRIA!  HELLO  EUROPE!"

Array#sortBy

sorts by the result order given by

calling a functionreference

Math.random is a standard

JavaScript functions returns

number [0..1]

Donnerstag, 19. November 2009

['Austria','Europe','World'].map(function(location){    return  'Hello  '+location+'!';}).sortBy(Math.random).invoke('toUpperCase').join('  ');

"HELLO  WORLD!  HELLO  AUSTRIA!  HELLO  EUROPE!"

Array#invoke

call a method oneach item

Donnerstag, 19. November 2009

['Austria','Europe','World'].map(function(location){    return  'Hello  '+location+'!';}).sortBy(Math.random).invoke('toUpperCase').join('  ');

"HELLO  WORLD!  HELLO  AUSTRIA!  HELLO  EUROPE!"

Array#join

join items in a string (standard

JavaScript)

Donnerstag, 19. November 2009

['Austria','Europe','World'].map(function(location){    return  'Hello  '+location+'!';}).sortBy(Math.random).invoke('toUpperCase').join('  ');

No need for loop variables√Much higher readability than“classic” statement-based iteration

√

Object-oriented and extensible√Shorter code (chaining)√

Donnerstag, 19. November 2009

DOM API is clunky√

Utility functions√“Don’t repeat yourself”√

Cross-browser differences√

Why Frameworks?

Donnerstag, 19. November 2009

Source: http://www.pollux.franken.de/KNF/

Donnerstag, 19. November 2009

Source: http://www.pollux.franken.de/KNF/

Donnerstag, 19. November 2009

//  DOM  APIdocument.getElementById('some_element').style.display  =  'none';

Donnerstag, 19. November 2009

//  DOM  APIdocument.getElementById('some_element').style.display  =  'none';

//  Prototype$('some_element').hide();

Donnerstag, 19. November 2009

“hide all p elements that have a ‘important’ CSS class”

$$('p.important').invoke('hide');

CSS selector

Donnerstag, 19. November 2009

same with Prototype

function  luhn_check(number)  {    var  number=number.replace(/\D/g,  '');    var  number_length=number.length;    var  parity=number_length  %  2;

   var  total=0;    for  (i=0;  i  <  number_length;  i++)  {        var  digit=number.charAt(i);        if  (i  %  2  ==  parity)  {            digit=digit  *  2;            if  (digit  >  9)  {                digit=digit  -­‐  9;            }        }        total  =  total  +  parseInt(digit);    }      if  (total  %  10  ==  0)  {        return  true;    }  else  {        return  false;    }}

verifyLuhn10:  function(number){    return  ($A(CreditCard.strip(number)).reverse().inject(0,function(a,n,index){        return  a  +  $A((parseInt(n)  *  [1,2][index%2]).toString())        .inject(0,  function(b,o){  return  b  +  parseInt(o)  })  })  %  10  ==  0);}

pure JavaScriptimplementation

Donnerstag, 19. November 2009

new  Test.Unit.Runner({    testClassCreate:  function()  {        this.assert(Object.isFunction(Animal),  'Animal  is  not  a  constructor');        this.assertEnumEqual([Cat,  Mouse,  Dog,  Ox],  Animal.subclasses);        Animal.subclasses.each(function(subclass)  {            this.assertEqual(Animal,  subclass.superclass);        },  this);

       var  Bird  =  Class.create(Animal);        this.assertEqual(Bird,  Animal.subclasses.last());        this.assertEnumEqual(Object.keys(new  Animal).sort(),              Object.keys(new  Bird).without('constructor').sort());    },

   testClassInstantiation:  function()  {        var  pet  =  new  Animal("Nibbles");        this.assertEqual("Nibbles",  pet.name,  "property  not  initialized");        this.assertEqual('Nibbles:  Hi!',  pet.say('Hi!'));        this.assertEqual(Animal,  pet.constructor,  "bad  constructor  reference");        this.assertUndefined(pet.superclass);

       var  Empty  =  Class.create();        this.assert('object',  typeof  new  Empty);    },

Donnerstag, 19. November 2009

   /**        *    Element#morph(@element,  style[,  options])  -­‐>  element      *      *    Dynamically  adjust  an  element's  CSS  styles  to  the  CSS  properties  given      *    in  the  `style`  argument.        *          *    This  method  is  the  preferred  way  to  invoke  CSS-­‐based  effects:      *      *            $('element_id').morph('width:500px');      *            $('element_id').morph('width:500px',  'slow');      *            $('element_id').morph('width:500px',  function(){  alert('finished!');  });      *            $('element_id').morph('width:500px',  2);  //  duration  2  seconds      *          *    Complex  options  can  be  specified  with  an  Object  literal:      *      *            $('element_id').morph('width:500px;height:500px',  {      *                duration:  4,      *                transition:  'linear',      *                delay:  .5,        *                propertyTransitions:  {      *                    width:  'mirror',  height:  'easeInOutCirc'      *                },      *                after:  function(){  alert('finished');    }      *            });      *      *    Morphs  can  be  chained:      *      *            //  the  height  morph  will  be  executed  immediately  following      *            //  the  width  morph      *            $('element_id').morph('width:500px').morph('height:500px');      *      *    By  default,  `morph`  will  create  a  new  [[S2.FX.Queue]]  for  the      *    element  if  there  isn't  on  already,  and  use  this  queue  for  queueing      *    up  chained  morphs.  To  prevent  a  morph  from  queuing  at  the  end,      *    use  the  `position:  'parallel'`  option.      *      *            //  the  height  morph  will  be  executed  at  the  same  time  as  the  width  morph      *            $('element_id').morph('width:500px').morph('height:500px',{  position:  'parallel'  });      *      *    See  also  [[S2.FX.Morph]].    **/

Donnerstag, 19. November 2009

.prototype

.

Language extensions√

Syntactic sugar√Reduce code size/LOC√

DOM manipulation√

Infrastructure for JavaScript apps√

Donnerstag, 19. November 2009

Donnerstag, 19. November 2009

Donnerstag, 19. November 2009

Donnerstag, 19. November 2009

$('element').morph(    'left:150px;  top:230px',  {          duration:  1.2      });

Donnerstag, 19. November 2009

(-Math.cos(pos*Math.PI)/2) + 0.5

t

pos

Donnerstag, 19. November 2009

(-Math.cos(pos*Math.PI)/2) + 0.5

t

pos

Donnerstag, 19. November 2009

(-Math.cos(pos*Math.PI)/2) + 0.5

accelerationat start

decelerationat end

Donnerstag, 19. November 2009

Donnerstag, 19. November 2009

Donnerstag, 19. November 2009

A “bounce” easing

t

pos

Donnerstag, 19. November 2009

A “bounce” easing

t

pos

Donnerstag, 19. November 2009

A “bounce” easing

hard velocity changes

quadratic“gravity”

Donnerstag, 19. November 2009

A “bounce” easing

 function  bounce(pos)  {        if  (pos  <  (1/2.75))  {                return  (7.5625*pos*pos);        }  else  if  (pos  <  (2/2.75))  {                return  (7.5625*(pos-­‐=(1.5/2.75))*pos  +  .75);        }  else  if  (pos  <  (2.5/2.75))  {                return  (7.5625*(pos-­‐=(2.25/2.75))*pos  +  .9375);        }  else  {                return  (7.5625*(pos-­‐=(2.625/2.75))*pos  +  .984375);        }    }

Donnerstag, 19. November 2009

Donnerstag, 19. November 2009

Visual effects for HTML elements√

Audio playback√Ajax-enabled controls√

Drag & Drop√

Donnerstag, 19. November 2009

Donnerstag, 19. November 2009

ABC

Amazon

Apple

CNN

ESPN

Gucci

IKEA

last.fm

Nasa

NBC

Nokia

Palm

Donnerstag, 19. November 2009

Donnerstag, 19. November 2009

Palm webOS

Donnerstag, 19. November 2009

What’s next?

http://scripty2.com/demos/touch/

Donnerstag, 19. November 2009

Q&Ahttp://prototypejs.orghttp://script.aculo.us

Donnerstag, 19. November 2009