Introduzione a JavaScript
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.
Nonostante i nomi siano quasi uguali, Java non è la stessa cosa di
JavaScript! Essi introducono due diverse tecniche per la programmazione su Internet.
Java è un linguaggio di programmazione, mentre Javascript, come dice lo stesso nome, è un linguaggio per realizzare script (scripting language).
La differenza consiste nel fatto che con Java si possono realizzare veri e propri programmi, mentre
spesso si vuole creare un bell'effetto evitando di avere a che fare con la programmazione pura.
Quindi l'obiettivo principale di Javascript è quello di essere facile da comprendere e da usare, senza
preoccuparsi troppo della programmazione. Si potrebbe dire che Javascript sia piuttosto
un'estensione di HTML che un linguaggio di programmazione indipendente.
Naturalmente questa non è la definizione 'ufficiale', ma penso che possa rendere
più facile la comprensione della differenza tra Java e Javascript.
E' possibile trovare ulteriori informazioni sia su Java che su Javascript in
Gamelan.
Per approfondimenti su questo argomento potete leggere l'introduzione fornita da
Netscape.
Il primo browser a supportare Javascript è stato Netscape Navigator 2.0.
Naturalmente anche le versioni successive lo supportano. Probabilmente saprete
che Java non è supportato da tutte le versioni di Netscape Navigator 2.0 o successive,
mentre ciò non è vero per Javascript - anche se ci sono alcuni problemi con le
diverse versioni. La versione per Mac, ad esempio, sembra avere molti bug.
A breve anche altri browser supporteranno Javascript, come per esempio Microsoft Internet Explorer 3.0,
e si diffonderanno rapidamente, per cui questo è il momento opportuno per imparare questa nuova tecnica.
Realizzare script con Javascript è veramente semplice; tutto ciò che occorre conoscere sono
alcune tecniche di base e qualche trucco per superare i problemi che si possono presentare.
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.
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.
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.
In questo script abbiamo utilizzato altri nuovi elementi.
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.
Qual è la differenza tra Java e JavaScript?
Come possono essere eseguiti gli script Javascript?
Naturalmente occorre conoscere anche HTML prima di leggere questa introduzione.
Potete trovare parecchie risorse online su HTML effettuando una ricerca su 'html' in
Yahoo se volete tenervi informati su HTML
(Questi documenti online sono aggiornati molto più frequentemente dei libri.
Internet si muove velocemente al giorno d'oggi ...).
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>
Di nuovo in HTML.
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.
(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:
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>
Ultima modifica: 7 Settembre '96
© 1996 by Stefan Koch
Traduzione di Andrea Chiarelli