JavaScript è un nuovo linguaggio per le pagine Web. Gli script in JavaScript possono essere inclusi nelle vostre pagine HTML. Con JavaScript avete moltissime possibilità di migliorare le vostre pagine HTML con elementi veramente interessanti. Per esempio, potete rispondere agli eventi attivati dagli utenti in modo estremamente facile. Alcuni effetti ora realizzabili con Javascript erano possibili fino a qualche tempo fa soltanto con l'interfaccia CGI. Con l'aiuto di Javascript potete quindi creare pagine molto sofisticate. In Internet è possibile trovare numerosi esempi di script Javascript e vedere pagine potenziate con questo linguaggio. Potete trovare parecchi link in Gamelan (nella sezione JavaScript) ed è possibile trovare la documentazione fornita da Netscape in http://home.netscape.com.
Per approfondimenti su questo argomento potete leggere
l'introduzione fornita da Netscape.
Ora voglio mostrarvi alcuni piccoli script in modo che possiate comprendere come vengano inseriti all'interno dei documenti HTML e possiate constatare le possibilità che Javascript vi offre. Comincerò con uno script molto piccolo che visualizzerà del testo in un documento HTML.
<html>
<head>
Il mio primo script Javascript!
</head>
<body>
<br>
Questo e' un normale documento HTML.
<br>
<script language="JavaScript">
document.write("Questo e' JavaScript!")
</script>
<br>
Di nuovo in HTML.
</body>
</html>
Se al momento state utilizzando un browser che supporta Javascript
avrete la possibilità di veder funzionare questo script. Se il vostro
browser non supporta Javascript potrà apparire come output qualcosa
di strano ...
Questo e' un normale documento HTML.
Di nuovo in HTML.
Devo ammettere che questo script non è molto utile; potreste scriverlo in HTML molto più velocemente e più breve. Ma quello che volevo mostrare era l'uso dei tag <script>. Potete utilizzare questi tag in qualsiasi punto del documento.
Non voglio annoiarvi con script così banali, quindi procediamo con le funzioni che non sono difficili da capire e sono molto più utili! E' conveniente dichiarare le funzioni tra i tag <head> delle vostre pagine HTML. Le funzioni vengono invocate dagli eventi attivati dall'utente, quindi è ragionevole tenere le loro dichiarazioni tra i tag <head>, in modo tale che vengano caricate prima che un utente possa fare qualcosa che le invochi. Gli script possono essere posti all'interno di un commento per fare in modo che i browser più vecchi, che non supportano Javascript, non li considerino.
<html>
<head>
<script language="JavaScript">
function pushbutton() {
alert("Ciao!");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Clicca qui" onclick="pushbutton()">
</form>
</body>
</html>
Se vuoi provare subito questo script e stai usando un browser
che supporta Javascript, vai avanti e clicca sul pulsante.
Questo script crea un pulsante che risponde al clic con
una finestra con la scritta 'Ciao!'. Non è fantastico? Ma che cosa
succede con la presenza di questo script? Come prima cosa la funzione viene
caricata e tenuta in memoria, quindi viene creato un pulsante con i classici
tag <form> (HTML). A questo punto noterete qualcosa di nuovo tra i parametri
del tag <input>: la presenza del parametro 'onclick'. Questo parametro
dice al browser quale funzione invocare quando si clicca sul pulsante (naturalmente
soltanto se il browser supporta Javascript). Nell'intestazione viene dichiarata
la funzione 'pushbutton()' che viene eseguita quando si clicca sul pulsante.
C'è anche un'altra novità nello script: il metodo 'alert'.
Questo metodo è già dichiarato in Javascript, quindi dovete
soltanto invocarlo. Ci sono diversi metodi a disposizione: ve ne mostrerò
alcuni in questa introduzione. Potete trovarne una descrizione completa
sul sito Netscape. Penso che la lista dei metodi diventerà abbastanza
lunga, ma al momento molte cose possono essere fatte con i metodi disponibili.
(Non penso che il metodo alert sia stato pensato per
l'uso che ne abbiamo fatto qui, ma noi stiamo imparando e questo è
il modo più semplice per comprendere! Spero mi scuserete ...)
D'ora in poi cominceremo ad andare lontano. Infatti abbiamo a disposizione molte possibilità aggiungendo soltanto qualche funzione ai nostri script. Ora vi mostrerò come poter leggere ciò che un utente ha inserito in una form.
<html>
<head>
<script language="JavaScript">
<!-- nascondiamo lo script ai vecchi browser
function getname(str) {
alert("Ciao, "+ str+"!");
}
// fine del commento -->
</script>
</head>
<body>
Inserisci il tuo nome:
<form>
<input type="text" name="name" onBlur="getname(this.value)" value="">
</form>
</body>
</html>
Ora potete provare questo script:
Inserisci il tuo nome:
In questo script abbiamo utilizzato altri nuovi elementi.
Per prima cosa avrete certamente notato lo script all'interno
del commento. In questo modo potete nascondere lo script ai vecchi browser
che non possono eseguirli. E' necessario seguire l'ordine mostrato! L'inizio
del commento deve trovarsi subito dopo il primo tag <script> e il commento
deve terminare subito prima del tag </script>.
In questo documento HTML abbiamo una form in cui l'utente
può inserire il proprio nome. Il parametro 'onBlur' del tag <input>
indica al browser quale funzione invocare quando qualcosa viene immesso
nella form. La funzione 'getname(str)' verrà invocata quando questo
elemento della form perde il focus o quando viene premuto il tasto 'Invio'
dopo aver inserito qualcosa. La funzione acquisisce la stringa che avete
immesso tramite il comando 'getname(this.value)'. 'This.value' indica il
valore che è stato immesso in questo elemento della form.
Penso che il prossimo esempio sia veramente interessante. Ci accingeremo ad implementare una funzione che gestisce la data di un documento, così che sarà il browser a visualizzare la data di ultima modifica della vostra pagina HTML. Non dovrete più scrivere la data nel documento: basterà inserire un piccolo script e quando farete delle modifiche, la data cambierà automaticamente.
<html> <body> Questa e' una semplice pagina HTML. <br> Ultima modifica: <script language="JavaScript"> <!-- nasconde lo script ai vecchi browser document.write(document.lastModified) // fine del commento --> </script> </body> </html>Al momento questa proprietà sembra non funzionare su tutte le macchine; alcuni server mostrano soltanto la data 1/1/1970. Dobbiamo attendere il prossimo aggiornamento e sperare che funzioni correttamente su tutte le macchine. Dovete quindi provarla sulla vostra macchina (su alcune sembra che funzioni perfettamente).
Come ho già detto, le cose cambiano molto in fretta
oggi, quindi non dovrebbe meravigliare se la prossima settimana ci sarà
qualche cambiamento in Javascript! Dovete sempre controllare se sono sopravvenuti
cambiamenti, poiché questo linguaggio è molto giovane. Alcune
cose dette in questa sede potrebbero cambiare o essere già cambiate,
ma penso che i principi fondamentali rimarrano gli stessi.