Prototype & Scriptaculous

Thomas Fuchs Prototype script.aculo.us Donnerstag, 19. November 2009

@thomasfuchs on Twitter http://mir.aculo.us Donnerstag, 19. November 2009

Donnerstag, 19. November 2009

. prototype . Donnerstag, 19. November 2009

. prototype . Developers’ best friend Donnerstag, 19. November 2009

JavaScript Donnerstag, 19. November 2009

? Donnerstag, 19. November 2009

function add(a,b){ return a+b; } > add(1,2); 3 > add('hello ','world'); 'hello world' Donnerstag, 19. November 2009

. prototype . Donnerstag, 19. November 2009

var mrString = "All work and no play makes Mr. String a dull boy" Donnerstag, 19. November 2009

"All work and no play makes Mr. String a dull boy".redrum(); Donnerstag, 19. November 2009

"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

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

"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

String.prototype.redrum = function(){ var i = 5, str =''; while (i-‐-‐) { str += this +' '; } return str; } Donnerstag, 19. November 2009

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

> "Hello <b>World</b>".stripTags(); "Hello World" Donnerstag, 19. November 2009

> 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

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

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

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

['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

['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

['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

Why Frameworks? √ DOM API is clunky √ Cross-browser differences √ Utility functions √ “Don’t repeat yourself” Donnerstag, 19. November 2009

Source: http://www.pollux.franken.de/KNF/ Donnerstag, 19. November 2009

// DOM API document.getElementById('some_element').style.display = 'none'; Donnerstag, 19. November 2009

// DOM API document.getElementById('some_element').style.display = 'none'; // Prototype $('some_element').hide(); Donnerstag, 19. November 2009

“hide all p elements that have a ‘important’ CSS class” $$('p.important').invoke('hide'); CSS selector Donnerstag, 19. November 2009

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

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

. prototype . √ Language extensions √ DOM manipulation √ Syntactic sugar √ Reduce code size/LOC √ Infrastructure for JavaScript apps Donnerstag, 19. November 2009

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

(-Math.cos(pos*Math.PI)/2) + 0.5 pos t Donnerstag, 19. November 2009

(-Math.cos(pos*Math.PI)/2) + 0.5 deceleration at end acceleration at start Donnerstag, 19. November 2009

A “bounce” easing pos t Donnerstag, 19. November 2009

A “bounce” easing hard velocity changes quadratic “gravity” Donnerstag, 19. November 2009

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

√ Visual effects for HTML elements √ Drag & Drop √ Audio playback √ Ajax-enabled controls Donnerstag, 19. November 2009

ABC ESPN Nasa Amazon Gucci NBC Apple IKEA Nokia CNN last.fm Palm Donnerstag, 19. November 2009

Palm webOS Donnerstag, 19. November 2009

What’s next? http://scripty2.com/demos/touch/ Donnerstag, 19. November 2009

Q&A http://prototypejs.org http://script.aculo.us Donnerstag, 19. November 2009

Prototype & Scriptaculous

by Thomas Fuchs

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 4

Statistics

Prototype & Scriptaculous Presentation Transcript