Consideriamo la seguente pagina HTML contenente un brevissimo script (cioè in pratica, come si è detto, un programma) in JavaScript:
<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à lo script vero e proprio, come vedremo meglio fra poco, è solo quella parte scritta in alto fra i tag <script> e </script>. Il resto è una normale pagina html.
La precedente versione 4.01 di HTML richiede di specificare nel tag script anche l'attributo type in questo modo:
<script type="text/JavaScript">
A partire da HTML 5 l'attributo type non è più richiesto.
La pagina contiene semplicemente la visualizzazione della seguente immagine:
Ora, se si prova a fare click sull'immagine dell'omino, l'immagine viene sostituita con un'altra realizzando una rudimentale animazione.
Per quanto poco entusiasmante, questo è il primo esempio di pagina dinamica, in grado cioè di modificarsi e di rispondere ai comandi (input) dell'utente.
Osserviamo anzitutto che lo script in JS viene scritto all'interno di una normale pagina HTML (con estensione .html). Lo script, nel nostro caso, si trova nell'head della pagina ed è costituito da una funzione di nome muovi (nome scelto liberamente). Si noti l'elemento <script> che racchiude il codice:
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>
In generale la sintassi per inserire uno script in JS è la seguente
...
</script>
All'interno dell'elemento <script> (elemento contenitore) si trova il codice (lo script) che deve essere eseguito. Il codice è costituito da una serie di istruzioni (per esempio if... else...) le quali specificano le "azioni" da compiere. Il codice è quasi interamente contenuto (vedremo più avanti le ragioni) dentro una funzione (function) di nome muovi (nome scelto liberamente).
Osserviamo poi l'elemento <img> che contiene l'immagine da visualizzare:
Notiamo particolare l'attributo onclick il cui significato è in sintesi il seguente: quando l'utente fa click sull'immagine, dev'essere eseguita la funzione muovi vista precedentemente, la quale in pratica sostituisce alternativamente l'immagine visualizzata con un'altra (omino1.jpg e omino2.jpg).
Si noti inoltre l'identificatore id="omino" attribuito all'elemento immagine e utilizzato all'interno della funziona per fare riferimento all'immagine stessa (document.getElementById('omino').src).
Non ci preoccupiamo troppo per adesso della sintassi (per esempio le parentesi tonde, graffe e dei punti e virgola), ma concentriamoci invece sul funzionamento della nostra pagina dinamica, che a questo punto si spera sia un po' più chiaro.
ATTENZIONE: Il JavaScript è case sensitive, cioè distingue fra le lettere maiuscole e quelle minuscole. Perciò bisogna fare molta attenzione quando si scrivono le istruzioni. Per esempio document.getElementById è corretto mentre document.getelementbyid sarebbe sbagliato. Conviene, soprattutto agli inizi, copiare e incollare il codice corretto per evitare di doverlo imparare a memoria.
precedente
Sito realizzato in base al template offerto da
http://www.graphixmania.it
