loops. immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50...
TRANSCRIPT
![Page 1: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/1.jpg)
LOOPS
![Page 2: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/2.jpg)
Immagina di aver un programma, e di volergli far ripetere la stessa sequenza
di azioni 50 volte di seguito.
![Page 3: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/3.jpg)
Questo potrebbe accaderti per esempio, se volessi creare un
programma per produrre una tabella di comparazione tra le temperature in
gradi Fahrenheit e Celsius.
![Page 4: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/4.jpg)
Il programma dovrebbe quindi produrre una tabella di 50 righe dove vengono
mostrate diverse temperature secondo le due scale.
![Page 5: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/5.jpg)
Invece di inserire nel tuo programma 50 righe quasi uguali, potresti servirti dei loop ("anelli")
per rendere possibile al programma di eseguire tale
compito.
![Page 6: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/6.jpg)
Ci sono due tipi diversi di loop: for e while.
![Page 7: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/7.jpg)
Il loop for si usa quando si sa già quante volte il programma dovrà ripetere una certa operazione.
![Page 8: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/8.jpg)
Nel nostro esempio, se volessimo creare esattamente
50 righe.
![Page 9: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/9.jpg)
Il loop while si usa quando si vuole che questo continui ad operare
finché una certa condizione risulterà soddisfatta.
![Page 10: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/10.jpg)
Per esempio, se volessimo creare una tabella di comparazione tra Celsius e Fahrenheit, con un incremento di 15
gradi per ogni riga, e volessimo arrivare fino al valore di 1200 Celsius.
![Page 11: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/11.jpg)
Ecco la descrizione di ognuno dei due loop:
![Page 12: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/12.jpg)
LOOP FOR:
SINTASSI:
![Page 13: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/13.jpg)
for (variable=startvalue; variable<=endvalue;
variable=variable+incrementfactor) {
// Inserisci qui la riga di programma destinata al loop.
}
![Page 14: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/14.jpg)
Inserisci un variablename ("nome di variabile") dove dice variable.
![Page 15: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/15.jpg)
Inserisci il valore di partenza del loop dove dice startvalue.
![Page 16: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/16.jpg)
Inserisci il valore finale del loop dove diceendvalue.
![Page 17: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/17.jpg)
Inserisci il fattore che ogni loop deve incrementare dove dice
incrementfactor.
![Page 18: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/18.jpg)
Nota: L'incrementfactor può anche essere negativo, se si
vuole.
![Page 19: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/19.jpg)
Inoltre il segno <= può essere sostituito da altri simboli di
comparazione, es.>, == o altro.
![Page 20: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/20.jpg)
for (variable=startvalue; variable<=endvalue;
variable=variable+incrementfactor) {
// Inserisci qui la riga di programma destinata al loop.
}
![Page 21: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/21.jpg)
ESEMPIO:
![Page 22: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/22.jpg)
<html><head><title>Celsius-Fahrenheit Converter</title></head>
<body><table border=3><tr><td>CELSIUS</td><td>FAHRENHEIT</td></tr><script language="javascript">
![Page 23: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/23.jpg)
for (celsius=0; celsius<=50; celsius=celsius+1){document.write("<tr><td>"+celsius+"</td><td>"+((celsius*9/5)+32)+"</td></tr>");}</script></table></body></html>
![Page 24: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/24.jpg)
LOOP WHILE:
![Page 25: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/25.jpg)
while (variable<=endvalue) {// Inserisci qui la riga di programma destinata al loop.}
![Page 26: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/26.jpg)
Inserisci un variablename ("nome di variabile") dove dice variable.
![Page 27: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/27.jpg)
Inserisci il valore finale del loop dove dice endvalue.
![Page 28: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/28.jpg)
Nota: Il segno <= si può sostituire con altri simboli in grado di soddisfare la condizione, es. >, == o altro.
![Page 29: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/29.jpg)
ESEMPIO:
![Page 30: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/30.jpg)
<html><head><title>Celsius-Fahrenheit converter</title></head>
<body><table border=3><tr><td>CELSIUS</td><td>FAHRENHEIT</td></tr><script language="javascript">
![Page 31: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/31.jpg)
celsius=0;while (celsius<=50){document.write("<tr><td>"+celsius+"</td><td>"+((celsius*9/5)+32)+"</td></tr>");celsius=celsius+1;}</script></table></body></html>
![Page 32: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/32.jpg)
BREAK & CONTINUE
![Page 33: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/33.jpg)
Esistono due comandi speciali che si possono usare nei loop: break e
continue.
![Page 34: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/34.jpg)
break semplicemente interrompe il loop e continua con ciò che segue il loop.
![Page 35: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/35.jpg)
Per esempio si potrebbe avere un loop in grado di calcolare la radice quadrata dei
numeri decrescenti a partire da 50.
![Page 36: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/36.jpg)
Siccome il calcolo della radice quadrata di numeri negativi è un'operazione matematica non
consentita, sarebbe opportuno interrompere il loop nel momento in cui la radice quadrata di
zero sarà stata calcolata.
![Page 37: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/37.jpg)
Per fare questo bisognerà inserire all'interno del loop:
![Page 38: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/38.jpg)
if (value==0) {break};
![Page 39: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/39.jpg)
continue interrompe il loop in corso e continua con il valore seguente.
![Page 40: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/40.jpg)
Per esempio si potrebbe avere un loop in grado di dividere un certo valore per un fattore di numeri compresi tra -50 e +50.
![Page 41: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/41.jpg)
Siccome la divisione per zero è un'operazione matematica non consentita,
ecco come sarebbe il loop:
![Page 42: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/42.jpg)
for (value=-50; value<=50; value=value+1)
{if (value==0) {continue};
document.write((100/value)+"<br>");}
![Page 43: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/43.jpg)
ARRAYS
![Page 44: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/44.jpg)
Quando si lavora con programmi complessi, si possono incontrare situazioni in cui si hanno molte
variabili più o meno simili.
![Page 45: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/45.jpg)
Invece di essere costretto a scrivere una riga per ogni
operazione, a causa di una variabile, puoi fare uso di
raggruppamenti ("arrays") che sono in grado di aiutarti ad automatizzare il processo.
![Page 46: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/46.jpg)
Guarda questo esempio:
![Page 47: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/47.jpg)
value1=10;value2=20;value3=30;....qui vanno 96 righe simili....value100=1000
Esempio 1
![Page 48: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/48.jpg)
value=new Array;for (number=1; number<=100; number=number+1){ value[number]=number*10};
Esempio 2
![Page 49: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/49.jpg)
Nell'esempio 1 avrai bisogno di inserire 100 righe per compiere
un'operazione con le tue variabili.
![Page 50: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/50.jpg)
Nell'esempio 2 devi soltanto inserire 3 righe,
indipendentemente dal numero di variabili.
![Page 51: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/51.jpg)
Il raggruppamento deve essere definito prima che ci si riferisca
ad alcuna delle variabili che contiene.
![Page 52: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/52.jpg)
Questo si ottiene usando la sintassi:
variablename=new Array;
![Page 53: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/53.jpg)
Sostituisci variablename con il nome prescelto per il tuo
raggruppamento.
![Page 54: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/54.jpg)
Note: la parola "new" deve essere scritta tutta in minuscolo, mentre "Array" deve iniziare con la A maiuscola.
![Page 55: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/55.jpg)
Come mostra l'esempio, i raggruppamenti diventano
estremamente efficaci quando sono usati in combinazione con i
loop.
![Page 56: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/56.jpg)
Comunque, non c'è bisogno di sistemare le variabili dei raggruppamenti in loop.
![Page 57: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/57.jpg)
Le singole variabili si possono trattare con una
sintassi del genere:
![Page 58: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/58.jpg)
value[9]=170;
![Page 59: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/59.jpg)
Sei arrivato alla fine del corso!
Quando ti sentirai sicuro delle conoscenze base di javascript che hai appreso in questa sezione, potrai andare avanti e studiare gli oggetti di
javascript.
Gli oggetti ("objects") sono funzioni predefinite per matematica, variabili di testo, controllo del browser, eccetera.
Effettivamente, ogni singola voce messa su una pagina web è un oggetto che può essere cambiato, letto o scritto da javascript.
Ecco dove comincia il divertimento con javascript: quando sei in grado di controllare i singoli oggetti (form field, bottoni, immagini, menù, ecc.)
sulle pagine.
Allora potrai iniziare a portare le tue pagine a un livello avanzato.
![Page 60: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/60.jpg)
BOTTONI ANIMATI
![Page 61: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/61.jpg)
Ecco l'esempio di un bottone che è stato animato usando
javascript.
Prova a passare il mouse sul bottone.
![Page 63: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/63.jpg)
Il resto di questo capitolo ti insegnerà a creare questo
effetto con javascript.
![Page 64: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/64.jpg)
LA TECNICA
![Page 65: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/65.jpg)
Sistemiamo il bottone sulla pagina come una qualsiasi altra immagine su
una pagina web.
![Page 66: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/66.jpg)
Poi aggiungiamo un eventoonMouseOver
all'immagine.
![Page 67: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/67.jpg)
L'evento farà partire una funzione javascript che, quando il mouse passerà sul bottone, sostituirà
l'immagine iniziale con una seconda immagine.
![Page 68: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/68.jpg)
Infine aggiungiamo all'immagine anche un evento onMouseOut.
![Page 69: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/69.jpg)
Questo evento farà partire una funzione javascript che ripristinerà l'immagine iniziale quando l'utente allontanerà il
mouse dal bottone.
![Page 70: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/70.jpg)
Questa tecnica è dunque un processo a due passi:
![Page 71: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/71.jpg)
Primo, devi inserire degli attributi "mouse event" ai tag HTML delle
immagini.
![Page 72: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/72.jpg)
Secondo, devi inserire un programma che parte quando il
browser identifica gli eventi riguardanti il mouse.
![Page 73: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito](https://reader034.vdocuments.mx/reader034/viewer/2022051400/5542eb4f497959361e8bee04/html5/thumbnails/73.jpg)