Snippet e strutture di controllo. Parte 4 Corso di JavaScript da Principiante ad Avanzato in 10 post sul blog

Questa è la parte 4 della serie di post sul blog JavaScript che ti porterà da principiante ad avanzato. Alla fine di questa serie conoscerai tutte le basi necessarie per iniziare a programmare in JavaScript. Senza ulteriori indugi, iniziamo con il quarto tutorial.

Snippet e strutture di controllo – indice:

1. Aggiornare il nostro set di codifica a snippet
2. Strutture di controllo

In questo post del blog continueremo da dove ci eravamo lasciati nel terzo post del blog. A questo punto dovresti avere aperto il tuo browser Google Chrome e, più specificamente, avere aperta la console JavaScript. Se per qualche motivo le hai chiuse, sarebbe un buon momento per riaprirle.

Se sei su un Mac, la scorciatoia da tastiera per aprire la console è premere “Option + Command + J”, dopo aver aperto Chrome. Se stai usando un dispositivo Windows, puoi usare la scorciatoia da tastiera “Control + Shift + J” per aprire la Console JavaScript, una volta aperto Chrome. Oppure puoi anche andare al menu in alto e selezionare Visualizza -> Sviluppatore -> Console JavaScript.

Aggiornare il nostro set di codifica a snippet

Fino a questo punto del corso, avremmo potuto scrivere tutto riga per riga ed eseguirlo riga per riga. Non sarebbe stato il modo più conveniente per eseguire le cose, ma funzionerebbe comunque. A partire da questo tutorial, scriveremo codice che richiede più righe di codice per creare un insieme completo di istruzioni. Per raggiungere questo obiettivo utilizzeremo qualcosa chiamato “snippet” in Google Chrome. Senza ulteriori indugi, aggiorniamo il nostro setup dalla console JavaScript agli snippet di Chrome.

Attualmente dovresti avere la tua console aperta, e se hai seguito i tutorial precedenti dovresti avere uno schermo che appare così:

Quando guardi questo schermo, o il tuo schermo, dovresti vedere: Elementi, Console, Fonti, Rete, Prestazioni, Memoria, Applicazione e così via scritti uno accanto all’altro nella barra superiore dell’area scura. Se li vedi in colori più chiari, va benissimo anche così. Significa che stai usando la modalità chiara, che può essere la modalità predefinita per il giorno. Lo schermo che mostro attualmente utilizza lo schema di colori per la modalità scura nelle impostazioni della console di Chrome. Se vedi gli Elementi, Console, Fonti, Rete e così via apparire, in qualsiasi schema di colori, sei a posto.

Se dai un’occhiata più da vicino alla barra superiore della console, puoi vedere che la scritta “Console” appare leggermente di un colore diverso. Vai avanti e clicca su “Fonti” proprio accanto ad essa.

Una volta cliccato su fonti, dovresti vedere uno schermo che in qualche modo appare così.

Una differenza che potresti aspettarti è che probabilmente non vedrai il file “notes.js”, poiché l’ho creato in precedenza. A parte questo, dovrebbe apparire piuttosto simile a questo. Per creare un nuovo file clicca su “+ Nuovo snippet”. Una volta cliccato, verrà creato un nuovo file JavaScript per te e puoi nominarlo come preferisci. In questo tutorial lo chiameremo “index.js” poiché è una pratica comune nominare il primo o il file principale come “index.js”.

Se vuoi seguire questo tutorial parola per parola, dopo aver cliccato su “+ Nuovo Snippet”, puoi inserire il nome “index.js” e premere il tasto invio sulla tua tastiera. Ora possiamo cliccare all’interno del file aperto nell’area principale che si è aperta, per iniziare a scrivere codice JavaScript.

Iniziamo con qualcosa che sappiamo già funzionare. E questo è:

alert("Ciao, Mondo!");

Puoi scriverlo tu stesso per ulteriore pratica o copiare e incollare la parte di codice nel file che abbiamo creato. Ti consiglio vivamente di digitarlo tu stesso poiché è così che lo impari in molti casi. Una volta digitato, se premi il tasto invio, vedrai che il codice non viene eseguito. Invece, il cursore passerà semplicemente alla riga successiva, come in qualsiasi altra area di modifica del testo. Ci sono due modi principali per eseguire il nostro codice. Il primo è cliccare sul pulsante di riproduzione che si trova nell’angolo in basso a destra.

Se clicchi su quel pulsante di riproduzione, dovrebbe eseguire il nostro codice e mostrarci i risultati.

Una volta cliccato “OK”, vediamo anche di eseguire il nostro codice utilizzando l’altro modo principale. Il secondo modo principale per eseguire il tuo codice, o eseguire il tuo snippet è utilizzare la scorciatoia da tastiera. Come possiamo vedere, ci mostra già la scorciatoia quando clicchiamo sul pulsante di esecuzione. Quella scorciatoia da tastiera è “Command + Enter”. Per farlo, possiamo premere il tasto Command e poi premere il tasto Invio. Facendo ciò, eseguirà anche il nostro codice e ci darà gli stessi risultati di cliccare sul pulsante di riproduzione.

E con questo, ora conosci i due modi per eseguire il nostro codice JavaScript negli snippet di Chrome.

Se vuoi creare nuovi file per magari prendere appunti su JavaScript, o per esercitarti con del codice JavaScript, puoi sempre creare nuovi file cliccando su “+ Nuovo snippet” e nominare i tuoi file come preferisci. Ora che abbiamo il nostro nuovo set di codifica pronto, vediamo un po’ di più di JavaScript.

Strutture di controllo

Quando scriviamo codice, dobbiamo tener conto di molti scenari e azioni che l’utente può intraprendere. Questa preparazione per diversi scenari può provenire da diverse fonti come il dispositivo su cui il nostro codice viene eseguito, la dimensione dello schermo da visualizzare, i diversi tipi di browser che l’utente potrebbe avere e così via. Ma come possiamo assicurarci di essere pronti per diversi scenari? Se scrivi codici diversi uno dopo l’altro, avrebbe senso eseguire tutti loro per l’utente? Per rispondere a tutto ciò e altro ancora, utilizzeremo le strutture di controllo.

Le strutture di controllo ci permettono di guidare l’esecuzione del codice, in modo che il nostro codice possa adattarsi a diverse condizioni. Ci sono diversi elementi comuni utilizzati per le strutture di controllo. In questo tutorial inizieremo con la più semplice e ci muoveremo da lì. La prima che vedremo utilizza le istruzioni If, else, else if per controllare l’esecuzione del codice.

If, else e else if

Questa è la struttura di controllo più semplice con cui iniziare. Ciò che ci consente di fare è eseguire un certo pezzo di codice se una certa condizione è vera, ed eseguire un altro pezzo di codice se un’altra condizione è vera. Vediamo questo con un esempio. Supponiamo che, se piove fuori, porterò con me il mio ombrello. Altrimenti, non porterò un ombrello. Possiamo tradurre la logica e il ragionamento esatti in codice come segue:

(Prima di scrivere questo codice commenteremo il codice dal codice precedente che abbiamo nel file ponendo due barre in avanti davanti ad esso, in modo che non venga eseguito, ma tu abbia comunque una copia di esso. Dopo aver aggiunto le barre in avanti dovrebbe apparire così:)

// alert("Ciao, Mondo!");
let rainy = true;
if (rainy){
   alert("Prendi un ombrello");
} else {
   alert("Non c'è bisogno di un ombrello");
}

Eseguire questo codice ci darebbe il seguente output:

// alert("Ciao, Mondo!");
let rainy = false;
if (rainy){
   alert("Prendi un ombrello");
} else {
   alert("Non c'è bisogno di un ombrello");
}

Invece, eseguire questa versione del codice che dice che non c’è pioggia, darebbe il seguente output:

Quando stai digitando il codice per apportare modifiche al file di codice, se dai un’occhiata più da vicino al nome del file, vedrai che avrà un asterisco prima del nome del file. Questo significa che il file di codice che scriviamo non è completamente salvato. Questo potrebbe non fare una grande differenza se stai scrivendo solo un paio di righe di codice che puoi sempre scrivere, ma più spesso che no vorrai salvare il tuo codice, in modo da poterlo riutilizzare o rivedere in seguito. Possiamo salvare questo file di codice allo stesso modo in cui salviamo altri file, quindi sarebbe “Command + S” su Mac e “Control + S” su Windows.

Nel nostro caso, poiché stiamo eseguendo il nostro codice subito dopo averlo scritto, ha automaticamente salvato il nostro file quando eseguiamo il codice. Quindi, se hai intenzione di scrivere del codice e lasciarlo per ore, è una buona idea salvare il tuo codice di tanto in tanto per assicurarti di non perdere alcun progresso significativo.

È fantastico che possiamo far adattare il nostro codice a una condizione binaria utilizzando un’istruzione If e un’istruzione else, ma cosa succede se abbiamo più cose da considerare, il che sarà molto probabilmente il caso nella vita reale. Ad esempio, e se fa freddo e hai bisogno di prendere una felpa quando fa freddo. Un modo per farlo sarebbe un’istruzione “else if” e possiamo farlo come segue:

// alert("Ciao, Mondo!");
let rainy = false;
let cold = true;
if (rainy){
   alert("Prendi un ombrello");
} else if (cold) {
    alert("Porta una felpa con te, non un ombrello");
} else {
   alert("Non c'è bisogno di un ombrello");
}

L’output di questo codice apparirebbe così:

Quindi, se una certa condizione è vera, il primo codice che si trova tra le parentesi verrà eseguito. Nel nostro caso, poiché la prima condizione controlla la pioggia, avviseremo l’utente che dovrebbe prendere un ombrello. Se quella condizione è falsa, il che significa che non c’è pioggia, continueremo a controllare altre condizioni utilizzando un’istruzione “else if”. Una cosa che è significativamente diversa dall’istruzione “else if” è che possiamo controllare quante più condizioni vogliamo con le istruzioni else if.

La cosa importante da ricordare qui è che il tuo codice verrà controllato dall’alto verso il basso, per correttezza o verità. Significa che con il codice attuale, se il tempo è sia piovoso che freddo, non riconoscerà il freddo, poiché la prima affermazione è corretta. Possiamo anche verificare questo cambiando il codice per avere entrambe le condizioni di pioggia e freddo.

// alert("Ciao, Mondo!");
let rainy = true;
let cold = true;
if (rainy){
   alert("Prendi un ombrello");
} else if (cold) {
    alert("Porta una felpa con te, non un ombrello");
} else {
   alert("Non c'è bisogno di un ombrello");
}

Ora ti starai chiedendo, come posso risolvere questo? Quale è più importante, il freddo o la pioggia? Dovresti scegliere una condizione e sacrificare l’altra condizione? Devi persino fare una scelta del genere? Beh, non proprio. Questo è un problema molto comune e ha una soluzione molto comune e relativamente semplice. Possiamo usare un’espressione “e” per coprire più scenari. Per dire a JavaScript che vogliamo usare un “e” per collegare la nostra logica di programmazione, utilizzeremo due di questi simboli: “&”. E poiché il nostro codice viene controllato dall’alto verso il basso, utilizzeremo l’opzione più completa per la prima istruzione if. Il codice aggiornato quindi appare così.

// alert("Ciao, Mondo!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Indossa una felpa e prendi un ombrello con te.")
} else if (rainy){
   alert("Prendi un ombrello");
} else if (cold) {
    alert("Porta una felpa con te, non un ombrello");
} else {
   alert("Non c'è bisogno di un ombrello");
}

Eseguire questo codice ti darebbe un avviso che appare così:

Molto meglio. Ora possiamo combinare più scenari diversi, comprese diverse combinazioni di questi scenari. Ma cosa succede se vogliamo considerare uno scenario che non è freddo ma piovoso. E supponiamo che vogliamo dire all’utente di non prendere una felpa specificamente, e di prendere solo un ombrello. Per fare proprio questo, possiamo usare il logico “non”, possiamo usarlo nel nostro codice con il punto esclamativo prima della condizione che vogliamo specificare. Aggiungiamo quella condizione al nostro codice in modo che sia più completo.

// alert("Ciao, Mondo!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Indossa una felpa e prendi un ombrello con te.")
} else if (rainy && !cold){
   alert("Prendi un ombrello, ma non una felpa.");
} else if (rainy){
   alert("Prendi un ombrello");
} else if (cold) {
    alert("Porta una felpa con te, non un ombrello");
} else {
   alert("Non c'è bisogno di un ombrello");
}

Quando aggiungiamo una nuova condizione a un albero if else, finché è la condizione più completa possiamo posizionarla da qualche parte in cima. In questo modo, abbiamo molte meno possibilità di errori rispetto all’approccio opposto. Un effetto collaterale dell’inserimento di nuovo codice in codice esistente è che parte del codice potrebbe diventare ridondante o potrebbe non funzionare nel modo più efficiente. Non ci concentreremo molto sulla parte dell’efficienza, ma per ora possiamo vedere che copriamo sia le condizioni di freddo che di non freddo per un tempo piovoso, quindi possiamo opzionalmente rimuovere la condizione che controlla solo la condizione “piovosa”. Apportare queste modifiche al codice è anche chiamato “Refactoring del Codice”, nel processo di refactoring l’obiettivo è rendere il codice progressivamente più pulito ed efficiente.

// alert("Ciao, Mondo!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Indossa una felpa e prendi un ombrello con te.")
} else if (rainy && !cold){
   alert("Prendi un ombrello, ma non una felpa.");
} else if (cold) {
    alert("Porta una felpa con te, non un ombrello");
} else {
   alert("Non c'è bisogno di un ombrello");
}

Quando vogliamo controllare se una qualsiasi condizione è vera, possiamo usare l’operatore “o”, che è il simbolo della barra verticale usato due volte sulla tastiera e appare così “||”.

Vediamo un esempio di ciò con un altro esempio. Per aggiungere più esempi allo stesso file senza interferire con i nuovi comandi, possiamo commentare il codice precedente che abbiamo usato avvolgendo il codice precedente all’interno di questi simboli che abbiamo visto prima:

/* 
*/

Che è una barra in avanti e un asterisco e gli stessi simboli nell’ordine opposto per chiudere la parte commentata. Avvolgiamo il nostro codice attuale all’interno di questi simboli in modo che non interferiscano con il nuovo codice che deve venire. Ora il tuo file di codice dovrebbe apparire così:

// alert("Ciao, Mondo!");
/*
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Indossa una felpa e prendi un ombrello con te.")
} else if (rainy && !cold){
   alert("Prendi un ombrello, ma non una felpa.");
} else if (cold) {
    alert("Porta una felpa con te, non un ombrello");
} else {
   alert("Non c'è bisogno di un ombrello");
}
*/

Da ora in poi ci concentreremo sulle nuove parti che stiamo aggiungendo al file, in modo da poterci concentrare su un argomento alla volta. Puoi opzionalmente mantenere il codice precedente in modalità commento, spostarlo in un nuovo file per i tuoi riferimenti, o se non vuoi vederlo più a lungo, puoi eliminarlo per un file più pulito.

Continuiamo con il nostro esempio a un caso di “o”. Considera uno scenario in cui visiti il tuo frigorifero per cibo e bevande ogni volta che ti senti affamato o assetato. Come funzionerebbe il codice per questo?

let hungry = true;
let thirsty = false;
if (hungry || thirsty) {
    alert("Vai al frigorifero e controlla cosa hai lì dentro.");
}

Eseguire questo codice, come probabilmente hai già indovinato, ci darebbe il seguente risultato:

Fino ad ora gli esempi che abbiamo usato provenivano da scenari vicini alla vita reale, ma molte volte ti troverai a dover gestire numeri nel codice. Hai visto numeri in precedenza in questa serie, ma non abbiamo parlato molto del confronto o delle operazioni che potremmo fare con essi. Ora che abbiamo imparato a conoscere le istruzioni if else, vediamo di più sui numeri.

Quando trattiamo con if e istruzioni else if stiamo controllando la verità di un’affermazione. Ma possiamo anche fare un’affermazione if significativa se tutto ciò che abbiamo sono numeri? Ad esempio, e se voglio prendere un ombrello se c’è più del 50% di possibilità di pioggia, possiamo ottenere questo con il codice? Sì, possiamo, ecco come andrebbe.

let chanceOfRain = 70;
if (chanceOfRain >= 50) {
    alert("Prendi un ombrello.");
}

Quando trattiamo con numeri, abbiamo bisogno di un modo per convertirli in qualche tipo di verità o falsità affinché l’istruzione if funzioni. Ci sono diversi modi per ottenere ciò a seconda del nostro caso d’uso.

Ad esempio, possiamo controllare se due numeri sono esattamente uguali tra loro con tre segni uguali in questo modo:

let a = 10;
let b = 10;
if (a === b) {
    alert("Sono uguali.");
}

Questo ci darebbe l’avviso che dice “Sono uguali.”.

Possiamo anche controllare se non sono uguali con il seguente codice:

let a = 10;
let b = 5;
if (a !== b) {
    alert("Non sono la stessa cosa!");
}

Eseguire il codice sopra ci darà l’avviso che dice “Non sono la stessa cosa!”.

Possiamo anche controllare specificamente quale è maggiore, maggiore uguale, minore o minore uguale. Puoi trovare un riepilogo dei segni per tua comodità.

// === controlla l'uguaglianza
// !== controlla la non uguaglianza
// > maggiore di
// >= maggiore o uguale a
// < minore di
// <= minore o uguale a

Vediamo anche un paio di esempi in più per ulteriore pratica e esposizione al codice. Ecco un paio di codici di esempio che mostreranno tutti l’avviso che hanno all’interno delle istruzioni if:

Maggiore di:

let a = 10;
let b = 5;
if (a > b) {
    alert("a è maggiore di b");
}

Maggiore o uguale a:

let a = 10;
let b = 5;
if (a >= b) {
    alert("a è maggiore o uguale a b");
}

Un altro esempio di maggiore o uguale a:

let a = 10;
let b = 10;
if (a >= b) {
    alert("a è maggiore o uguale a b");
}

Minore di:

let a = 5;
let b = 10;
if (a < b) {
    alert("a è minore di b");
}

Minore o uguale a:

let a = 5;
let b = 10;
if (a <= b) {
    alert("a è minore o uguale a b");
}

Un altro esempio di minore o uguale a:

let a = 10;
let b = 10;
if (a <= b) {
    alert("a è minore o uguale a b");
}

Utilizzando una combinazione di questi segni di confronto o uguaglianza, possiamo creare codici complessi che possono adattarsi a diverse condizioni.

Operazioni aritmetiche

Quando trattiamo con numeri un’altra cosa che vogliamo eseguire sono le operazioni aritmetiche. La maggior parte delle operazioni aritmetiche dovrebbe essere piuttosto familiare, ma ci sono anche operatori aritmetici specifici per la programmazione che potrebbero essere meno familiari.

Ecco un riepilogo delle operazioni aritmetiche che utilizziamo in JavaScript con il loro significato per tua comodità:

// * moltiplicazione
// / divisione
// + addizione
// - sottrazione
// % operazione modulo, ci dà il resto dopo la divisione
// ** esponenziazione

Le prime quattro funzioneranno come ti aspetti:

let a = 12;
let b = 5;
let c = a * b;
// c sarà 60
c = a / b;
// c sarà ora 2.4
c = a + b;
// c sarà ora 17
c = a - b;
// c sarà ora 7

L’operazione modulo ci darà il resto dopo aver diviso il primo numero per il secondo numero. Se continuiamo con il precedente codice a, b e c:

c = a % b;
// c sarà ora 2
c = 18 % 5;
// c avrà ora il valore di 3
// perché 18 diviso 5 ci darà il resto di 3

L’operatore esponenziale esegue l’esponenziazione in JavaScript. È rappresentato con due segni di asterisco e prende il primo elemento elevato alla potenza del secondo elemento.

c = 2 ** 3;
// c avrà ora il valore di 8
// perché 2 * 2 * 2 è uguale a 8

Questo è stato un tutorial relativamente lungo, e ce l’hai fatta! Abbiamo aggiornato il nostro setup di codifica e imparato molto in questo tutorial. Nel prossimo tutorial, continueremo con altri modi per controllare il flusso del nostro codice!