Somma di due numeri: interfaccia
Consideriamo come ulteriore semplice esempio una pagina per effettuare la somma di due numeri inseriti dall'utente. A tale scopo possiamo creare un form di questo tipo:
Il codice HTML associato è il seguente:
<p>primo numero <input type="text" id="x"></p>
<p> secondo numero <input type="text" id="y"></p>
<p><input type="button" value="SOMMA" onclick="somma()"> </p>
<p> risultato: <input type="text" id="ris"></p>
</form>
Continuando l'esempio precedente, vediamo adesso come potrebbe essere scritta la funzione somma. Tale funzione dev'essere inserita nell'head del programma nel seguente modo:
<script type="text/JavaScript">
function somma()
{
var a, b, c;
a = Number(document.getElementById('x').value);
b = Number(document.getElementById('y').value);
c = a + b;
document.getElementById('ris').value= c;
}
</script>
</head>
Come abbiamo già visto, la funzione Number (è importante stare attenti alla maiuscole e alle minuscole: il JS è case sensitive!) serve per convertire il contenuto della casella di testo in un valore numerico.
Questa funzione è necessaria perché le variabili in JS non hanno tipo e dunque l'operatore + sarebbe altrimenti interpretato erroneamente come concatenazione di stringhe e non come somma di numeri. In altre parole, inserendo in ingresso per esempio i valori numerici '2' e '3', senza l'uso di Number lo script avrebbe prodotto come risultato '23' invece di '5', cioè avrebbe concatenato le due stringhe di ingresso, senza eseguire la somma.
Consideriamo ora una versione alternativa del programma precedente, che fa uso di una funzione con parametri e con valore di ritorno.
<script type="text/JavaScript">
function somma(a,b)
{
var c;
c = Number(a) + Number(b);
return c;
}
</script>
</head>
<body>
<form action="">
primo numero
<input type="text" id="x" > <br >
secondo numero
<input type="text" id="y" >
<input type="button" value="SOMMA"
onclick="document.getElementById('ris').value =
somma(document.getElementById('x').value, document.getElementById('y').value)"
>
<br >
risultato:
<input type="text" id="ris">
</form>
</body>
I parametri della funzione sono a e b e i loro rispettivi valori vengono inizializzati, al momento della chiamata, col contenuto delle caselle di testo x e y. Il valore di ritorno serve per restituire il risultato del calcolo, che viene quindi visualizzato nella casella di testo ris.
L'uso della parola chiave this è utile quando la funzione deve agire sullo stesso elemento a cui è applicato il gestore di eventi. Si consideri l'esempio che segue:
<script type="text/JavaScript">
function quadrato(a)
{
var ris;
ris = Number(a) * Number(a);
return ris;
}
</script>
</head>
<body>
<form action="">
numero:
<input type="text" id="x" onchange="this.value = quadrato(this.value)"> <br >
</form>
</body>
In questo caso la funzione quadrato prende come valore di ingresso (argomento) il contenuto della stessa casella di testo su cui è applicata. Inoltre l'uscita (valore di ritorno) viene copiata sempre nella stessa casella di testo. Scrivendo this possiamo evitarci di scrivere ogni volta document.getElementById.
ATTENZIONE: la parola chiave this funziona all'interno del gestore di eventi applicato all'elemento (nel nostro caso, per esempio, all'interno di onchange), ma non può essere usata all'interno del codice della funzione (nel nostro caso la funzione quadrato). Per fare riferimento all'elemento su cui è stato scatenato l'evento all'interno della funzione quadrato, bisogna usare event.target, come spiegato in una precedente lezione.
Sito realizzato in base al template offerto da
http://www.graphixmania.it
