Corso completo Web Developer - Parte 2 - 2.2
Introduzione
JavaScript da non confondere con Java è uno dei linguaggi di programmazione più diffuso ed utilizzato e indubbiamente il 👑 Re dello Sviluppo Web. Viene utilizzato per creare siti web dinamici e interattivi e viene impiegato sia nella parte Frontend ovvero quella grafica che vediamo e interagiamo con il nostro browser, sia nella parte Backend ovvero quella che non vediamo ma che gestisce i dati e le informazioni che vengono scambiate tra il nostro browser e il server.
Noi ci focalizzeremo sulla parte Frontend. Uno degli impieghi di JavaScript nella parte Frontend è ad esempio cambiare dinamicamente il contenuto e/o lo stile di una pagina web sulla base delle interazioni del visitatore.
Se HTML può essere paragonato alle ossa presenti nel corpo umano che formano una struttura solida, CSS può essere paragonato al trucco per rendere più attraente una persona e JavaScript può essere paragonato al cervello che permette di eseguire azioni e dare vita a tutto ciò.
Quindi una pagina web senza JavaScript è definita una pagina web statica, mentre una pagina web con JavaScript è definita una pagina web dinamica e questa ci permetterà di cambiare il contenuto sulla pagina basandoci sugli input dell'utente.
Prepariamo l'ambiente di lavoro
Per poter iniziare a programmare in JavaScript è necessario avere un editor di testo e un browser. Per quanto riguarda l'editor di testo, puoi utilizzare quello che preferisci, io personalmente utilizzo Visual Studio Code. Se stai seguendo il corso completo avrai già installato Visual Studio Code e le estensioni che consiglio di utilizzare, altrimenti puoi seguire l'articolo in cui mostro step by step come preparare il tuo computer ad un ambiente di sviluppo pronto per iniziare a programmare.
Questo sarà un nuovo progetto il che significa una nuova cartella. A me piace avere tutti i progetti in un'unica cartella nominata coding che ho salvato sul Desktop. Quindi creerò una nuova cartella all'interno di coding e la chiamerò javascript-frontend-essentials.
Ogni opportunità è buona per poter praticare l'utilizzo del Terminale quindi aprirò il Terminale e creerò la cartella con il seguente comando:
cd ~
cd Desktop/coding
mkdir javascript-frontend-essentials
cd javascript-frontend-essentials
Con il primo comando ci spostiamo nella Root del nostro computer, con il secondo ci sposteremo nella cartella coding che si trova sul Desktop, con il terzo creeremo la nostra nuova cartella javascript-frontend-essentials e con il quarto ci sposteremo all'interno di questa cartella.
Ora creerò un nuovo file all'interno di questa cartella e lo chiamerò index.html e un altro che chiameremo script.js.
touch index.html
touch script.js
Ora apriremo Visual Studio Code e creeremo un nuovo progetto. Per farlo cliccheremo su File e poi su Apri cartella e selezioneremo la cartella javascript-frontend-essentials.
Dovresti ritrovarti con una struttura del genere:
Proseguiamo aggiungendo il boilerplate HTML nel file index.html:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Frontend Essentials</title>
</head>
<body>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Ora avviamo la pagina HTML appena creata con l'estensione Live Server che abbiamo installato in precedenza. Per farlo cliccheremo con il tasto destro del mouse sul file index.html e selezioneremo Apri con Live Server.
A questo punto dovresti vedere una pagina bianca con il titolo JavaScript Frontend Essentials. Dobbiamo aprire i Developer Tools e per farlo facciamo un click col pulsante destro del mouse nella parte bianca della pagina e clicchiamo su Ispeziona. Dopodichè clicchiamo sulla scheda Console.
Scriviamo nella Console aperta nel Browser console.log("Hello World") e premiamo il tasto Invio. Vedrai che il messaggio Hello World apparirà nella Console.
Adesso apriamo il file script.js nel nostro text editor e scriviamo esattamente la stessa riga di codice JavaScript console.log("Hello World dal file script") e salviamo il file.
Se stai utilizzando l'estensione Live Server per visualizzare la pagina HTML nel Browser non avrai bisogno di ricaricare la pagina altrimenti ricarica la pagina e nota come il messaggio di output Hello World apparirà nella Console.
Se è andato tutto bene possiamo dire che abbiamo collegato con successo il nostro file JavaScript al nostro file HTML.
Ora passiamo un pò alla parte teorica per capire come funziona JavaScript.
Introduzione al DOM
Il DOM è l'acronimo di Document Object Model e rappresenta la struttura di una pagina web. Il DOM è un oggetto JavaScript che rappresenta la pagina web e ci permette di manipolare la pagina web.
Il DOM gestisce gli elementi HTML sottoforma di oggetti, infatti ogni elemento HTML è un oggetto in JavaScript e come tale può essere manipolato. Molteplici elementi HTML formano una struttura gerarchica ad albero che viene chiamata DOM tree.
Attraverso la manipolazione del DOM possiamo aggiungere o rimuovere elementi HTML nella pagina web, applicare o rimuovere del codice CSS, modificare attributi e molto altro. Modificare o manipolare il DOM potrebbe essere paragonato ad un meccanico che modifica il motore di un'automobile.
Come sempre la pratica è ciò che ci aiuta a capire e memorizzare i concetti quindi voglio farti subito un esempio pratico.
Andiamo ad aggiungere un bottone HTML alla nostra pagina web e lo faremo nel file index.html all'interno del tag body e prima del tag script:
<button type="button">Clicca Qui</button>
Adesso aggiungiamo il seguente snippet di codice JavaScript nel nostro file script.js:
const button = document.querySelector('button');
button.addEventListener('click', () => {
alert('Hai cliccato il bottone');
});
Salviamo il file e ricarichiamo la pagina HTML nel Browser. Se tutto è andato bene dovresti vedere il bottone Clicca Qui nella tua pagina web. Prova a cliccarci e vedi che cosa succede :)
Che cosa sta succedendo ?
Innanzitutto abbiamo dichiarato una costante button che contiene il bottone HTML che abbiamo aggiunto alla nostra pagina web.
Una constante è un tipo di variabile. Le variabili servono a contenere valori che vogliamo utilizzare successivamente nel nostro codice e poi gli assegniamo un valore utilizzando il simbolo =.
Ci sono diversi tipi di variabili in JavaScript e in questo caso abbiamo utilizzato una costante. Una costante è una variabile che non può essere modificata una volta che è stata dichiarata. Per dichiarare una costante utilizziamo la parola chiave const seguita dal nome della variabile e dal valore che vogliamo assegnare alla variabile.
Dopodichè possiamo vedere che abbiamo utilizzato document.querySelector('button') per selezionare il bottone HTML. document è un oggetto JavaScript che rappresenta la pagina web e querySelector è un metodo che ci permette di selezionare un elemento HTML presente nella pagina. In questo caso abbiamo selezionato il primo elemento nel documento HTML che corrisponde alla tipologia contenuta tra le due parentesi tonde e quindi button e lo abbiamo assegnato come valore alla costante button.
Ora che abbiamo a nostra disposizione un oggetto JavaScript che rappresenta il bottone HTML possiamo manipolarlo infatti la riga successiva fa esattamente questo.
Abbiamo aggiunto un EventListener al bottone HTML. Un EventListener è un metodo che ci permette di ascoltare gli eventi che avvengono su un elemento HTML. In questo caso abbiamo ascoltato l'evento click che si verifica quando clicchiamo sul bottone.
Hai appena scoperto come selezionare un elemento HTML e come manipolarlo!
Data Types
JavaScript è il primo effettivo linguaggio di programmazione che stiamo vedendo in questo percorso completo. Abbiamo visto HTML e CSS e questi non vengono definiti veri e propri linguaggi di programmazione. HTML e CSS sono dei linguaggi di markup e non sono in grado di eseguire operazioni matematiche o logiche.
Con JavaScript invece ci troviamo per la prima volta di fronte ad un vero e proprio linguaggio di programmazione. Quando si utilizzano linguaggi di programmazione, a prescindere da quale esso sia, una cosa comune fra tutti è che risolvono i problemi allo stesso modo ovvero immaganizzazione e manipolazione dei dati.
In JavaScript esistono diversi tipi di dati e ogni tipo di dato ha un suo significato ed una sua utilità. Nella versione Vanilla di JavaScript il data type (la tipologia del dato) viene dichiarata implicitamente ovvero non siamo noi a dover dire a JavaScript che tipo di dato contiene una variabile ma JavaScript lo fa da solo.
Andiamo a vedere i principali tipi di dati in JavaScript:
- Number
- String
- Boolean
- Undefined
- Null
Sono consapevole che in questo momento potresti ritrovarti in uno stato confusionale e non sei sicura/o di capire cosa stiamo dicendo. Non preoccuparti, non è un problema tuo, è un problema mio. E infatti adesso voglio portarti a vedere un esempio pratico per capire meglio cosa stiamo dicendo.
Andiamo ad aggiungere il seguente snippet di codice JavaScript nel nostro file script.js:
const testNumber = 10;
const testString = 'Hello World';
const testBoolean = true;
const testUndefined = undefined;
const testNull = null;
console.log(typeof testNumber);
console.log(typeof testString);
console.log(typeof testBoolean);
console.log(typeof testUndefined);
console.log(typeof testNull);
Nel tuo browser dovresti avere un risultato come il seguente:
Come puoi vedere abbiamo dichiarato 5 costanti che contengono dei valori e poi abbiamo utilizzato il metodo console.log per fare l'output nella Console del browser il tipo di dato che contiene ogni variabile e abbiamo ottenuto automaticamente il tipo di dato che contiene ogni variabile. Questo è quello che s'intende quando si dice che JavaScript dichiara implicitamente il tipo di dato che contiene una variabile. Capisce ad esempio che 10 è un Number mentre "10" ad esempio è una String perchè contenuta tra virgolette.
Adesso siamo pronti per andare a guardare un pò più nello specifico ognuno di questi tipi di dati. Non preoccuparti se non sei ancora convinta/o, vedremo che con la pratica tutto diventerà più chiaro.
Prima di proseguire, per evitare di avere tanti output nella Console del browser ti consiglio di commentare o di cancellare le righe di codice che abbiamo aggiunto in precedenza. Se vuoi commentarle puoi utilizzare il simbolo // per commentare una singola riga oppure puoi utilizzare /* all'inizio e */ alla fine per commentare più righe di codice.
Numbers
I Numbers sono i tipi di dati che rappresentano i numeri. In JavaScript i numeri possono essere interi o decimali e possono essere positivi o negativi.
const number = 10;
const decimalNumber = 10.5;
const negativeNumber = -10;
Proviamo a fare una semplicissima operazione matematica. Facciamo la somma di due numeri positivi. Aggiungiamo il seguente codice JavaScript nel nostro file script.js:
const number = 10;
const number2 = 20;
const sum = number + number2;
console.log(sum);
Ora andiamo a vedere nella console del Browser qual è l'output che otteniamo. Il tuo file script.js dovrebbe essere simile a questo:
Mentre nel tuo browser dovresti avere un risultato simile a questo:
Come puoi vedere abbiamo ottenuto il risultato corretto della somma di due numeri. Si possono ovviamente fare tutte le operazioni matematiche che si possono fare con i numeri.
Modulo Operator
Un operatore che non è molto usato ma che è comunque utile è l'operatore modulo %. L'operatore modulo restituisce il resto della divisione tra due numeri. Ad esempio se facciamo 10 % 3 otteniamo 1 perchè il resto della divisione tra 10 e 3 è 1.
Scopriremo che l'operatore modulo è molto utile quando si lavora con i cicli.
const number = 10;
const number2 = 3;
const modulo = number % number2;
console.log(modulo); // 10 diviso 3 ha il resto 1
Incremento e Decremento
Se abbiamo scelto come tipologia di variabile var oppure let che sono due tipologie che ci permettono di modificare il valore a differenza della const, possiamo incrementare o decrementare il suo valore facilmente.
let number = 10;
number = number + 1;
console.log(number); // 11
Oppure possiamo utilizzare l'operatore ++ per incrementare il valore di 1.
let number = 10;
number++;
console.log(number); // 11
Possiamo anche utilizzare l'operatore -- per decrementare il valore di 1.
let number = 10;
number--;
console.log(number); // 9
La stessa cosa può essere fatta per le moltiplicazioni con *= e per le divisioni con /=.
let number = 10;
number *= 2;
console.log(number); // 20
let number = 10;
number /= 2;
console.log(number); // 5
Questa tecnica ci permette di semplificare il codice e di renderlo più leggibile perchè effettuiamo l'operazione matematica ed allo stesso tempo diciamo al computer di salvare il risultato nella variabile.
Strings
Le Stringhe nella programmazione sono una tipologia di dato che troviamo dapperttutto. In JavaScript possiamo definire una stringa semplicemente racchiudendo del testo tra le virgolette e queste possono sia essere le singole virgolette '' che le doppie virgolette "".
const string = 'Hello World';
const string2 = "Hello World";
Possiamo anche utilizzare le virgolette per racchiudere una stringa e all'interno di questa stringa utilizzare le doppie virgolette.
const string = "Hello 'World'";
Oppure l'opposto
const string = 'Hello "World"';
Quindi la stringa è quel tipo di dato che ci permette di rappresentare semplicemente del testo.
Concatenazione
Possiamo concatenare due stringhe semplicemente utilizzando il simbolo +.
const string = 'Hello';
const string2 = 'World';
const string3 = string + string2;
console.log(string3); // HelloWorld
Booleans
Proviamo a fare un attimo qualche passo indietro per capire il perchè del data type Booleans. Il computer è praticamente una macchina che esegue delle operazioni in base a degli interruttori che possono essere ON oppure OFF. Ad esempio, quando decidiamo di accendere la luce nella cameretta questa si accende o spegne in base all'interruttore che può essere ON oppure OFF.
Il computer ragiona in modo molto simile. Ci sono una grande quantità di interruttori e con più esattezza di numeri 0 ed 1 chiamati byte che si possono combinare in maniera infinita per creare un numero infinito di interruttori.
Ora se possiamo avere degli interruttori con ON and OFF e dei numeri 0 ed 1 per poter decidere che cosa fare, perchè non possiamo anche avere due valori true e false ?
Ecco che arriviamo al data type Boolean.
I Booleani sono un tipo di dato che può assumere solo due valori: true o false. Questo tipo di dato è molto utile quando vogliamo eseguire delle operazioni che hanno come risultato un valore vero o falso.
Tutto ciò ci serve a performare sia semplici che molto complesse operazioni logiche. Ad esempio potremmo semplicemente dire:
Se 5 > 10 allora stampa "Il numero è maggiore di 10" altrimenti stampa "Il numero è minore di 10"
Qui abbiamo un semplice esempio di operazione logica che ci permette di decidere cosa fare in base al risultato di un'operazione matematica che ci ritornerà un valore vero o falso ovvero un Boolean value per decidere che cosa stampare.
const boolean = true;
const boolean2 = false;
Prova stesso tu nella console del browser la seguente operazione:
console.log(5 > 10);
Noteremo che il risultato sarà false perchè 5 non è maggiore di 10.
Questo è cio che ho scritto nel mio file script.js:
Questo è l'output nella console del Browser:
L'operatore di uguaglianza
Un altro modo per produrre un valore Boolean è utilizzando l'operatore di uguaglianza ==. Questo operatore ci permette di verificare se due valori sono uguali.
console.log(5 == 10); // false
console.log(5 == 5); // true
Possiamo anche utilizzare l'operatore di disuguaglianza != per verificare se due valori sono diversi.
console.log(5 != 10); // true
console.log(5 != 5); // false
Undefined and Null
Undefined
Quando creiamo una variable e assegniamo ad essa un valore possiamo vedere che questa variabile verrà automaticamente identificata come il dato del valore che abbiamo assegnato.
const string = 'Hello World';
console.log(typeof string); // string
Eseguendo il comando typeof possiamo vedere che il tipo di dato della variabile string è string.
const number = 10;
console.log(typeof number); // number
Qui possiamo vedere come assegnando un Number alla variabile number ora il tipo di dato è appunto number.
Che cosa succede se non assegnassimo nessun valore alla variabile?
let number;
console.log(typeof number); // undefined
Otterremo come risultato undefined che è un valore che ci dice che la variabile è stata dichiarata ma non è stata assegnata alcun valore.
Quindi possiamo dire che undefined è un valore che ci dice che la variabile è stata dichiarata ma non è stata assegnata alcun valore o che la variabile che stiamo controllando non esiste proprio.
Null
Null è un valore che ci dice che la variabile è stata dichiarata e assegnata un valore ma che quel valore è nullo o vuoto.
let number = null;
console.log(number);
Undefined vs Null
Quindi possiamo dire che undefined è un valore che ci dice che la variabile è stata dichiarata ma non è stata assegnata alcun valore o che la variabile che stiamo controllando non esiste proprio.
Null è un valore che ci dice che la variabile è stata dichiarata e assegnata un valore ma che quel valore è nullo o vuoto.
Non ti preoccupare se non riesci a capire la differenza tra questi due valori. È un concetto per risolvere problemi molto specifici e che non ti servirà per il momento. Infatti al momento non è particolarmente rilevante per il tuo percorso di apprendimento ma è giusto che tu sappia l'esistenza di questi due tipi di dati perchè successivamente torneremo su quest'argomento è potrai tornare a rivedere questa sezione per capire meglio 🙂
Conclusione
Ormai non ti può fermare nessuno! Hai finalmente scoperto il mondo di JavaScript. Hai configurato il tuo ambiente di sviluppo e hai iniziato a scrivere il tuo primo codice con un vero e proprio linguaggio di programmazione. Hai scoperto l'esistenza dei principali data types che ci serviranno per il nostro percorso di apprendimento, hai scoperto l'esistenza del DOM. Veramente tanta roba 😵
Insomma spero che quest'articolo su JavaScript ti sia piaciuto e che tu sia pronto/a per il prossimo capitolo.
Puoi scommettere che il prossimo articolo sarà ancora più interessante e che andremo sempre più in profondità nel mondo di JavaScript. Non vedo l'ora di condividere con te il prossimo capitolo. A presto! 🫡