Nelle pagine precedenti abbiamo considerato il caso prevalentemente il caso in cui il codice JS venga scritto all'interno di una funzione (function) chiamata attraverso un gestore di eventi, come in:
<html>
<head>
<meta charset="utf-8">
<title> Semplice esempio in Javascript</title>
<script>
var ind=1;
function muovi()
{
if (ind%2)
{
document.getElementById('omino').src='../immagini/omino2.jpg'
}
else
{
document.getElementById('omino').src='../immagini/omino1.jpg'
}
ind= ind + 1;
}
</script>
</head>
<body>
<p>
<img alt="animazione" id="omino" src="../immagini/omino1.jpg" width="209" height="396" onclick="muovi()">
</p>
</body>
</html>
In realtà, quando il codice da scrivere è breve (contiene poche istruzioni), è possibile anche scrivere il codice direttamente nel gestore di eventi, senza passare attraverso la funzione. Si consideri l'esempio seguente:
<img alt="animazione" id="omino" src="../immagini/omino1.jpg" width="209" height="396" onclick="document.getElementById('omino').src='../immagini/omino2.jpg'">
</p>
Osserviamo appunto come in questo caso abbiamo scritto il codice JS direttamente nel gestore di eventi onclick. Si noti l'alternarsi degli apici (doppi esterni e singoli interni) indispensabile in questo caso.
Oltre che in risposta a un evento, il codice JS può anche essere inserito direttamente nel body di una pagina. In questo caso lo script viene eseguito nel punto in cui è stato inserito (cioè il browser lo esegue quando arriva a interpretare la riga in cui lo script si trova).
Vediamo subito un semplice esempio:
<body>
<script>
window.alert("Benvenuto in questa meravigliosa pagina!")
</script>
</body>
</html>
Si osservi il tag script che racchiude al proprio interno il codice js. L'attributo type serve per specificare che il codice inserito appartiene al linguaggio javascript.
Il risultato di questo script è che viene visualizzata una finestra di messaggio al momento del caricamento della pagina. Si noti che lo stesso risultato avrebbe potuto essere ottenuto usando l'evento onLoad associato al body nel seguente modo:
<body onload="window.alert('Benvenuto in questa meravigliosa pagina!')" >
</body>
</html>
Si osservi che i doppi apici sono stati qui sostituiti con apici singoli (in quanto non è possibile usare apici doppi all'interno di altri apici doppi); invece nell'esempio precedente questo problema non esisteva, in quanto il codice JS non era eseguito dentro un gestore di eventi.
Il codice JS può anche essere inserito anche all'interno di link (tag <a>) o di altri elementi che prevedano l'uso dell'attributo href. Il metodo è particolare e non molto elegante, comunque vale la pena di darci un'occhiata:
In questo caso, facendo clic su Clicca qui viene aperta una finestra col messaggio Ciao a tutti. Si osservi la parola chiave javascript inserita dentro l'attributo href e seguita dai due punti.
Non è particolarmente bello, ma ogni tanto può essere comodo da usare (in pratica consente di sfruttare un tag a per fargli eseguire delle istruzioni in js).
E' anche possibile inserire il codice JS in un file esterno alla pagina html. Il file deve avere estensione .js ed essere linkato alla pagina web nell'head. La sintassi è la seguente:
<script type="text/JavaScript" src="file.js"></script>
</head>
Nell'esempio precedente il nome del file (scelto arbitrariamente) è file.js. Si tratta di un file di testo che conterrà il codice delle funzioni javascript utilizzate dalla pagina. Si noti che il file dovrà contenere esclusivamente codice javascript e non html (dunque, per esempio, il codice js nel file non dovrà essere racchiuso nei tag <scritp> e </script>).
I principali vantaggi di usare un file esterno per contenere il codice JS sono:
• peso: la singola pagina html pesa di meno (è più piccola, in Byte)
• portabilità: un file esterno può essere facilmente riutilizzato per altri progetti
• condivisione: più pagine possono condividere le stesse funzioni attraverso un unico file esterno
Sito realizzato in base al template offerto da
http://www.graphixmania.it
