Sito e-learning

if

if

Quando vogliamo che il programma, che stiamo scrivendo, faccia qualche cosa soltanto a una determinata condizione (ad esempio solo nel caso in cui il browser dell’utente sia Internet Explorer).

Potremmo schematizzare così:

  • se una determinata condizione è verificata…
  • fai questo

Più esattamente si tratta di prendere una determinata condizione, valutarla, e se è vera (cioè se restituisce true), verranno eseguite le istruzioni indicate. Se la condizione non si verifica non verrà fatto alcunché.

Ecco una rappresentazione grafica di quello che abbiamo appena detto:

 

Figura - Diagramma di flusso

Ed ecco il modo in cui JavaScript (in maniera del tutto analoga a C) esprime questo costrutto:

if (espressione da verificare) {

  //istruzioni

}

La struttura della sintassi è chiara: la condizione da verificare viene indicata tra le parentesi tonde che seguono l’if (in inglese “se”, appunto). Notare le parentesi graffe, che racchiudono il codice da eseguire nel caso in cui la condizione sia valida. È bene inoltre ricordare, che ogni istruzione deve essere seguita dal punto e virgola.

Per afferrare subito la sintassi per un po’ vedremo alcuni semplici esempi numerici. Non appena saremo padroni dei concetti torneremo ad esaminare esempi pratici, inerenti il webpublishing. Vediamo un esempio di if:

x = 5; // sostituite x con quello che volete
if (x == 5) {
  alert(“la variabile x è uguale a 5”);
}

L’espressione (x == 5) risulta vera, dal momento che la variabile è stata creata appositamente con il valore richiesto dalla condizione (ma d’ora in poi provate a sostituire il valore della variabile creata all’inizio degli esempi per vedere i differenti risultati degli script). Infatti se invece abbiamo:

x = 6;if (x =
= 5) {
  alert(“la variabile x è uguale a 5”);
}

L’espressione dell’esempio viene valuta, ma dal momento che non è vera l’alert non viene visualizzato.

Negli esempi appena esaminati, abbiamo incontrato per la prima volta l’operatore di uguaglianza, cioè ==, che ci permette di verificare che le variabili (o le espressioni) a sinistra e a destra dell’uguale abbiano lo stesso valore.

Le parentesi graffe sono necessarie soltanto nel caso in cui le istruzioni da eseguire siano più di una, altrimenti possono essere anche omesse. Infatti le parentesi graffe indicano sempre l’esistenza di un blocco di istruzioni (le abbiamo già incontrate nelle funzioni con la medesima funzione). Ad esempio:

x=5;
if (x==5)
alert(“la variabile x è uguale a 5”);

o anche tutto su una riga:

x=5;
if (x==5) alert(“la variabile x è uguale a 5”);

mettere le parentesi graffe in presenza di una sola istruzione tuttavia non costituisce errore e di solito conferisce una maggior leggibilità al codice.

Operatori relazionali

Nel capitolo precedente abbiamo introdotto il concetto intuitivo di “condizione da valutare”. In realtà si tratta più esattamente di valutare che la relazione tra due valori (o espressioni) sia vera.

<valore> <operatore di relazione> <valore>

Ad esempio:

x == 5

Gli operatori di confronto vengono utilizzati nelle istruzioni logiche per determinare l'uguaglianza o la differenza tra variabili o valori. Restituiscono vero o falso.

L'operatore uguale a (==) controlla se i valori degli operandi sono uguali:

var num = 10;
document.write(num == 8); // false

Ed ecco gli altri operatori:

Operatore

Spiegazione

Esempio

maggiore

x>7

>=

maggiore uguale

x>=7

minore

x<7

<=

minore uguale

x<=7

==

uguale

nome==”Mario”

!=

diverso

Nome!=”mario”

Un errore tipico dei principianti è quello di confondere l’operatore di uguaglianza, con il doppio simbolo “=” (==) con l’operatore di assegnamento (=). Ad esempio questo:

x=8;
if (x=5) { //dovrebbe essere ==, non =
  alert(“la variabile x è uguale a 5”);
}

risulterà sempre vero, perché all’interno delle parentesi viene assegnato un valore, e non viene invece eseguito un confronto.

Inserire la relazione tra due valori in un alert è un metodo sbrigativo per sapere se la relazione è vera oppure no:

x = 5;
alert(x >= 5);
alert(x < 5);

Finora abbiamo sempre assegnato il valore delle variabili all’interno della pagina: tuttavia non si tratta di un procedimento molto utile, dal momento che la possibilità di valutare la veridicità di un espressione ci interessa soprattutto quando non conosciamo i valori delle variabili.

Ci interessa sapere ad esempio se:

variabileUtente == variabileImpostataDaMe;

oppure

variabileAmbiente == variabileImpostataDaMe;

negli esempi dei prossimi capitoli vedremo come “catturare” questi valori.

else ed else if

Abbiamo visto che è possibile fare eseguire un’azione se una condizione è vera. Ma se volessimo far eseguire un’altra azione nel caso in cui la condizione sia falsa?

Possiamo allora impostare un programma di questo tipo:

  • se una determinata condizione è verificata…
  • fai questo
  • in tutti gli altri casi…
  • fai quest’altro

Possiamo esprimere graficamente questo concetto con i diagrammi di flusso:

 

Figura - Diagramma di flusso II

e traducendolo in codice JavaScript:

if (condizione) {
    // istruzione 1
}
else {
    // istruzione 2
}

Ad esempio:

x = 9;
if (x < 7) {
  alert(“x è minore di 7”);
}
else {
  alert(“x non è minore di 7”);
}

Con una sintassi analoga si possono anche verificare l’esistenza di diverse condizioni. Si tratta di impostare un programma di questo genere:

  • se si verifica questa condizione…

fai questo

  • altrimenti, se si verifica quest’altra condizione…

fai quest’altro

  • in tutti gli altri casi…

fai quest’altro

che graficamente si può rappresentare così:

 

Figura - Diagramma di flusso III

Per esprimere l’else if, è necessario usare una sintassi di questo genere:

if (prima condizione) {
  //istruzioni
}
else if (seconda condizione) {
  //istruzioni
}
else {
  //istruzioni
}

Ed ecco un esempio:

nome=”Gianni”;
if (nome==”Mario”) {
  alert(“ciao Mario”);
}
else if (nome==”Gianni”) {
  alert(“ciao Gianni”);
}
else {
  prompt(“identificati”,”inserisci il tuo nome”);
}

È possibile anche introdurre più di un else if all’interno dello stesso blocco di codice; è dunque possibile verificare quante condizioni si desidera.

Gli operatori logici

È possibile annidare un if dentro l’altro, in modo da poter valutare anche situazioni particolarmente complesse. Ad esempio:

// provate a cambiare il valore, eventualmente
// indicando anche delle stringhe
valore = 5;
if (isNaN(valore) ) {
  /* isNaN() vuol dire "not a number" e serve per
   * vedere se il tipo di dati in esame è differente
   * da un numero */
  alert(valore + " non è un numero!");
} else {
  if (valore >= 9) {
    alert(valore + " è maggiore o uguale a 9")  
  } else {
    alert(valore + " è minore di 9")
  }
}

Ma oltre ad utilizzare annidamenti particolarmente complessi, possiamo usare gli operatori logici per concatenare diverse espressioni e creare condizioni complesse.

La sintassi è questa:

((<espressione 1>) <operatore logico> (<espressione 2>))

dove (come abbiamo visto nel precedente capitolo) <espressione 1> ed <espressione 2> stanno per:

<valore1> <operatore relazionale> <valore 2>

Ad esempio:

x = 6;
if ( (x >= 5) && (x <= 7) ) {
  alert ("x è compresa tra 5 e 7");
}

In questo modo possiamo valutare più condizioni contemporaneamente. Gli operatori logici che utilizzerete maggiormente sono i seguenti:

Operatore

Descrizione

Esempio

&&

“and logico”

Perché la condizione sia vera devono essere vere entrambe le condizioni legate da &&

x=6;

if ( (x>=5) && (x<=7) ){

alert (“x è compresa tra 5 e 7”);

}

||

“or logico”

Perché la condizione sia vera basta che sia vera una delle condizioni legate da ||

nome=”Gianni”;

if ( (nome==”Gianni”) || (nome==”Marco”) ) {

alert (“Sei Gianni oppure Marco”);

}

!

“not”

Viene posta di fronte all’espressione e la nega:

  • se è false la cambia in true
  • se è true la cambia in false

nome=”Marco”;

if ( !(nome==”Marco”)) {

alert (“Non sei Marco”);

}

Gli operatori logici funzionano nel modo seguente:

  • viene esaminata l’espressione di sinistra (Questo significa che anche tutte le operazioni previste dall’espressione di sinistra sono eseguite prima)
  • se l’operatore è binario (“and” e “or” ad esempio) si passa ad esaminare l’espressione di destra.

Nota.

Se l’espressione di sinistra è sufficiente a determinare il risultato dell’operazione, quella di destra viene ignorata. 

Ad esempio

Se l’operando è un or (||) e l’espressione di sinistra genera un true, non è necessario valutare anche l’espressione destra, perché il risultato sarà comunque true, se abbiamo un and (&&) invece, sarà ignorata l’espressione destra se a sinistra abbiamo già un false.

  • viene restituito il risultato

Avrete notato che la rappresentazione grafica di un operatore logico prevede il raddoppiamento del simbolo corrispondente (es: &&).  Nel caso in cui vi dimentichiate di raddoppiare il simbolo (es: &), scrivendo ad esempio:

(x >= 5) & (x <= 7)

non usereste un operatore logico ma un operatore a livello di bit: il che non è scorretto, ma non sempre darà luogo allo stesso risultato.

Uso del "not"

Una menzione particolare la merita l’operatore di negazione(indicato con !), che serve a negare un’espressione. Si tratta di un operatore unario: viene infatti posto di fronte all’espressione da negare, senza essere confrontato con nient’altro.

Utilizzando l’operatore di diversità nel giusto modo possiamo scrivere:

  • se la condizione è falsa…
  • fai questo

La sintassi è la seguente:

if ( ! (espressione) ) {
  // istruzioni
}

che significa:

  • se nego l’espressione e così facendo ho un risultato vero…
  • allora fai questo

Ad esempio:

x = 7;
if (!(x == 7) ) {
  alert (“x non è 7”);
}

Ovviamente l’esempio che abbiamo appena esaminato non è di particolare utilità e in questo caso non c’è una grossa differenza rispetto all’utilizzo dell’operatore di diversità (!=) che abbiamo visto nelle lezioni precedenti:

x = 7;
if (x! = 7) {
  alert (“x non è 7”);
}

Ma se teniamo conto che possiamo utilizzare gli operatori logici per creare situazioni molto complesse, combinando fra loro le varie espressioni, allora appare evidente come l’utilizzo del not sia particolarmente utile. Ad esempio:

nome=”Gianni”;

if ( ! ( (nome == “Gianni”) || (nome == “Marco”) ) ) {

  alert (“Non sei né Gianni, né Marco”);

}

Interrompere il flusso del codice con return

In un capitolo precedente abbiamo visto che (se ci troviamo all’interno della funzione) abbiamo la possibilità di interrompere il flusso del codice tramite l’utilizzo dell’istruzione return.

Possiamo applicare questa possibilità all’utilizzo dell’if:

  • se entriamo in una determinata casistica
  • la funzione restituisce i valori

e, con la restituzione dei valori, il flusso del codice viene interrotto

Ad esempio:

function checkBrowser(){
  // se il browsr non è Internet Explorer
  if (!document.all) {
    alert (“Non stai usando Internet Explorer”);
   return; // Il codice si interrompe qui
  }
  alert (“Il tuo browser è Internet Explorer”);
  nome = prompt(“Scrivi il tuo nome”,”il tuo nome qui”);
}
checkBrowser();

Ovviamente il metodo del return funziona soltanto se ci troviamo all’interno di una funzione

 

» Glossario JavaScript