Se il semaforo è rosso sto fermo, se è verde attraverso la strada. Questo è un esempio reale di istruzioni che sono eseguite in base a una condizione. 

A livello di codice il principio è lo stesso, ovvero eseguire un blocco di istruzioni solo se una determinata condizione è verificata, altrimenti non fare niente o eseguirne un altro.

Prima di questo ci tengo a ricordare che questo è un corso JavaScript atipico, orientato alla semplificazione. Per cui non ti fornirò tutte quelle finezze che servono per scrivere un codice a regola d’arte bensì solo i concetti fondamentali per garantirti di ottenere qualsiasi risultato con il minimo sforzo! Mi piacerebbe inoltre rendere questo corso qualcosa di interattivo e orientare i prossimi video in base alle tue effettive esigenze, per cui per qualsiasi dubbio o suggerimento ti invito a lasciarmi un commento e a iscriverti al mio canale se ancora non lo hai fatto per rimanere aggiornato sull’uscita dei miei nuovi video.

Tornando alla lezione di oggi, ti mostro subito le istruzioni condizionali e i loro utilizzi direttamente nell'editor :)

GUARDA IL VIDEO:

Cosa mostro nel video:

Un blocco di codice è una serie di istruzioni racchiuse tra parentesi graffe. Le istruzioni condizionali consentono in un certo senso di far prendere una decisione al codice, indicando quali blocchi eseguire in una determinata condizione rispetto ad altri.

L'istruzione condizionale per eccellenza è definita con IF.

var a = 2;
var b = 4;
var somma = a + b;
var risposta = "La somma è minore o uguale di 5";
if (somma > 5) {
   risposta = "La somma è maggiore di 5";
}
console.log(risposta);

In questo caso se la condizione indicata nella variabile è vera il blocco di codice verrà eseguito, altrimenti tutto il suo contenuto sarà ignorato passando oltre.

La condizione è quella che si trova tra parentesi tonde ed il suo valore è un boolean, ovvero true o false (abbiamo parlato di questo tipo di dato nella lezione precedente, in occasione proprio di un esempio sulle condizioni). Nel caso specifico la condizione è somma > 5, quindi se la variabile somma contiene un valore superiore a 5 la condizione è soddisfatta e il risultato di quell'espressione sarà true. Verificando in console la sola espressione somma > 5, in questo caso, il risultato è confermato, diversamente se somma è minore o uguale a 5 il risultato dell'espressione è false e il blocco di codice associato alla condizione non sarà eseguito.

Esiste una regola JavaScript che mostro a scopo informativo. Se all'interno del blocco di codice associato ad una condizione è presente una sola istruzione, le parentesi graffe del blocco non sono necessarie, come nell'esempio seguente:

if (somma > 5)
   risposta = "La somma è maggiore di 5";

Sconsiglio nel modo più assoluto questa pratica che può solo generare fraintendimenti e poca leggibilità del codice. L'obiettivo della Programmazione Rapida Semplificata non è tanto quello di ridurre al minimo il codice bensì ridurre al minimo le complicazioni.

Nell'esempio visto in precedenza ho inizializzato la variabile risposta con una frase preimpostata ovvero "La somma è minore o uguale di 5" dopodiché ho verificato con una condizione il valore della somma in modo che se questo fosse maggiore di 5 il valore di risposta verrebbe sovrascritto con una nuova stringa altrimenti in console verrà mostrato quello che gli ho assegnato inizialmente.

Questo modo di scrivere il codice rende il tutto più compatto tuttavia per chi è alle prime armi potrebbe risultare poco intuitivo o comunque richiede una lieve sensibilità da maturare. Per semplificare, il consiglio che posso dare è quello di avvalersi della struttura if... else... che garantisce lo stesso identico risultato ed è molto più comprensibile:

var a = 1;
var b = 4;
var somma = a + b;
var risposta = "";
if (somma > 5) {
   risposta = "La somma è maggiore di 5";
} else {
   risposta = "La somma è minore o uguale di 5";
}
console.log(risposta);

La variabile risposta, la possiamo inizializzare vuota e il costrutto condizionale in pratica dice... SE la somma è maggiore di 5 scrivi nella variabile risposta "La somma è maggiore di 5", ALTRIMENTI scrivi nella variabile risposta "La somma è minore o uguale di 5". Dopodiché lo stampa in console. Sicuramente è più chiaro capire cosa fa il codice, se è vera la condizione esegui il primo blocco di istruzioni sennò esegui il secondo blocco.

Nulla vieta ovviamente di far scrivere direttamente la risposta con il console log da dentro i due blocchi anziché valorizzare una variabile, il mio suggerimento è però quello di gestire l'output alla fine di tutta l'istruzione condizionale. In questo modo abbiamo maggiore controllo di quello che è il suo risultato.

Le condizioni però spesso possono essere più di due, un semaforo non ha solo il rosso e il verde ma anche l'arancione. Così come nell'esempio fatto finora la somma può essere non solo maggiore o minore di 5 ma anche uguale 5. Entra in gioco la terza forma di if, detta if a cascata.

var a = 1;
var b = 4;
var somma = a + b;
if (somma > 5) {
   risposta = "La somma è maggiore di 5";
} else if (somma < 5) {
   risposta = "La somma è minore di 5";
} else {
   risposta = "La somma è uguale di 5";
}
console.log(risposta);

In questo caso, se la prima condizione è vera viene eseguito il blocco istruzioni mentre se non è soddisfatta viene verificata la seconda condizione e, in base al valore boolean, verrà eseguito il relativo blocco di istruzioni oppure se le precedenti sono false esegue quello in else.

Di else if possono esserne inseriti più di uno, ovviamente devono essere presenti più casistiche che ne richiedano l'utilizzo. Ad esempio se volessi dare un messaggio ancora diverso nel caso in cui la somma fosse maggiore di 10, posso farlo aggiungendo un’altra condizione else if, tuttavia in questo caso devo avere un'accortezza in più. Non posso infatti inserire questa condizione in questo modo:

var a = 7;
var b = 4;
var somma = a + b;
if (somma > 5) {
   risposta = "La somma è maggiore di 5";
} else if (somma < 5) {
   risposta = "La somma è minore di 5";
} else if (somma > 10) {
   risposta = "La somma è superiore a 10";
} else {
   risposta = "La somma è uguale di 5";
}
console.log(risposta); 

Nel log otterrei che "La somma è maggiore di 5" che è vero, ma è anche vero che la “La somma è superiore a 10”. Tuttavia, dal momento che la prima condizione è subito soddisfatta e che le condizioni vengono lette in ordine, il blocco di codice che verrà eseguito è il primo dopodiché l’esecuzione esce ed il resto delle condizioni non saranno verificate.

Dovrei pertanto scrivere in questo modo:

var a = 7;
var b = 4;
var somma = a + b;
if (somma > 10) {
   risposta = "La somma è maggiore di 10";
} else if (somma < 5) {
   risposta = "La somma è minore di 5";
} else if (somma > 5) {
   risposta = "La somma è superiore a 5";
} else {
   risposta = "La somma è uguale di 5";
}
console.log(risposta);

Ovvero inserire prima la condizione più stringente in modo che se effettivamente il valore è maggiore di 10 mi verrà restituita la giusta risposta, mentre se fosse ad esempio 6, il primo codice non verrebbe eseguito procedendo con i controlli successivi ed entrando nel blocco di codice che abbiamo visto finora.

A titolo informativo presento un altro modo di scrivere una condizione, decisamente più compatto, chiamato operatore condizionale, noto anche come operatore ternario. La sintassi è la seguente:

messaggio = (somma > 5 ? x + "La somma è maggiore di 5" : "La somma è minore o uguale di 5");

È prevista la condizione separata da un ? dal primo blocco di codice che viene eseguito se tale condizione è soddisfatta, altrimenti viene eseguito il codice dopo il simbolo dei :.

In generale, soprattutto per chi è agli inizi, sconsiglio il suo utilizzo in favore di quanto abbiamo visto fino a adesso. Utilizzarla non porta alcun valore aggiunto, anzi se ne può benissimo fare a meno garantendo così una migliore leggibilità del codice che è sicuramente un aspetto molto più importante piuttosto che voler scrivere il codice in una forma più concisa.

Oltre all’IF esiste un'altra istruzione che permette di eseguire blocchi di codice in base alle alternative, si tratta del comando switch, il quale valuta un'espressione e confronta il risultato con ciascuna delle clausole case per eseguirne i comandi associati.

Il suo utilizzo non è essenziale, nel senso che può essere ottenuto il risultato desiderato giocando anche con l'if else ed else if, tuttavia se devo essere sincero a volte lo utilizzo perché in talune circostante lo ritengo più comodo e leggibile.

Ad esempio, lo trovo molto funzionale quando ho dei valori in output ben definiti, come può essere il valore numerico dello stato di un ordine (1, 2, 3 o 4) e volessi ottenerne il relativo testo, per esempio: ordine inserito, pagato, spedito, completato. In questo caso potrei usare il seguente costrutto switch case:

var stato = 3;
var stato_ordine = "";
switch (stato) {
 case 1:
  stato_ordine = "inserito";
  break;
 case 2:
  stato_ordine = "pagato";
  break;
 case 3:
  stato_ordine = "spedito";
  break;
 case 4:
  stato_ordine = "completato";
  break;
 default:
  stato_ordine = "sconosciuto";
  break;
}
console.log(stato_ordine);

La variabile stato è impostata a 3, l'espressione di riferimento dello switch viene confrontata in sequenza con le espressioni dei vari case, controlla prima se il valore è 1, poi se è 2 e così via. Appena la corrispondenza viene trovata il relativo blocco di codice sarà eseguito, dopodiché l'istruzione break al termine del blocco di istruzioni eviterà la prosecuzione con il caso successivo. Se volessi eseguire uno stesso blocco, associato a più di un valore, posso aggiungere un case senza il break, ad esempio se sia lo 0 che l'1 mi rappresentano lo stato inserito, potrei scrivere in questo modo:

var stato = 3;
var stato_ordine = "";
switch (stato) {
 case 0:
 case 1:
  stato_ordine = "inserito";
  break;
 case 2:
  stato_ordine = "pagato";
  break;
 case 3:
  stato_ordine = "spedito";
  break;
 case 4:
  stato_ordine = "completato";
  break;
 default:
  stato_ordine = "sconosciuto";
  break;
}
console.log(stato_ordine);

Lo switch case è carino tuttavia se volessi replicare la situazione degli esempi visti in precedenza (quelli relativi alla somma tra due variabili) dovrei riscrivere molteplici istruzioni if con i case e impostare lo switch sempre a true, che può solo confondere e non portare alcun valore aggiunto:

var a = 7;
var b = 4;
var somma = a + b;
switch (true) {
 case (somma > 10):
  risposta = "La somma è maggiore di 10";
  break;
 case (somma < 5):
  risposta = "La somma è minore di 5";
  break;
 case (somma > 5):
  risposta = "La somma è maggiore di 5 e minore di 10";
  break;
 default:
  risposta = "La somma è uguale a 5";
  break;
}
console.log(risposta);

Quindi il suggerimento, per programmare pensando ad ottenere quanto prima un risultato funzionante, è quello di semplificarsi la vita e gestire le situazioni di condizione utilizzando sempre if else e laddove necessario else if.

Un chiaro e semplice esempio di istruzione condizionale applicata ai Fogli Google è presente nel mio video su come “creare un sistema di scadenze automatico con 10 righe di codice”, vi lascio il link in overlay e in descrizione del video in modo da poter vedere il codice e la relativa sintassi. In quel caso la funzione controlla le date presenti nelle celle del Foglio Google e, se precedenti alla data odierna, invia una email di notifica altrimenti passa al controllo successivo.

Come da vostra richiesta, vi lascio alcuni esercizi con i quali è possibile fare pratica applicando quanto appreso finora, sono riferiti anche alle lezioni precedenti. Provate a risolverli, e nella prossima video lezione riporterò la mia soluzione. Può essere una valida occasione di confronto nei commenti per capire se anche voi avete seguito la mia stessa strada oppure siete riusciti ad ottenere lo stesso risultato con metodi alternativi.

Gli esercizi si focalizzano sul JavaScript, per cui è richiesto solo applicare la logica necessaria nell’editor di script, con un risultato nel Log, senza bisogno di scrivere o leggere negli strumenti di Google, come ad esempio uno Spreadsheet. Per questo ci sarà tempo alla conclusione del corso.

Ecco i 3 esercizi… li leggo rapidamente, ovviamente mettete in pausa il video se avete bisogno di più tempo per ricopiarli.

 

1) Data una variabile con un valore, scrivere una funzione che verifica se tale valore è un numero pari o un numero dispari per poi stamparlo nel Log di Apps Script.

Nota: può farti comodo ripassare la lezione 4 sugli operatori.

 

2) Data una variabile con un valore numerico intero, restituire la relativa etichetta testuale con il seguente criterio:

• da 1 a 3: gravemente insufficiente

• 4: insufficiente

• 5: quasi sufficiente

• 6: sufficiente

• 7: buono

• 8: molto buono

• 9: distinto

• 10: ottimo

• in tutti gli altri casi: non valido

Ottenere il risultato creando due casi distinti, nel primo utilizzando il costrutto if, nel secondo switch case.

 

3) Data una variabile con il seguente URL: https://www.appsscript.it/tutorial/?pagina=4

Scrivere una funzione che calcola la lunghezza, in termini di numero di caratteri, di quell’URL senza la querystring.

Nella prossima lezione parleremo di cicli, di quali sono le tipologie offerte dal linguaggio e di come sia possibile ottenere qualsiasi risultato imparandone a utilizzare un solo tipo.

Rinnovo l’invito a iscriverti al mio canale se ancora non l’hai fatto per rimanere aggiornato sull’uscita dei miei nuovi video e a lasciarmi un commento se qualcosa di quanto ti ho raccontato in questa lezione non ti è chiaro o se hai suggerimenti e argomenti che vorresti fossero approfonditi e trattati in un tutorial.

A presto, Ciao ;)

 

VAI alla Lezione 5 bis: Soluzione a 3 Esercizi

TORNA alla Lezione 4: Tipi di dato, Operatori e Array