Il JavaScript spesso è confuso col Java, e non solo dagli inesperti.
Mentre
il Java è un linguaggio di programmazione vero e proprio, che genera dei
file .class compilati (applet), analogamente ai .EXE generati da una qualsiasi
compilazione di sorgenti in C o Visual Basic, il JavaScript è
semplicemente una sorta di batch interpretato, da includere nel documento HTML.
Questo significa che è meno potente del Java, ma è anche più
semplice, e va benissimo per svolgere certi compiti, per i quali consultare un
programmatore Java sarebbe eccessivo.
La Netscape, mentre progettava il JavaScript (originariamente chiamato
LiveScript), aveva in mente coloro che allo stesso tempo si sentono limitati
dall'HTML, ma considerano remota la possibilità di imparare il Java.
Inoltre,
dato che il listato è direttamente nell'HTML, è molto semplice
copiare qualcosa di interessante trovato per la rete, e metterlo nelle proprie
pagine con lievi modifiche (sempre che non ci siano problemi di copyright).
Tutti hanno notato la velocità con cui si sono diffusi i testi scorrevoli
nella barra di stato, e le finestre di avvertimento con i due bottoni "OK/Annulla",
per decidere se entrare o meno nei siti vietati ai minori. Questi due script
sono quasi diventati estensioni standard dell'HTML anche perché, mentre
le applet Java richiedono sistemi operativi a 32 bit e quindi non possono essere
viste da tutti, il JavaScript è supportato anche nelle versioni a 16bit
di Netscape e Explorer.
La filosofia di funzionamento
Alla base dell'interattività di JavaScript ci sono gli eventi, ossia
azioni svolte dall'utente, in risposta alle quali si eseguiranno le istruzioni
specificate nel nostro script. I gestori di eventi si inseriscono all'interno
dei tag, analogamente agli attributi.
Per esempio si può inserire il
gestore "onClick" nel tag <A> (quello dei link, per intenderci)
in modo da intercettare la pressione del link stesso ed eseguire qualche compito
addizionale.
Altri gestori di eventi sono "onFocus" e "onBlur",
attivati quando il puntatore del mouse entra e esce dalla finestra corrente; "onSubmit"
invece viene attivato quando viene inviato un modulo tramite il tag <FORM>>,
e può eseguire delle elaborazioni risparmiando lavoro ai programmi CGI
sul server.
Gruppi di istruzioni possono essere raggruppati in funzioni, per
razionalizzare la struttura del programma. Da notare che senza nessun gestore di
eventi che le chiama, le funzioni non hanno modo di essere eseguite.
Se nel
tag <SCRIPT> sono presenti istruzioni non racchiuse in funzioni, queste
sono eseguite immediatamente, prima che la pagina HTML sia caricata. Stabilito
questo, gli "oggetti" su cui si può operare, i quali hanno
delle "proprietà" e dei "metodi", sono le ben note
window, i form, i frame, le immagini, e così via.
Le proprietà sono, appunto, caratteristiche degli oggetti, come il
loro colore o il testo che visualizzano. I metodi invece sono azioni che gli
oggetti possono svolgere. Per esempio, l'oggetto window ha tra le sue proprietà
"status", che contiene il testo da visualizzare nella barra di stato,
e tra i suoi metodi troviamo close(), che chiude la finestra stessa, e
confirm(), che apre una finestra di conferma con i pulsanti OK e Annulla.
E' possibile anche controllare la navigazione, tramite l'oggetto history e
il suo metodo relativo go(), che puo' mandare indietro e avanti nelle pagine
visitate come se si premessero i tasti <- e -> nel browser.
Il set delle istruzioni è analogo a quello del java (for, while,
if-else), mentre i tipi di valori (letterali) sono molto semplificati: esistono
i "numeri", le "stringhe di testo", i valori logici
true/false (vero/falso), e la parola chiave "null", equivalente a zero
o semplicemente a "indefinito".
E' disponibile la consueta gamma
di operatori aritmetici (+,-,%,*,/), logici (&,|,^), di confronto (==,!=, >,<),
ormai divenuti uno standard in tutti i linguaggi dal C al PERL. Con essi si
possono eseguire tutte le operazioni, eventualmente sfruttando anche l'oggetto
Math, il quale rende disponibili varie costanti (E, PI, SQRT2) e metodi (abs(),
sin(), cos(), exp(), pow(), random()) per tutte le esigenze. Non potevano
mancare i commenti, che iniziano dopo un "//".
Inserimento nell'HTML
Per inserire uno script JavaScript in un HTML si usa l'apposito tag SCRIPT,
in questo modo:
<SCRIPT LANGUAGE="JavaScript">
...
</SCRIPT>
Si
usa nascondere lo script ai browser che non lo supportano, racchiudendolo tra
commenti HTML, ossia tra "<!--" e "-->".
Un
esempio completo è nel listato 1, dove si
nota anche l'uso di una funzione, dichiarata a seguito della parola chiave "function",
e racchiusa tra parentesi graffe.
Il metodo confirm() apre una finestra con
i bottoni OK/Annulla e, a seconda di quale bottone viene premuto dall'utente,
restituisce true o false. Infatti nella funzione è presente un if-else,
che si può leggere in questo modo: "Se (if) l'utente preme OK (ossia
il metodo confirm() restituisce true), allora esci dalla funzione (return) e
continua a caricare la pagina. Altrimenti (else) torna indietro di una posizione
nella "storia" della navigazione (come quando è premuto il
tasto <- del browser).
La funzione viene eseguita immediatamente, prima
che il resto del documento html sia finito di caricare, in quanto la funzione
viene immediatamente chiamata dall'interno del tag <SCRIPT>.
Se
mancano istruzioni esterne alle funzioni (ossia eseguite immediatamente al
caricamento dell'HTML), l'unico caso in cui le funzioni possono essere chiamate,
è il verificarsi di un evento. Vediamo dunque come "catturare"
ed usare un evento, ad esempio la pressione di un bottone, o di un link.
Si scrive l'HTML normalmente, col link o il bottone, e si aggiunge
all'interno del tag il relativo gestore di eventi, che chiami la funzione che
vogliamo eseguire in caso di selezione del link o pressione del bottone. Tale
funzione sarà stata precedentemente scritta nel tag <SCRIPT>:
onClick=MiaFunzione()
Quando il tag e' clickato, viene eseguita la MiaFunzione().
Visto che
abbiamo un bottone da premere, facciamogli fare qualcosa di importante:
l'apertura di una nuova finestra del browser, ad esempio. Per fare questo è
sufficiente dichiarare una nuova finestra, a cui daremo il nome win1, e aprirla
col medoto open() dell'oggetto window:
win1=window.open();
A questo punto scriveremo dentro la nuova finestra il testo dell'HTML, tramite una serie di:
win1.document.writeln();
E naturalmente inseriremo nella finestra anche un bottone per la chiusura
della finestra stessa, tramite un apposito "onClick". Il sorgente
completo lo trovate nel listato 2.
Naturalmente, nella creazione di pagine tramite i writeln() si può
fare riferimento anche ad immagini o altri oggetti, come in una qualsiasi pagina
html, perché si è aperto un vero e proprio new browser. Nel caso
della nostra finestra, sia la toolbar, che la scrollbar e tutti gli altri
controlli sono assenti, ma potremmo specificare di metterli.
Il flamigerato testo scorrevole
Non potevamo concludere senza aver visto un testo scorrevole. Personalmente
non sono molto favorevole ai testi scorrevoli nella barra di stato in quanto,
oltre a notarsi poco, coprono eventuali informazioni utili, come la destinazione
dei link.
Tratteremo quindi lo scorrimento del testo nella pagina, assai più
visibile e senza controindicazioni. Un esempio funzionante è il
listato 3.
Dobbiamo qui introdurre il gestore
di eventi onLoad, che ci permette di far partire il testo quando la pagina è
caricata.
Per ottenere l'effetto, utiliziamo un rettangolo input text di un <FORM>>,
nel quale scriviamo continuamente la stringa, ma "spostata" sempre
piu' a sinistra, finche' non ricomincia ciclicamente da capo. Per temporizzare
si usa il metodo setTimeout(), che ci permette di rieseguire la funzione della
stampa+scorrimento ogni 100 millisecondi. Variate il testo e la velocità
a vostro piacimento, per ulteriori chiarimenti vi rimando ai commenti.
Altre applicazioni del JavaScript possono essere questionari, test e quiz,
dove si possa verificare la correttezza o il tipo di risposte immediatamente,
senza uso di CGI sul server, oppure si può cercare di aumentare
l'interattività con dei complessi menù di navigazione.
Il
JavaScript, infine, può comunicare con applet Java (a partire dalla
versione 3.0 di Netscape) e con i plugin.
Fabio Ciucci
fabioc@anfiteatro.it
http://www.anfiteatro.it/java.html
Torna all' indice degli articoli