JavaScript Tutorial

(pubblicato il 17 novembre 2002) -
clicca qui per il download di questo documento

(tratto dal sito: http://www.bitafterbit.com/italiano/jscript/basic/index.html - scritto da Luigi Arlotta)

1. Concetti fondamentali

Il codice javascript può esser inserito direttamente all'interno di un documento HTML utilizzando opportuni TAGs, o in un file esterno e quindi collegato al documento tramite l'attributo SRC che ne identifica la posizione. In entrambi i casi il codice viene caricato ed eseguito dal browser dell'utente mentre questo sta visitando la vostra pagina. I TAGs da utilizzare per includere il codice direttamente in una pagina sono <SCRIPT> e </SCRIPT> che marcano rispettivamente inizio e fine del listato. All'interno del primo TAG indicheremo il tipo di linguaggio script che stiamo utilizzando aggiungendo il comando LANGUAGE="JavaScript". Il codice può essere posizionato sia nell'intestazione (cioè tra i TAGs <HEAD> e </HEAD>), che nel corpo del documento (tra i TAGs <BODY> e </BODY>). Nel primo caso il browser avvierà l'esecuzione del codice prima della visualizzazione della pagina, nel secondo caso l'esecuzione del codice avrà inizio a seconda della sua posizione.
Di seguito sono riportati due esempi.

<HTML> <HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">  </SCRIPT> </HEAD>
<BODY> Informazioni da visualizzare nel documento </BODY> </HTML>

<HTML> <HEAD> <TITLE>Titolo della pagina</TITLE> </HEAD>
<BODY> Informazioni da visualizzare nel documento
<script language="javascript">  </SCRIPT> </BODY> </HTML>

Il codice javascript viene eseguito dalle versioni 2 e successive di Netscape Communicator, 3 e successive di Internet Esplorer e da tutti i browser che ne supportano la sintassi. Per questo motivo, al fine di non creare confusione con i browser non abilitati all'esecuzione di javascript, il codice viene inserito tra i TAGs di commento . Questo evita che i vecchi browser, invece di interpretare il sorgente, lo visualizzino nella pagina.

alert(); è una funzione predefinita di javascript che apre una finestrella in cui viene riportato un avviso (nel nostro caso la scritta "Welcome to Software Developers"). Nel primo esempio la finestrella verrà aperta prima che venga visualizzato il testo del documento all'interno del browser; quindi premendo il tasto "ok" la finestrella verrà chiusa e proseguirà la normale visualizzazione delle informazioni contenute nel BODY del documento HTML. Nel secondo caso invece, essendo il codice javascript posizionato subito prima del TAG di chiusura </BODY>, la finestrella verrà aperta solo dopo che nella pagina nel browser è stato riportato il contenuto del documento.

In fig.1.1 sono riportati gli output delle pagine che abbiamo appena analizzato.

Fig.1.1: Finestra del browser
Se non vogliamo inserire listati javascript all'interno del codice che definisce la pagina HTML sarà sufficiente creare un file a parte contenente il codice, salvarlo con estensione .js e quindi aggiungere il parametro SRC all'interno del TAG <SCRIPT>. Questa procedura può essere utile quando lo stesso programma viene utilizzato da più pagine. La sintassi del TAG sarà quindi: <SCRIPT LANGUAGE="javascript" SRC="nomefile.js">

Il tutto risulterà come segue:

Document.html

<HTML> <HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript" SRC="source.js">
</SCRIPT> </HEAD>
<BODY> Informazioni da visualizzare nel documento </BODY> </HTML>

source.js

alert("Welcome to Software Developers");

E' importante ricordare che Javascript distingue tra lettere maiuscole e minuscole. Ciò vuol dire che la corretta sintassi ad esempio, della funzione alert() è: alert("Testo avviso...");

Qualora dovessimo scrivere:

Alert("Testo avviso...");

lo script potrebbe non funzionare. Dico "potrebbe" in quanto la maggior parte dei browser attualmente in circolazione tendono a correggere questo tipo di errori. Consiglio comunque di far attenzione a questa caratteristica di javascript per evitare comportamenti imprevedibili dei vostri programmi. Altra cosa cui dovete fare attenzione è ricordarvi di concludere ogni comando con il carattere ";" (punto e virgola).

2. Le variabili

Una variabile è una locazione di memoria, accessibile tramite un nome scelto dal programmatore, in cui è contenuto un valore. Questo valore, solitamente impostato su un valore di default all'avvio del programma, può essere variato durante l'esecuzione dello script. I nomi delle variabili possono essere composti da lettere maiuscole e minuscole, numeri e caratteri di sottolineatura ("_"). Non è possibile invece includere spazi o altri caratteri speciali nella definizione del nome di una variabile.
Per chiarirvi le idee osservate l'esempio di seguito, in cui vengono definite tre variabili: MyName, MySurname e MyFullName.

<HTML> <HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">  </SCRIPT> </HEAD>
<BODY> <BR><BR>Informazioni da visualizzare nel documento </BODY> </HTML>

In fig.2.1 è riportato l'output del codice.

Fig.2.1: Finestra del browser

Fate attenzione a come viene utilizzato il carattere " (virgolette) all'interno del codice. Tutto il testo che compare all'interno delle virgolette è considerato testo statico (una costante), mentre quello che non compare tra virgolette, quando non fa parte della sintassi del linguaggio, è considerato una variabile. Il seguente esempio evidenzia quanto detto.

<HTML>

<HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">  </SCRIPT> </HEAD>
<BODY> <BR><BR>Informazioni da visualizzare nel documento </BODY> </HTML>

In fig.2.2 è riportato l'output del codice.

Fig.2.2: Finestra del browser
Nella prima istruzione di visualizzazione (document.write("Il mio nome è "+MyFullName);) MyFullName è considerato una variabile e quindi nella pagina del browser viene visualizzato il suo valore. Nella seconda istruzione write invece ( document.write("Il mio nome è MyFullName"); ), MyFullName si trova all'interno delle virgolette ("), viene quindi considerato testo statico (stringa di caratteri!) e non una variabile. Questo è il motivo del diverso output prodotto dalle due istruzioni ed evidenziato in fig.2.2.

3. Il costrutto if...then...else...

Il costrutto if (a) then (b) else (c), tramite il quale è possibile controllare il flusso del programma, ha in javascript la seguente sintassi:

if (condizione) istruzione1; else istruzione2;

La condizione generalmente consiste nel comparare una variabile con una costante o due variabili tra loro. Se la condizione risulta vera (cioè restituisce il valore true) allora viene eseguita istruzione1 altrimenti viene eseguita istruzione2.
Nella tabella 3.1 sono elencati gli operatori di confronto.

= =	Uguale a
>	Maggiore di
<	Minore di
!=	Diverso da
>=	Maggiore o uguale a
<=	Minore o uguale a

Tab.3.1: Operatori di confronto
Fate attenzione all'operatore "uguale a" che è espresso da due simboli "=" (uguale) affiancati ("=="). Uno degli errori più comuni commessi dai programmatori, non solo in javascript, è quello di dimenticare un "=" nell'eseguire un confronto. Questo tipo di errore altera gravemente il flusso logico del programma. Osservate le seguenti righe: if (Cognome == "Rossi")
document.write ("Hello, Mr. Rossi!");
Cognome = "Rossi";

La prima istruzione viene interpretata come un confronto e restituisce il valore vero se la variabile Cognome contiene il valore "Rossi", falso altrimenti. La seconda istruzione invece assegna il valore "Rossi" alla variabile Cognome.

Il costrutto IF (a) THEN (b) ELSE (c) viene completato dall'utilizzo degli operatori booleani AND, OR e NOT. Tali operatori sono espressi in javascript tramite la sintassi riportata in tabella 3.2.

&&	AND
\|\|	OR
!	NOT

Tab.3.2: Operatori booleani in javascript
Probabilmente conoscerete il funzionamento delle tavole di verità operatori booleani che comunque è riportata nella tabella 3.3.

a b a AND b a OR b NOT a

Vero Vero Vero Vero Falso

Vero Falso Falso Vero Falso
Falso Vero Falso Vero Vero
Falso Falso Falso Falso Vero

Tab.3.3: Tavole di verità
Di seguito è riportato un estratto di codice javascript in cui vengono eseguite delle operazioni condizionate. Nella tabella 3.4 sono spiegati i passaggi if... then... else. In fig.3.5 l'output del programma.

</SCRIPT>

Variabili			Istruzione	Risultato
Cognome	Nome	Stipendio	Istruzione	Risultato
Rossi	null	0	if (Cognome=="Rossi") Nome = "Giovanni"; else Nome = "Luca";	Vero. La variabile Nome diventa Giovanni. La clausola else non viene eseguita.
Rossi	Giovanni	0	if ((Cognome=="Verdi")&&(Nome=="Giovanni")) Stipendio = 50; else Stipendio = 10;	Falso. Viene eseguito il ramo else. La Variabile Stipendio viene impostata sul valore 10
Rossi	Giovanni	10	if ((Cognome=="Rossi")&&(Nome=="Giovanni")) Stipendio = 37;	Vero. La Variabile Stipendio viene impostata sul valore 37
Rossi	Giovanni	37	if (Stipendio<40) Stipendio = Stipendio +5;	Vero. La variabile Stipendio viene incrementata di 5
Rossi	Giovanni	42	if (Stipendio<40) Stipendio = Stipendio +5;	Falso. Nessuna operazione viene eseguita

Tab.3.4: Alcuni esempi
Fig.3.5: Finestra del Browser

Fig.3.5: Finestra del browser

4. Cicli for

Un'altra istruzione utile per il controllo del flusso del programma è il costrutto for. Quest'ultimo ci permette di richiedere l'esecuzione di una o più istruzioni fin quando non si verifica una particolare condizione, detta condizione d'uscita. La sintassi javascript del costrutto è la seguente:

for (v=startValue; condizione su v; istruzione su v)
{ bloccoDiIstrizioni; }

dove v è la variabile di controllo del ciclo. v viene inizializzata sul valore startValue prima dell'inizio del ciclo. condizione su v è la condizione di uscita del ciclo. Il ciclo termina quando condizione su v restituisce il valore false (cioè quando la condizione su v non è più verificata, quindi falsa). Il primo controllo sulla condizione viene effettuato all'ingresso nel ciclo, prima della prima iterazione, è quindi possibile che le istruzioni appartenenti a bloccoDiIstruzioni non vengano mai eseguite. Ciò avviene quando condizione su v restituisce immediatamente il valore false. istruzione su v è un'istruzione che modifica il valore della variabile di controllo v. Tale istruzione generalmente fa si che v tenda al valore che soddisfa la condizione di uscita (quindi tale da rendere condizione su v falso). Se così non fosse il rischio sarebbe quello di mandare il processo in loop, cioè creare un ciclo infinito, senza uscita.
L'esempio di seguito contiene codice javascript che costruisce una tabella tramite l'istruzione for.

<HTML> <HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">  </SCRIPT> </HEAD>
<BODY> <BR><BR>Informazioni da visualizzare nel documento </BODY> </HTML>

In fig.4.1 è riportato l'output del programma

Fig.4.1: Finestra del browser

Per quanto quello descritto sia il modo più comune di utilizzare il costrutto for, è anche possibile che la variabile di controllo non sia v, cioè che la condizione di uscita non riguardi la variabile v; o che l'istruzione di iterazione non modifichi v ma qualche altra variabile. E' anche possibile che venga omessa una o più istruzioni tra quelle di inizializzazione, controllo, iterazione.
Tramite l'esecuzione dell'istruzione break all'interno del bloccoDiIstruzioni di un ciclo viene immediatamente interrotta l'esecuzione del ciclo stesso, anche se la condizione di uscita non si è ancora verificata.
Di seguito sono riportati alcuni esempi.

<HTML> <HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">  </SCRIPT> </HEAD>
<BODY> <BR><BR>Informazioni da visualizzare nel documento </BODY> </HTML>

Il codice javascript visualizza parte dei colori utilizzabili nelle pagine web, con i rispettivi valori RGB. Osserviamo che nel secondo e terzo ciclo for manca l'istruzione di inizializzazione della variabile di controllo. Le variabili g e b infatti vengono inizializzate all'inizio del codice in quanto sono utilizzate già nel primo ciclo. Da notare inoltre l'utilizzo del carattere "\" per inserire nel codice HTML generato dal programma il carattere " (virgolette). L'istruzione: document.write("<FONT color=#\""+r+g+b+"\">Color #"+r+g+b+"</FONT><BR>");

genera la seguente linea di codice HTML:

<FONT color=#"102040"> This is color #102040</FONT><BR>

dove si è supposto che i valori delle variabili r, g, b siano rispettivamente 10, 20 e 40.
In fig.4.2 è riportato l'output del codice javascript.

Fig.4.2: Finestra del browser
Nel prossimo esempio faremo uso dell'istruzione break per interrompere l'esecuzione di un ciclo for nel quale non è stata definita alcuna condizione d'uscita.

<HTML>

<HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">  </SCRIPT> </HEAD>
<BODY>
<BR>... <BR>Informazioni da visualizzare nel documento
<BR>... </BODY> </HTML>

Osservate l'output del browser in fig.4.3. Il ciclo termina alla settima iterazione in quanto quando la variabile di controllo k raggiunge il valore 7, viene eseguita l'istruzione break.

Fig.4.3: Finestra del browser

Oltre all'istruzione break, è possibile utilizzare, all'interno di un ciclo for, l'istruzione continue. Quest'ultima interrompe l'esecuzione di una particolare iterazione, senza però interrompere l'esecuzione del ciclo.
Nell'esempio di seguito vengono interrotte la terza e la settima iterazione. Il ciclo comunque continua fin quando non risulta verificata la condizione d'uscita.

<HTML>

<HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">  </SCRIPT> </HEAD>
<BODY>
<BR>... <BR>Informazioni da visualizzare nel documento
<BR>... </BODY> </HTML>

Osservate l'output del browser in fig.4.4. in cui non compaiono le linee di output relative alle iterazioni 3 e 7.

Fig.4.4: Finestra del browser

5. Cicli while

Un ciclo while è leggermente meno sofisticato di un ciclo for, ma svolge approssimativamente la stessa funzione. E' composto da un blocco di istruzioni e da una condizione di uscita. All'ingresso del ciclo e ogni volta che viene eseguito tutto il blocco di istruzioni si effettua il controllo sulla condizione di uscita. Il ciclo termina quando la condizione d'uscita restituisce il valore false.
La sintassi di un ciclo while è la seguente:

while (condizione)
{ bloccoDiIstrizioni; }

dove condizione è la condizione di uscita del ciclo. Il ciclo termina quando condizione restituisce il valore false (cioè quando la condizione risulta falsa). Il primo controllo sulla condizione viene effettuato all'ingresso nel ciclo, prima della prima iterazione, è quindi possibile che le istruzioni appartenenti a bloccoDiIstruzioni non vengano mai eseguite nel caso condizione risulti immediatamente false. Anche nel caso di cicli while, come per i cicli for, sussiste il pericolo di mandare il processo in loop. Questo avviene quando, al ripetersi delle iterazioni, non si verifica mai la condizione d'uscita.

La stessa applicazione vista nel capitolo precedente, che costruisce una tabella è stata realizzata sostituendo il ciclo for con un ciclo while.
Di seguito è riportato il codice. In fig.5.1 è riportato l'output del programma che risulta perfettamente uguale a quello del capitolo precedente.

<HTML> <HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">  </SCRIPT> </HEAD>
<BODY> <BR><BR>Informazioni da visualizzare nel documento </BODY> </HTML>

In fig.5.1 è riportato l'output del programma

Fig.5.1: Finestra del browser
Anche nei cicli while è possibile far uso delle parole chiave break e continue, il cui funzionamento è stato spiegato nel capitolo precedente.

Nella tabella 5.2 sono riportati alcuni estratti di codice di cicli while e di cicli for. Ogni coppia di istruzioni esegue le stesse operazioni.

Ciclo for	Ciclo while
for (i=0; i<10; i++) { document.write.("Iterazione n° "+i+"<BR>"); }	i=0; while (i<10) { document.write.("Iterazione n° "+i+"<BR>"); i++; }
for (i=0;; i++) { document.write.("Iterazione n° "+i+"<BR>"); if (i==8) break; }	i=0; while (i<10) { document.write.("Iterazione n° "+i+"<BR>"); i++; if (i==9) break; }
for (i=0;i<10; i++) { if (i==6) continue; document.write.("Iterazione n° "+i+"<BR>"); }	i=0; while (i<10) { if (i==6) continue; document.write.("Iterazione n° "+i+"<BR>"); i++; }
for (;;);	while (true);

Tab.5.2: Confronto tra cicli for e cicli while

6. Gli Array

Un array è una variabile contenente più valori. In un array ogni valore viene identificato (ed è dunque possibile accedervi e/o modificarlo) un numero d'ordine che ne indica la posizione.

Il codice che segue dichiara una variabile di tipo array di dimensione pari a cinque. La variabile, di nome VarArray, viene quindi inizializzata, inserendo in ogni locazione un valore. Il successivo ciclo for visualizza tutti i valori contenuti in VarArray.

<HTML> <HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">  </SCRIPT> </HEAD>
<BODY> <BR><BR> Altre informazioni da visualizzare nel documento </BODY> </HTML>

In fig.6.1 è riportato l'output del programma.

Fig.6.1: Finestra del browser
Gli array generalmente sono utilizzati per memorizzare variabili dello stesso tipo, o comunque legate da una qualche relazione logica. L'uso degli array risulta comodo anche in fase di consultazione: se decidiamo di accedere alle variabili contenute in un array, magari per stamparle come nell'esempio precedente, l'operazione può essere svolta utilizzando un'unica istruzione di ciclo (for o while). Al contrario, se avessimo utilizzato al posto di un array più variabili di nome differente non sarebbe stato altrettanto immediato scrivere il codice necessario ad accedere ad ognuna di esse. Il codice che segue fornisce lo stesso output del precedente, ma non fa uso di variabili di tipo array. Osservate come la procedura di visualizzazione dei valori delle cinque variabili richieda più istruzioni.

<HTML>

<HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">  </SCRIPT> </HEAD>
<BODY> <BR><BR> Altre informazioni da visualizzare nel documento </BODY> </HTML>

Gli esempi sviluppati in questo capitolo probabilmente non mostrano la vera utilità degli array. Purtroppo, quanto abbiamo appreso fino ad ora non è sufficiente per sviluppare esempi che mostrino a pieno i vantaggi effettivamente offerti da questo genere di oggetti. Non preoccupatevi, nei prossimi capitoli, quando avremo imparato qualcosa di più, torneremo ad utilizzare gli array in modo più intelligente

7. Le Funzioni

Le funzioni sono blocchi di istruzioni distinti dal programma principale che possono essere richiamati quando il programma necessita l'esecuzione di una determinata operazione per la quale la funzione è stata scritta. Ogni funzione ha un nome che la identifica. Le funzioni possono accettare in ingresso un numero arbitrario di parametri (variabili) in base ai quali eseguono una determinata operazione. A questo punto, se necessario, restituiscono un valore in output. Il valore restituito può essere memorizzato in una variabile ed utilizzato quando necessario. Le funzioni sono uno strumento fondamentale in ogni linguaggio di programmazione. Esse permettono di suddividere tutta l'elaborazione che deve svolgere l'applicazione in blocchi di istruzioni elementari e quindi più semplici da definire e controllare. Questa tecnica, è attualmente la più diffusa tra i cosiddetti "linguaggi imperativi" e prende il nome di programmazione modulare. L'applicazione richiamerà ogni singola funzione fornendole gli opportuni valori d'ingresso e memorizzando gli eventuali output restituiti. L'ordine in cui le funzioni vengono richiamate potrà variare a seconda dei dati forniti in ingresso dall'utente e/o dai risultati delle funzioni già eseguite.
La definizione di una funzione avviene attraverso la seguente sintassi:

function NomeFunzione(par1, par2, ..., parN)
{ CorpoDellaFunzione;
[return valore_restituito]
}

Dove NomeFunzione è il nome della funzione; par1, par2, ..., parN sono N parametri che la funzione riceve in input quando ne è richiesta l'esecuzione (N può anche essere 0). I parametri passati ad una funzione non devono essere necessariamente tipi di dati elementari (interi, stringhe, ...) ma possono anche essere oggetti definiti dal programmatore (vedi cap. 8). Tra le parentesi graffe ("{" e "}") compare il corpo della funzione, cioè le istruzioni che verranno eseguite al momento dell'attivazione. Eseguito il blocco di istruzioni viene generalmente restituito un valore, indicato col nome di output o risultato della funzione.

Supponiamo di aver la necessità di definire una funzione che visualizzi del testo, passato come parametro, in un documento HTML sotto forma di paragrafo. Potremo scrivere una funzione come la seguente:

function writeString (str)
{
document.write("<FONT FACE=\"Comic Sans MS\" SIZE=3><P ALIGN=\"JUSTIFY\"> "+str+"</P></FONT>"); }

Quando all'interno del codice javascript avremo bisogno di visualizzare del testo sotto forma di paragrafo sarà sufficiente utilizzare l'istruzione:

writeString("Testo del paragrafo che verrà impaginato dalla funzione");

di seguito è riportato il codice completo della pagina HTML in cui è definita ed utilizzata la funzione writeString().

<HTML> <HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">  </SCRIPT> </HEAD>
<BODY> <BR>...
<BR><BR>Altre informazioni da visualizzare nel documento
<BR>... </BODY> </HTML>

In fig.7.1 è riportato l'output del programma.

Fig.7.1: Finestra del browser
E' possibile inviare ad una funzione più parametri di quelli effettivamente richiesti. In questo caso dovremo far uso della parola chiave arguments per accedervi. arguments potrà essere trattato come un array di lunghezza pari al numero di parametri in eccesso che sono stati passati alla funzione. Definiamo una funzione utile per visualizzare in un documento HTML liste di elementi. L'unico parametro previsto è listType che indica il tipo dell'elenco (numerato o semplice). Gli altri parametri vengono controllati tramite l'array argumets.

function printList (listType)
{

document.write("<" + listType + "L>");
for (var i = 1; i < printList.arguments.length; i++) document.write("<LI>" + printList.arguments[i]); document.write("</" + listType + "L>"); }

Vediamo ora come può essere utilizzata la funzione appena definita. Di seguito è riportato il codice di una pagina HTML che fa uso di printList(). In fig.7.2 la finestra del browser.

<HTML> <HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">  </SCRIPT> </HEAD>
<BODY>
...
<BR><BR>Altre informazioni da visualizzare nel documento
... </BODY> </HTML>

Fig.7.2: Finestra del Browser

Fig.7.2: Finestra del browser

Il prossimo esempio si basa ancora sull'utilizzo dell'array arguments, ma svolge un'operazione diversa. CreateTable() è una funzione che permette di creare velocemente delle tabelle in una pagina HTML. In input sono richiesti il numero di colonne e di righe di cui deve essere composta la tabella; quindi i valori per i parametri border e background. I parametri addizionali, cui andremo ad accedere attraverso l'array arguments sono il contenuto delle singole celle.
Come al solito di seguito è riportato il listato completo della funzione, una pagina HTML che ne fa uso e il corrispondente output visto nella finestra del browser.

Il codice completo sarà:

<HTML> <HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">  </SCRIPT> </HEAD>
<BODY> <BR>...
<BR>Altre informazioni da visualizzare nel documento
<BR>... </BODY> </HTML>

Fig.7.3: Finestra del Browser

Fig.7.3: Finestra del browser

8. Gli oggetti

Un oggetto è un insieme di dati (proprietà) e funzioni (metodi). E' possibile accedere alla proprietà Pr1 dell'oggetto Obj1 tramite il costrutto:

Obj1.Pr1

Analogamente è possibile richiedere l'esecuzione del metodo Mt1() dell'oggetto Obj1 utilizzando la seguente sintassi:

Obj1.Mt1(par1, par2, ..., parN);

dove par1, par2, ..., parN sono gli N parametri che il metodo prende in input (dove N può essere anche 0).
La definizione di un oggetto in javascript avviene tramite l'implementazione del suo costruttore. Un costruttore è un metodo particolare che viene richiamato quando l'oggetto viene istanziato. Il costruttore ha il compito di inizializzare la nuova istanza dell'oggetto secondo valori prestabiliti o in base ai parametri ricevuti.
Vi invito a non far confusione tra la definizione e l'istanziazione di un oggetto. Definire un oggetto consiste nell'elencare una serie di proprietà e funzioni che ne individuano le caratteristiche ed il comportamento. Istanziare un oggetto invece vuol dire creare una variabile che presenta le caratteristiche della classe a cui appartiene.

Supponiamo ad esempio di voler definire un oggetto che rappresenti una persona. Vogliamo che tutte le variabili di tipo Persona che utilizzeremo in seguito siano caratterizzate da un nome, un cognome, un'età e un sesso. Procediamo quindi a scrivere il costruttore della classe Persona come segue:

function Persona (N, C, E, S) {

this.Nome = N;
this.Cognome = C;
this.Eta = E;
this.Sesso = S; }

In questo caso il costruttore accetta quattro parametri che contengono rispettivamente nome, cognome, età e sesso della variabile di tipo Persona che vogliamo creare. La parola chiave this, utilizzata all'interno del costruttore è un modo per far riferimento ad una proprietà dell'oggetto su cui stiamo lavorando. In questo modo abbiamo definito l'oggetto Persona.
Ora procediamo all'istanzizione di alcune variabili. Utilizzeremo la parola chiave new nel seguente modo:

Io = new Persona ("Luigi", "Arlotta", 26, "M");
Marco = new Persona ("Marco", "Rossi", 31, "M");
Mamma = new Persona ("Maria", "Versi", "42", "F");

Quello che abbiamo fatto è istanziare delle variabili, le cui proprietà avranno i valori che abbiamo passato al costruttore della classe Persona.
In javascript è possibile aggiungere delle proprietà ad una particolare istanza di un oggetto. Scrivendo ad esempio:

Io.Indirizzo = "Via Tespi, Roma";

Avremo aggiunto la proprietà Indirizzo all'istanza Io dell'oggetto Persona. Questa operazione non avrà alcun effetto su tutti gli altri oggetti dello stesso tipo che sono già stati istanziati o che lo saranno in seguito. Non è un modo molto elegante di procedere, ma a volte può essere utile. Altro modo altrettanto poco elegante per aggiungere una proprietà ad un oggetto dopo che questo sia stato definito è utilizzare la parola chiave prototype. In questo caso però la proprietà verrà aggiunta alla definizione dell'oggetto e quindi avrà effetto su tutti gli oggetti già istanziati e che istanzieremo. La sintassi è la seguente:

Persona.prototype.NomeProprietà = ValoreProprietà;

Osserviamo il seguente esempio:

Persona.prototype.Indirizzo = null;
Io.Indirizzo = "Via Tespi, Roma";
Marco.Indirizzo = " Piazza Dante, Milano";

La parola chiave null, in javascript, indica un valore vuoto, nullo.

Avevamo detto che un oggetto è composto da proprietà e metodi. Fino a questo punto abbiamo visto come si definiscono le proprietà e come è possibile accedevi per leggerne o modificarne il valore. Passiamo a descrivere la procedura di definizione dei metodi. Un metodo non è altro che una funzione che opera su un particolare oggetto. Supponiamo ad esempio di voler scrivere un metodo per la classe Persona che visualizzi in modo ordinato tutti i dati di una particolare istanza dell'oggetto. Iniziamo definendo una generica funzione che chiameremo ObjPrint().

function ObjPrint ()
{

document.write ("Nome "+this.Nome);
document.write ("Cognome "+this.Cognome);
document.write ("Età "+this.Eta);
document.write ("Sesso "+this.Sesso); }

Una volta definita, la funzione può diventare un metodo della classe Persona aggiungendo all'interno della definizione dell'oggetto la riga:

this.Visualizza = ObjPrint();

in modo che il tutto risulti come segue:

<SCRIPT LANGUAGE="javascript">
<!--
function ObjPrint ()
{

document.write ("Proprietà della persona:");
document.write ("Nome: "+this.Nome);
document.write ("Cognome: "+this.Cognome);
document.write ("Età: "+this.Eta);
document.write ("Sesso: "+this.Sesso); }

function Persona (N, C, E, S) { this.Nome = N;
this.Cognome = C;
this.Eta = E;
this.Sesso = S;
this.Visualizza = ObjPrint(); }
//-->
</SCRIPT>

Quando vorremo visualizzare le proprietà di un oggetto Persona, istanziato ad esempio con il nome Marco scriveremo:

Marco.Visualizza();

di seguito è riportato un esempio di codice javascript in una pagina HTML in cui vengono prima istanziati degli oggetti e quindi visualizzati con il metodo appena definito.

<HTML> <HEAD> <TITLE>Titolo della pagina</TITLE> <SCRIPT LANGUAGE="javascript">

</SCRIPT> </HEAD>
<BODY> <BR>...
<BR>Altre informazioni da visualizzare nel documento
<BR>... </BODY> </HTML>

In fig.8.1 è riportato l'output del programma.

Fig.8.1: Finestra del browser

Questo modo di procedere permette di scrivere una funzione che possa essere utilizzata da diverse classi di oggetti.

9. Gli eventi

Windows e tutti i moderni sistemi operativi sono in grado di segnalare alle applicazioni in esecuzione il verificarsi di un determinato evento. Ma cos'è un evento? Gli eventi sono il mezzo utilizzato dagli oggetti per segnalare all'applicazione di cui fanno parte il verificarsi di una determinata situazione. Questo può avvenire a seguito di un'interazione con l'utente (pressione di un tasto, compilazione di una casella di testo, ...), o di un cambiamento di stato del componente che ha generato l'evento (creazione, inizializzazione, completamento del caricamento, ...). Praticamente ad ogni applicazione vengono segnalati, durante la sua esecuzione, centinaia di eventi.
I nomi degli eventi generalmente ne rispecchiano la natura. Ad esempio, il nome dell'evento che gestisce la pressione del tasto del mouse è onClick; l'evento che segnala l'avvenuto caricamento di un oggetto prende il nome di onLoad e cosi via.
Le applicazioni javascript offrono la possibilità di gestire gli eventi che riguardano la finestra del browser ed il documento caricato. Gestire un evento vuol dire collegare ad esso una funzione in modo che questa venga eseguita quando e se quel determinato evento dovesse verificarsi. Gli eventi vengono sempre generati da un oggetto, quindi sarà sufficiente inserire un ulteriore parametro nel TAG di definizione dell'oggetto in questione. Questo parametro conterrà il nome dell'evento che vogliamo gestire ed il nome della funzione che desideriamo collegarvi. Supponendo, ad esempio, di voler gestire l'evento "ingresso del puntatore del mouse nell'area dell'oggetto" di un oggetto di tipo immagine scriveremo:

<IMG SRC="img1.gif" onMouseOver="func1()">

In questo modo, quando l'utente muoverà il puntatore del mouse sull'area occupata dall'immagine img1.gif verrà richiamata la funzione func1(). Definiamo func1() nel seguente modo:

function function1()
{

alert("Sei sull'immagine img1.gif"); }

il listato completo della pagina HTML che gestisce l'evento onMouseOver dell'oggetto immagine è riportato di seguito.

<HTML> <HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">  </SCRIPT> </HEAD>
<BODY> <IMG SRC="img1.gif" onMouseOver="func1()">
...
Informazioni da visualizzare nel documento </BODY> </HTML>

il risultato è mostrato in fig.9.1. Provatelo.

Fig.9.1: img1.gif

Fig.9.1: Gestione dell'evento onMouseOver
Spesso la stessa funzione viene utilizzata per gestire eventi diversi, magari generati anche da oggetti differenti. In questo caso conviene passare alla funzione un parametro che le consenta di individuare l'oggetto che ha generato l'evento e il tipo di evento che è stato generato. Supponiamo di voler scrivere una pagina HTML analoga alla precedente, in cui però, questa volta, compaiono due immagini. Vogliamo che il messaggio, visualizzato all'interno della finestrella aperta dalla funzione alert(), sia diverso a seconda che l'utente abbia mosso il mouse all'interno della prima o della seconda immagine. A tal fine modificheremo la dichiarazioni delle immagini nel seguente modo:

Quello che abbiamo fatto è stato aggiungere, al TAG di definizione dell'immagine, il parametro NAME contenente il nome dell'oggetto. Al momento della generazione dell'evento, NAME viene passato alla funzione func1() che, in questo modo, sarà in grado di individuare quale oggetto ne ha richiesto l'attivazione.
Ricordo che la parola chiave this, utilizzata nell'ultimo esempio, indica l'oggetto su cui stiamo operando quindi, in questo caso, si riferisce all'immagine definita nel TAG che la contiene.
Infine la funzione func1() diventerà:

function func1(name)
{

if (name=="Luna") alert ("Benvenuto sulla luna!");
if (name=="Terra") alert ("Sei ancora con i piedi per terra."); }
provate a muovere il puntatore del mouse sulle due immagini qui sotto...

Fig.9.2: Gestione dell'evento onMouseOver

Insieme all'evento onMouseOver viene spesso utilizzato l'evento onMouseOut. Quest'ultimo segnala il momento in cui il puntatore del mouse viene spostato al di fuori dell'area dell'oggetto.
Il prossimo esempio gestisce entrambi gli eventi visualizzando un messaggio nella barra di stato del browser, quando il puntatore del mouse entra o esce dall'area occupata da una figura.

<HTML>

<HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">  </SCRIPT> </HEAD>
<BODY> <img src="img1.gif" NAME="Luna" onMouseOver="isIn(this.name)" onMouseOut="isOut()">
<img src="img2.gif" NAME="Terra" onMouseOver="isIn(this.name)" onMouseOot="isOut()">
...
Informazioni da visualizzare nel documento </BODY> </HTML>

Muovete il puntatore del mouse sulle immagini qui sotto e osservate la barra di stato del browser.

Fig.9.3: Terra e Luna

Fig.9.3: Gestione dell'evento onMouseOver e onMouseOut
window.status indica la proprietà status dell'oggetto window. window è un oggetto predefinito di javascript, che rappresenta la finestra del browser. Parleremo degli oggetti e delle funzioni predefinite di javascript nel prossimo capitolo.

Un altro evento che vi troverete spesso a gestire è l'evento onClick generato da un oggetto di tipo button quando viene premuto. Il listato di seguito definisce un form contenente un bottone che quando premuto visualizza il messaggio "hai premuto il bottone.".

<HTML> <HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">  </SCRIPT> </HEAD>
<BODY> <FORM> <INPUT TYPE="button" NAME="Button1" VALUE="Push me" onClick="buttonPushed()"> </FORM>
...
Informazioni da visualizzare nel documento </BODY> </HTML>

Di seguito il bottone descritto:

Fig.9.4: Gestione dell'evento onClick

L'evento onBlur viene generato da un oggetto quando perde il fuoco (cioè quando l'utente lo abbandona e quindi non è più selezionato). Il seguente listato legge testo contenuto nella casella di testo, e lo visualizza quando viene generato l'evento onBlur.

<HTML> <HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">  </SCRIPT> </HEAD>
<BODY> <FORM> <INPUT TYPE="text" NAME="textinput" VALUE="" onBlur="writeString(this.value)"> </FORM>
...
Informazioni da visualizzare nel documento </BODY> </HTML>

Di seguito l'esempio funzionante.

Fig.9.4: Gestione dell'evento onClick
Mentre l'evento onBlur segnala la perdita del fuoco, l'evento onFocus viene utilizzato dagli oggetti per segnalare la loro attivazione.

A volte può tornarvi utile sapere quando il browser del client ha completato il caricamento di un determinato oggetto o dell'intera pagina. A questo scopo è possibile utilizzare il l'evento onLoad come segue:

<HTML> <HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">  </SCRIPT> </HEAD>
<BODY onLoad="allLoaded()"> Informazioni da visualizzare nel documento </BODY> </HTML>

Avrete probabilmente capito che gli eventi che è possibile gestire in javascript è piuttosto numeroso. Non è possibile scrivere un esempio per ognuno di essi e quindi mi limito a elencare i più importanti. A voi il resto del lavoro.

10. Funzioni e oggetti predefiniti

Nei capitoli precedenti abbiamo imparato a definire funzioni ed implementare oggetti. In questo capitolo analizzeremo ed impareremo ad utilizzare gli oggetti e le funzioni predefinite che javascript mette a disposizione dei programmatori. Per mezzo di questi oggetti è possibile, ad esempio, mantenere il controllo sul documento HTML caricato dal browser dell'utente, nonché sulla finestra e su alcune funzioni del browser stesso. Leggendo queste pagine scoprirete cosa ha fatto di javascript il linguaggio di scripting più diffuso tra gli sviluppatori di risorse per il web.

In fig.10.1 è riportata la gerarchia degli oggetti predefiniti.

Fig.10.1: Gerarchia degli oggetti in JavaScript (from Netscape)
Non è mia intenzione fornire una descrizione dettagliata di tutti gli oggetti elencati e dei rispettivi metodi e proprietà. Verranno invece delineate delle linee guida per l'utilizzo delle risorse offerte dal linguaggio spiegando il funzionamento degli oggetti che vi capiterà di utilizzare più spesso. Per quanto riguarda gli oggetti e le funzioni che non verranno discusse in queste pagine, sono certo che, completata la lettura di questo manuale, sarete in grado di apprenderne il funzionamento senza bisogno di ulteriori aiuti.

L'oggetto document rappresenta il documento attualmente caricato nella finestra del browser. Abbiamo già fatto uso di questo oggetto nei capitoli precedenti, ed in particolare ne abbiamo utilizzato il metodo write() scrivere all'interno del documento.

Di seguito riportiamo il codice di una pagina HTML che fa uso di alcuni dei metodi e funzioni messe a disposizione dall'oggetto document. Il metodo write() viene utilizzato dalla funzione getDocumentInfo() per visualizzare delle informazioni riguardanti il documento caricato nella finestra del browser. Le informazioni sono l'indirizzo ed il titolo della pagina, la data in cui la pagina è stata creata/modificata l'ultima volta. Per far ciò si fa uso rispettivamente delle proprietà URL, title e lastModified dell'oggetto document. Per quanto riguarda la proprietà lastModified, sarebbe buona norma, al fine di aiutare la navigazione degli utenti del vostro sito, visualizzare sempre la data dell'ultima modifica all'interno di una pagina. Ciò permetterebbe di verificare immediatamente se la pagina che stiamo leggendo contiene informazioni ancora attuali o obsolete.

<HTML> <HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">

</SCRIPT> </HEAD>
<BODY> <BR>...
<BR>Altre informazioni da visualizzare nel documento
<BR>... </BODY> </HTML>

L'output del programma è riportato nelle righe qui sotto.

Il prossimo script che vi propongo permette di cambiare il colore di sfondo della pagina attiva, operando sulla proprietà bgColor dell'oggetto document.

<HTML>

<HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">

</SCRIPT> </HEAD>
<BODY> <BR><BR><BR>Come preferiresti che fosse lo sfondo di questo documento?
<BR><BR>Premi uno dei tasti di seguito.
<BR>
<form> <input type="button" value="Rosso" name="red" onClick="changeBkColor(this.name)">
<input type="button" value="Verde" name="green" onClick="changeBkColor(this.name)">
<input type="button" value="Blu" name="blue" onClick="changeBkColor(this.name)">
<input type="button" value="Giallo" name="yellow" onClick="changeBkColor(this.name)">
<input type="button" value="Bianco" name="white" onClick="changeBkColor(this.name)"> </form>
<BR>...
<BR>Altre informazioni da visualizzare nel documento
<BR>... </BODY> </HTML>

Come preferiresti che fosse lo sfondo di questo documento? Premi uno dei tasti di seguito.

L'oggetto window rappresenta la finestra del browser in cui è stato caricato il documento. Tramite le proprietà ed i metodi dell'oggetto è quindi possibile accedere e/o cambiare le caratteristiche della finestra in uso, allo stesso tempo potremo creare e gestire nuove finestre.

Il primo listato che vi propongo fa uso dei metodi resizeBy() e MoveBy() per simulare un tremolio del monitor. In realtà quello che viene fatto è semplicemente modificare rapidamente e di poche pixel, posizione e dimensioni della finestra.

<HTML> <HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">

</SCRIPT> </HEAD>
<BODY> <form> <input type="button" value="Click to shake" onClick="Shake()"> </form>
<BR>...
<BR>Altre informazioni da visualizzare nel documento
<BR>... </BODY> </HTML>

Potete provare il listato premendo il pulsante qui sotto.

Passiamo ora alla creazione di nuove finestre. Supponiamo di voler aprire una finestra per visualizzare un avviso importante quando l'utente carica una pagina, o quando esegue una particolare operazione. Quello che dovremo fare è semplicemente scegliere un nome per la nostra nuova finestra e far uso del metodo open() dell'oggetto window per crearla. Quando sarà necessario chiudere la finestra richiameremo il metodo close(). Leggete con attenzione il codice che segue:

<HTML> <HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">

</SCRIPT> </HEAD>
<BODY> <form> <input type="button" value="Click to shake" onClick="Shake()"> </form>
<BR>...
<BR>Altre informazioni da visualizzare nel documento
<BR>... </BODY> </HTML>

Potete provare il listato premendo il pulsante qui sotto.

Il primo parametro della funzione open contiene l'URL della pagina che desideriamo caricare nella nuova finestra. Lasciando questo parametro vuoto nessuna pagina verrà caricata, quindi saremo noi a dover scrivere le informazioni da visualizzare, come è stato fatto nell'esempio appena mostrato. Il secondo parametro specifica il titolo. Il terzo parametro permette di indicare le proprietá della finestra. Le proprietà che è possibile specificare sono: toolbar
location
directories
status
menubar
scrollbars
resizable
copyhistory
width=pixels
height=pixels
screenX=pixels
screenY=pixels

Modifichiamo dimensioni e posizione della finestra attuale utilizzando i metodi moveBy() e resizeBy(). I metodi sono stati collegato agli eventi onClick dei tasti qui sotto.

Di seguito è riportato il codice. Questo listato potrebbe non funzionare perfettamente con finestre massimizzate e/o con delle versioni di alcuni browser.

<HTML>

<HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">

</SCRIPT> </HEAD>
<BODY> <form> <CENTER>
<input type="button" value="Up" onClick="changePosition(0,-1)">
<BR><input type="button" value="Left" onClick="changePosition (-1,0)">
<input type="button" value="Right" onClick="changePosition (1,0)">
<BR><input type="button" value="Down" onClick="changePosition (0,1)">

<BR><BR><BR>

<input type="button" value="+ Height" onClick="changeDimension(0,5)">
<input type="button" value="+ Width" onClick="changeDimension(5,0)"><BR>
<input type="button" value="- Height" onClick="changeDimension(0,-5)">
<input type="button" value="- Width" onClick="changeDimension(-5,0)">
</CENTER> </form>
<BR>...
<BR>Altre informazioni da visualizzare nel documento
<BR>... </BODY> </HTML>

Passiamo ora a vedere come sia possibile visualizzare del testo nella barra di stato del browser (la barra di stato si trova in fondo alla finestra). Lo script riportato di seguito modifica la proprietà status dello oggetto finestra per eseguire l'operazione descritta. Il testo che viene riportato sulla barra di stato del browser varia a seconda del tasto premuto.

<HTML>

<HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">

</SCRIPT> </HEAD>
<BODY> <form> <CENTER>
<BR><input type="button" value="Bottone 1" onClick="changeStatusBar('Hai premuto il primo bottone')">
<BR><input type="button" value="Bottone 2" onClick="changeStatusBar('Hai premuto il secondo bottone')">
<BR><input type="button" value="Bottone 3" onClick="changeStatusBar('Hai premuto il terzo bottone')">
<BR><input type="button" value="Bottone 4" onClick="changeStatusBar('Hai premuto il quarto bottone')">
</CENTER> </form>
<BR>...
<BR>Altre informazioni da visualizzare nel documento
<BR>... </BODY> </HTML>

Facendo uso della proprietà status dell'oggetto window e della funzione setTimeout() è possibile creare delle scritte che scorrono nella barra di stato del browser. Il listato dello script che assolve questo compito è discusso nella sezione Trucchi, raggiungibile dalla home page.

L'oggetto Date permette di leggere data e ora del sistema che sta eseguendo lo script. Per visualizzare data e ora nei vostri documenti html potete inserire il seguente script:

Facendo uso dell'oggetto Date e della funzione setTimeout è possibile creare un orologio da inserire nelle vostre pagine web come quello riportato qui sotto. Il listato dell'orologio è discusso nella sezione Trucchi, raggiungibile dalla home page.

L'oggetto navigator permette di ottenere informazioni sul tipo di browser che l'utente sta utilizzando. Queste informazioni possono essere utili per sapere se le pagine da noi scritte verranno visualizzate correttamente dall'utente. A volte infatti, può capitare di dover scrivere delle pagine "doppie" e lasciare a javascript il compito di reindirizzare automaticamente l'utente verso la pagina scritta per il browser utilizzato. Il tutto avverrà senza che l'utente si accorga di quanto sia successo.
Lo script proposto di seguito visualizza in un form tutte qiuelle informazioni che possono essere utili per i motivi sopra mensionati. Puoi verificarne personalmente la correttezza.

<HTML> <HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">

</SCRIPT> </HEAD>
<BODY> <form NAME="FormInfo"> <TABLE BORDER=0 ALIGN=CENTER CELLSPACING=5>
<TR>
<TD COLSPAN=2><B> Informazioni sul tuo Sistema Operativo</B></TD>
</TR>
<TR>
<TD> Sistema Operativo: </TD>
<TD> <INPUT TYPE="text" NAME="Platform" Size="40"></TD>
</TR>
<TR>
<TD> Impostazioni video: </TD>
<TD> <INPUT TYPE="text" NAME="ScreenHeight" Size="40"></TD>
</TR>
<TR>
<TD COLSPAN=2><B> Informazioni Sul tuo Browser</B></TD>
</TR>
<TR>
<TD> Nome: </TD>
<TD> <INPUT TYPE="text" NAME="Name" Size="30"></TD>
</TR>
<TR>
<TD> Versione: </TD>
<TD> <INPUT TYPE="text" NAME="Version" Size="50"></TD>
</TR>
<TR>
<TD> Nome codificato: </TD>
<TD> <INPUT TYPE="text" NAME="Code" Size="30"></TD>
</TR>
<TR>
<TD> User-Agent: </TD>
<TD> <INPUT TYPE="text" NAME="Agent" Size="50"></TD>
</TR>
<TR>
<TD> Supporto Java: </TD>
<TD> <INPUT TYPE="text" NAME="JavaEnabled" Size="10"></TD>
</TR>
</TABLE> </form>
<BR>...
<BR>Altre informazioni da visualizzare nel documento
<BR>... </BODY> </HTML>

Ed ecco, alla faccia della legge sulla privacy, i dati relativi al tuo sistema.

11. Bottoni animati

Gestendo gli eventi onMouseOver e onMouseOut è possibile creare dei "bottoni animati". Un bottone animato non è altro che un'immagine che cambia aspetto quando l'utente sposta il puntatore del mouse su di essa. Il tutto viene realizzato impostando, per ogni bottone animato, due oggetti di tipo immagine in ognuno dei quali viene memorizzato uno degli aspetti del tasto. Fatto questo sarà necessario scrivere due funzioni che verranno collegate rispettivamente agli eventi onMouseOver e onMouseOut. Le funzioni si occuperanno di modificare l'aspetto del bottone secondo gli spostamenti del puntatore del mouse. Per far si che sia possibile modificare l'aspetto di un'immagine è necessario che l'immagine abbia un nome attraverso il quale possa essere identificata. All'interno del TAG <IMG ...> aggiungeremo quindi il parametro NAME come segue:

<IMG SRC="img1.gif" NAME="ButtonA">

Quindi trasformeremo l'immagine in un link al fine di poterla utilizzare come bottone. Aggiungiamo il TAG <HREF=...> ... </A> come segue:

<HREF="newdoc.html"> <IMG SRC="img1.gif" NAME="ButtonA"> </A>

Infine colleghiamo gli eventi onMouseOver e onMouseOut generati dall'immagine alla funzione Change() che si occuperà di gestire i cambiamenti di aspetto del bottone.

<HREF="newdoc.html"> <IMG SRC="img2.gif" NAME="ButtonA" onMouseOver="Change(this.name,'in')" onMouseOut="Change(this.name,'out')"> </A>

Questo è tutto quello che dobbiamo fare all'interno del codice HTML. Ora andiamo a definire la funzione Change() dello script che assolverà alle operazioni descritte. Posizioneremo lo script all'interno dell'intestazione della pagina (cioè tra i TAGs <HEAD> e </HEAD>). Per prima cosa dobbiamo dichiarare due oggetti di tipo immagine nei quali sono memorizzati i due aspetti del bottone. Supponendo che i due aspetti siano rispettivamente le immagini contenute nei file img1.gif e img2.gif, scriveremo:

Button1on=new Image();
Button1out=new Image();

Button1on.src="img1.gif";
Button1out.src="img2.gif";

Quindi procediamo con la scrittura del corpo della funzione Change() come segue:

function Change (ButtonName, Action)
{

if (ButtonName=="ButtonA") { if (Action=="in") document.ButtonA.src=Button1on.src;
else if (Action=="out") document.ButtonA.src=Button1out.src; } }

Il parametro ButtonName serve per identificare l'oggetto che ha generato l'evento, mentre tramite il parametro Action è possibile distinguere il tipo di azione che ha generato l'evento.
Per creare più bottoni animati all'interno di uno stesso documento HTML sarà necessario definire una coppia di immagini per ogni bottone nella quale inserirne i diversi aspetti. Assegneremo inoltre un nome diverso ad ogni bottone (ButtonA, ButtonB, ...) in modo che sia possibile identificare volta per volta il bottone che ha generato l'evento. Se nelle vostre pagine compaiono più oggetti di tipo immagine è anche possibile memorizzarli tutti in una sola variabile array e quindi far riferimento ad ogni singola immagine tramite l'indice.

Di seguito è riportato il codice di un documento HTML in cui sono stati realizzati tre bottoni animati.

<HTML> <HEAD> <TITLE>Titolo della pagina</TITLE>
<SCRIPT LANGUAGE="javascript">  </SCRIPT> </HEAD>
<BODY> <A HREF="newdoc1.html"> <IMG SRC="images/img1b.gif" NAME="ButtonA" onMouseOver="Change(this.name,'in')" onMouseOut="Change(this.name,'out')"> </A>
<A HREF="newdoc2.html"> <IMG SRC="images/img2b.gif" NAME="ButtonB" onMouseOver="Change(this.name,'in')" onMouseOut="Change(this.name,'out')"> </A>
<A HREF="newdoc3.html"> <IMG SRC="images/img3b.gif" NAME="ButtonC" onMouseOver="Change(this.name,'in')" onMouseOut="Change(this.name,'out')"> </A>
Informazioni da visualizzare nel documento </BODY> </HTML>

I bottoni animati qui sotto, realizzati con la procedura descritta, collegano a punti diversi di questo stesso capitolo.

a	b	a AND b	a OR b	NOT a
Vero	Vero	Vero	Vero	Falso
Vero	Falso	Falso	Vero	Falso
Falso	Vero	Falso	Vero	Vero
Falso	Falso	Falso	Falso	Vero

Informazioni sul tuo Sistema Operativo
Sistema Operativo:
Impostazioni video:
Informazioni Sul tuo Browser
Nome:
Versione:
Nome codificato:
User-Agent:
Supporto Java: