Your SlideShare is downloading. ×
Prototype  & Scriptaculous
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Prototype & Scriptaculous

1,497
views

Published on

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

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,497
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Thomas Fuchs Prototype script.aculo.us Donnerstag, 19. November 2009
  • 2. @thomasfuchs on Twitter http://mir.aculo.us Donnerstag, 19. November 2009
  • 3. Donnerstag, 19. November 2009
  • 4. . prototype . Donnerstag, 19. November 2009
  • 5. . prototype . Donnerstag, 19. November 2009
  • 6. . prototype . Developers’ best friend Donnerstag, 19. November 2009
  • 7. JavaScript Donnerstag, 19. November 2009
  • 8. JavaScript Donnerstag, 19. November 2009
  • 9. Donnerstag, 19. November 2009
  • 10. Donnerstag, 19. November 2009
  • 11. ? Donnerstag, 19. November 2009
  • 12. function  add(a,b){  return  a+b;  } >  add(1,2); 3 >  add('hello  ','world'); 'hello  world' Donnerstag, 19. November 2009
  • 13. Donnerstag, 19. November 2009
  • 14. . prototype . Donnerstag, 19. November 2009
  • 15. var  mrString  =  "All  work  and   no  play  makes  Mr.  String  a   dull  boy" Donnerstag, 19. November 2009
  • 16. "All  work  and  no  play  makes  Mr.   String  a  dull  boy".redrum(); Donnerstag, 19. November 2009
  • 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. "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. Donnerstag, 19. November 2009
  • 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. "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. String.prototype.redrum  =  function(){    var  i  =  5,  str  ='';    while  (i-­‐-­‐)  {  str  +=  this  +'  ';  }    return  str; } Donnerstag, 19. November 2009
  • 23. String.prototype.redrum  =  function(){    var  i  =  5,  str  ='';    while  (i-­‐-­‐)  {  str  +=  this  +'  ';  }    return  str; } Donnerstag, 19. November 2009
  • 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. >  "Hello  <b>World</b>".stripTags(); "Hello  World" Donnerstag, 19. November 2009
  • 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. 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. 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. 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. ['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. ['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. ['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. Why Frameworks? √ DOM API is clunky √ Cross-browser differences √ Utility functions √ “Don’t repeat yourself” Donnerstag, 19. November 2009
  • 34. Source: http://www.pollux.franken.de/KNF/ Donnerstag, 19. November 2009
  • 35. Source: http://www.pollux.franken.de/KNF/ Donnerstag, 19. November 2009
  • 36. //  DOM  API document.getElementById('some_element').style.display  =  'none'; Donnerstag, 19. November 2009
  • 37. //  DOM  API document.getElementById('some_element').style.display  =  'none'; //  Prototype $('some_element').hide(); Donnerstag, 19. November 2009
  • 38. “hide all p elements that have a ‘important’ CSS class” $$('p.important').invoke('hide'); CSS selector Donnerstag, 19. November 2009
  • 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. 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.    /**        *    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. . prototype . √ Language extensions √ DOM manipulation √ Syntactic sugar √ Reduce code size/LOC √ Infrastructure for JavaScript apps Donnerstag, 19. November 2009
  • 43. Donnerstag, 19. November 2009
  • 44. Donnerstag, 19. November 2009
  • 45. Donnerstag, 19. November 2009
  • 46. $('element').morph(    'left:150px;  top:230px',  {          duration:  1.2      } ); Donnerstag, 19. November 2009
  • 47. (-Math.cos(pos*Math.PI)/2) + 0.5 pos t Donnerstag, 19. November 2009
  • 48. (-Math.cos(pos*Math.PI)/2) + 0.5 pos t Donnerstag, 19. November 2009
  • 49. (-Math.cos(pos*Math.PI)/2) + 0.5 deceleration at end acceleration at start Donnerstag, 19. November 2009
  • 50. Donnerstag, 19. November 2009
  • 51. Donnerstag, 19. November 2009
  • 52. A “bounce” easing pos t Donnerstag, 19. November 2009
  • 53. A “bounce” easing pos t Donnerstag, 19. November 2009
  • 54. A “bounce” easing hard velocity changes quadratic “gravity” Donnerstag, 19. November 2009
  • 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. Donnerstag, 19. November 2009
  • 57. √ Visual effects for HTML elements √ Drag & Drop √ Audio playback √ Ajax-enabled controls Donnerstag, 19. November 2009
  • 58. Donnerstag, 19. November 2009
  • 59. ABC ESPN Nasa Amazon Gucci NBC Apple IKEA Nokia CNN last.fm Palm Donnerstag, 19. November 2009
  • 60. Donnerstag, 19. November 2009
  • 61. Palm webOS Donnerstag, 19. November 2009
  • 62. What’s next? http://scripty2.com/demos/touch/ Donnerstag, 19. November 2009
  • 63. Q&A http://prototypejs.org http://script.aculo.us Donnerstag, 19. November 2009