Il JavaScript, un ibrido tra Java e HTML

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