Thomas Fuchs




                                  Prototype
                                script.aculo.us



Donnerstag...
@thomasfuchs on Twitter
         http://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. Nov...
JavaScript
Donnerstag, 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'



Donners...
Donnerstag, 19. November 2009
.
                                prototype
                                    .

Donnerstag, 19. November 2009
var  mrString  =  "All  work  and  
             no  play  makes  Mr.  String  a  
             dull  boy"




Donnerstag,...
"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();

                 //  -­‐-­‐>  Al...
"All  work  and  no  play  makes  Mr.  
                 String  a  dull  boy".redrum();

                 //  -­‐-­‐>  Al...
Donnerstag, 19. November 2009
All  work  and  no  play  makes  Mr.  String  a  
             dull  boy  All  work  and  no  play  makes  Mr.  
         ...
"All  work  and  no  play  makes  Mr.  String  a  dull  
           boy".redrum();




             String.prototype.redru...
String.prototype.redrum  =  function(){
                    var  i  =  5,  str  ='';
                    while  (i-­‐-­‐) ...
String.prototype.redrum  =  function(){
                    var  i  =  5,  str  ='';
                    while  (i-­‐-­‐) ...
String.prototype.redrum  =  function(){
                    var  i  =  5,  str  ='';
                    while  (i-­‐-­‐) ...
>  "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].ser...
Enumerables/Arrays

      ['Austria','Europe','World'].map(function(location){
          return  'Hello  '+location+'!';
 ...
returns a new array
                                   Array#map

      ['Austria','Europe','World'].map(function(location...
Math.random is a
                          standard
                         JavaScript
                      functions re...
['Austria','Europe','World'].map(function(location){
          return  'Hello  '+location+'!';
      }).sortBy(Math.random...
['Austria','Europe','World'].map(function(location){
          return  'Hello  '+location+'!';
      }).sortBy(Math.random...
['Austria','Europe','World'].map(function(location){
          return  'Hello  '+location+'!';
      }).sortBy(Math.random...
Why Frameworks?

                                √   DOM API is clunky
                                √   Cross-browser d...
Source: http://www.pollux.franken.de/KNF/

Donnerstag, 19. November 2009
Source: http://www.pollux.franken.de/KNF/

Donnerstag, 19. November 2009
//  DOM  API
           document.getElementById('some_element').style.display  =  'none';




Donnerstag, 19. November 2009
//  DOM  API
           document.getElementById('some_element').style.display  =  'none';

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



                          $$('p.important'...
function  luhn_check(number)  {                 verifyLuhn10:  function(number){
         var  number=number.replace(/D/g,...
new  Test.Unit.Runner({
     testClassCreate:  function()  {
         this.assert(Object.isFunction(Animal),  'Animal  is ...
   /**  
          *    Element#morph(@element,  style[,  options])  -­‐>  element
          *
          *    Dynamically ...
.
                                      prototype
                                          .
                        √   ...
Donnerstag, 19. November 2009
Donnerstag, 19. November 2009
Donnerstag, 19. November 2009
$('element').morph(
               'left:150px;  top:230px',  {  
                   duration:  1.2  
               }
   ...
(-Math.cos(pos*Math.PI)/2) + 0.5




                                pos
                                      t


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




                                pos
                                      t


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

                                               deceleration
                            ...
Donnerstag, 19. November 2009
Donnerstag, 19. November 2009
A “bounce” easing




      pos
                                t


Donnerstag, 19. November 2009
A “bounce” easing




      pos
                                t


Donnerstag, 19. November 2009
A “bounce” easing

                                                hard velocity
                                         ...
A “bounce” easing


               function  bounce(pos)  {
                     if  (pos  <  (1/2.75))  {
               ...
Donnerstag, 19. November 2009
√       Visual effects for HTML elements
                        √       Drag & Drop
                        √       Audio...
Donnerstag, 19. November 2009
ABC         ESPN      Nasa
            Amazon              Gucci     NBC
                 Apple          IKEA      Nokia
 ...
Donnerstag, 19. November 2009
Palm webOS

Donnerstag, 19. November 2009
What’s next?




                     http://scripty2.com/demos/touch/
Donnerstag, 19. November 2009
Q&A
                                http://prototypejs.org
                                 http://script.aculo.us




Don...
Upcoming SlideShare
Loading in...5
×

Prototype & Scriptaculous

1,569

Published on

Short overview talk on what Prototype & script.aculo.us do, given at the Technical University of Vienna on November 16, 2009.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,569
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Prototype & Scriptaculous

  1. 1. Thomas Fuchs Prototype script.aculo.us Donnerstag, 19. November 2009
  2. 2. @thomasfuchs on Twitter http://mir.aculo.us Donnerstag, 19. November 2009
  3. 3. Donnerstag, 19. November 2009
  4. 4. . prototype . Donnerstag, 19. November 2009
  5. 5. . prototype . Donnerstag, 19. November 2009
  6. 6. . prototype . Developers’ best friend Donnerstag, 19. November 2009
  7. 7. JavaScript Donnerstag, 19. November 2009
  8. 8. JavaScript Donnerstag, 19. November 2009
  9. 9. Donnerstag, 19. November 2009
  10. 10. Donnerstag, 19. November 2009
  11. 11. ? Donnerstag, 19. November 2009
  12. 12. function  add(a,b){  return  a+b;  } >  add(1,2); 3 >  add('hello  ','world'); 'hello  world' Donnerstag, 19. November 2009
  13. 13. Donnerstag, 19. November 2009
  14. 14. . prototype . Donnerstag, 19. November 2009
  15. 15. var  mrString  =  "All  work  and   no  play  makes  Mr.  String  a   dull  boy" Donnerstag, 19. November 2009
  16. 16. "All  work  and  no  play  makes  Mr.   String  a  dull  boy".redrum(); Donnerstag, 19. November 2009
  17. 17. "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
  18. 18. "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
  19. 19. Donnerstag, 19. November 2009
  20. 20. 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  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
  21. 21. "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
  22. 22. String.prototype.redrum  =  function(){    var  i  =  5,  str  ='';    while  (i-­‐-­‐)  {  str  +=  this  +'  ';  }    return  str; } Donnerstag, 19. November 2009
  23. 23. String.prototype.redrum  =  function(){    var  i  =  5,  str  ='';    while  (i-­‐-­‐)  {  str  +=  this  +'  ';  }    return  str; } Donnerstag, 19. November 2009
  24. 24. 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
  25. 25. >  "Hello  <b>World</b>".stripTags(); "Hello  World" Donnerstag, 19. November 2009
  26. 26. >  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
  27. 27. Enumerables/Arrays ['Austria','Europe','World'].map(function(location){    return  'Hello  '+location+'!'; }).sortBy(Math.random).invoke('toUpperCase').join('  '); "HELLO  WORLD!  HELLO  AUSTRIA!  HELLO  EUROPE!" Donnerstag, 19. November 2009
  28. 28. returns a new array Array#map ['Austria','Europe','World'].map(function(location){    return  'Hello  '+location+'!'; }).sortBy(Math.random).invoke('toUpperCase').join('  '); "HELLO  WORLD!  HELLO  AUSTRIA!  HELLO  EUROPE!" Donnerstag, 19. November 2009
  29. 29. Math.random is a standard JavaScript functions returns number [0..1] ['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 function reference Donnerstag, 19. November 2009
  30. 30. ['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 on each item Donnerstag, 19. November 2009
  31. 31. ['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
  32. 32. ['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
  33. 33. Why Frameworks? √ DOM API is clunky √ Cross-browser differences √ Utility functions √ “Don’t repeat yourself” Donnerstag, 19. November 2009
  34. 34. Source: http://www.pollux.franken.de/KNF/ Donnerstag, 19. November 2009
  35. 35. Source: http://www.pollux.franken.de/KNF/ Donnerstag, 19. November 2009
  36. 36. //  DOM  API document.getElementById('some_element').style.display  =  'none'; Donnerstag, 19. November 2009
  37. 37. //  DOM  API document.getElementById('some_element').style.display  =  'none'; //  Prototype $('some_element').hide(); Donnerstag, 19. November 2009
  38. 38. “hide all p elements that have a ‘important’ CSS class” $$('p.important').invoke('hide'); CSS selector Donnerstag, 19. November 2009
  39. 39. function  luhn_check(number)  { verifyLuhn10:  function(number){    var  number=number.replace(/D/g,  '');    return  ($A(CreditCard.strip(number)).reverse().inje    var  number_length=number.length;        return  a  +  $A((parseInt(n)  *  [1,2][index%2]).toSt    var  parity=number_length  %  2;        .inject(0,  function(b,o){  return  b  +  parseInt(o)   }    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; same with            } Prototype        }        total  =  total  +  parseInt(digit);    }      if  (total  %  10  ==  0)  { pure JavaScript        return  true;    }  else  { implementation        return  false;    } } Donnerstag, 19. November 2009
  40. 40. 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
  41. 41.    /**        *    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, Donnerstag, 19. November 2009
  42. 42. . prototype . √ Language extensions √ DOM manipulation √ Syntactic sugar √ Reduce code size/LOC √ Infrastructure for JavaScript apps Donnerstag, 19. November 2009
  43. 43. Donnerstag, 19. November 2009
  44. 44. Donnerstag, 19. November 2009
  45. 45. Donnerstag, 19. November 2009
  46. 46. $('element').morph(    'left:150px;  top:230px',  {          duration:  1.2      } ); Donnerstag, 19. November 2009
  47. 47. (-Math.cos(pos*Math.PI)/2) + 0.5 pos t Donnerstag, 19. November 2009
  48. 48. (-Math.cos(pos*Math.PI)/2) + 0.5 pos t Donnerstag, 19. November 2009
  49. 49. (-Math.cos(pos*Math.PI)/2) + 0.5 deceleration at end acceleration at start Donnerstag, 19. November 2009
  50. 50. Donnerstag, 19. November 2009
  51. 51. Donnerstag, 19. November 2009
  52. 52. A “bounce” easing pos t Donnerstag, 19. November 2009
  53. 53. A “bounce” easing pos t Donnerstag, 19. November 2009
  54. 54. A “bounce” easing hard velocity changes quadratic “gravity” Donnerstag, 19. November 2009
  55. 55. 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
  56. 56. Donnerstag, 19. November 2009
  57. 57. √ Visual effects for HTML elements √ Drag & Drop √ Audio playback √ Ajax-enabled controls Donnerstag, 19. November 2009
  58. 58. Donnerstag, 19. November 2009
  59. 59. ABC ESPN Nasa Amazon Gucci NBC Apple IKEA Nokia CNN last.fm Palm Donnerstag, 19. November 2009
  60. 60. Donnerstag, 19. November 2009
  61. 61. Palm webOS Donnerstag, 19. November 2009
  62. 62. What’s next? http://scripty2.com/demos/touch/ Donnerstag, 19. November 2009
  63. 63. Q&A http://prototypejs.org http://script.aculo.us Donnerstag, 19. November 2009
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×