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 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 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:
Esempio 1 value1=10; value2=20; value3=30; .... qui vanno 96 righe simili .... value100=1000
Esempio 2 value=new Array; for (number=1; number<=100; number=number+1) { value[number]=number*10};
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 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 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.