In un qualunque programma, si dispone di due tipi di strutture di controllo:
La struttura di controllo if (in italiano: se), dapprima verifica una condizione e, soltanto se questa è verificata, esegue l'istruzione (o il blocco di istruzioni) in essa contenuta.
La sua sintassi in JavaScript sarebbe if (condizione) istruzione
, ma volendo eseguire più istruzioni le si dovrebbero riunire in blocco di istruzioni.
Per evitare di dimenticarsi di aggiungere le parentesi graffe quando si aggiungono istruzioni, conviene usare sempre la seguente sintassi, anche nel caso di una sola istruzione:
if (condizione) { istruzione 1; istruzione 2; ... istruzione n; }
Dicendo verifica una condizione, intendiamo: controlla che l'espressione condizione, restituisca il valore true (vero).
Visto che si è parlato prima della funzione isNaN, proviamo ad eseguire un blocco di istruzioni verificando i risultati di IsNaN
var str1 = 'testo senza numeri'; var num1 = parseInt(str1); // parseInt restituisce NaN che viene assegnato alla variabile num1 var seNaN1 = isNaN(num1); // isNaN restituisce true che viene assegnato alla variabile seNaN1 // struttura di controllo if con condizione verificata if (seNaN1) { // la condizione è verificata quindi si esegue il blocco di istruzioni document.write('<p>str1: ' + str1 + '</p>'); document.write('<p>num1: ' + num1 + '</p>'); document.write('<p>seNaN1: ' + seNaN1 + '</p>'); window.alert('Attenzione!:\n\'' + str1 + '\' non è un numero.') } var str2 = '123'; var num2 = parseInt(str2); // parseInt restituisce il num2 123 che viene assegnato alla variabile num2 var seNaN2 = isNaN(num2); // isNaN restituisce false che viene assegnato alla variabile seNaN2 // struttura di controllo if con condizione NON verificata if (seNaN2) { // la condizione NON è verificata quindi NON si esegue il blocco di istruzioni document.write('<p>str2: ' + str2 + '</p>'); document.write('<p>num2: ' + num2 + '</p>'); document.write('<p>seNaN2: ' + seNaN2 + '</p>'); window.alert('Attenzione!:\n\'' + str2 + '\' non è un numero.') } document.write('<p>fatto</p>');
Che succede?
La varibile str1, non contiene numeri, quindi parserInt, non trovando numeri, restituisce il valore speciale NaN. Esaminano questo valore con la funzione isNaN, si ottiene true.
La struttura if, verificando la condizione, la trova vera (true) quindi esegue il blocco di istruzioni.
Nel secondo caso, la conversione in numero della stringa str2, va a buon fine, quindi isNaN restituisce false e, non essendo verificata la condizione, la struttura if non esegue le istruzioni ed il programma esce dall'if e trova il document.write che scrive fatto nella pagina.
Molto spesso, le condizioni verificate dalle strutture di controllo selezione ed iterazione, sono il risultato di un operazione di confronto.
Queste operazioni restituiscono sempre un valore logico (true o false).
Ad esempio 1 < 2 restituirà true e 10 > 3 restituirà false,
Per eseguire le operazioni di confronto si dispone di questi operatori:
operatore | significato |
---|---|
> | maggiore |
< | minore |
>= | maggiore o uguale |
<= | minore o uguale |
== | uguale |
!= | diverso |
Fare attenzione al fatto che l'operatore == opera un confronto e restituisce true o false, da con confondersi con = che è l'operatore assegnazione.
Forse non è inutile precisare che, rispetto ad un dato numero, un qualunque altro numero può essere o minore o uguale o maggiore. Rispetto al numero 5, per esempio, tutti quelli da -∞ a 5 (5 escluso) sono minori, il 5 è uguale e quelli da 5 (5 escluso) a +∞ sono maggiori.
Ne deriva che, sempre rispetto ad un numero dato, un altro qualunque numero,
e così via.
Altri esempi di uso della struttura di controllo if potrebbero essere:
In questo esempio, prima chiediamo all'utente la sua età e, se minorene lo avvertiamo che non ha diritto a votare.
var eta = window.prompt('immettere la propria età',''); eta = parseInt(eta); if (eta < 18) { window.alert('In quanto minorenne non hai diritto al voto.'); } // alernativa più efficiente: // var eta = parseInt(window.prompt('immettere la propria età',''));
In questo esempio chiediamo all'utente di indovinare una password prestabilita (JavaScript) e lo avvertiamo nel caso in cui abbia sbagiato:
var psw = window.prompt('indovinare la password',''); if (psw != 'JavaScript') { window.alert('password errata!'); }
In questo esempio chiediamo conferma all'utente di scrivere il titolo nella pagina e lo si scriverà solo in caso affermativo:
var conf = window.confirm('scrivere il titolo?'); if (conf) { document.write('<h1>titolo condizionato</h1>'); }
La struttura di controllo if, esegue un gruppo di istruzioni se una condizione è verificata e in caso contrario non esegue nessuna istruzione.
Volendo sempre eseguire un gruppo di istruzioni se la condizione è verificata, ma anche esguirne un secondo gruppo in caso contrario, bisogna usare la struttura di controllo if-else.
È sufficiente aggiungere alla struttura if, il caso else (in italiano: altrimenti), secondo la seguente sintassi:
if (condizione) { istruzioni se condizione vera; } else { istruzioni se condizione falsa; }
Portiamo ad esempio uno script che chieda all'utente di indovinare chi sia l'autore della frase "Il perder tempo a chi più sà più spiace", quindi scriva nella pagina se la risposta è esatta o errata.
Questo è lo script:
var risp = window.prompt('chi disse:\n"Il perder tempo a chi più sà più spiace"?',''); if (risp=='Dante') { document.write('<h1>esatto!</h1>'); document.write('<p>È una citazione del sommo poeta.</p>'); } else { document.write('<h1>sbagliato!</h1>'); document.write('<p>Puoi comunque riprovare.</p>'); } }
Altri esempi dell'uso della struttura di controllo if-else potrebbero essere:
In questo esempio, come in quello precedente, viene chiesto all'utente di immettere la propria età, quindi, se minorenne si visualizza un messaggio di avvertimento, ed in più, si scrive un messaggio nella pagina se maggiorenne.
var eta = window.prompt('immettere la propria età',''); eta = parseInt(eta); if (eta < 18) { window.alert('In quanto minorenne non hai diritto al voto.'); } else { document.write('<h1>voto on-line</h1>'); document.write('<p>visto che hai ' + eta + ' anni, hai diritto di voto.</p>'); } // alernativa più efficiente: // var eta = parseInt(window.prompt('immettere la propria età',''));
Se l'età non è minore di 18 è necessariamente maggiore o uguale. Sarebbe stato quindi equivalente verifica se eta >= 18
e ovviamente invertire le istruzioni da eseguire se vero e se falso.
Così:
if (eta >= 18) { document.write('<h1>voto on-line</h1>'); document.write('<p>visto che hai ' + eta + ' anni, hai diritto di voto.</p>'); } else { window.alert('In quanto minorenne non hai diritto al voto.'); }
Per determinare se un numero immesso dall'utente sia pari o dispari, ci si avvale dell'operatore % il quale fornisce il resto della divisione intera (8 % 2 restituisce 0 perché 8 diviso 2 fa 4 con il resto di 0; invece 7 % 2 restituisce 1 perché 7 diviso 2 fa 3 con il resto di 1). Dividendo il numero per 2, controlleremo il resto: se 0, allora il numero è pari, altrimenti, è dispari.
var num = window.prompt('immettere un numero intero:',''); num = parseInt(num); var resto = num % 2; if (resto == 0) { document.write('<p>Il numero ' + num + ' è <b>pari</b></p>'); } else { document.write('<p>Il numero ' + num + ' è <b>dispari</b></p>'); } // alernativa più efficiente: // var num = parseInt(window.prompt('immettere un numero intero:','')); // if (num % 2 == 0) {
Quello che segue un è banale esempio di script che contempla tutte le finestre di dialogo,
var nome = window.prompt('Inserire il proprio nome','qui'); var conferma = window.confirm('Sei sicuro di chiamarti ' + nome + '?'); if (conferma) { window.alert('Benvenuto/a ' + nome + '!!!'); } else { window.alert('Non sai neanche come ti chiami?'); } // alernativa più efficiente: // if (window.confirm('Sei sicuro di chiamarti ' + nome + '?')) {
In questi ultimi esempi, non avendo considerato tutte le risposte che l'utente può dare, potremmo avere diversi problemi:
Nell'esempio 1 (if-else), non abbiamo considerato che l'utente, invece che immettere un numero possa:
Infatti:
Le soluzioni sono due:
In entrambi i casi, bisognerà inserire delle strutture if dentro ad altre strutture if, ovvero nidificare le strutture di controllo.
NB:
Non vale soltanto le strutture if , si possono nidificare tutte le strutture di controllo.
Proviamo la prima soluzione:
Nel diagramma di flusso, i blocchi evidenziati corrispondono alle strutture if.
Come si nota, verificando che l'iutente abbia dato uno dei tre tipi di risposta non valida, procediamo per esclusione: soltanto alla fine, una volta esclusi tutti i casi non validi, ossia tutte le condizioni non sono verificate, essendo sicuri di avere un numero, procediamo a controllare la maggiore età.
Lo script pertanto sarà:
var eta = window.prompt('immettere la propria età',''); if (eta == null) { window.alert('errore:\nrisposta non valida'); } else { if (eta == '') { window.alert('errore:\nrisposta non valida'); } else { eta = parseInt(eta); if (isNaN(eta)) { window.alert('errore:\nrisposta non valida'); } else { if (eta < 18) { window.alert('In quanto minorenne non hai diritto al voto.'); } else { document.write('<h1>voto on-line</h1>'); document.write('<p>visto che hai ' + eta + ' anni, hai diritto di voto.</p>'); } } } }
Ecco invece la seconda soluzione::
Come detto, questa soluzione, si avvantaggia del fatto che, sottoponendo all'esame della funzione parseInt la risposta dell'utente, essa restituirà NaN sia se l'utente ha premuto il tasto annulla (parseInt(null) → NaN), sia nel caso l'utente abbia premuto il tasto ok senza scrivere nulla (parseInt('') → NaN), sia nel caso l'utente non abbia immesso un numero valido (parseInt('stringa alfabetica') → NaN).
Lo script sarà:
var eta = window.prompt('immettere la propria età',''); eta = parseInt(eta); if (isNaN(eta)) { window.alert('errore:\nrisposta non valida'); } else { if (eta < 18) { window.alert('In quanto minorenne non hai diritto al voto.'); } else { document.write('<h1>voto on-line</h1>'); document.write('<p>visto che hai ' + eta + ' anni, hai diritto di voto.</p>'); } } // alernativa più efficiente: // var eta = parseInt(window.prompt('immettere la propria età',''));
Abbiamo accennato all'algebra di Boole parlando dei dati di tipo logico (o booleano) che possono asseumere i valori vero o falso (true o false).
Questa algebra definisce gli operatori logici: uno strumento che semplificherà molto i nostri programmi, consentendoci per esempio di riunire la verifica di diverse condizioni in un'unica espressione.
operatore | operazione | |
---|---|---|
! | not | (negazione logica) |
&& | and | (congiunzione logica) |
¦¦ | or | (disgiunzione logica) |
L'operatore not, ha un solo operando: restituisce true se l'operando è false e false se l'operatore è true (o non booleano).
L'operatore and, restituisce true solo se i suoi due operandi sono entrambi true (false in caso contrario).
L'operatore or, restituisce true, quando almeno uno dei sui operandi è true (quindi false solo se entrambi false).
Queste sono lo corrispondenti tabelle di verita:
A | !A |
---|---|
V | F |
F | V |
A | B | A && B |
---|---|---|
V | V | V |
V | F | F |
F | V | F |
F | F | F |
A | B | A|| B |
---|---|---|
V | V | V |
V | F | V |
F | V | V |
F | F | F |
Se volessimo uno script che scriva nella pagina un numero digitato dall'utente, prima di scriverlo, bisognerebbe controllare che l'utente abbia immesso un numero valido, ovvero che la funzione parseInt non restituisca NaN.
La funzione isNaN, restituisce true se l'argomento è NaN, ma a noi interessa il caso opposto: vogliano scrivere la risposta se non è NaN (not isNaN).
var num = parseInt(window.prompt('immettere un numero da scrivere nella pagina','')); if (!isNaN(num)) { document.write('<p>numero immesso: <b>' + num + '</b></p>'); } else { window.alert('errore:\nnumero non valido'); }
Ora vogliamo uno script che chieda all'utente il suo voto all'esame di informatica, quindi lo scriva nella pagina.
Prima bisogna controllare che l'utente abbia immesso un numero valido, ma vogliamo anche che il numero immesso sia un voto in trentesimi valido: compreso tra 1 e 30.
Bisogna cioè verificare altre due condizoni:
voto > 0
deve essere true.voto <= 30
deve essere true.Senza operatori logici dovremmo usare strutture di controllo if nidificate:
in JavaScript:
var voto = parseInt(window.prompt('immettere il voto dell\'esame di informatica','')); if (!isNaN(voto)) { if (voto > 0) { if (voto <=30) { document.write('<p>voto in informatica: ' + voto + '<small>/30</small></p>'); } else { window.alert('errore:\nvoto non valido'); } } else { window.alert('errore:\nvoto non valido'); } } else { window.alert('errore:\nnumero non valido'); }
Perché il voto sia valido, le condizioni voto > 0
e voto <= 30
, devono essere entrame verificate (true): il numero deve essere oltre il minimo e anche (AND) entro il massimo
È con l'operatore logico AND (&&) che avremo true quando entrambi gli operandi siano true.
Allora, ci basterà verificare un'unica condizione: voto > 0 && voto <= 30
:
In JavaScript:
var voto = parseInt(window.prompt('immettere il voto dell\'esame di informatica','')); if (!isNaN(voto)) { if (voto > 0 && voto <= 30) { document.write('<p>voto in informatica: ' + voto + '<small>/30</small></p>'); } else { window.alert('errore:\nvoto non valido'); } } else { window.alert('errore:\nnumero non valido'); }
Si capisce che, volendo, protremmo anche verificare tutte tre le condizioni usando una espressione soltanto:
Ed ecco lo script:
var voto = parseInt(window.prompt('immettere il voto dell\'esame di informatica','')); if (!isNaN(voto) && voto > 0 && voto <= 30) { document.write('<p>voto in informatica: ' + voto + '<small>/30</small></p>'); } else { window.alert('errore:\nvoto non valido'); }
Attenzione all'ordine perché non è casuale:
!isNaN(voto)
.!isNaN(voto) && voto > 0
) se la prima è false non c'è bisogno di verificare l'altra.voto > 0
.Chi l'ha detto?
Immaginiamo di proporre all'utente una citazione perché indovini chi l'abbia detta.
La disumanità del computer sta nel fatto che, una volta programmato e messo in funzione, si comporta in maniera perfettamente onesta.(Isaac Asimov)
L'utente che conoscesse la risposta potrebbe rispondere correttamente:
Per contemplare tutti i casi, senza gli operatori logici, il nostro script sarebbe costituito da ben sei strutture if, ma usando l'operatore OR (¦¦), basterà che una delle sei condizioni sia verificata (true) perché il risultato dell'unica espressione sia true.
L'operatore OR, come l'AND, valuta le condizioni a due a due da sinistra verso destra:
risp == 'Isaac Asimov'
è true?.In questo caso, quindi, l'ordine delle condizioni non è rilevante.
In questa pagina, porre la citazione nella finestra del prompt, sarebbe poco funzionale, quindi, prima dello script, inseriamo la citazione come paragrafo, così l'utente la legge nella pagina e nella finestra del prompt basterà chi l'ha detto?.
Per rendere più accattivante il quiz abbiamo lavorato un po' anche sul codice html della pagina, per dubbi, consultare la sezione html.
Questo è lo script:
var risp = window.prompt('chi l\'ha detto?',''); if (risp == 'Isaac Asimov' || risp == 'Isaac asimov' || risp == 'isaac Asimov' || risp == 'isaac asimov' || risp == 'Asimov' || risp == 'asimov') { document.write('<p align="right"><i>(Isaac Asimov)</i></p>'); window.alert('risposta esatta!'); } else { document.write('<p align="right"><i>( ? )</i></p>'); window.alert('risposta sbagliata\naggiorna la pagina per riprovare.'); }
È utile provare a costruire lo script senza usare l'operatore logico OR con la seguente strategia:
Questo è il diagramma di flusso:
Questo il programma:
var risp = window.prompt('chi l\'ha detto?',''); var esatto = false; if (risp == 'Isaac Asimov') esatto = true; if (risp == 'Isaac asimov') esatto = true; if (risp == 'isaac Asimov') esatto = true; if (risp == 'isaac asimov') esatto = true; if (risp == 'Asimov') esatto = true; if (risp == 'asimov') esatto = true; if (esatto) { document.write('<p align="right"><i>(Isaac Asimov)</i></p>'); window.alert('risposta esatta!'); } else { document.write('<p align="right"><i>( ? )</i></p>'); window.alert('risposta sbagliata\naggiorna la pagina per riprovare.'); }
Avendo una sola istruzione per le strutture if, abbiamo derogato alla regola generale che ci eravamo dati di usare sempre le parentesi graffe, ma in questo caso lo script migliora in leggibilità.