Prototype & Scriptaculous

Prototypescript.aculo.us

Thomas Fuchs

Donnerstag, 19. November 2009

@thomasfuchs on Twitterhttp://mir.aculo.us


http://twitter.com/thomasfuchs

http://twitter.com/thomasfuchs

http://mir.aculo.us

http://mir.aculo.us

.prototype

.


.prototype

.

Developers’ best friend


JavaScriptDonnerstag, 19. November 2009

JavaScript


?


function add(a,b){ return a+b; }

> add(1,2);3

> add('hello ','world');'hello world'


.prototype

.


var mrString = "All work and no play makes Mr. String a dull boy"


"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


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



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


> "Hello <b>World</b>".stripTags();"Hello World"


> 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"


['Austria','Europe','World'].map(function(location){ return 'Hello '+location+'!';}).sortBy(Math.random).invoke('toUpperCase').join(' ');

"HELLO WORLD! HELLO AUSTRIA! HELLO EUROPE!"

Enumerables/Arrays




Array#mapreturns a new array




Array#sortBy

sorts by the result order given by

calling a functionreference

Math.random is a standard

JavaScript functions returns

number [0..1]




Array#invoke

call a method oneach item




Array#join

join items in a string (standard

JavaScript)



No need for loop variables√Much higher readability than“classic” statement-based iteration

√

Object-oriented and extensible√Shorter code (chaining)√


DOM API is clunky√

Utility functions√“Don’t repeat yourself”√

Cross-browser differences√

Why Frameworks?


Source: http://www.pollux.franken.de/KNF/


http://www.pollux.franken.de/KNF/

http://www.pollux.franken.de/KNF/

// DOM APIdocument.getElementById('some_element').style.display = 'none';


// DOM APIdocument.getElementById('some_element').style.display = 'none';

// Prototype$('some_element').hide();


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

$$('p.important').invoke('hide');

CSS selector


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


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); },


/** * 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]]. **/


.prototype

.

Language extensions√

Syntactic sugar√Reduce code size/LOC√

DOM manipulation√

Infrastructure for JavaScript apps√


$('element').morph( 'left:150px; top:230px', { duration: 1.2 });


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

t

pos


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

accelerationat start

decelerationat end


A “bounce” easing

t

pos



hard velocity changes

quadratic“gravity”


Visual effects for HTML elements√

Audio playback√Ajax-enabled controls√

Drag & Drop√


ABC

Amazon

Apple

CNN

ESPN

Gucci

IKEA

last.fm

Nasa

NBC

Nokia

Palm


Palm webOS


What’s next?

http://scripty2.com/demos/touch/




Q&Ahttp://prototypejs.orghttp://script.aculo.us


http://prototypejs.org

http://prototypejs.org

http://script.aculo.us

http://script.aculo.us

Prototype & Scriptaculous

Technology

Transcript of Prototype & Scriptaculous