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

Questa è la parte 4 della serie di post sul blog JavaScript che ti porterà dal principiante all'avanzato. Entro la fine di questa serie conoscerai tutte le nozioni di base che devi sapere per iniziare a scrivere codice in JavaScript. Senza ulteriori indugi, iniziamo con il quarto tutorial.

Snippet e strutture di controllo – sommario:

1. Aggiornamento della nostra configurazione di codifica agli snippet
2. Strutture di controllo

In questo post del blog continueremo con il punto in cui abbiamo lasciato il terzo post del blog. A questo punto dovresti avere il tuo browser Google Chrome aperto e più specificamente la tua console JavaScript aperta. Se per qualche motivo li chiudessi, sarebbe un buon momento per riaprirli.

Se sei su un Mac, la scorciatoia da tastiera per aprire la console è premere "Opzione + Comando + J", dopo aver aperto Chrome. Se stai utilizzando un dispositivo Windows, puoi utilizzare la scorciatoia da tastiera "Control + Shift + J", per aprire la Console JavaScript, una volta aperto Chrome. Oppure puoi anche andare nel menu in alto e andare su Visualizza -> Sviluppatore -> Console JavaScript.

Aggiornamento della nostra configurazione di codifica agli snippet

Fino a questo punto del corso, avremmo potuto scrivere tutto riga per riga ed eseguirlo riga per riga. Non sarebbe 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 set completo di istruzioni. Per raggiungere questo obiettivo, utilizzeremo qualcosa chiamato "snippet" in Google Chrome. Senza ulteriori indugi, aggiorniamo la nostra configurazione dalla console JavaScript agli snippet di Chrome.

Attualmente dovresti avere la tua console aperta e se hai seguito i tutorial precedenti dovresti avere una schermata simile a questa:

Quando guardi questa schermata, o il tuo schermo per quella materia, dovresti vedere: Elementi, Console, Sorgenti, Rete, Prestazioni, Memoria, Applicazione e così via scritti uno accanto all'altro nella barra superiore dell'area scura. Se li vedi con colori più chiari, va benissimo anche questo. Significa che stai utilizzando la modalità luce, che può essere la modalità predefinita per il giorno. Lo schermo che mostro attualmente utilizza la combinazione di colori per la modalità oscura nelle impostazioni della console di Chrome. Se vedi Elementi, Console, Sorgenti, Rete e così via, in entrambe le combinazioni di colori, sei a posto.

Se osservi più da vicino la barra in alto della console, puoi notare che la scritta "Console" ha un colore leggermente diverso. Vai avanti e fai clic su "Sorgenti" proprio accanto ad esso.

Dopo aver fatto clic su fonti, dovresti guardare uno schermo che in qualche modo assomiglia a questo.

Una differenza che potresti aspettarti se probabilmente non vedrai il file "notes.js", poiché l'ho creato in precedenza. A parte questo, dovrebbe sembrare abbastanza simile a questo. Per creare un nuovo file clicca su “+ Nuovo snippet”. Dopo aver fatto clic su di esso, creerà un nuovo file JavaScript per te e potrai nominarlo come preferisci. In questo tutorial lo chiameremo "index.js" poiché è pratica comune nominare il primo o il file principale come "index.js".

Se vuoi seguire questo tutorial parola per parola, dopo aver cliccato su “+ New Snippet”, puoi inserire il nome “index.js” e premere il tasto Invio sulla tastiera. Ora possiamo fare clic all'interno del file aperto sull'area principale che si è aperta, per iniziare a codificare JavaScript.

Cominciamo con qualcosa che già sappiamo che funziona. E questo è:

alert("Hello, World!");

Puoi scriverlo tu stesso per ulteriore pratica o copiare e incollare la parte di codice nel file che abbiamo creato. Consiglio vivamente di digitarlo da soli 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 tuo cursore andrà semplicemente alla riga successiva, come con qualsiasi altra area di modifica del testo. Ci sono due modi principali in cui possiamo eseguire il nostro codice. Il primo è fare clic sul pulsante di riproduzione che si trova nell'angolo in basso a destra.

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

Dopo aver fatto clic su "OK", eseguiamo anche il nostro codice utilizzando l'altro modo principale. Il secondo modo principale per eseguire il codice o eseguire lo snippet è utilizzare la scorciatoia da tastiera. Come possiamo vedere, ci mostra già la scorciatoia quando facciamo clic sul pulsante Esegui. Quella scorciatoia da tastiera è "Comando + Invio". Per farlo, possiamo premere il tasto Comando e quindi premere il tasto Invio. In questo modo verrà eseguito anche il nostro codice e ci darà gli stessi risultati di fare clic 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 prendere appunti su JavaScript, o per esercitarti con codice JavaScript, puoi sempre creare nuovi file facendo clic su "+ Nuovo snippet" e nominare i tuoi file come preferisci. Ora che abbiamo impostato il nostro nuovo codice pronto, vediamo un po' di JavaScript in più.

Strutture di controllo

Quando scriviamo il codice, dobbiamo tenere 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 viene eseguito il nostro codice, le dimensioni dello schermo da visualizzare, diversi tipi di browser che l'utente potrebbe avere e così via. Ma come possiamo assicurarci di essere preparati per diversi scenari? Se scrivi codici diversi uno dopo l'altro, avrebbe senso eseguirli tutti per l'utente? Per rispondere a tutto questo e altro, utilizzeremo strutture di controllo.

Le strutture di controllo ci consentono di guidare l'esecuzione del codice, in modo che il nostro codice possa adattarsi a diverse condizioni. Ci sono più elementi comuni utilizzati per le strutture di controllo. In questo tutorial inizieremo con quello più semplice e da lì ci sposteremo. Il primo che vedremo usa le istruzioni If, else, else if per controllare l'esecuzione del codice.

Se, altro e altro se

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

(Prima di scrivere questo codice commenteremo il codice del codice precedente che abbiamo nel file inserendo due barre in avanti davanti ad esso, quindi non viene eseguito, ma ne hai ancora una copia. Dopo aver aggiunto le barre in avanti Dovrebbe sembrare come questo:)

// alert("Hello, World!");
let rainy = true;
if (rainy){
   alert("Take an umbrella");
} else {
   alert("No need for an umbrella");
}

L'esecuzione di questo codice ci darebbe il seguente output:

// alert("Hello, World!");
let rainy = false;
if (rainy){
   alert("Take an umbrella");
} else {
   alert("No need for an umbrella");
}

Considerando che l'esecuzione di 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. Ciò significa che il file di codice che scriviamo non è stato completamente salvato. Questo potrebbe non fare una grande differenza se stai scrivendo solo un paio di righe di codice che puoi sempre scrivere, ma il più delle volte vorrai salvare il tuo codice, in modo da poterlo riutilizzare o rivedere in seguito. Possiamo salvare questo file di codice nello stesso modo in cui salviamo altri file, quindi sarebbe "Comando + S" su Mac e "Control + S" su Windows.

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

È fantastico poter adattare il nostro codice a una condizione binaria usando un'istruzione If e un'altra, ma abbiamo più cose da considerare, che molto probabilmente accadranno nella vita reale. Ad esempio, cosa succede se fa freddo e hai bisogno di una felpa con cappuccio quando fa freddo. Un modo in cui potremmo farlo sarebbe un'istruzione "altrimenti se" e possiamo farlo come segue:

// alert("Hello, World!");
let rainy = false;
let cold = true;
if (rainy){
   alert("Take an umbrella");
} else if (cold) {
    alert("Get a hoodie with you, not an umbrella");
} else {
   alert("No need for an umbrella");
}

L'output di questo codice sarebbe simile a questo:

Quindi, se una determinata condizione è vera, verrà eseguito il primo codice tra parentesi. Nel nostro caso, poiché la prima condizione verifica la presenza di pioggia, avviseremo l'utente che dovrebbe portare un ombrello. Se tale 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 tutte le condizioni che 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 veridicità. Ciò significa che con il codice corrente, se il tempo è sia piovoso che freddo, non riconoscerà il freddo, poiché la prima affermazione è corretta. Possiamo anche verificarlo modificando il codice per avere condizioni sia piovose che fredde.

// alert("Hello, World!");
let rainy = true;
let cold = true;
if (rainy){
   alert("Take an umbrella");
} else if (cold) {
    alert("Get a hoodie with you, not an umbrella");
} else {
   alert("No need for an umbrella");
}

Ora ti starai chiedendo, come posso risolvere questo? Qual è più importante, il tempo è freddo o piovoso? Dovresti scegliere una condizione e sacrificare l'altra condizione? Devi anche 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 utilizzare una "e" per connettere la nostra logica di programmazione, utilizzeremo due di questi simboli: "&". E poiché il nostro codice è controllato dall'alto verso il basso, utilizzeremo l'opzione più completa per la prima istruzione if. Il codice aggiornato quindi, assomiglia a questo.

// alert("Hello, World!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Wear a hoodie and take an umbrella with you.")
} else if (rainy){
   alert("Take an umbrella");
} else if (cold) {
    alert("Get a hoodie with you, not an umbrella");
} else {
   alert("No need for an umbrella");
}

L'esecuzione di questo codice ti darebbe un avviso simile a questo:

Molto meglio. Ora possiamo combinare più scenari diversi, comprese diverse combinazioni di questi scenari. Ma se volessimo considerare uno scenario non freddo ma piovoso. E supponiamo di voler dire all'utente di non prendere una felpa con cappuccio in particolare 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("Hello, World!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Wear a hoodie and take an umbrella with you.")
} else if (rainy && !cold){
   alert("Take an umbrella, but not a hoodie.");
} else if (rainy){
   alert("Take an umbrella");
} else if (cold) {
    alert("Get a hoodie with you, not an umbrella");
} else {
   alert("No need for an umbrella");
}

Quando aggiungiamo una nuova condizione a un albero if else, purché sia ​​la condizione più completa, possiamo posizionarla da qualche parte in alto. In questo modo, abbiamo molte meno possibilità di errori rispetto all'approccio opposto. Un effetto collaterale dell'inserimento di nuovo codice nel 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 fredde che quelle non fredde per un tempo piovoso, quindi possiamo opzionalmente rimuovere la condizione che controlla solo la condizione "piovosa". Fare questo aggiustamento del codice è anche chiamato "Refactoring del codice", nel processo di refactoring il punto è rendere il codice in modo incrementale più pulito ed efficiente.

// alert("Hello, World!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Wear a hoodie and take an umbrella with you.")
} else if (rainy && !cold){
   alert("Take an umbrella, but not a hoodie.");
} else if (cold) {
    alert("Get a hoodie with you, not an umbrella");
} else {
   alert("No need for an umbrella");
}

Quando vogliamo verificare che una delle due condizioni sia vera, possiamo usare l'operatore "or", che è il simbolo pipe usato due volte sulla tastiera e assomiglia a questo "||".

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

/* 
*/

Che è una barra in avanti 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 in arrivo. Ora il tuo file di codice dovrebbe assomigliare a questo:

// alert("Hello, World!");
/*
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Wear a hoodie and take an umbrella with you.")
} else if (rainy && !cold){
   alert("Take an umbrella, but not a hoodie.");
} else if (cold) {
    alert("Get a hoodie with you, not an umbrella");
} else {
   alert("No need for an umbrella");
}
*/

D'ora in poi ci concentreremo sulle nuove parti che stiamo aggiungendo al file, in modo da poterci concentrare sull'apprendimento di una cosa alla volta. Puoi facoltativamente mantenere il codice precedente nella modalità commentata, spostarlo in un nuovo file per i tuoi riferimenti o, se non vuoi vederlo più, puoi eliminarlo per un file più pulito.

Continuiamo con il nostro esempio a un caso "o". Considera uno scenario in cui visiti il ​​tuo frigorifero per cibo e bevande ogni volta che hai fame o sete. Come funzionerebbe il codice per questo?

let hungry = true;
let thirsty = false;
if (hungry || thirsty) {
    alert("Go to the fridge and check what you have in there.");
}

L'esecuzione di questo codice, come probabilmente anche tu lo avrai intuito, ci darebbe il seguente risultato:

Fino ad ora gli esempi che abbiamo utilizzato provenivano da scenari vicini alla vita reale, ma la maggior parte delle volte avrai a che fare con i numeri nel codice. Hai già visto i numeri in questa serie, ma non abbiamo parlato troppo del confronto o delle operazioni che potremmo fare con loro. Ora che abbiamo appreso delle affermazioni if ​​else, vediamo qualcosa in più sui numeri.

Quando abbiamo a che fare con affermazioni if ​​e else if, stiamo verificando la veridicità di un'affermazione. Ma possiamo anche fare una dichiarazione if significativa se tutto ciò che abbiamo sono numeri? Ad esempio, cosa succede se voglio prendere un ombrello se c'è più del 50% di possibilità di pioggia, possiamo ottenerlo con il codice? Sì, possiamo, ed ecco come andrebbe.

let chanceOfRain = 70;
if (chanceOfRain >= 50) {
    alert("Get an umbrella.");
}

Quando abbiamo a che fare con i numeri, abbiamo bisogno di un modo per convertirlo in una sorta di verità o falsità affinché l'istruzione if funzioni. Esistono diversi modi in cui possiamo ottenerlo a seconda del nostro caso d'uso.

Ad esempio, possiamo verificare se due numeri sono esattamente uguali tra loro con tre segni di uguale come questo:

let a = 10;
let b = 10;
if (a === b) {
    alert("They are the same.");
}

Questo ci darebbe l'avviso che dice "Sono uguali.".

Possiamo anche verificare di non essere uguali con il seguente codice:

let a = 10;
let b = 5;
if (a !== b) {
    alert("They are not the same thing!");
}

L'esecuzione del codice sopra ci darà l'avviso che dice "Non sono la stessa cosa!".

Possiamo anche verificare in modo specifico quale sia maggiore, maggiore uguale, minore o minore uguale. Puoi trovare un riepilogo dei segni per tua comodità.

// === checks for equality
// !== checks for not equality
// > greater than
// >= greater than or equal to
// < smaller than
// <= smaller than or equal to

Vediamo anche un paio di altri per maggiore pratica ed esposizione del codice. Ecco un paio di codici di esempio che mostreranno tutti l'avviso che hanno all'interno delle istruzioni if:

Più grande di:

let a = 10;
let b = 5;
if (a > b) {
    alert("a is greater than b");
}

Maggiore o uguale a:

sia a = 10; sia b = 5; if (a >= b) { alert(“a è maggiore o uguale a b”); } [/codice]

Un altro esempio per maggiore o uguale a:

let a = 10;
let b = 10;
if (a >= b) {
    alert("a is greater than or equal to b");
}

Più piccolo di:

let a = 5;
let b = 10;
if (a < b) {
    alert("a is smaller than b");
}

Minore o uguale a:

let a = 5;
let b = 10;
if (a <= b) {
    alert("a is smaller than or equal to b");
}

Un altro esempio per minore o uguale a:

let a = 10;
let b = 10;
if (a <= b) {
    alert("a is smaller than or equal to b");
}

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

Operazioni aritmetiche

Quando abbiamo a che fare con i numeri, un'altra cosa che vogliamo eseguire sono le operazioni aritmetiche. La maggior parte delle operazioni aritmetiche dovrebbe essere abbastanza familiare, ma ci sono anche specifici operatori aritmetici di programmazione che potrebbero essere meno familiari.

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

// * multiplication
// / division
// + addition
// - subtraction
// % modulo operation, gives us the remainder after division
// ** exponentiation

I primi quattro funzioneranno come previsto:

let a = 12;
let b = 5;
let c = a * b;
// c will be 60
c = a / b;
// c will now be 2.4
c = a + b;
// c will now be 17
c = a - b;
// c will now be 7

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

c = a % b;
// c will now be 2
c = 18 % 5;
// c will now have the value of 3
// because 18 divided by 5 will give us the remainder of 3

L'operatore esponente esegue l'esponenziazione in JavaScript. È rappresentato con due asterischi segno e porta il primo elemento alla potenza del secondo elemento.

c = 2 ** 3;
// c will now have the value of 8
// because 2 * 2 * 2 equals 8

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

Corso JavaScript dal principiante all'avanzato in 10 post del blog:

1. Come iniziare a codificare in JavaScript?
2. Nozioni di base su JavaScript
3. Variabili e diversi tipi di dati in JavaScript
4. Snippet e strutture di controllo
5. While loop e for loop
6. matrice Java
7. Funzioni JavaScript
8. oggetti JavaScript
9. Metodi JavaScript e altro
10. Riepilogo del corso JavaScript