20 espressione condizionale e switch

data la seguente tabella

<table>
    <tr>
        <td>Titolo di Studio</td>
        <td><input type="radio" name="titolo" value="diploma" checked>Diploma</td>
        <td><input type="radio" name="titolo" value="laurea">Laurea</td>
    </tr>
    <tr>
        <td>Esperienza Lavorativa</td>
        <td><input type="radio" name="esperienza" value="meno" checked>Meno di 5 anni</td>
        <td><input type="radio" name="esperienza" value="piu">Più di 5 anni</td>
    </tr>
</table>
<input type="button" id="btn_stima" value="STIMA DI RETRIBUZIONE">
<input type="text" id="retribuzione1">
<input type="text" id="retribuzione2">
<input type="text" id="retribuzione3">

ecco come viene nel browser

Titolo di Studio	Diploma	Laurea
Esperienza Lavorativa	Meno di 5 anni	Più di 5 anni

Ricordo il dollaro di JQuery con la funzione anonima per l’inizializzazione

$(function () 
    {
    $("#btn_stima").click( stima_retribuzione );    
    }
)

Quando si clicca sul bottone, viene richiamata la funzione stima_retribuzione (con JQuery si omettono le parentesi tonde della funzione)

function stima_retribuzione() 
{
var stipendio = 1200; //stipendio base
    
}

Abbiamo assegnato uno stipendio base di 1200€ che andrò a ricalcolare in base alle caratteristiche scelte. Adesso, con JQuery, devo selezionare il radio button il cui name è titolo il cui stato è selezionato (checked)

$("[name='titolo']:checked")

da notare che il name si scrive tra parentesi quadre. Ora ricavo il valore e lo memorizzo in una variabile e faccio lo stesso con esperienza

var titolo = $("[name='titolo']:checked").val();
var esperienza = $("[name='esperienza']:checked").val();

ora effettuo il calcolo di 100 se è selezionato il diploma, altrimenti 300 con la laurea

if (titolo==="diploma")
 {stipendio 0 stipendio + 100;}
 else
 { stipendio = stipendio + 300;}

esistono anche forme compatte

x-=3 -> x = x - 3
x*=3 -> x = x * 3
x/=3 -> x = x / 3

nel nostro caso avrei potuto scrivere

if (titolo==="diploma")
{stipendio+=100;}

analogamente in base agli anni di esperienza lavorativa

if (esperienza === "meno")
{stipendio = stipendio + 200;}
else 
{stipendio = stipendio + 400;}

infine andiamo a valorizzare la casella di testo retribuzione1 con il valore appena calcolato

$("#retribuzione1").val(stipendio);

vediamo ora l’espressione condizionale per riscrivere il primo blocco di codice

stipendio = stipendio + (titolo==="diploma"? 100 : 300);

mentre la seconda diventa

stipendio = stipendio + (esperienza="meno" ? 200 : 400);

avrò una funzione molto più leggibile perché molto più corta (con meno linee di codice)

function stima_retribuzione() {
    var stipendio = 1200; //stipendio base
    var titolo = $("[name='titolo']:checked").val();
    var esperienza = $("[name='esperienza']:checked").val();

    stipendio = stipendio + (titolo==="diploma"? 100 : 300);

    stipendio = stipendio + (esperienza==="meno" ? 200 : 400);

    $("#retribuzione2").val(stipendio);
}

Potrei anche inserire i 2 blocchi in unica espressione, ma diventerebbe incomprensibile e col rischio di commettere troppi errori

stipendio = stipendio + (titolo==="diploma"? 100 + (esperienza==="meno" ? 200 : 400) : 300 + (esperienza==="meno" ? 200 : 400));

switch case

aggiungiamo una riga con 5 opzioni radio non checked e 2 input alla nostra tabella

<table>
    <tr>
        <td>Titolo di Studio</td>
        <td><input type="radio" name="titolo" value="diploma" checked>Diploma</td>
        <td><input type="radio" name="titolo" value="laurea">Laurea</td>
    </tr>
    <tr>
        <td>Esperienza Lavorativa</td>
        <td><input type="radio" name="esperienza" value="meno" checked>Meno di 5 anni</td>
        <td><input type="radio" name="esperienza" value="piu">Più di 5 anni</td>
    </tr>
    <tr>
        <td>Linguaggio MAX exp</td>
        <td> <input type="radio" name="linguaggio" value="C"> C 100</td>
        <td> <input type="radio" name="linguaggio" value="C++" > C++ 200</td>
        <td> <input type="radio" name="linguaggio" value="PHP" > PHP 250</td>
        <td> <input type="radio" name="linguaggio" value="Javascript" > Javascript 250</td>
        <td> <input type="radio" name="linguaggio" value="Java" > Java 150</td>
    </tr>
</table>
<input type="button" id="btn_stima" value="STIMA DI RETRIBUZIONE">
<input type="text" id="retribuzione1">
<input type="text" id="retribuzione2">
<input type="text" id="retribuzione3">
<input type="text" id="retribuzione4">
<input type="text" id="retribuzione5">

viene così

Titolo di Studio	Diploma	Laurea
Esperienza Lavorativa	Meno di 5 anni	Più di 5 anni
Linguaggio MAX exp	C 100	C++ 200	PHP 250	Javascript 250	Java 150

Si potrebbe gestire  il linguaggio con tanti if / else annidati, ma il codice diventerebbe poco chiaro e con possibilità di commette errori.

 if (linguaggio==="C")
 {stipendio+=100;}
 else
 {
 if (linguaggio==="C++")
 { stipendio+=200;}
 else
 {
 if (linguaggio==="PHP" || linguaggio==="Javascript")
 {stipendio+=250;}
 else
 {
 if (linguaggio==="Java")
 {stipendio+=150;}
 else
 {stipendio-=50;}
 }
 }
 }
$("#retribuzione4").val(stipendio);

In questi casi è opportuno usare le istruzioni switch e case:

switch (linguaggio)
{
case "C":
stipendio+=100;
break;

case "C++":
stipendio+=200;
break;

case "PHP":
case "Javascript":
stipendio+=250;
break;

case "Java":
stipendio+=150;
break;

default:
stipendio-=50;
break;
}

$("#retribuzione5").val(stipendio);

i vari casi sono molto comprensibili, prendiamo il primo

case "C":
 stipendio+=100;
 break;

caso C se selezionato aumento di 100 e così via, notare i : dopo case “C”. Il break serve per interrompere i casi, altrimenti verrebbero esguiti tutti. Possiamo aggiungere il default come caso in cui non vengono soddisfatti gli altri (jolly pigliatutto nel caso gli altri case non sussistono )

default:
stipendio= -50;
break;

Con il case possiamo solo effettuare l’uguaglianza mentre if / else sono più potenti perché permettono ogni espressione