JavaScript/Selezione

La selezione (o controllo) è, insieme alla sequenza (già vista nei moduli precedenti) e al ciclo (che vedremo nel prossimo), una delle tre strutture fondamentali della programmazione e al suo livello più semplice consiste in una scelta tra due blocchi di istruzioni da seguire in base ad una condizione valutata inizialmente, che può essere vera o falsa.

Per approfondire su Wikipedia, vedi la voce Selezione (informatica).

Selezione semplice

È la forma più semplice di selezione. Vediamo la sua sintassi:

if (condizione) {
 istruzioni1
} else {
 istruzioni2
}

Quando il parser raggiunge questo listato, valuta il valore dell'espressione booleana condizione. Nel caso condizione restituisca true verranno eseguite le istruzioni comprese tra la prima coppia di parentesi graffe (nell'esempio istruzioni1) altrimenti vengono eseguite le istruzioni comprese tra la seconda coppia di parentesi (istruzioni2). Vediamo un esempio:

var a = prompt("In che anno Cristoforo Colombo scoprì le Americhe?",2000);
if (a == 1492) {
 alert("Risposta esatta!");
} else {
 alert("Hai sbagliato clamorosamente...!");
}

Il metodo già visto prompt chiede all'utente di inserire la data della scoperta delle Americhe.
Nella riga successiva compare la nostra selezione: se a (ossia il valore inserito dall'utente) è uguale a 1492 allora viene mostrato un messaggio di complimenti; in caso contrario, viene mostrato un altro messaggio che informa l'utente dell'errore commesso. Si noti l'uso dell'operatore booleano == (uguale) che può restituire true o false. Notare anche la differenza tra l'operatore di assegnazione(=) e quello di uguaglianza(==), che se confusi erroneamente restituiscono risultati diversi da quelli previsti.

È possibile, nel caso non sia necessario, omettere il blocco else; se inoltre il primo blocco di istruzioni è costituito da una sola riga e non c'è il blocco else, è possibile tralasciare le parentesi graffe. Esempio:

var a = prompt("In che anno Cristoforo Colombo scoprì le Americhe?",2000);
if (a == 1492)
 alert("Risposta esatta!");
else
 alert("Hai sbagliato clamorosamente...!");

è una soluzione valida.

Blocchi if annidati e condizioni multiple

All'interno di un blocco if è ovviamente possibile inserire a loro volta altri blocchi di selezione, che sono chiamati annidati (uno dentro l'altro). Si faccia però attenzione al seguente esempio:

 if (cond1) {
  if (cond2) {
   istruzioni
  }
 }

Questo codice è inutilmente lungo, in quanto è possibile riassumerlo con un unico blocco usando gli operatori logici già visti in precedenza:

 if (cond1 && cond2) {
  istruzioni
 }

else if

Esiste una forma particolare di else che permette di eseguire all'interno del suo blocco un'altra selezione. Vediamo questo codice:

 if (cond1) {
  istruzioni;
 } else {
  if (cond2) {
   istruzioni
  } else {
   istruzioni;
  }
 }

Se all'interno del blocco else c'è una sola selezione è possibile usare questa sintassi più abbreviata

 if (cond1) {
  istruzioni1;
 } else if (cond2) {
  istruzioni2
 } else {
  istruzioni3;
 }

In questo caso il parser controllerà cond1; se essa è vera vengono eseguite le istruzioni1, se invece è falsa e cond2 è vera, verranno eseguite le istruzioni2; se entrambe le condizioni sono false verranno eseguite le istruzioni3.

switch

L'istruzione switch è un tipo particolare di selezione che permette di verificare i possibili valori dell'espressione presa in considerazione. La sintassi è:

 switch (espressione) {
  case val1:
   istruzioni1;
  case val2:
   istruzioni2;
 ...
 case val_n:
  istruzioni_n;
 default:
  istruzioni
 }

Quando il browser incontra questa istruzione, scorre tutti i valori val1, val2, ...val_n fino a che non incontra un valore uguale all'espressione indicata tra parentesi oppure un blocco default. In questo caso inizia ad eseguire il codice che segue i due punti. Se non c'è alcun blocco default e non ci sono valori che soddisfino l'uguaglianza, il parser prosegue eseguendo le istruzioni dopo la chiusura delle parentesi graffe.
Si faccia però attenzione a questo spezzone:

 var a = 1;
 switch (a + 1) {
  case 1:
   alert("a = zero");
  case 2:
   alert("a = uno");
  case 3:
   alert("a = due");
  case 4:
   alert("a = tre");
  default:
   alert("a maggiore di 3");
 }

Si potrebbe supporre che l'output di questo codice sia solo una alertbox contenente il messaggio a = 1 in quanto il blocco 2 soddisfa l'uguaglianza (a + 1 = 2). Non è tuttavia così: il parser dopo essersi fermato al blocco 2 proseguirà leggendo anche i blocchi successivi e il blocco default. Per evitare ciò dobbiamo inserire un'istruzione break. L'istruzione break indica al parser di interrompere la lettura della struttura switch e di proseguire oltre le parentesi graffe. L'esempio corretto è:

 switch (a + 1) {
  case 1:
   alert("a = zero");
   break;
  case 2:
   alert("a = uno");
   break;
  case 3:
   alert("a = due");
   break;
  case 4:
   alert("a = tre");
   break;
  default:
   alert("a maggiore di 3");
 }

Ovviamente il break non è necessario per l'ultimo blocco.

Vediamo poi un altro listato:

 switch (a + 1) {
  default:
   alert("a maggiore di 3");
   break;
  case 1:
   alert("a = zero");
   break;
  case 2:
   alert("a = uno");
   break;
  case 3:
   alert("a = due");
   break;
  case 4:
   alert("a = tre");
 }

Bisogna fare attenzione a non porre il blocco default in cima, in quanto il parser si fermerebbe subito lì e, incontrata l'istruzione break, salterebbe alla fine del blocco switch senza valutare le altre espressioni.

Notare che la selezione switch è sostituibile con una selezione di if ed else if.

Operatore ternario

Esiste oltre agli operatori già menzionati nel capitolo precedente anche un cosiddetto operatore ternario, che lavora con tre valori. La sua sintassi è:

condizione ? esp1 : esp2

Quando il parser incontra questa notazione, valuta il valore booleano di condizione. Se è vero, restituisce il valore di esp1 altrimenti quello di esp2. Questo permette di creare semplici selezioni; ad esempio:

var anni = prompt('Quanti anni hai?', 20);
var msg = "Ciao, vedo che sei " + (anni >= 18 ? "maggiorenne" : "minorenne") + "!";
alert(msg);

In questo caso l'operatore ternario restituisce "maggiorenne" se anni è maggiore o uguale a 18, altrimenti restituisce "minorenne".

Esercizi

• Scrivere un programma che converta un voto numerico chiesto all'utente (da 0 a 10) in un giudizio (insufficiente, sufficiente, buono, ecc...).

Soluzione

 var voto = prompt("Introduci il voto dell'alunno",6);
 var msg;
 switch (voto) {
 case "0":
  msg="Compito non consegnato (non classificabile)";
  break;
 case "1":
 case "2":
  msg="Gravemente insufficiente";
  break;
 case "3":
 case "4":
  msg="Insufficiente";
  break;
 case "5":
  msg="Mediocre";
  break;
 case "6":
  msg="Sufficiente";
  break; 
 case "7":
  msg="Discreto";
  break;
 case "8":
  msg="Buono";
  break;
 case "9":
  msg="Eccellente";
  break;
 case "10":
  msg="Ottimo";
  break;
 default:
  msg="Dati non validi";
 }
 alert(msg);

Analizzando il codice, possiamo vedere che nei casi voto sia uguale ad esempio a 1 e 2 o a 3 e 4 viene eseguita la stessa operazione in quanto non c'è un break per ogni blocco case. Se nessuno dei valori soddisfa l'uguaglianza con a viene restituito un messaggio di errore

• È possibile risolvere il programma precedente usando solo con istruzioni if?

Soluzione

Sì, prevedendo una serie di if, meglio se utilizzando una struttura else if:

//...
if (voto == 0) {
 msg = "Il compito non è stato consegnato (non classificabile)";
} else if (voto == 1 || voto == 2) {
 msg = "Insufficienza grave";
 //così avanti tutti gli altri casi, fino all'ultimo
 //che corrisponde al default
} else {
 msg = "Dati non validi";
}