Recommended
More Related Content
Viewers also liked
Viewers also liked (10)
Similar to Oo Javascript
Similar to Oo Javascript (20)
Oo Javascript
- 1. OBJECT ORIENTED JAVASCRIPT guida per un mondo migliore Davide Cerbo http://jesty.it Stefano Linguerri http://www.eljeko.net
- 3. L'unione fa la forza JAVASCRIPT + PROTOTYPE
- 6. Gestisce le incompatibilità trai vari browser
- 7. Fornisce diverse funzioni e oggetti di utilità
- 8. Permette lo sviluppo di Javascript non intrusivo
- 9. E' complementare a Script.aculo.us
- 11. $$('...') -> Selettore CSS $$('.menu #submenu) ritorna tutti gli elementi che hanno class submenu all'interno di un elemento che ha id menu
- 12. Ajax.request(Url, {...}) -> Esegue una richiesta AJAX, le graffe conterranno le opzioni della request: new Ajax.Request(url, {onSuccess: function(transport) {...}); Esistono anche altri metodi come: updater e periodicalUpdater.
- 13. Template -> Permette di definire delle stringe parametrizzabili var t = new Template('Name: #{name}, surname: #{surname}'); var show = {name: 'Davide', surname: 'Cerbo'}; t.evaluate(show); //return “Name: Davide, surname: Cerbo”
- 14. Observer -> Permette di osservare gli eventi su un elemento $('id').observe('click', function(element){...});
- 17. Classi
- 18. Interfacce
- 19. Polimorfismo
- 21. Enumerable -> sono liste iterabili con metodi come each, map, find, select, etc... $A(...).each(function(e){ alert(e.id); }); $$('...') restituisce un Enumerable Sono tutte CLOSURE
- 24. Interfacce? Non ci sono e basta! Accontentiamoci delle classi E ricordiamoci che in Javascript vige la regola: “ If it walks like a duck and quacks like a duck, I would call it a duck.”
- 25. Al volo var john = new Pirate('Long John'); john.sleep(); // -> ERROR: sleep is not a method Person.addMethods({ sleep: function() { return this.say('ZzZ'); } }); john.sleep(); // -> "Long John: ZzZ, yarr!" Il metodo viene aggiunto a tutte le istanze e le sottoclassi di Pirate
- 26. DOMinare con Prototype Questo approccio deve cambiare il nostro modo di vedere la programmazione Javascript PROGRAMMAZIONE FUNZIONALE
- 28. Lo script var Tile = Class.create({ initialize: function(color, element) { this.color = color; this.element = element; }, blink: function() { this.element.style.backgroundColor = this.color; new Effect.Opacity(this.element, {duration:2, from:1.0, to:0}); // Scrip.aculo.us } }); var Board = Class.create({ initialize: function(boardElement) { this.tiles = boardElement.select("td").map(function(element){ return new Tile(element.id, element); }); }, //numero massimo di blocchi da colorare start: function(steps) { var boardSize = this.tiles.length; var tempTiles = this.tiles; //serve per problemi di scope si corregge usando la funzione bind() $R(1, steps).each(function(i){ //funzione di Prototype che riempe un array con un range di valori var index = Math.ceil(Math.random() * boardSize); var tile = tempTiles[index-1]; window.setTimeout(function() { tile.blink(); }, 500 * index); }); } });
- 29. Un concetto utile: bind start: function(steps) { var boardSize = this.tiles.length; $R(1, steps).each(function(i) { var index = Math.ceil(Math.random() * boardSize); var tile = this.tiles[index-1]; window.setTimeout(function() { tile.blink(); }, 500 * index); } .bind(this) ); } Il bind serve ad evitare problemi di scope, se lo avessi omesso il this considerato dalla funzione sarebbe stato l'oggeto window . In Javascript tutte le funzioni sono eseguite in un determinato contesto e questo è referenziabile tramite la parola chiave da this Le funzioni utilizzate come closure sono funzioni globali, quindi hanno il contesto globale
- 31. Debugger
- 32. JUnit
- 34. Firebug
- 35. JSUnit
- 36. JSMock Siamo abituati ad avere una marea di strumenti a nostra disposione javascript non ci deluderà!
- 37. Logging: Log4J -> BlackbirdJS
- 38. Debug: Java Debugger -> Firebug
- 39. Unit Test: JUnit -> JSUnit [1]
- 40. Unit Test: JUnit -> JSUnit [2]
- 41. Unit Test: JUnit -> JSUnit [3]
- 42. Unit Test: JUnit -> JSUnit [4]
- 45. Conclusioni
- 57. Q&A JS? http://jesty.it [email_address] [email_address]