La creazione degli oggetti in Javascript è una necessità nelle applicazioni che superano le poche righe.

Tuttavia scrivere oggetti richiede inizialmente molta più fatica. Come ho scritto nel precedente articolo, questa maggior fatica iniziale viene ripagata in maggior facilità di manutenzione ed estensione dell'oggetto.

Voglio qui illustrare le differenze tra approccio procedurale e creazione di oggetti di una funzione semplicissima, che visualizza un messaggio a video e invoca una funzione quando si preme un tasto.

I 5 passi illustrano tutta la procedura, e vanno da un livello di complessità ridicolo fino ad affrontare diversi aspetti fondamentali dello sviluppo.

I primi 3 passi sono compatibili con IE, i successivi con (grossomodo) tutti i browser.

Passo 1. Html + js + css

Partiremo da un singolo file html contenente il javascript, il css e l'html, che ha tre funzioni: una per mostrare il messaggio, e due invocate da ciascuno dei bottoni sul messaggio.

Passo 2. Creiamo l'oggetto msgBox

Passo 3. Completiamo la funzionalità dell'oggetto

Vediamo come passare gli eventi avanti e indietro dalla funzione chiamante alla funzione di risposta.Introduciamo un metodo ask (bottoni si/no) e un metodo tell (solo bottone ok)

Passo 4. Separiamo css, js, html in files separati, e aggiungiamo il supporto per firefox

Questo è lo step più importante.

A questo punto abbiamo 100 righe di javascript. Per mostrare un messaggio. Imbarazzante, direste.

Però abbiamo creato un oggetto che espone 2 funzioni, ask e tell, ma che è con pochissima fatica estendibile per gestire tutta la messaggistica di un programma, inclusi gli input di testo.

Passo 5. Usiamo i mootools per la presentazione

(parte in costruzione)

Si d'accordo, questo è l'indice. 

Le spiegazioni sono commentate all'interno del codice. Clic per scaricare.

Che altro?

Appena iniziate a mettere in pratica questi esempi, procedete per punti "saldi". Appena ottenuto uno dei risultati che vi prefiggete, fate un rar della cartella coi sorgenti, e dategli un nome. Oppure inserite una nota nel cvs. Più tardi potrà tornarvi utile.

Tenete sempre sottomano il vostro codice funzionante. E' molto più veloce che consultare la documentazione!

E la documentazione, mettetevela nella homepage di firefox. 

Risorse essenziali:

introduction to firebug

Mozilla Developer Center
http://developer.mozilla.org/en/JavaScript

MSDN JScript Language Reference
http://msdn.microsoft.com/en-us/library/yek4tbz0.aspx