Articolo originale: https://www.freecodecamp.org/news/learn-javascript-by-building-a-project/

JavaScript ti permette di rendere dinamici i siti web ed è la parte finale della trinità dello sviluppo web insieme a HTML e CSS.

In genere, si inizia a studiare JavaScript subito dopo aver affrontato le basi di HTML e CSS. Dopo qualche tempo, potresti far parte di una delle seguenti categorie:

  • Hai imparato tutte le sintassi sofisticate di JavaScript ma non sei in grado di comprenderle.
  • Hai imparato tutta la sintassi ma non riesci ad applicarla nei tuoi progetti personali.
  • Vuoi farla finita o stai pensando di cambiare carriera.

In questo articolo, intraprenderemo un approccio pratico per imparare JavaScript. Ti prometto che non ti annoierò troppo con la sintassi, ma piuttosto impareremo creando un progetto.

Di quali strumenti ho bisogno per imparare JavaScript?

JavaScript non richiede degli strumenti elaborati o costosi. Tutto ciò di cui hai bisogno è un computer con:

  • Un editor di testo (come Visual Studio Code)
  • Un browser moderno (come Chrome, Edge, Firefox, e via dicendo)

Se non hai un computer, puoi seguire comunque questo tutorial con un editor online come codepen.io.

Muovere i primi passi con JavaScript

Come detto precedentemente, tutto quello che ti serve per iniziare è un editor di testo e un browser. Apri il tuo editor – nel mio caso, VS Code – nella cartella dove vuoi che si trovi il file con il codice.

Crea un nuovo file chiamato index.html. Se stai usando VS Code, dovresti avere di fronte qualcosa del genere:

Screenshot--5--1

Come avere un'anteprima del codice sul browser

Una volta creato il file HTML, vorrai vedere il prodotto finito sul browser.

Per semplificare questo processo, abbiamo bisogno di installare l'estensione di VS Code "live server". Questa estensione farà sì che la pagina web si ricarichi immediatamente ogni volta che apportiamo delle modifiche al file HTML.

Clicca sull'icona delle estensioni nella parte sinistra di VS Code.

Screenshot--7-

Cerca e poi installa l'estensione live server. Ritorna al file HTML e scegli "Open with live server" dal menu contestuale.

Screenshot--8-

Adesso, la pagina web dovrebbe essere visibile nel browser.

Come integrare JavaScript in una pagina HTML

Puoi includere il codice JavaScript nell'HTML inserendolo direttamente tra i tag script.

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <script>
      let my_variable = "hello JavaScript";

      // qualsiasi codice JavaScript può andare qui
    </script>
  </head>
  <body>
    <h1>Hello world</h1>
   
  </body>
</html>

Ma tieni a mente che questo metodo non è consigliato. Invece, dovresti creare un file JavaScript esterno con l'estensione .js.

Nella cartella del progetto, crea un nuovo file chiamato script.js e poi aggiungi un link nel file HTML usando il percorso del codice JavaScript esterno, in questo modo:

<!DOCTYPE html>
<html lang="en">
  <head>
   ...
    <script src="script.js"></script>
    <title>Counter</title>
  </head>
  <body>
    ...
  </body>
</html>

JavaScript verrà eseguito prima dell'HTML. Ciò causa tipicamente problemi, dato che gli elementi HTML selezionati da JavaScript non saranno definiti, visto che il browser legge il codice HTML dall'alto al basso.

Per evitarlo, useremo l'attributo defer nell'elemento script, che comunica al browser di caricare l'HTML prima del codice JavaScript.

<script defer src="script.js"></script>

Ora che abbiamo impostato tutto, passiamo ad approfondire i fondamenti di JavaScript.

Come usare le variabili in JavaScript

Una variabile è un segnaposto per un valore che potrebbe servirti in futuro. Con JavaScript, tutto è conservato in variabili.

Per dichiarare una variabile, puoi usare le parole chiave let o const.

let prima_variabile
const seconda_variabile

Usiamo il segno "uguale" per assegnare un valore a una variabile.

let prima_variabile = “hello world”

Se dichiari una variabile con let, puoi modificarla. Invece, se dichiari una variabile con const, non puoi cambiare il suo valore – da qui il nome.

In JavaScript, puoi salvare più dati in una variabile:

  • Stringhe – qualsiasi valore racchiuso tra virgolette singole o doppie è una stringa.
let prima_stringa = "Hello world" // stringa
let seconda_stringa = "24" // stringa
  • Numeri – i numeri non sono racchiusi tra virgolette.
let primo_numero = 15 // numero
let secondo_numero = "15" // stringa
  • Array – gli array sono l'opzione migliore per contenere diversi valori in una sola variabile.
let mio_array = [1, "hello", "4", "world"]
  • Booleani – non devi inserire tra virgolette un valore booleano perché può essere solo true o false e non è una stringa.
let mio_booleano = true;
  • Oggetti – gli oggetti ti permettono di salvare dati come coppie chiave-valore.
let mio_oggetto = {
    nome: "John Snow",
    scopo: "Imparare JavaScript",
    età: 20,
}

Dato che JavaScript interpreta tutto come un oggetto, puoi addirittura salvare dei riferimenti a elementi HTML in variabili.

let mio_pulsante = document.querySelector("#id")

Selezioniamo degli elementi di una pagina web in base al loro id usando document.querySelector("#id"). Non preoccuparti, parleremo dei dettagli più avanti.

Per usare una variabile in JavaScript, chiama semplicemente il nome della variabile, in questo modo:

mio_pulsante

Per dimostrare come funzionano le variabili in JavaScript, costruiamo una semplice applicazione segnapunti. Aggiungi il seguente codice al file HTML precedentemente creato:

...
<body>
    <div class="counter_container">
      <button id="sottrai">-</button><span id="output">0</span
      ><button id="aggiungi">+</button>
    </div>
  </body>
...

Crea un file style.css e aggiungi i seguenti stili per dargli un po' di vita con del CSS:

*,
*::after,
*::before {
  padding: 0px;
  margin: 0px;
  font-family: inherit;
}
html,
body {
  height: 100vh;
}

body {
  font-family: sans-serif;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: aliceblue;
}
.counter_container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  margin-top: 1rem;
}
span {
  font-size: 3rem;
  background-color: #00bb00;
  padding: 2px 12px;
  margin-left: 16px;
  margin-right: 16px;
  border-radius: 4px;
  color: #fff;
}
button {
  font-size: 3rem;
  cursor: pointer;
  background-color: transparent;
  border: 0px;
}

Non dimenticarti di linkare il file CSS nel file HTML, in questo modo:

<head>
   ...
    <link rel="stylesheet" href="style.css" />
    <title>Counter</title>
  </head>

Ed ecco fatto – una semplice app costruita con HTML e CSS.

image-16

Tieni a mente che le variabili possono contenere riferimenti ad elementi HTML. Adesso, salviamo i riferimenti al nostro pulsante in delle variabili. Apri il file script.js che abbiamo creato prima e aggiungi il seguente codice:

let aggiungi = document.querySelector("#aggiungi");
let sottrai = document.querySelector("#sottrai");

console.log(aggiungi, sottrai);

Le variabili sono simpatiche, vero? Anche se possono contenere qualsiasi cosa, ci sono alcune linee guida fondamentali che dovresti conoscere prima di utilizzare delle variabili:

  • Evita di usare trattini bassi all'inizio del nome di una variabile, come in _mia_variabile, dato che possono creare confusione.
  • JavaScript non ti consentirà di iniziare il nome di una variabile con dei numeri, come in 8_variabile.
  • mia_variabile, MIA_VARIABILE e mia_Variabile sono oggetti totalmente differenti in JavaScript per via della sensibilità a maiuscole/minuscole.
  • E in nessuna circostanza devi usare delle parole riservate, tra cui let, const, true, false, function e qualsiasi altra.

Non infrangere queste regole fondamentali. E adesso passiamo a qualche altra cosa interessante da fare con JavaScript.

Come usare gli operatori in JavaScript

Senza matematica, che mondo sarebbe? E che JavaScript sarebbe senza matematica?

In JavaScript, abbiamo un insieme di simboli matematici che possiamo usare per svolgere semplici operazioni matematiche.

Non preoccuparti, probabilmente ti sono familiari per la maggior parte:

  • Addizione – in JavaScript, usiamo il simbolo più (+) per concatenare (unire) stringhe e aggiungere numeri.
let addizione = 1 + 1 // 2
let addizione = 1 + "1" // "11"
let addizione = "hello" + "world" // "hello world"
  • Sottrazione – usiamo il segno meno (-) per sottrarre numeri.
let sottrazione = 10 - 9 // 1
  • Moltiplicazione – usiamo un asterisco per moltiplicare i numeri in JavaScript.
let moltiplicazione = 2 * 2 // 4
  • Divisione – usiamo la sbarra obliqua (/) per dividere numeri.
let divisione = 4 / 2 // 2
  • Uguaglianza – usiamo un doppio segno "uguale" (==) per verificare se due valori sono uguali in JavaScript.
let if_true = 2 + 4 == 6 // true
let if_false = 5 + 6 == 10 // false

Esistono altri operatori disponibili in JavaScript, ma qui non approfondirò oltre.

Adesso che abbiamo familiarità con gli operatori, torniamo alla nostra applicazione segnapunti e modifichiamola in modo che il conteggio aumenti premendo il pulsante "+" sulla pagina.

Nella sezione precedente, abbiamo dichiarato alcune variabili e salvato il riferimento ai pulsanti HMTL come valore.

let aggiungi = document.querySelector("#aggiungi");
let sottrai = document.querySelector("#sottrai");

...

Adesso, tutto quello che dobbiamo fare per usare la variabile aggiungi è chiamare il suo nome.

aggiungi

Ma non è sufficiente, infatti dobbiamo sapere se è stata cliccata, e JavaScript ci fornisce quelli che possiamo chiamare "eventi". Li usiamo per essere consapevoli di ciò che accade su una pagina web, come un utente che clicca un pulsante o scorre una pagina, tra le altre cose.

Ecco ciò di cui abbiamo bisogno:

aggiungi.addEventListener("click", function () {
 // Ogni volta che il pulsante aggiungi viene cliccato, questo codice viene eseguito.
});

In questo caso, usiamo addEventListener per aggiungere un evento click al pulsante. Parleremo esclusivamente degli eventi in un'altra sezione.

Adesso, qualsiasi codice presente nella funzione callback è chiamato quando il pulsante viene cliccato.

Ora che ne siamo coscienti, aumentiamo il valore dell'output. Per farlo, otteniamo semplicemente il valore e poi lo aumentiamo di uno ogni volta che il pulsante viene cliccato. Ecco il codice necessario:

let aggiungi = document.querySelector("#aggiungi");

aggiungi.addEventListener("click", function () {
  let output = document.querySelector("#output");
  let result = output.innerText + 1;

  output.innerText = result;
});

Con l'eccezione di innerText, che è usato in JavaScript per ottenere (o modificare) il testo di un elemento HTML su una pagina web come visto qui sopra, la maggior parte della sintassi dovrebbe essere riconoscibile.

Nel prossimo esempio, clicca sul pulsante + per vedere incrementare il conteggio.

Non è proprio quello che avevamo previsto, vero? Visto che il valore di let output = document.querySelector("#output") è una stringa e JavaScript non ti permette di aggiungere un numero a una stringa, devi convertire l'output in un numero prima di aggiungerlo.

let result = Number(output.innerText) + 1;

Nel codice qui sopra, abbiamo convertito la stringa in un numero usando il metodo Number().

Proviamo ancora con l'esempio precedente dopo aver apportato questa modifica:

Ora funziona come programmato.

Come usare i condizionali in JavaScript

E se...? I condizionali sono usati per risolvere problemi come "E se volessimo che il nostro segnapunti si fermi a 10?" o "E se volessimo saltare un numero?". Quando ti trovi di fronte a domande di questo tipo, hai bisogno di un condizionale.

Gli unici condizionali in JavaScript che vedremo oggi sono le istruzioni if e else.

if (condizione) {
  /* codice da eseguire se la condizione è true */
} else {
  /* codice da eseguire in caso contrario */
}

I condizionali ci permettono di eseguire del codice solo se si verifica una certa condizione. Ad esempio, se il conteggio è maggiore di 10, possiamo resettarlo a zero.

let aggiungi = document.querySelector("#aggiungi");

aggiungi.addEventListener("click", function () {
  let output = document.querySelector("#output");
  let result = output.innerText + 1;

  if (result > 10) {
    result = 0;
  }

  output.innerText = result;
});

Se il risultato è maggiore di 10, l'istruzione if nel codice precedente riporta il risultato a 0. Nel prossimo esempio, prova ad aumentare il conteggio fino a un numero maggiore di 10.

Abbiamo omesso l'istruzione else poiché è opzionale.

Come usare le funzioni in JavaScript

Stiamo finalmente concludendo la nostra piccola app segnapunti. Aggiungiamo la possibilità di diminuire il conteggio. Tutto quello che dobbiamo fare è sottrarre 1 dall'output.

let aggiungi = document.querySelector("#aggiungi");
let sottrai = document.querySelector("#sottrai");

aggiungi.addEventListener("click", function () {
  let output = document.querySelector("#output");
  let result = Number(output.innerText) + 1;

  if (result > 10) {
    result = 0;
  }

  output.innerText = result;
});

sottrai.addEventListener("click", function () {
  let output = document.querySelector("#output");
  let result = Number(output.innerText) - 1;

  if (result < 0) {
    result = 0;
  }

  output.innerText = result;
});

Ed ecco una app segnapunti completa.

Dai un'occhiata al codice completo nel pen qui sopra e descrivi quello che osservi.

Bene, avrai notato un sacco di codice duplicato, che non è un bene. Dovremmo evitare le ripetizioni di codice.

E per questa ragione, usiamo le funzioni. Possiamo scrivere un pezzo di codice e poi usarlo tante volte quante desideriamo grazie a una funzione.

Per creare una funzione in JavaScript, devi usare la parola chiave function.

function aggiungi() {
  alert("hello world")
}

Le funzioni possono anche accettare dei parametri.

function aggiungi(numero1, numero2) {
 return numero1 + numero2
}

Questi parametri sono utilizzati nello stesso modo delle variabili in una funzione. Sono essenzialmente dei segnaposto.

Le funzioni, come le variabili, sono chiamate con i loro nomi. L'unica differenza è che per invocare una funzione occorre includere le parentesi – ().

aggiungi(2,4) // 6

Potresti aver visto delle funzioni dichiarate anche in questo modo:

const add = (numero1, numero2) => numero1 + numero2;

La sintassi qui sopra è equivalente alla definizione formale della funzione. Le funzioni definite così sono dette funzioni freccia.

Credo che per ora queste informazioni siano sufficienti come introduzione, quindi ti lascio con questo compito.

Sfida settimanale JavaScript

Abbiamo creato una semplice app segnapunti in questa lezione, ma contiene un sacco di codice ripetuto, quindi ecco una sfida per te:

  • Crea una singola funzione chiamata aggiungiESottrai() che può gestire sia l'addizione che la sottrazione senza dover ripetere del codice.

Conclusione

In questo tutorial, abbiamo imparato come usare JavaScript, sviluppato una semplice app segnapunti e imparato concetti fondamentali riguardanti variabili, condizionali e funzioni.

Grazie per aver letto questo articolo e buona programmazione!