Orlando BarCamp Why Javascript Doesn't Suck

Slide 1: Why Javascript Doesn’t Suck or javascript outside the DOM

Slide 2: ..sometimes it can suck • Cross Browser DOM incompatibilities (and surprisingly its not all IE’s fault) • Ugly looking code (compared to some other languages *cough* ruby *cough*) • Poorly written code • Global Namespace • Lives inside the browser (it doesn’t have to)

Slide 3: but.. • Most widely used functional programming language ever (eat your heart out LISP) • lambda’s FTW • Objects!!! (and JSON) • Metaprogramming goodness (think ruby) • Duck typed • Light and easy (pretty much the opposite of Java)

Slide 4: you too can make it suck less Module Pattern var Positioning = function(){ //private members var _x = 0; var _y = 0; return { //priviledged functions, have access to private members/functions setPosition: function(x,y){ _x = x; _y = y; }, getPosition: function(){ return new Array(_x, _y); } } }(); Positioning.setPosition(50, 100); Positioning.getPosition(); // [50, 100]

Slide 5: metaprogramming var barCamp = { “send” sayHello: function(){ alert \"Hello\"; } } barCamp.sayHello // alerted \"Hello\" barCamp['sayHello'] // alerted \"Hello\" barCamp.hasOwnProperty('sayHello') // true //define_method in 3 lines of code Function.prototype.define_method = function(name, func){ this.prototype[name] = func; return this; } Positioning.define_method('deletePositions', function(){...})

Slide 6: prototype this prototype inheritance function Bar(){ this.member = initializer; return this; } Bar.prototype.sayHello = function(){ alert \"Hello I am Bar\"; } var barObject = new Bar(); barObject.prototype == Bar.prototype barObject.constructor == Bar() barObject.sayHello() // alerts \"Hello I am Bar\" function Foo(){ this.member = initializer; return this; } Foo.prototype = new Bar(); Foo.prototype.sayHello = function(){ alert \"Hello I am Foo\"; } var fooObject = new Foo(); fooObject.sayHello() //alerts \"Hello I am Foo\"

Slide 7: no more new function object(parentObject){ //create a dummy constructor function for our new object function F(){}; // the dummy function's prototype member is now the parentObject F.prototype = parentObject; // return an object with the dummy function's prototype member return new F(); } var bar = { sayHello: function(){...} }; var foo = object(bar); foo.sayHello() // alerts “Hello I am Bar”

Slide 8: hold your arguments to later please Bar.prototype.setFavoriteDrinks = function(person) { var drinks = Array.prototype.slice.apply(arguments, [1]); alert(person + \"'s favorite drinks are: \" + drinks.join(', ')); } var barCamp = new Bar() // hint ill accept any of these as a thank you later tonight barCamp.setFavoriteDrinks(\"the dude\", \"White Russion\", \"Red Bull and Vodka\", \"Irish Car Bomb\", \"Guiness\"); //alert \"the dude's favorite drinks are White Russion, Red Bull and Vodka, Irish Car Bomb, Guiness\"

Slide 9: bye bye browser //model TrimPath junction Contact = function() {} with (modelFor('Contact')) { validatesPresenceOf('first_name'); validatesPresenceOf('last_name'); } //controller ContactController = function() {} scaffold(ContactController, 'Contact'); //view <h1>Contacts</h1> <%= linkToLocal('Create A New Contact', 'contact', 'newInstance') %> <ul> <% for (var i = 0; i < contacts.length; i++) { %> <li><%= linkToLocal(contacts[i].last_name + ', ' + contacts[i].first_name, 'contact', 'show', contacts[i].id) %></li> <% } %> </ul>

Slide 10: thanks to... Doug Crockford Advanced Javascript 1 + 2: http://video.yahoo.com/video/play?vid=cccd4aa02a3993ab06e56af731346f78.1027823 http://video.yahoo.com/video/play?vid=cccd4aa02a3993ab06e56af731346f78.1027832 Dustin Diaz Javascript site: www.dustindiaz.com Douglas Crockford \"Javascript - The Good\" http://video.yahoo.com/video/play?vid=630959 http://yuiblog.com/blog/2007/06/12/module-pattern/

Slide 11: and of course http://www.amazon.com/JavaScript-Definitive-Guide-David-Flanagan/dp/1565923928

Slide 12: Eric Allam - last100meters.com payperpost.com