Istruzion if - else if - else

Da questa lezione, sulla scorta delle nozioni apprese finora, inizieremo finalmente a scrivere qualche programmino degno di nota.

Una delle principali operazioni che è possibile eseguire con javascript è l'impostazione di una condizione, al verificarsi della quale deve o meno accadere qualcosa che è stato generato da un evento.

Per fare ciò ci si serve degli operatori if ... else if ... else, ovvero se ... oppure se ... oppure.

Un esempio di vita quotidiana può servire a chiarire le idee:

Se domani mi sveglio presto vado a correre, oppure rimango a letto!

La sintassi per eseguire un'istruzione if è la seguente:

if (condozione) {
   istruzioni;
}

La condizione di un'istruzione if viene racchiuso tra parentesi tonde, mentre le istruzioni vere a finchè la condizione si verifichi vengono racchiuse tra parentesi graffe.Se l'istruzione è unica e su una singola riga è possibile omettere le parentesi graffe, oppure si può scrivere sulla stessa riga della condizione, come nell'esempio:

if (condozione) istruzione su una sola riga;

Tuttavia, le buone norme di programmazione preferiscono l'utilizzo di parentesi graffe anche in questo caso.

Possiamo anche dire al programma come comportarsi in caso la condizione non si verifichi, con l'ausilio di else:

if (condozione) {
   istruzioni;
}
else { //tutte le altre condozioni
   istruzioni;
}

Dicendo else non c'è bisogno di specificare tra parentesi tonde la condizione, dato che valuterà tutte le altre situazioni possibili, all'infuori di quella specificata nella if.

Possiamo avere più condizioni, in questo caso l'esempio di vita fatto prima diventerebbe:

Se domani mi sveglio presto vado a correre, oppure se dormo male mi riposo ancora, oppure guarderò la TV!In tal caso... beato lui che non deve andare a lavorare :-)

Scherzi a parte, la sintassi corretta per dire una cosa del genere è la seguente:

if (prima condozione) {
   istruzioni;
}
else if (seconda condozione) {
   istruzioni;
}
else { //tutte le altre condozioni
   istruzioni;
}

E' tuttavia possibile, anche se scorretto, indicare la seconda condizione solo come ulteriore if invece che come else if, ma... seguiamole ste buone norme di programmazione!

Detto ciò, sulla la scorta dell'immenso bagaglio culturale che abbiamo messo su nel corso di queste prime otto lezioni (...), facciamo un primo esempio funzionale di istruzioni if ... ... ... else, creiamo un controllo su di una casella di testo di un form Html, verificando che venga riempita.

Prendiamo ad esempio lo stesso passo già visto in una lezione precedente, in cui, riempendo di una casella di testo al click su di un bottone ci appare un alert() con su scritto il testo immesso nella suddetta casella.

Verifichiamo ora che la casella venga effettivamente riempita:

<script language="javascript">
 <!--
  function Esempio() {
     var miaVariabile = document.nomeForm.nomeTextbox.value;
        if (miaVariabile == "") {
           alert("Riempire la textbox!!!");
        }
        else {
           alert(miaVariabile);
        }
  }
 //-->
</script>

<form name="nomeForm">
   Inserisci un testo a tuo piacere
   <input type="text" name="nomeTextbox">
 <input type="button" value="Prova" onClick="Esempio()">
</form>

Inserisci un testo a tuo piacere

Abbiamo detto al programma se miaVariabile è vuota (== "") manda un messaggio che avvisi di riempire la casella di testo, altrimenti scrivi sul messaggio il contenuto della casella di testo.

Un controlla del genere torna utile in molte circostanze, ad esempio per la compilazione di un modulo online con dei campi obbligatori.

Facciamo comparire a video un messaggio di benvenuto a seconda dell'orario, quindi diremo che se l'ora attuale è "tot" ci dirà "Buongiorno" oppure "Buon pomeriggio" ecc...

<script language="javascript">
 <!--
  var saluto = new Date();
  var oo = saluto.getHours();
     if (oo > 06 && oo <= 12) {
        document.write("Buon giorno!");
     }
     else if (oo > 12 && oo <= 18) {
        document.write("Buon pomeriggio!");
     }
     else if (oo > 18 && oo <= 24) {
        document.write("Buona sera!");
     }
     else {
        document.write("Buona notte!");
     }
 //-->
</script>

Non facciamo ora riferimento all'oggetto Date(), abbiamo solo usato l'esempio per verificare che se l'ora attuale è compresa tra le sei del mattino e mezzogiorno ci verrà detto "Buongiorno".

Questo è l'esempio funzionante:

Possiamo includere gli operatori logici AND e/o OR all'interno di una if, imponendo, ad esempio, che per il verificarsi di una ruotine devono essere soddisfatte due condizioni:

if ((condizione_1 == true) && (condizione_2 == true)) {
   istruzioni;
}

In alternativa possiamo decidere che solo una delle due condizioni, e mai entrambe, devono essere soddisfatte:

if ((condizione_1 == true) || (condizione_2 == true)) {
   istruzioni;
}

Esiste anche un'altro metodo per specificare una condizione di questo tipo, molto più semplice ma non consigliabile in occasioni classiche come quelle descritte fino ad ora, le istruzioni necessarie si presentano pressappoco come segue:

condizione ? true (VERO) : false (FALSO)

Potremmo tradurre questa serie di di istruzioni in questo modo:

questa condizione si dovrà verificare ? in questo modo se è vera : oppure in quest'altro se è falsa.

Possiamo dire dunque che il simbolo punto interrogativo (?) equivale ad una if ed i due punti (:) ad un else.

Vediamo un esempio pratico:

document.write("javascript " + 
(var linguaggio == true ? "è un linguaggio" : "non è linguaggio"));

La condizione proposta è semplice, in questo caso a video verrebbe stampato javascript è un linguaggio.

Altro efficace metodo per esprimere una condizione è rappresentato dalla funzione switch(), il cui compito è quello di definire una serie di casi, esaminiamo la struttura di questo costrutto:

switch(MiaVariabile) {
   case 1: ... ... ...; break;
   case 2: ... ... ...; break;
   case 3: ... ... ...; break;
   case else: ... ... ...; break;
}

Ovvero caso 1: fai questo; interrompi; l'istruzione break (letteralmetre "interrompi") è necessaria per far si che non si verifichino tutte le condizioni dei casi, quindi il controllo si fermerà appena la condizione vera viene letta ed immediatamente dopo ci si trova davanti un break.

Vediamolo all'opera:

<script language="javascript">
 <!--
  function Mese() {
   var oggi = new Date();
   var mese = oggi.getMonth();
      switch (mese) {
         case  0: alert("Gennaio");
         break;
         case  1: alert("Febbraio");
         break;
         case  2: alert("Marzo");
         break;
         case  3: alert("Aprile");
         break;
         case  4: alert("Maggio");
         break;
         case  5: alert("Giugno");
         break;
         case  6: alert("Luglio");
         break;
         case  7: alert("Agosto");
         break;
         case  8: alert("Settembre");
         break;
         case  9: alert("Ottobre");
         break;
         case 10: alert("Novembre");
         break;
         case 11: alert("Dicembre");
         break;
      }
  }
 //-->
</script>

<input type="button" value="Questo mese è..." onClick="Mese()">

Abbiamo memorizzato in una variabile il mese corrente e, tramite la funzione switch(), siamo stati in grado di stampare su di un messaggio il nome del mese corrente.

Autore: Luca Ruggiero