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