A conclusione della nostra introduzione al linguaggio JS, consideriamo ora un esempio riassuntivo dove possiamo vedere applicati in pratica gran parte dei concetti visti precedentemente.
Si tratta di un programma per giocare al classico gioco di indovinare un numero. Il computer genera un numero pseudocasuale compreso fra 0 e 100 e l'utente deve indovinarlo per tentativi. Ad ogni tentativo il computer comunica all'utente se il tentativo è minore o maggiore del numero da indovinare.
Come è spesso il caso, l'interfaccia dello script può essere efficacemente realizzata con un form. Il form, fra tutti gli elementi html, è quello che si presta maggiormente per acquisire dati e visualizzare risultati. Nel nostro caso usiamo un form fatto così:
Il codice HTML corrispondente è il seguente:
<form enctype="text/plain" style ="margin: 0 auto; width:300px">
<table style="width: 100px">
<tr>
<td> <input type="text" id="tentativo" size="8" onblur="valido()"> </td>
<td style="text-align:center"><input type="button" onclick="controlla()" value="Controlla"></td>
</tr>
<tr>
<td style="font-weight:bolder">Tentativi:</td>
<td> <input type="text" id="conteggio" size="8" style="background-color:#D0D0D0; text-align:center" value="0" ></td>
<tr>
<td colspan="2" style="text-align:center">
<input type="button" onclick="genera()" value="Nuovo Gioco">
</td>
</tr>
</table>
</form>
</body>
Osserviamo l'uso dei seguenti gestori di eventi con le funzioni ad esse associate:
- onload = "genera()": chiama la funzione genera quando
viene caricata il body (cioè in pratica al caricamento della
pagina);
- onblur = "valido()": quando la casella di testo perde
il focus (cioè quando l'utente fa click fuori di essa), viene effettuato il controllo se la casella
contiene un numero valido oppure no;
- onclick = "controlla()": quando si fa click sul bottone
Controlla verifica se il numero è minore, maggiore o uguale
a quello da indovinare;
- onclick = "genera()": genera un nuovo numero casuale e avvia un nuovo gioco quando l'utente fa click sul bottone Nuovo Gioco.
Il codice
Il codice delle funzioni associate è il seguente:
function controlla()
{
var tentativo = Number(document.getElementById("tentativo").value);
var conto = Number(document.getElementById("conteggio").value);
conto = conto + 1;
document.getElementById("conteggio").value = conto;
if (tentativo == da_indovinare) {
alert("Indovinato!") ;
genera();
}
else if (tentativo > da_indovinare) {
alert("Troppo alto");
}
else {
alert("Troppo basso");
}
}
// Genera un numero casuale
function genera() {
da_indovinare = Math.floor(Math.random()*100);
document.getElementById("conteggio").value = 0;
document.getElementById("tentativo").focus();
}
// Verifica se è stato inserito un numero valido
function valido()
{
var num = document.getElementById("tentativo").value;
if (!isNumber(num))
{
alert("Non è stato inserito un valore numerico")
document.getElementById("tentativo").focus();
}
}
// Funzione di servizio per controllare se un dato valore è numerico o no
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>
Non è il caso per ora di preoccuparsi troppo nel dettaglio del significato delle singole istruzioni. Notiamo solo che le funzioni manipolano i valori presenti nel form usando la document.getElementById. Consideriamo per esempio:
document.getElementById("tentativo").focus();
La prima istruzione azzera il valore (value) della input box con id = "conteggio". Value è evidentemente una proprietà dell'oggetto document.getElementById("conteggio").
Invece document.getElementById("tentativo").focus() è la chiamata a un metodo (come si evidenzia dalle parentesi tonde). In pratica con questa istruzione il focus (cioè l'elemento attivo del form) diventa quello con id="tentativo".
Notiamo anche i commenti, preceduti dal doppio slash (//), che non fanno parte della sintassi del linguaggio, ma servono solo per inserire spiegazioni:
function genera() {
...
Sito realizzato in base al template offerto da
http://www.graphixmania.it
