Prototype & Scriptaculous
1 like990 views
Short overview talk on what Prototype & script.aculo.us do, given at the Technical University of Vienna on November 16, 2009.
Convert to study guideBETA
Transform any presentation into a summarized study guide, highlighting the most important points and key insights.
![> 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](https://image.slidesharecdn.com/prototypescripty-091119105913-phpapp01/85/Prototype-Scriptaculous-26-320.jpg)
![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](https://image.slidesharecdn.com/prototypescripty-091119105913-phpapp01/85/Prototype-Scriptaculous-27-320.jpg)
![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](https://image.slidesharecdn.com/prototypescripty-091119105913-phpapp01/85/Prototype-Scriptaculous-28-320.jpg)
![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](https://image.slidesharecdn.com/prototypescripty-091119105913-phpapp01/85/Prototype-Scriptaculous-29-320.jpg)
![['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](https://image.slidesharecdn.com/prototypescripty-091119105913-phpapp01/85/Prototype-Scriptaculous-30-320.jpg)
![['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](https://image.slidesharecdn.com/prototypescripty-091119105913-phpapp01/85/Prototype-Scriptaculous-31-320.jpg)
![['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](https://image.slidesharecdn.com/prototypescripty-091119105913-phpapp01/85/Prototype-Scriptaculous-32-320.jpg)
![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](https://image.slidesharecdn.com/prototypescripty-091119105913-phpapp01/85/Prototype-Scriptaculous-39-320.jpg)
![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](https://image.slidesharecdn.com/prototypescripty-091119105913-phpapp01/85/Prototype-Scriptaculous-40-320.jpg)
![/**
* 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](https://image.slidesharecdn.com/prototypescripty-091119105913-phpapp01/85/Prototype-Scriptaculous-41-320.jpg)
Prototype & Scriptaculous
- 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
- 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 Dont 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. Whats next? http://scripty2.com/demos/touch/ Donnerstag, 19. November 2009
- 63. Q&A http://prototypejs.org http://script.aculo.us Donnerstag, 19. November 2009