Javascript - Lezione 9: Programma di calcolo - EVAL / ONFOCUS / ONBLUR / ONMOUSEMOVE / ONMOUSEOUT / ONKEY

Rieccoci, vediamo ora che iniziamo a masticare un po' di javascript come fare per realizzare una macchina per il calcolo.

Innanzitutto realizzeremo un form dove poter inserire dentro i nostri numeri.

<form name="calcola">
<input type="text" name="uno">
<br>
<input type="text" name="due">
<br>
<input type="text" name="tre">
<br>
<input type="submit" value="Somma" onclick="somma()">
</form>

Nel form abbiamo scritto alla fine l'evento onclick che serve a dare il comando necessario a recuperare lo script.

Ora invece andremo a creare il nostro script per il calcolo della somma di questi due numeri. Esiste un nuovo comando EVAL che serve a far capire al nostro script che deve andare a vedere il valore numerico inserito all'interno del box del form e non quello che c'è scritto come testo.

<script type="text/javascript">
function somma()
{
a=eval(document.calcola.uno.value);
b=eval(document.calcola.due.value);
document.calcola.tre.value=a+b;
}
</script>

Il programma finito che abbiamo scritto sopra lo puoi vedere su questa pagina qua. 

Se vuoi vedere come funziona senza il comando eval, puoi andare su questa pagina.


ONFOCUS



Possiamo andare a inserire un comando tramite il quale non dobbiamo nemmeno cliccare il pulsante calcola. Questo comando da inserire nel form si chiama ONFOCUS. Il focus sarebbe la selezione di un elemento, se siamo su una casella che stiamo scrivendo, quella sarà in focus. Vediamo la nel concreto l'esempio:

<form name="calcola">
Scrivi il primo numero <input type="text" name="uno">Scrivi il primo numero
<br>
Scrivi il secondo numero <input type="text" name="due">
<br>
Risultato <input type="text" name="tre" onfocus="somma()">
<br>
</form>

A questo per vedere come funziona dovete andare su questa pagina. Come puoi vedere, per avere il risultato, devi cliccare sulla terza casella vuota, e in automatico apparirà il risultato della somma tra i primi due numeri che hai scritto.

ONBLUR

Questo comando da inserire sempre nel form serve a far partire in automatico lo script quando la casella per il focus, quando per la selezione.


<form name="calcola">
Scrivi il primo numero <input type="text" name="uno">
<br>
Scrivi il secondo numero <input type="text" name="due" onblur="somma()">
<br>
 Risultato <input type="text" name="tre" >
<br>
</form>

Nell'esempio l'ho messo solo nella seconda casella, ma possiamo metterla ad entrambe le caselle, in maniera che ogni volta che modifichiamo un dato, si aggiorna tutto in automatico. L'esempio lo puoi vedere in questa pagina.

ONMOUSEMOVE

Questa serve per permettere alla pagina di aggiornarsi in automatico al movimento del mouse sopra la casella.

<form name="calcola">
Scrivi il primo numero <input type="text" name="uno" onmousemove="somma()">
<br>
Scrivi il secondo numero <input type="text" name="due" onmousemove="somma()">
<br>
 Risultato <input type="text" name="tre" >
<br>
</form>

Puoi vedere il risultato di quanto fatto su questa pagina.

ONMOUSEOUT


Questa serve per permettere alla pagina di aggiornarsi in automatico al movimento del mouse nella casella.

<form name="calcola">
Scrivi il primo numero <input type="text" name="uno" onmouseout="somma()">
<br>
Scrivi il secondo numero <input type="text" name="due" onmouseout="somma()">
<br>
 Risultato <input type="text" name="tre" >
<br>
</form>

Puoi vedere il risultato di quanto fatto su questa pagina.

ONKEY

Simili a questo ci sono anche ONKEYDOWN, ONKEYPRESS, ONKEYUP,  rispettivamente quando si schiaccia un pulsante, quando si preme un pulsante, e quando si rilascia il pulsante.


Questo comando serve per dare l'input con il doppio click del mouse sulla casella dove è stato inserito il comando.

Nessun commento:

Posta un commento

Ti ringrazio per ogni commento, appunto, modifica o richiesta di chiarimento. Mantenendo sempre un tono civile. Ogni commento che non rispetta tali regole, sarà eliminato, sopratutto se fatto in maniera anonima. TI ricordo che cerchiamo nuovi collaboratori o appunti, per implementare il materiale presente sul sito.

Related Posts Plugin for WordPress, Blogger...