Prototype & Scriptaculous

Thomas Fuchs

Prototype
script.aculo.us

Donnerstag, 19. November 2009

@thomasfuchs on Twitter
http://mir.aculo.us

.
prototype
.


.
prototype
.

Developers’ best friend


JavaScript

?


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

> add(1,2);
3

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


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".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.
and no play makes Mr. String a dull boy
All work and no play makes Mr. String a
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
play makes Mr. String a dull boy

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


var i = 5, str ='';
while (i-‐-‐) { str += this +' '; }
return str;
}


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"


Enumerables/Arrays

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

"HELLO WORLD! HELLO AUSTRIA! HELLO EUROPE!"


returns a new array
Array#map




Math.random is a
standard
JavaScript
functions returns
number [0..1]



Array#sortBy
sorts by the result
order given by
calling a function
reference



Array#invoke
call a method on
each 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)


Why Frameworks?

√ DOM API is clunky
√ Cross-browser differences
√ Utility functions
√ “Don’t repeat yourself”


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


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


// DOM API
document.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


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,

.
prototype
.
√ Language extensions
√ DOM manipulation
√ Syntactic sugar
√ Reduce code size/LOC
√ Infrastructure for JavaScript apps


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


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

pos
t


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

deceleration
at end

acceleration
at start


A “bounce” easing

pos
t



hard velocity
changes

quadratic
“gravity”


√ Visual effects for HTML elements
√ Drag & Drop
√ Audio playback
√ Ajax-enabled controls


ABC ESPN Nasa
Amazon Gucci NBC
Apple IKEA Nokia
CNN last.fm Palm


Palm webOS


What’s next?

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

Q&A
http://prototypejs.org
http://script.aculo.us


Prototype & Scriptaculous

Recommended

Recommended

More Related Content

More from Thomas Fuchs

More from Thomas Fuchs (8)

Recently uploaded

Recently uploaded (20)

Prototype & Scriptaculous