Post on 01-May-2015
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.
Il programma dovrebbe quindi produrre una tabella di 50 righe dove vengono
mostrate diverse temperature secondo le due scale.
Invece di inserire nel tuo programma 50 righe quasi uguali, potresti servirti dei loop ("anelli")
per rendere possibile al programma di eseguire tale
compito.
Ci sono due tipi diversi di loop: for e while.
Il loop for si usa quando si sa già quante volte il programma dovrà ripetere una certa operazione.
Nel nostro esempio, se volessimo creare esattamente
50 righe.
Il loop while si usa quando si vuole che questo continui ad operare
finché una certa condizione risulterà soddisfatta.
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.
Ecco la descrizione di ognuno dei due loop:
LOOP FOR:
SINTASSI:
for (variable=startvalue; variable<=endvalue;
variable=variable+incrementfactor) {
// Inserisci qui la riga di programma destinata al loop.
}
Inserisci un variablename ("nome di variabile") dove dice variable.
Inserisci il valore di partenza del loop dove dice startvalue.
Inserisci il valore finale del loop dove diceendvalue.
Inserisci il fattore che ogni loop deve incrementare dove dice
incrementfactor.
Nota: L'incrementfactor può anche essere negativo, se si
vuole.
Inoltre il segno <= può essere sostituito da altri simboli di
comparazione, es.>, == o altro.
for (variable=startvalue; variable<=endvalue;
variable=variable+incrementfactor) {
// Inserisci qui la riga di programma destinata al loop.
}
ESEMPIO:
<html><head><title>Celsius-Fahrenheit Converter</title></head>
<body><table border=3><tr><td>CELSIUS</td><td>FAHRENHEIT</td></tr><script language="javascript">
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>
LOOP WHILE:
while (variable<=endvalue) {// Inserisci qui la riga di programma destinata al loop.}
Inserisci un variablename ("nome di variabile") dove dice variable.
Inserisci il valore finale del loop dove dice endvalue.
Nota: Il segno <= si può sostituire con altri simboli in grado di soddisfare la condizione, es. >, == o altro.
ESEMPIO:
<html><head><title>Celsius-Fahrenheit converter</title></head>
<body><table border=3><tr><td>CELSIUS</td><td>FAHRENHEIT</td></tr><script language="javascript">
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>
BREAK & CONTINUE
Esistono due comandi speciali che si possono usare nei loop: break e
continue.
break semplicemente interrompe il loop e continua con ciò che segue il loop.
Per esempio si potrebbe avere un loop in grado di calcolare la radice quadrata dei
numeri decrescenti a partire da 50.
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.
Per fare questo bisognerà inserire all'interno del loop:
if (value==0) {break};
continue interrompe il loop in corso e continua con il valore seguente.
Per esempio si potrebbe avere un loop in grado di dividere un certo valore per un fattore di numeri compresi tra -50 e +50.
Siccome la divisione per zero è un'operazione matematica non consentita,
ecco come sarebbe il loop:
for (value=-50; value<=50; value=value+1)
{if (value==0) {continue};
document.write((100/value)+"<br>");}
ARRAYS
Quando si lavora con programmi complessi, si possono incontrare situazioni in cui si hanno molte
variabili più o meno simili.
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.
Guarda questo esempio:
value1=10;value2=20;value3=30;....qui vanno 96 righe simili....value100=1000
Esempio 1
value=new Array;for (number=1; number<=100; number=number+1){ value[number]=number*10};
Esempio 2
Nell'esempio 1 avrai bisogno di inserire 100 righe per compiere
un'operazione con le tue variabili.
Nell'esempio 2 devi soltanto inserire 3 righe,
indipendentemente dal numero di variabili.
Il raggruppamento deve essere definito prima che ci si riferisca
ad alcuna delle variabili che contiene.
Questo si ottiene usando la sintassi:
variablename=new Array;
Sostituisci variablename con il nome prescelto per il tuo
raggruppamento.
Note: la parola "new" deve essere scritta tutta in minuscolo, mentre "Array" deve iniziare con la A maiuscola.
Come mostra l'esempio, i raggruppamenti diventano
estremamente efficaci quando sono usati in combinazione con i
loop.
Comunque, non c'è bisogno di sistemare le variabili dei raggruppamenti in loop.
Le singole variabili si possono trattare con una
sintassi del genere:
value[9]=170;
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.
BOTTONI ANIMATI
Ecco l'esempio di un bottone che è stato animato usando
javascript.
Prova a passare il mouse sul bottone.
Il resto di questo capitolo ti insegnerà a creare questo
effetto con javascript.
LA TECNICA
Sistemiamo il bottone sulla pagina come una qualsiasi altra immagine su
una pagina web.
Poi aggiungiamo un eventoonMouseOver
all'immagine.
L'evento farà partire una funzione javascript che, quando il mouse passerà sul bottone, sostituirà
l'immagine iniziale con una seconda immagine.
Infine aggiungiamo all'immagine anche un evento onMouseOut.
Questo evento farà partire una funzione javascript che ripristinerà l'immagine iniziale quando l'utente allontanerà il
mouse dal bottone.
Questa tecnica è dunque un processo a due passi:
Primo, devi inserire degli attributi "mouse event" ai tag HTML delle
immagini.
Secondo, devi inserire un programma che parte quando il
browser identifica gli eventi riguardanti il mouse.