apps, real needs • Makes JS feel nicer (e.g. more expressive) • NOT widget-oriented. More of a core... • Actively maintained • Excellent online documentation
welcome! • There’s an advanced session anyway • What’s in this one? 1. These JS things you should know 2. How Prototype extends JavaScript... 3. How it puts the DOM on steroids...
welcome! • There’s an advanced session anyway • What’s in this one? 1. These JS things you should know 2. How Prototype extends JavaScript... 3. How it puts the DOM on steroids... 4. And how it makes AJAX a snap!
properties! ‣ Includes all of Prototype’s extensions! var data = ['mark', 'john', 'susie']; for (var name in data) alert(name); ✘ var data = ['mark', 'john', 'susie'];
properties! ‣ Includes all of Prototype’s extensions! var data = ['mark', 'john', 'susie']; for (var name in data) alert(name); ✘ var data = ['mark', 'john', 'susie']; for (var index = 0, l = data.length; index < l; ++index) alert(data[index]);
properties! ‣ Includes all of Prototype’s extensions! var data = ['mark', 'john', 'susie']; for (var name in data) alert(name); ✘ var data = ['mark', 'john', 'susie']; for (var index = 0, l = data.length; index < l; ++index) alert(data[index]); data.each(alert);
‣ The constructors get overweight ‣ It’s all actually singleton methods! ‣ Save it for private/privileged methods • prototype: all instances rely on it
‣ The constructors get overweight ‣ It’s all actually singleton methods! ‣ Save it for private/privileged methods • prototype: all instances rely on it ‣ Dynamic lookup: not just later instantiations!
‣ The constructors get overweight ‣ It’s all actually singleton methods! ‣ Save it for private/privileged methods • prototype: all instances rely on it ‣ Dynamic lookup: not just later instantiations! ‣ The class’ repository of public methods
Array, String, Number, Function... • We unify event handling • Sure, JS 1.7-2.0 introduce a ton of cool ‣ We try not to trump native stuff... ‣ ...but not everybody has Firefox 3!
Array, String, Number, Function... • We unify event handling • Sure, JS 1.7-2.0 introduce a ton of cool ‣ We try not to trump native stuff... ‣ ...but not everybody has Firefox 3! ‣ ...and the syntax doesn’t always honor POLS ;)
+ y; } function mul(x, y) { return x * y; } var add4 = add.curry(4); var mul5 = mul.curry(5); add4(3) // 7 mul5(3) // 15 function greet(name) { alert('Hey ' + name + '!'); } greet.delay(1, 'Mark'); // will greet a second later
+ y; } function mul(x, y) { return x * y; } var add4 = add.curry(4); var mul5 = mul.curry(5); add4(3) // 7 mul5(3) // 15 function greet(name) { alert('Hey ' + name + '!'); } greet.delay(1, 'Mark'); // will greet a second later updateDOMContents();
+ y; } function mul(x, y) { return x * y; } var add4 = add.curry(4); var mul5 = mul.curry(5); add4(3) // 7 mul5(3) // 15 function greet(name) { alert('Hey ' + name + '!'); } greet.delay(1, 'Mark'); // will greet a second later updateDOMContents(); rebindListeners.defer(); // give a tiny moment to breathe, then go!
= 0; i < this.length; i++) iterator(this[i]); }; Mix it in your type and define _each: That’s it! Let’s start with iterations: var tae = $w('The Ajax Experience');
= 0; i < this.length; i++) iterator(this[i]); }; Mix it in your type and define _each: That’s it! Let’s start with iterations: var tae = $w('The Ajax Experience'); tae.each(alert);
= 0; i < this.length; i++) iterator(this[i]); }; Mix it in your type and define _each: That’s it! Let’s start with iterations: var tae = $w('The Ajax Experience'); tae.each(alert); tae.each(function(word, index) { alert(index + ': ' + word); })
and lives in #{location}'); tpl.evaluate({ name: 'Christophe', age: 29, location: 'Paris' }) // 'Christophe is 29 and lives in Paris' var mislav = { name: 'Mislav', age: 23, location: 'Zagreb' }; tpl.evaluate(mislav) // 'Mislav is 23 and lives in Zagreb'
and lives in #{location}'); tpl.evaluate({ name: 'Christophe', age: 29, location: 'Paris' }) // 'Christophe is 29 and lives in Paris' var mislav = { name: 'Mislav', age: 23, location: 'Zagreb' }; tpl.evaluate(mislav) // 'Mislav is 23 and lives in Zagreb' // Pending commit to trunk: '#{name} is #{age} and lives in #{location}'.interpolate(mislav)
and lives in #{location}'); tpl.evaluate({ name: 'Christophe', age: 29, location: 'Paris' }) // 'Christophe is 29 and lives in Paris' var mislav = { name: 'Mislav', age: 23, location: 'Zagreb' }; tpl.evaluate(mislav) // 'Mislav is 23 and lives in Zagreb' // Pending commit to trunk: '#{name} is #{age} and lives in #{location}'.interpolate(mislav) // 'Mislav is 23 and lives in Zagreb'
question? ‣ Selecting elements for processing ‣ Traversing it (don’t you hate indent nodes?) ‣ Performing common manipulations (e.g. class tweaking, visibility toggling)
question? ‣ Selecting elements for processing ‣ Traversing it (don’t you hate indent nodes?) ‣ Performing common manipulations (e.g. class tweaking, visibility toggling) ‣ Cross-browser incompatibilities (e.g. attribute reading/writing, style tweaking)
methods) ‣ Take advantage of prototypes when available ‣ Adds tag-specific extensions (e.g. form elements) • Most of Prototype extends implicitly ‣ $, $$, all extended methods’ results
Independent of your browser’s CSS3! • Super-fast with DOM3 XPath • Very powerful attributes, classes, ID’s, hierarchy, position, tags/types, and more...
DOM0 way ‣ Inline handlers skip the event object in IE • IE vs. The Rest Of The World ‣ (De)registering event handlers ‣ Getting / manipulating the event object
DOM0 way ‣ Inline handlers skip the event object in IE • IE vs. The Rest Of The World ‣ (De)registering event handlers ‣ Getting / manipulating the event object ‣ Bubbling & capturing, key events, key codes...
DOM0 way ‣ Inline handlers skip the event object in IE • IE vs. The Rest Of The World ‣ (De)registering event handlers ‣ Getting / manipulating the event object ‣ Bubbling & capturing, key events, key codes... • Not just IE: Safari/Opera b0rk sometimes
• Manipulating the event object ‣ Event.pointer(X|Y), Event.element, Event.stop, Event.KEY_xxx, etc. • Working around the tweaks ‣ e.g. keypress/keydown in Safari, submit...
XML garbage ‣ What’s your cross to bear, SOAP with JS? • X = XHTML ‣ I mean, we all send back XHTML anyway ‣ Unless it’s JSON or plain JS to be eval’d ‣ We’re all doing AHAH, knowing it or not!
‣ Using the form’s method and action attributes ‣ Serializing it according to HTML spec ‣ Returning JS? You’re done! Otherwise use onComplete. • In phase with accessibility / unobstrusive JS
method and action attributes • In essence: container.update(xhr.responseText) • Automagically done! ‣ Quite a few cool options (success/failure branching, inserting instead of updating, <script> evaluation)
method and action attributes • In essence: container.update(xhr.responseText) • Automagically done! ‣ Quite a few cool options (success/failure branching, inserting instead of updating, <script> evaluation) ‣ Can even be periodical (and slow down if no changes)
should be ‣ semantical ‣ self-sufficient (works w/o JS) • The recipe is simple: ‣ Plan for AJAX early (controllers/views, etc.) ‣ Implement it when the page works already
should be ‣ semantical ‣ self-sufficient (works w/o JS) • The recipe is simple: ‣ Plan for AJAX early (controllers/views, etc.) ‣ Implement it when the page works already ‣ Use unobstrusive JavaScript
More Function-fu ‣ Best coding practices (e.g. on Enumerable) ‣ JSON love ‣ Whipping up your own DOM extensions ‣ Creating your own classes ‣ Sneak peek at Prototype 1.6, and more!
beta) from the Pragmatic Bookshelf ‣ http://books.pragprog.com/titles/cppsu/ • 95% content-complete already • Up-to-date on the latest stuff • Pre-order the paper book too!
tdd
sorami
excitejp
indualagarsamy
hiroga
miu_crescent
dskst
line_developers
ryomaru0825
miura55
hankehly
kyliehavelock
m_iyama
smashingmag
mongodb
swwweet
soudai
addyosmani
colly
sachag
stephaniewalter
quramy
vanstee
jensimmons
zakiwarfel
![Arrays are not associative var data = ['mark', 'john', 'susie'];](https://files.speakerdeck.com/presentations/6b18f3916d55457e994b8e44fe2bf547/slide_33.jpg){kind=link}
![Arrays are not associative var data = ['mark', 'john', 'susie'];](https://files.speakerdeck.com/presentations/6b18f3916d55457e994b8e44fe2bf547/slide_34.jpg){kind=link}
