Tutorial TypeScript : Parte seconda gli operatori if e switch

Si riporta l'articolo scritto per il sito https://www.iprogrammatori.it/articoli/javascript/art_parte-seconda-gli-operatori-if-e-switch_1850.aspx

In questa seconda parte, vedremo alcuni esempi degli operatori if e switch che ci permettono di verificare una condizione, per esempio se una variabile, proprietà o altro è uguale, diverso, maggiore, minore ad un altro valore, oppure se è di un determinato tipo.

Con queste parole chiavi possiamo verificare una condizione ed in base a tale verifica eseguire una porzione di codice oppure no.

Per chi ha confidenza con la programmazione troverà semplice il relativo utilizzo, visto che la sintassi è simile a quella di molti altri linguaggi di programmazione.

Riprendendo il progetto del precedente articolo oppure se ne crea uno nuovo (eventualmente seguire le indicazioni della prima parte) per scrivere i vari esempi per questo nuovo articolo.

Utilizzo di if

Con la parola chiave “If” possiamo verificare se una condizione rispetta o no un determinato risultato, e se è vero possiamo eseguire un determinato codice, altrimenti ne verrà eseguito altro o procedere con altra operazioni.

Di seguito si riporta il frammento di codice per verificare se una condizione rispetta o no un risultato.

TypeScript

ngOnInit(): void {

 

    let VariabileA: string = "primo";

    let VariabileB: string = "secondo";

    if (VariabileA ==VariabileB) {

 

      alert('Ok');

      //Codice.....

    }

 

 

 

  }

 

Come si è visto dal precedente codice, viene fatto un confronto per valore di due variabili, in questo caso il codice ed il messaggio Alert non vengono eseguiti in quanto il valore non è uguale.

Per indicare se un valore è uguale si indica due volte uguale.

Nel caso che invece si vuole indicare un valore diverso e quindi entrare nella condizione if, occorre mettere il simbolo di diverso che è “!=”.

Di seguito il frammento di codice per eseguire il codice presente nella condizione if, e quindi l’alert.

TypeScript

ngOnInit(): void {

 

    let VariabileA: string = "primo";

    let VariabileB: string = "secondo";

    if (VariabileA !=VariabileB) {

 

      alert('Ok');

      //Codice.....

    }

 

  }

Nel frammento del precedente codice viene eseguita la condizione if, in quanto viene chiesto se i valori presenti nelle due variabili sono diverse.

Altro modo di usare la parola chiave “if” è quella di utilizzare anche la parola chiave “else”, in questo modo se la condizione if non viene rispettata, verrà eseguito il codice presente in else.

Di seguito si riporta il frammento di codice delle suddette operazioni.

TypeScript

.

ngOnInit(): void {

 

    let VariabileA: string = "primo";

    let VariabileB: string = "secondo";

    if (VariabileA ==VariabileB) {

 

      alert('Ok');

      //Codice.....

    }

    else

    {

      alert('Non sono uguali');

      //Codice

    }

 

  }

 

 

Altro modo di scrivere la condizione if, è quella senza uso della parentesi graffe, ma solo nel caso che dobbiamo eseguire una sola istruzione di codice.

Di seguito si riporta un frammento di codice dell’utilizzo if, in forma singola riga, con l’else.

TypeScript

 if (VariabileA ==VariabileB)

      alert('Ok');

    else

      alert('Non sono uguali');

 

La sintassi If, Else if ed else

Altro utilizzo della IF è quello in combinazione con else if, che permette di porre una seconda condizione e se nessuna delle due (ma possono essere di più) passa direttamente a quella per esclusione di quelle precedenti.

Ricordiamo che in caso c’è necessità di inserire più condizioni else if, utilizzare la parola chiave Switch che vedremo come ultimo esempio.

Di seguito si riporta un frammento di codice dell’utilizzo di else if ed else.

TypeScript

ngOnInit(): void {

 

    let VariabileA: string = "primo";

    let VariabileB: string = "secondo";

    if (VariabileA ==VariabileB)

    {

      alert('Ok');

      //codice

    }

    else if (VariabileA == "terzo") {

      //codice

    }

    else{

      alert('Non rispetta nessuna condizione');

    }

  }

 

 

L’operatore condizionale ternario 

Un altro modo di scrivere la condizione if per verificare una condizione è quello di utilizzare l’operatore ternario “?” .

La sintassi è molto semplice, condizione ? eseguioperazione : altraOperazione

Dove il punto interrogativo permette di eseguire il codice che si trova subito dopo se la condizione è rispettata, altrimenti si esegue il codice dopo i due punti. 

Di seguito si riporta un frammento di codice di tale utilizzo.

TypeScript

ngOnInit(): void {

 

    let VariabileA: string = "primo";

    let VariabileB: string = "secondo";

    (VariabileA==VariabileB) ? alert('Ok') : alert("Non sono uguali.");

 

  }

 Operatore logico And Or e diverso

Nell'utilizzare le condizioni if possiamo prendere in esame anche più condizioni da esaminare, per esempio possiamo dire se un dato è uguale ad un valore e se altro dato è uguale ad altro dato.

Gli operatori logici sono con il simbolo “&&” che indica “and”, l’operatore “||” che indica “or” ed infine l’operatore “!” che indica “not”.

Vediamo nei seguenti frammenti di codice.

Di seguito l’utilizzo dell’operatore and.

TypeScript

 

  ngOnInit(): void {

 

    let VariabileA: string = "primo";

    let VariabileB: string = "secondo";

    let VariabileC: string = "terzo";

 

 

    if (VariabileA ==VariabileB && VariabileA==VariabileC)

    {

     

      //codice

    }

   

    else{

      //Altro codice

    }

   }

Nell’esempio precedente viene utilizzato l’operatore “&&” per verificare due condizioni.

La condizione viene rispettata se entrambi le condizioni sono vere, altrimenti ne basta una diversa che non viene eseguita.

Se invece vogliamo che se almeno una condizione è vera deve eseguire una condizione, dobbiamo utilizzare l’operatore “or” che viene indicato nel seguente modo “||”;

Di seguito un frammento di codice con l’operatore logico “||” nel quale la condizione è vera.

TypeScript

 ngOnInit(): void {

 

    let VariabileA: string = "primo";

    let VariabileB: string = "secondo";

    let VariabileC: string = "primo";

 

    if (VariabileA ==VariabileB || VariabileA==VariabileC)

    {

     alert('ok');

      //codice

    }

 

    else{

      alert('nok');

      //Altro codice

    }

 

 

  }

 

 

Di seguito si riporta il frammento di codice dell’operatore diverso.

TypeScript

ngOnInit(): void {

 

    let VariabileA: string = "primo";

    let VariabileB: string = "secondo";

    let VariabileC: string = "primo";

 

    if ( !(VariabileA ==VariabileB))

    {

     alert('ok');

      //codice

    }

 

    else{

      alert('nok');

      //Altro codice

    }

 

 

  }

 

Il frammento di codice precedente esegue la prima porzione di codice, quella nella if, perché essendo diversa con l’operatore “!” rende la condizione false a vera.

Esaminare i valori non c’è solo uguale, ma anche il minore, maggiore, è diverso.

Di seguito i vari frammenti di codice.

 ngOnInit(): void {

 

    let primoNumero: number = 1;

    let secondoNumero: number = 3;

    if (primoNumero>secondoNumero) {

      alert('maggiore');

    }

 

    if (primoNumero <secondoNumero) {

      alert('minore');

    }

    if (primoNumero != secondoNumero) {

      alert('diverso');

    }

  }

 

Switch

Con la parola chiave “Switch” possiamo esaminare più condizioni, a differenza della parola chiave “if”, permette di rendere il codice più leggibile e l’esecuzione migliore.

Da utilizzare nel momento in cui le condizioni sono più di 2.

Di seguito si riporta un esempio di codice di utilizzo.

TypeScript

ngOnInit(): void {

 

    const variabileConst: string = 'Valore';

 

    switch(variabileConst)

    {

      case  "A":

        alert('A');

        break;

      case  "B":

        alert('B');

      break;

 

      default:

        alert('Altro');

      break;

 

    }

 

  }

 

Viene esaminata la costante VariabileConst, e se rispetta le varie condizioni (case) verrà eseguito il codice, altrimenti verrà eseguito il codice presente in default.

Ogni “case”  una condizione che viene esaminata.

Possiamo anche raggruppare i case, in maniera che più condizioni possono eseguire una determinata istruzione di codice.

Di seguito si riporta il frammento di codice.

TypeScript

 ngOnInit(): void {

    const variabileConst: string = 'B';

    switch(variabileConst)

    {

      case  "A":

      case  "B":

      case  "C":

        alert('A B e C');

      break;

 

      default:

        alert('Altro');

      break;

 

    }

 

  }

 

L’ultimo esempio di codice è la possibilità di utilizzare lo switch con la If, anche se è una tecnica che si utilizza raramente.

Di seguito si riporta un frammento di codice di utilizzo abbinato di switch ed if.

TypeScript 

 ngOnInit(): void {

    let variabileIf = 5;

    const variabileConst: string = 'd';

    switch(variabileConst)

    {

      case  "A":

      case  "B":

      case  "C":

        alert('A B e C');

      break;

 

      default:

        if ( variabileIf==5) {

          alert('5');

        }

        alert('Altro');

      break;

 

    }

 

  }

 Conclusioni

Siamo giunti alla fine di questa seconda parte riguardante l’utilizzo delle parole chiavi if e switch, fornendo una serie di frammenti di codice per illustrare vari scenari.

Parole chiave spesso usate per verificare se una condizione viene rispettata oppure no ed eseguire un determinato codice anziché altro.

Per chi già sviluppa con altri linguaggi di programmazione, in particolari quelli a programmazione oggetti, come C#, Java, C++ o altri, troverà una forte similitudine con la sintassi del proprio linguaggio.

https://www.iprogrammatori.it/articoli/javascript/art_parte-prima-introduzione-e-variabili_1849.aspx