JavaScript/Selezione: differenze tra le versioni

== Selezione semplice ==

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

if (condizione) {

istruzioni1

istruzioni2

}

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

var a = prompt("In che anno Cristoforo Colombo scoprì le Americhe?",2000);

if (a == 1492) {

alert("Hai sbagliato clamorosamente...!");

}

Il metodo già visto <code>prompt</code> chiede all'utente di inserire la data della scoperta delle Americhe.<br/>Nella riga successiva compare la nostra selezione: se <code>a</code> (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 <code>==</code> (uguale) che può restituire <code>true</code> o <code>false</code>. 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 <code>else</code>; se inoltre il primo blocco di istruzioni è costituito da una sola riga e non c'è il blocco <code>else</code>, è possibile tralasciare le parentesi graffe. Esempio:

var a = prompt("In che anno Cristoforo Colombo scoprì le Americhe?",2000);

if (a == 1492)

else

alert("Hai sbagliato clamorosamente...!");

è una soluzione valida.

 

== Blocchi if annidati e condizioni multiple ==

All'interno di un blocco <code>if</code> è 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) {

}

}

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 <code>else</code> che permette di eseguire all'interno del suo blocco un'altra selezione. Vediamo questo codice:

if (cond1) {

istruzioni;

}

}

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

if (cond1) {

istruzioni1;

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 <code>switch</code> è un tipo particolare di selezione che permette di verificare i possibili valori dell'espressione presa in considerazione. La sintassi è:

switch (espressione) {

case val1:

istruzioni

}

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

Si faccia però attenzione a questo spezzone:

var a = 1;

switch (a + 1) {

alert("a maggiore di 3");

}

Si potrebbe supporre che l'output di questo codice sia solo una alertbox contenente il messaggio <code>a = 1</code> in quanto il blocco 2 soddisfa l'uguaglianza (<code>a + 1 = 2</code>). 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 <code>break</code>. L'istruzione <code>break</code> indica al parser di interrompere la lettura della struttura <code>switch</code> e di proseguire oltre le parentesi graffe. L'esempio corretto è:

switch (a + 1) {

case 1:

alert("a maggiore di 3");

}

 

Ovviamente il <code>break</code> non è necessario per l'ultimo blocco.

Vediamo poi un altro listato:

 

switch (a + 1) {

default:

alert("a = tre");

}

 

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

== Operatore ternario ==

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

Quando il parser incontra questa notazione, valuta il valore booleano di <code>condizione</code>. Se è vero, restituisce il valore di <code>esp1</code> altrimenti quello di <code>esp2</code>. 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 <code>"maggiorenne"</code> se <code>anni</code> è maggiore o uguale a 18, altrimenti restituisce <code>"minorenne"</code>.

 

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

{{cassetto|titolo=Soluzione|testo=

var voto = prompt("Introduci il voto dell'alunno",6);

var msg;

}

alert(msg);

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

}}

{{cassetto|titolo=Soluzione|testo=

Sì, prevedendo una serie di <code>if</code>, meglio se utilizzando una struttura <code>else if</code>:

//...

if (voto == 0) {

msg = "Dati non validi";

}

}}