LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50...

73
LOOPS

Transcript of LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50...

Page 1: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito.

LOOPS

Page 2: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

ESEMPIO:

Page 22: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito.

<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.

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.

LOOP WHILE:

Page 25: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito.

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.

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.

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.

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.

ESEMPIO:

Page 30: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito.

<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.

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.

BREAK & CONTINUE

Page 33: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

ARRAYS

Page 44: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

BOTTONI ANIMATI

Page 61: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito.

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.

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.

LA TECNICA

Page 65: LOOPS. Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di seguito.

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.

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.

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.

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.

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.

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.

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.

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.