Argomenti trattati: i costrutti if ed else.
Se un programma, scritto in un qualsiasi linguaggio, venisse semplicemente eseguito in maniera sequenziale, riga dopo riga, senza poter modificare il proprio "comportamento" in base a fattori esterni, sarebbe estremamente limitato. Non sarebbe possibile gestire delle alternative in base alle quali agire in un modo o in un altro. A questo scopo ogni linguaggio di programmazione dispone di proprie istruzioni condizionali che consentono al programmatore di scrivere codice "intelligente" - sono d'obbligo le virgolette - che possa decidere quale istruzione eseguire a seconda dei casi che si presentano. Ovviamente è compito del programmatore prevedere tutti i casi che possono ragionevolmente presentarsi, pena l'incorrere in spiacevoli errori di gestione qualora se ne omettesse qualcuno. Questo procedimento viene detto controllo di flusso di un programma. Vediamo ora quali sono i costrutti sintattici messi a disposizione da JavaScript per operare scelte condizionali.
Questa è un'istruzione presente, in molte varianti, in tutti i linguaggi di programmazione. In JavaScript la sua forma piú semplice è la seguente:
if (condizione) {
istruzioni;
}
L'istruzione if controllando se la condizione è vera o falsa, quindi effettuando un controllo booleano, è in grado di stabilire se le istruzioni comprese tra le parentesi graffe debbano essere eseguite oppure no. La condizione può essere una qualsiasi espressione logica. In questo caso, se la condizione si rivela falsa, nessuna istruzione verrà eseguita. Vediamo, ora, un esempio concreto di quanto appena spiegato:
<html>
<title>Verifica Condizionale</title>
<head>
<script language="JavaScript">
<!--
var mia_variabile=1;
if (mia_variabile) {
alert('La variabile è stata inizializzata');
}
-->
</script>
</head>
// Nel codice mostrato viene riportato un esempio per verificare se una variabile è stata inizializzata oppure no. Per far questo è sufficiente racchiudere all'interno delle parentesi tonde che seguono la parola chiave if e che sono obbligatorie, il solo nome della variabile, senza alcun altro tipo di verifica. Nel caso in cui la variabile non fosse stata inizializzata ma solo dichiarata lo script non avrebbe eseguito alcuna istruzione.
if (mia_variabile==true)Quella appena vista non è che la forma piú semplice del costrutto if. Con tale forma è solo possibile controllare una condizione ed eseguire una o piú istruzioni all'interno del blocco condizionale. Ma se invece vi fosse l'esigenza di eseguire comunque delle istruzioni, diverse a seconda che la condizione si riveli vera o falsa, allora questa forma si rivelerebbe del tutto inutile. Per far fronte a una simile evenienza, molto comune, tutti i linguaggi di programmazione dispongono di forme piú articolate dello stesso costrutto if. In JavaScript il prototipo di questa forma è il seguente:
if (condizione) {
istruzioni;
}
else {
istruzioni;
}
dove la parola chiave else sta per altrimenti. "Traducendo" in linguaggio umano, sarebbe come dire: "se la condizione è vera, esegui queste istruzioni; altrimenti esegui queste altre". Si osservi l'esempio seguente:
<html>
<title>Verifica Condizionale</title>
<head>
<script language="JavaScript">
<!--
var mia_variabile=1;
if (mia_variabile==1) {
alert('mia_variabile è uguale a 1');
}
else {
alert('mia_variabile è diversa da 1');
}
-->
</script>
</head>
// In questo esempio il controllo avviene sul valore della variabile. Come dovrebbe essere già chiaro, solo uno dei blocchi di codice verrà eseguito a seconda che la condizione si riveli vera o falsa; ma, diversamente dal caso dell'esempio precedente, è sicuro che comunque delle istruzioni verranno eseguite.
Tuttavia anche questa forma si rivela in molti casi troppo limitata. Per poter usufruire di una gamma di scelte ancora maggiore JavaScript dispone di un'ulteriore forma, ancora piú articolata, del costrutto if.
Come è facilmente intuibile, questa forma è paragonabile al: "se... oppure se..." del linguaggio "umano". Grazie ad essa, diventa possibile gestire un numero di evenienze quasi infinito, aggiungendo nuove "ipotetiche" che contemplino diversi casi. Il prototipo di questa forma è di poco diverso da quello precedente:
if (condizione) {
istruzioni;
}
else if {
istruzioni;
}
else {
istruzioni;
}
Vediamo come può essere ampliato l'esempio mostrato nel caso precedente, con l'utilizzo di if... else if.
<html>
<title>Verifica Condizionale</title>
<head>
<script language="JavaScript">
<!--
var mia_variabile=1;
if (mia_variabile==1) {
alert('mia_variabile è uguale a 1');
}
else if (mia_variabile==2) {
alert('mia_variabile è uguale a 2');
}
else {
alert('mia_variabile è diversa da 1 e da 2');
}
-->
</script>
</head>
// In quest'ultimo esempio vengono presi in considerazione due casi prima di dare quella che possiamo definire la risposta per "default", ossia quella da dare in mancanza di casi ben definiti. Naturalmente, in questo come nel precedente esempio, l'istruzione eseguita sarà la prima, essendo la variabile mia_variabile inizializzata a 1. Inoltre, non c'è alcun bisogno che la forma termini con l'ultimo else. Se il numero dei casi che si possono presentare dovesse essere conoscibile a priori, non sarebbe necessario prevedere il caso di "default".
Qui di seguito, viene riportato un esempio interattivo che applica il codice visto sopra con lo scopo di mostrare in pratica quanto detto finora. Alla variabile mia_variabile viene assegnato il valore della casella di testo sottostante, valore che può essere modificato dall'utente tramite il pulsantino di incremento. Modificando il valore della casella, si potrà osservare il cambiamento nel "comportamento" dello script. Il pulsante "Reset" riporterà il valore della casella a 1.
Per annidamento si intende la possibilità, che vi è in tutti i linguaggi di programmazione, di includere delle istruzioni all'interno di blocchi di codice dipendenti da istruzioni dello stesso tipo. In poche parole, nel caso del costrutto if, è possibile racchiudere una o piú istruzioni if all'interno di una prima if. Per chiarire meglio questo concetto che potrebbe generare qualche perplessità si osservi il seguente esempio:
<html>
<title>Verifica Condizionale</title>
<head>
<script language="JavaScript">
<!--
var prima=1; var seconda=0;
if (prima==1) {
alert('prima è uguale a 1');
if (seconda==0) {
alert('seconda è uguale a 0');
}
}
-->
</script>
</head>
// In questo caso la prima istruzione if, oltre a racchiudere nel blocco di codice da essa dipendente un'istruzione alert, include anche un altro costrutto condizionale, che però verrà esaminato solamente se la prima condizione, quella della prima if, si rivelerà vera. Se tale condizione dovesse rivelarsi falsa, la condizione dipendente dalla seconda if non verrebbe mai presa in considerazione e l'esecuzione dello script passerebbe direttamente al di fuori delle parentesi graffe del primo blocco.
Qui sotto è possibile mettere in pratica quanto appena detto grazie a un nuovo esempio interattivo. È possibile cambiare il valore della prima variabile e osservare che quando questa è diversa da 1 nessuna istruzione viene eseguita.
Finora il controllo di flusso di uno script è stato fatto solo su condizioni positive. Naturalmente è possibile anche il contrario. Nel capitolo sugli operatori si è visto come l'operatore booleano unario NOT (!) sia in grado di restituire il valore opposto di un'espressione. Ciò significa che una condizione può essere presentata non solo come vera ma anche come falsa. Alla luce di quanto detto, l'esempio visto in precedenza che verificava se una variabile era stata inizializzata oppure no potrebbe anche essere scritto cosí:
<html>
<title>Verifica Condizionale</title>
<head>
<script language="JavaScript">
<!--
var mia_variabile=1;
if (!mia_variabile) {
alert('La variabile non è stata inizializzata');
}
-->
</script>
</head>
// L'unica differenza tra questo esempio e quello precedente è che nel primo la condizione si rivelava vera se la variabile era stata inizializzata; in quest'ultimo, invece, accade l'esatto contrario: la condizione si rivela vera se la variabile non è stata inizializzata. La differenza è solo nell'approccio logico al problema.
Sempre nel capitolo sugli operatori abbiamo visto gli altri due operatori logici o booleani AND (&&) e OR ( || ). Utilizzando questi due operatori unitamente alle istruzioni condizionali è possibile verificare piú condizioni in una sola volta. Questo metodo è di estrema utilità in quanto permette di scrivere del codice particolarmente sintetico. Si osservino i due esempi seguenti:
<html>
<title>Operatore AND</title>
<head>
<script language="JavaScript">
<!--
var a=1; var b=1;
if (a==1 && b==1) {
alert('Sia a che b sono uguali a 1');
}
-->
</script>
</head>
<html>
<title>Operatore OR</title>
<head>
<script language="JavaScript">
<!--
var a=0; var b=1;
if (a==1 || b==1) {
alert('Almeno uno tra a e b è uguale a 1');
}
-->
</script>
</head>
Nel primo esempio la condizione si rivelerà vera solo se entrambe le variabili saranno uguali a 1; se anche una delle due fosse diversa da 1 la condizione si rivelerebbe falsa. Nel secondo esempio, invece, è sufficiente che una sola delle due variabili sia uguale a 1 perché la condizione si riveli vera. Naturalmente la condizione si rivelerebbe altrettanto vera se ambedue le variabili fossero uguali a 1.
Per comprendere ancor meglio le differenze che intercorrono tra i due operatori si provi il seguente esempio interattivo. È possibile selezionare quale operatore testare e successivamente modificare il valore delle due variabili.
Si è detto prima che, quando l'istruzione da eseguire all'interno di un costrutto condizionale è una sola, è possibile omettere le parentesi graffe che fungono da delimitatori del blocco di codice. In tali casi è anche possibile scrivere tutto il codice, condizione e istruzione, su una sola riga. Il prototipo di questa variante sintattica diventa quindi questo:
if (condizione) istruzione;
Se si vuole quindi omettere l'utilizzo delle parentesi graffe è allora raccomandabile usare questa sintassi piuttosto che andare a capo dopo la condizione; questo al solo scopo di rendere piú leggibile il codice. Dal punto di vista funzionale le due scelte sono identiche. L'uso di questa forma particolarmente sintetica di if non è però riservato al caso che si debba scrivere una sola istruzione dopo la condizione. Anche in caso di piú istruzioni è possibile scrivere tutto su una sola riga con la differenza che sarà obbligatorio l'uso delle graffe. Il prototipo sarà allora cosí:
if (condizione) {istruzione1;istruzione2;}
Anche questa scelta è a totale discrezione del programmatore; ognuno ha il suo "stile" di programmazione. L'importante è cercare di rendere il codice sempre facilmente chiaro e leggibile sia a sé stessi che a terzi.
E' possibile testare una condizione booleana anche utilizzando la forma:
var x=false;
var mia_variabile=x?'condizione
vera':'condizione falsa';
dove alla variabile mia_variabile viene assegnato il valore 'condizione falsa', essendo x false.
Paragonando questa espressione all'istruzione if... else, si sarebbe potuto anche scrivere:
var x=false;
if(x){
mia_variabile='condizione
vera';
}
else{
mia_variabile='condizione falsa';
}
Il costrutto condizionale if non è il solo modo in cui si può affrontare la scelta fra diverse opzioni; il linguaggio JavaScript dispone anche, come molti altri linguaggi di programmazione, del costrutto switch, che di norma viene preferito a if quando i casi da verificare sono più di due o tre. Quando l'uso di if sarà chiaro si potrà passare alla trattazione di switch.