Downloaded 19 times
![> 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)
Uploaded byThomas Fuchs
Prototype & Scriptaculous
The document discusses the Prototype JavaScript framework and its features, including DOM manipulation, language extensions, and utility functions to simplify coding. It provides examples of methods such as 'add', 'redrum', and 'morph' for string manipulation and CSS adjustments. Additionally, it highlights the benefits of using frameworks to handle cross-browser differences and improve code readability.
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.
- 4. . prototype . Donnerstag, 19. November 2009
- 5. . prototype . Donnerstag, 19. November 2009
- 6. . prototype . Developers’ best friend Donnerstag, 19. November 2009
- 7.
- 8.
- 9.
- 10.
- 11.
- 12. function add(a,b){ return a+b; } > add(1,2); 3 > add('hello ','world'); 'hello world' Donnerstag, 19. November 2009
- 13.
- 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.
- 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 newarray 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.
- 35.
- 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 pelements 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.
- 44.
- 45.
- 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.
- 51.
- 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.
- 57. √ Visual effects for HTML elements √ Drag & Drop √ Audio playback √ Ajax-enabled controls Donnerstag, 19. November 2009
- 58.
- 59. ABC ESPN Nasa Amazon Gucci NBC Apple IKEA Nokia CNN last.fm Palm Donnerstag, 19. November 2009
- 60.
- 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