JavaScript: script.aculo.us, introduzione

Script.aculo.us (da ora in poi aculous) è una libreria per effetti grafici scritta in JavaScript (da Thomas Fuchs) per la realizzazione (semplice) di interfacce e pagine web. E' basata su Prototype, altra libreria JavaScript, e ne estende, quindi, le funzionalità di base! Perché riscrivere ogni volta le stesse funzioni e/o pezzi di codice quando possiamo usare aculous? Il principale obiettivo di aculous è proprio quello di semplificare la scrittura del codice JavaScript, facendo di conseguenza avanzare rapidamente il lavoro del web designer!

L'installazione della libreria è molto semplice. Occorre caricare sul proprio spazio web i file JavaScript che compongono la libreria (non tutti, come a breve vedremo) ed effettuarne, quindi, il collegamento nelle pagine web che intendono usare la stessa. Possiamo scaricare aculous a questo indirizzo, qui trovate l'archivio tar.gz della libreria. L'estrazione del file scaricato può avvenire da riga di comando, ad esempio con l'istruzione: tar zxvf scriptaculous-js-1.8.3.tar.gz. Il processo di estrazione genera la cartella scriptaculo-js.1.8.3, all'interno trovate il file prototype.js (nella cartella lib) e i file: scriptaculous.js, builder.js, effect.js, dragdrop,js, slider.js, sound.js e control.js (nella cartella src).

Per usare la libreria dobbiamo poi indicare al browser i file JavaScript che la compongono. E' sufficiente inserire nel tag head queste istruzioni:

<script src="./lib/protype.js" type="text/javascript"></script>
<script src="./lib/scriptaculous.js" type="text/javascript"></script>

Se lib è la cartella del server che ospita i file. Di default la libreria scriptaculous.js carica tutte le componenti JavaScript (i file elencati). Se una pagina utilizza solo alcuni di questi file, per non appesantire la pagina possiamo dire a scriptaculous.js di caricare solo il necessario. Ecco come fare:

<script src="./lib/scriptaculous.js?load=effects,builder" type="text/javascript"></script>

Il codice di aculous può essere aggiunto nel documento HTML in questo modo:

<div id="text" onclick="new Effect.SwitchOff(this)">
Se mi clicchi... sparisco!
</div>

E' anche possibile scrivere nuove funzioni, combinare effetti e fare tante altre cose. In questa pagina è possibile vedere l'effetto generato dall'esempio.