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.
Ultimi articoli JavaScript
PhantomJS, headless browser per test con JavascriptIl tool ideale per realizzare, da terminale, operazioni in remoto su... |
Creare e leggere QR Code in JavaScriptApplicazioni 'QR Code enabled' per il Web e per il mobile,... |
Jquery UI Map: web-mapping con Google Maps e jQueryUn plugin di jQuery UI per intefacciare applicaizoni Web/mobile con... |
Scrollorama e Scrolldeck, slideshow d'effetto con jQueryPlugin jQuery per ottenere Slideshow con diversi effetti di scrolling |
jCanvas, un primo semplice graficoAlla scoperta della libreria jCanvas, per semplificare il disegno e... |
Guide JavaScript
Guida Node.jsIl framework che permette di per usare V8, l'interprete JavaScript... |
Canvas, guida ai frameworkCanvas, tra gli elementi di HTML5 è forse quello di maggior impatto.... |
Guida Javascript: tecniche avanzateUna guida dal taglio pratico per approfondire la programmazione a... |
Newsletter @JavaScript
Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso JQuery e Ajax per Webmaster03 Luglio 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |