Prendiamo in considerazione questo esempio:
<script type="text/javascript">
scritta="ciao";
function saluta() {
alert(scritta);
}
saluta();
</script>
in questo primo esempio una variabile viene creata e inizializzata al di fuori della funzione ed è poi richiamata all'interno della funzione stessa, senza che tutto ciò crei minimamente dei problemi.
Esaminiamo un altro esempio:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Corso JavaScript ad esempi</title>
<script type="text/javascript">
function saluta() {
//inizalizzo le variabili all'interno delle funzioni
scritta2="ciao";
scritta3="prova scrittura"
}
saluta(); //richiamo la funzione
alert(scritta2); //faccio riferimento alla variabile creata nella funzione
</script>
</head>
<body >
<script type="text/javascript">
document.write(scritta3);
</script>
</body>
</html>
In questo esempio due variabili vengono create all'interno delle funzioni e richiamate poi dall'esterno: in un caso la variabile viene scritta addirittura in pagina senza che tutto ciò crei minimamente dei problemi.
Molti linguaggi di programmazione creano una distinzione netta tra le variabili create all'interno del programma (nel nostro caso all'interno della pagina) e le variabili create all'interno delle funzioni. Le prime prendono il nome di variabili globali e sono valide in tutto il programma, le seconde vengono dette variabili locali e sono valide soltanto all'interno della funzione. Per indicare il contesto entro cui una variabile è valida si parla di solito di ambito delle variabili (in inglese "scope").
Per semplificare la vita del programmatore, in JavaScript questa distinzione è valida solo se espressamente richiesta dal programmatore stesso. Visto che questi sono i nostri primi programmi, possiamo evitare di distinguere tra variabili locali e variabili globali. Facciamo però attenzione a non incappare in due tipici errori:
- Evitiamo di sovrascrivere le variabili nei nostri programmi. Ad esempio:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Corso JavaScript ad esempi</title><SCRIPT type="text/javascript">
function scriviNome() {
// inizalizzo le variabili all'interno delle funzioni
nome=prompt("inserisci qui il tuo nome","il tuo nome");
}scriviNome(); // richiamo la funzione
nome="Gianni"; // in questo modo sovrascrivo la variabile
</SCRIPT>
</head>
<body ><SCRIPT TYPE="text/javascript">
document.write(nome);
</SCRIPT></body>
</html>Nell'esempio, dato che la variabile "nome" viene inizializzata dopo la funzione, il contenuto della variabile creata nella funzione viene sovrascritto.
- Ricordiamoci di utilizzare gli eventi nel modo appropriato:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Corso JavaScript ad esempi</title><script type="text/javascript">
function scriviNome() {
//inizalizzo le variabili all'interno delle funzioni
nome=prompt("inserisci qui il tuo nome","il tuo nome");
}</script>
</head>
<body onLoad="scriviNome()"><script type="text/javascript">
document.write(nome);
</script></body>
</html>In questo caso siamo incappati un errore grossolano: la variabile "nome" viene richiamata dal document.write (che si trova nel corpo della pagina) senza essere stata ancora creata, infatti l'evento onLoad (che richiama la funzione che crea la variabile) viene lanciato dopo il completamento della pagina.
