Tutorial Javascript

Selezione/Itinerazione

 

Io non ne so molto di Javascript, infatti questo tutorial è stato realizzato dal mio amico Gogeta Ssj3, che ringrazio moltissimo per l'aiuto fornito.

Visitate il suo ottimo sito !

 

[ Le funzioni ] [ Selezione/Iterazione ] [ Oggetti ] [ Operatori/Eventi ]

 

Iniziamo a parlare con la selezione, cosa indispensabile per creare script in JavaScript e comunque in qualsiasi altro linguaggio... Allora, la selezione si fa usando il comando IF e la sua sintassi è la seguente :


if (condizione) {
istruzioni ; }
else {
istruzioni ; }



Facile da capire no ? Se la condizione è VERA vengono eseguite le istruzioni che si trovano nelle prima parentesi grafe, altrimenti (se la condizione è FALSA) vengono eseguite le istruzioni nella seconda coppia di parentesi grafe. Niente esclude che nelle parentesi grafe (dove ci sono le istruzioni) ci possa essere un altro IF. Facciamo subito un esempio, che forse vi chiarirà le idee :


<script language="JavaScript">
function sfere(numero) {         
if (numero<"7") {                     
        alert('Le sfere sono di più !') }
 else {                                         
if (numero>"7") {            
                      alert('Le sfere sono di meno !') }
else {                               
                        alert('Bravo ! Hai fatto giusto !') }
}                        
}                                       
</script>                                   

....

Quante sono le sfere del drago ?
<form>
<input type="text" name="risposta" maxlenght="5">
<input type="submit" value="Verifica !" onclick="sfere(risposta.value)">
</form>



Ancora una volta, guardiamo il codice riga per riga. Per prima cosa abbiamo messo i TAG che contrassegnano uno script in JavaScript (d'ora in poi non lo diremo più...). Poi abbiamo definito una funzione di nome "sfere" e che riceve un valore (numero). Analizzeremo dopo cosa fa la funzione. Abbiamo scritto una domanda: "Quante sono le sfere del drago ?" e definito un form con un campo dove scrivere la risposta e con un bottone per confermarla.  Appena clicchiamo su "Verifica !" (il bottone per confermare) richiamiamo la funzione "sfere" e gli passiamo il valore che abbiamo scritto nel capo di testo (risposta.value) .
Guardiamo ora la funzione : per prima cosa controlla se il numero è minore di 7 . Se la condizione è VERA da un errore con scritto "Le sfere sono di più !" e lo script non esegue più niente. Nel caso che "numero" non fosse minore di 7 (la condizione era FALSA) vengono eseguite le istruzioni dopo ELSE . A questo punto si presenta un nuovo IF : se "numero" è maggiore di 7 da un errore con scritto "Le sfere sono di meno !" .
Nel caso che anche questa condizione fosse FALSA, significherebbe che "numero" è uguale a 7 e quindi diamo il messaggio di successo. Ripetiamo ora velocemente cosa fa e dopo proviamolo di persona ! Allora, per prima cosa controlla se numero>7, se è VERO scrive che le sfere sono di più, se è FALSO continua. Poi controlla se numero>7 : se è VERO dice che le sfere sono di meno se no continua. A questo punto, se numero non è ne maggiore nè minore di 7 vuol dire che è uguale a 7 e quindi diamo un messaggio di successo !


Prova 3
Quante sono le sfere del drago ?




Attenzione : se l'utente scrive lettere dell'alfabeto o simboli del codice ASCII, lo script non funziona . Sarà necessario allora inserire nello script un altro IF (proprio come ho fatto nello script che potete provare sopra) che controlli se la stringa immessa nel campo di testo sia un numero ! Ad esempio si potrebbe scrivere :


function sfere(numero){   
if (numero/numero==1) {
istruzioni ;

}


In questo caso dividiamo "numero" per se stesso. Se il risultato è 1 siamo sicuri che si tratta di un numero e eseguiamo le istruzioni già esposte prima. Se invece "numero" (ossia quello che è stato inserito nel form) non è effettivamente un numero, l'operazione "numero/numero" non darà 1 come risultato e non verranno eseguite le istruzioni. Per quanto riguarda la selezione, non c'è altro da dire, a parte quella di ricordarsi di indentare bene gli script e renderli più chiari con dei commenti. Per scrivere i commenti si utilizza // come riportato di seguito :


istruzioni ;     //commento


Passiamo ora all' iterazione. Non voglio assolutamente dilungarmi su questo argomento : necessita di spiegazioni approfondite e non ne vale la pena dato che in JavaScript difficilmente ci capiterà di usare un ciclo. Esistono 3 tipi di cicli, vediamone uno alla volta.


for (variabile=valore_iniziale ; condizione ; variabile++) {
istruzioni ;
}



Il FOR agisce così : prende una variabile indice e le assegna un valore iniziale. Poi ripete le istruzioni tra parentesi grafe fino a quando la condizione non diventa FALSA e ad ogni giro incrementa (o decrementa) la variabile indice. Facciamo subito un esempio :


<script language="JavaScript">
var aura1 ;
for (aura1=0 ; aura1<3 ; aura1++) {
alert(aura1) ;
}
</script>

                 

Prova 4
Prova il FOR



Le istruzioni, non essendo racchiuse in una funzione, vengono eseguite al caricamento della pagina. Queste istruzioni fanno : porta "aura1" a 0, fa un alert che mostra il valore di "aura1", poi incrementa "aura1", controlla che sia minore di 3. Se è minore fa ancora l'alert mostrando "aura1" (che questa volta è a 1) altrimenti, se la condizione è falsa, esce dal ciclo. E va avanti così fino a quando la condizione si dimostra FALSA. Attenti a non fare cicli dove la condizione non è mai falsa !!! Se questo accade entrate in un loop infinito e nel nostro caso continuerebbero ad apparire alert !!!


<script language="JavaScript">
while (condizione) {
istruzioni ;
}
</script>



Il WHILE è più facile da capire : continua a fare le istruzioni tra parentesi grafe fino a quando la condizione non diventa FALSA. Ecco l'ultimo ciclo :


<script language="JavaScript">
do  {
istruzioni ;
} while (condizione) ;
</script>


Anche il DO-WHILE è molto intuitivo : è come il WHILE. Infatti anche questo cicla per VERO ossia continua a ripetere le istruzioni fino a che la condizione è VERA .

 

Lezione Successiva


[ Le funzioni ] [ Selezione/Iterazione ] [ Oggetti ] [ Operatori/Eventi ]