JavaScript e manipolazione del DOM

Corso completo Web Developer - Parte 2 - 2.2

Introduzione

In questa lezione voglio mostrarti il perchè JavaScript è un linguaggio fondamentale per la parte Frontend dello sviluppo web. Andremo infatti a spiegare come manipolare il DOM con JavaScript.

Allacciati le cinture adesso che si parte! 🚀

Se vuoi una piccola rinfrescata della memoria su cosa sia il DOM, puoi leggere questa parte dell'articolo base su JavaScript.

Accesso agli elementi sul DOM

Per elementi sul DOM intendiamo tutti gli elementi HTML che sono presenti nella pagina web. Per esempio, se abbiamo aggiunto un h1 nel nostro file HTML vuol dire che abbiamo aggiunto un elemento sul DOM. Cerco di spiegarti meglio.

1. Abbiamo un file HTML nel quale abbiamo aggiunto nel body un h1 con il testo "Hello World".
2. Eseguiamo il nostro file HTML nel browser il quale proseguirà con l'analisi del codice HTML
3. Una volta che il browser ha analizzato il codice HTML e verificato che non contiene errori, lo trasforma in una struttura ad albero nota come "parsing tree".
4. Questa struttura ad albero viene utilizzata per la creazione del DOM (Document Object Model) che rappresenterà la struttura HTML del nostro file HTML.
5. Alla fine avviene la fase del "rendering" che si occupa di mostrare la pagina web al nostro utente. Il DOM è formato da "nodi" che rappresentano gli elementi HTML e che possono essere selezionati e modificati da codice JavaScript. Durante questa fase verrà anche applicato lo stile CSS al DOM.

Ovviamente di tutti gli steps sopra elencati, noi ci occuperemo solo del punto 1 ovvero della creazione del file HTML e di tag HTML. Il resto viene automaticamente gestito dal browser e di conseguenza noi non dobbiamo preoccuparci.

Selezionare elementi

Una volta aperta la pagina HTML sul browser come facciamo a selezionare un elemento HTML? Uno dei modi più semplici è utilizzare il metodo document.querySelector().

const title = document.querySelector('h1');

Il metodo document.querySelector() ci permette di selezionare un elemento HTML tramite il suo selettore CSS. In questo caso abbiamo selezionato l'elemento h1 e lo abbiamo salvato nella costante title.

Proviamo a fare il console.log() della costante title per vedere cosa contiene.

console.log(title);

Questo è cio che ho scritto nel mio file index.html:

Questo è cio che ho scritto nel mio file script.js:

Questo è l'output nel Browser:

Come puoi vedere il console.log() ci ha restituito l'elemento h1 selezionato nella console del browser.

Fai attenzione agli attributi che vedi in console, come per esempio accessKey ed align. Questi sono attributi ed ogni elemento HTML ha una lista di attributi. Questi variano in base al tipo di elemento HTML, se è un li, un p un h1 ecc. Puoi trovare la lista completa degli attributi di ogni elemento HTML qui.

Successivamente in questa lezione vedremo come modificare questi attributi.

Modificare elementi

Proseguiamo con modificare l'elemento title. Attraverso l'utilizzo del querySelector abbiamo selezionato un nodo dal DOM e salvato sottoforma di un oggetto JavaScript nella costante title e che quindi rappresenta l'elemento HTML selezionato. Possiamo utilizzare questo oggetto per modificare il suo contenuto, aggiungere o rimuovere classi, attributi, ecc.

Proviamo a modificare il testo dell'elemento h1 con JavaScript.

title.textContent = 'Testo cambiato con JavaScript';

In questo caso stiamo dinamicamente modificando il contenuto dell'elemento h1 con il testo "Testo cambiato con JavaScript" e come potrai notare sul browser il testo che verrà mostrato non sarà "Hello World" ma "Testo cambiato con JavaScript".

Questo è cio che ho scritto nel mio file script.js:

Questo è l'output nel Browser:

Come avrai appena notato siamo stati capaci di manipolare il contenuto HTML di un elemento selezionato tramite JavaScript. Questo è esattamente ciò a cui facciamo riferimento quando parliamo di manipolare il DOM con JavaScript.

Prova anche tu ad aggiungere altri elementi HTML come per esempio un paragraph <p></p> e modificare il suo contenuto dal file JavaScript.

Attributi e ID degli elementi

Quando abbiamo fatto il console log di title abbiamo visto che l'output nella console del browser conteneva una lista di attributi e proprietà dell'elemento h1. Questi attributi e proprietà sono utili per identificare univocamente un elemento HTML e per modificare i suoi attributi.

Un attributo fondamentale per identificare uno specifico elemento HTML è l'attributo id. L'attributo id è un attributo univoco per ogni elemento HTML e ci permette di identificare univocamente un elemento HTML. Per aggiungere un attributo id ad un elemento HTML basta aggiungere l'attributo id e assegnargli un valore univoco.

<h1 id="title">Hello World</h1>

Proviamo a fare il console log di questo id:

console.log(title.id); // title

Possiamo inoltre anche selezione un elemento in JavaScript tramite il suo id:

const title = document.querySelector('#title');

Nota che ho utilizzato il selettore CSS # per selezionare l'elemento tramite il suo id, proprio come selezioni un elemento HTML tramite id in CSS.

Gestire una lista di elementi

A volte vogliamo applicare una determinata logica a più elementi. Per esempio, perchè non proviamo a costruire in modo dinamico una lista della spesa di cose da comprare al supermercato?

Passiamo subito all'azione! Aggiungiamo una lista di tre elementi HTML nel nostro file HTML:

<ul>
  <li className="list-item"></li>
  <li className="list-item"></li>
  <li className="list-item"></li>
</ul>

Come facciamo a selezionare i tre elementi li tramite JavaScript? Apriamo il nostro file script.js e selezioniamo i tre elementi li tramite la loro classe:

const listItems = document.querySelectorAll('.list-item');

Per quanto la programmazione possa essere spesso una cosa astratta, dobbiamo sempre cercare di avere visibilità su ciò che stiamo facendo ogni qual volta possiamo. Per far ciò in questo caso andiamo a fare il console log di listItems e controlliamo nel browser che cosa ci viene loggato:

console.log(listItems);

Questo è cio che ho scritto nel mio file index.html:

Questo è cio che ho scritto nel mio file script.js:

Questo è l'output nel Browser:

Clicca sulla freccetta verso il basso per vedere cosa c'è all'interno dell'Array:

Se ti trovi un risultato simile a quello mostrato nei screenshot, allora sei sulla strada giusta e possiamo proseguire!

Definiamo nel nostro file script.js un'array di tre cose che vorremmo assolutamente non dimenticarci di comprare la prossima volta che andiamo al supermercato:

const listItems = document.querySelectorAll('.list-item');

const thingsToBuy = ['Pane', 'Nutella', 'Latte'];

Ora che abbiamo definito l'array thingsToBuy possiamo andare a popolare la nostra lista di elementi HTML con i valori dell'array thingsToBuy tramite un ciclo for:

for (let i = 0; i < thingsToBuy.length; i++) {
  listItems[i].textContent = thingsToBuy[i];
}

Aspetta un attimo Emanuele. Che cosa stiamo facendo qui?

Cerchiamolo di capire!

Stiamo creando un ciclo for che parte da i = 0 e continua fino a quando i è minore della lunghezza dell'array thingsToBuy. In questo caso i sarà incrementato di uno ad ogni iterazione del ciclo for.

Ogni volta che il ciclo for viene eseguito, prendiamo l'elemento li corrispondente all'indice i dell'array listItems e gli assegnamo il valore corrispondente all'indice i dell'array thingsToBuy.

Questo è il codice nel mio file script.js:

Ora che abbiamo capito cosa stiamo facendo, possiamo andare a vedere il risultato nel browser:

In questa sezione abbiamo combinato diversi concetti che abbiamo imparato finora:

• abbiamo selezionato un elemento HTML tramite il suo id e lo abbiamo assegnato ad una variabile
• abbiamo selezionato più elementi HTML tramite la loro classe e li abbiamo assegnati ad un array
• abbiamo popolato la nostra lista di elementi HTML con i valori di un array tramite un ciclo for

Complimenti! Stai pian piano facendo pratica con le fondamentale della programmazione. Queste saranno le basi su cui costruire il tuo futuro come sviluppatore!

Proseguiamo con la prossima sezione dove impareremo come aggiungere e rimuovere elementi dal DOM.

Aggiungere e rimuovere elementi dal DOM

Finora ogni volta che volevamo aggiungere elementi HTML sulla pagina web andavamo nel nostro file HTML e li aggiungevamo manualmente. Questo è come la maggior parte dei componenti di un sito web viene costruita. In alcuni casi però potrebbe essere necessario aggiungere elementi HTML dinamicamente, cioè in tempo reale, quando l'utente interagisce con il sito web. Come facciamo? Vediamolo insieme! 🤓

Aggiungere elementi al DOM

Apriamo il nostro file script.js e aggiungiamo il seguente codice:

const h1 = document.createElement('h1');
h1.textContent = 'Un elemento HTML creato dinamicamente';

Ora prova a ricaricare la pagina HTML e guarda cosa succede nel browser:

Nulla di speciale, giusto? 🤔

Questo perchè abbiamo creato un elemento HTML h1 sottoforma di oggetto JavaScript ma non lo abbiamo ancora aggiunto al DOM. Per far ciò possiamo utilizzare il metodo appendChild() che è disponibile per tutti gli elementi HTML. Questo metodo ci permette di aggiungere un elemento HTML come ultimo figlio di un elemento HTML.

const h1 = document.createElement('h1');
h1.textContent = 'Un elemento HTML creato dinamicamente';

const body = document.querySelector('body');
body.appendChild(h1);

Questo è il codice nel mio file script.js:

Questo è l'output nel Browser:

Rimuovere elementi dal DOM

Ovviamente oltre ad aggiungere elementi HTML al DOM possiamo anche rimuoverli. Per far ciò possiamo utilizzare il metodo removeChild() che è disponibile per tutti gli elementi HTML. Questo metodo ci permette di rimuovere un elemento HTML come ultimo figlio di un elemento HTML.

const h1Dinamico = document.createElement('h1');
h1Dinamico.textContent = 'Un elemento HTML creato dinamicamente';

const body = document.querySelector('body');
body.appendChild(h1Dinamico);

body.removeChild(h1Dinamico);

Come noterai il metodo removeChild() richiede come argomento l'elemento HTML che vogliamo rimuovere dal DOM. In questo caso vogliamo rimuovere l'elemento h1 che abbiamo appena creato. Se proviamo a ricaricare la pagina HTML vedremo che l'elemento h1 non viene più visualizzato nel browser e questo perchè l'abbiamo appena rimosso dal DOM.

Modificare gli attributi degli elementi

Finora abbiamo visto come selezionare elementi HTML dal DOM e come aggiungerli e rimuoverli. Ora vediamo come modificare gli attributi degli elementi HTML.

Selezionare tutti gli attributi

Per ottenere i nomi di tutti gli attributi di un elemento HTML possiamo utilizzare il metodo getAttributeNames() che è disponibile per tutti gli elementi HTML. Questo metodo ci permette di ottenere un oggetto NamedNodeMap sottoforma di Array che contiene tutti gli attributi dell'elemento HTML.

Aggiungiamo il seguente codice al nostro file index.html:

<h1 id="titolo-principale" className="testo-header">JavaScript e Manipolazione del DOM</h1>

const titoloPrincipale = document.querySelector('h1');
const attributes = titoloPrincipale.getAttributeNames();

console.log(attributes); // ['id', 'class', ...]

Questo è l'output nel Browser:

Selezionare uno specifico attributo

Per ottenere il valore di un attributo di un elemento HTML possiamo utilizzare il metodo getAttribute(nome-attributo-qui) che è disponibile per tutti gli elementi HTML. Questo metodo ci permette di ottenere il valore di un attributo di un elemento HTML.

const titoloPrincipale = document.querySelector('h1');
const id = titoloPrincipale.getAttribute('id');

console.log(id); // 'titolo-principale'

Questo è l'output nel Browser:

Modificare gli attributi

A volte potremmo aver bisogno di modificare gli attributi dinamicamente sulla base di qualche condizione dove potremmo voler aggiungere o rimuovere un attributo ad un elemento HTML. Per esempio, se un menù fosse aperto potremmo voler aggiungere un attributo aria-expanded con valore true mentre se il menù fosse chiuso potremmo voler rimuovere l'attributo aria-expanded o aggiungerlo con valore false.

Iniziamo in modo semplice e proviamo a modificare l'attributo id del titolo principale creato precedentemente con l'elemento h1.

Per far ciò possiamo utilizzare il metodo setAttribute(nome-attributo-qui, valore-attributo-qui) che è disponibile per tutti gli elementi HTML.

const titoloPrincipale = document.querySelector('h1');
titoloPrincipale.setAttribute('id', 'titolo-principale-modificato');

console.log(titoloPrincipale.getAttribute('id')); // 'titolo-principale-modificato'

Nella console del browser dovresti notare che adesso l'attributo id è stato modificato a titolo-principale-modificato.

E se volessimo rimuovere completamente l'attributo id ?

Per far ciò possiamo utilizzare il metodo removeAttribute(nome-attributo-qui) che è disponibile per tutti gli elementi HTML.

const titoloPrincipale = document.querySelector('h1');
titoloPrincipale.removeAttribute('id');

console.log(titoloPrincipale.getAttribute('id')); // null

Ora nella console del browser dovremmo avere null come valore dell'attributo id. Questo perchè l'attributo è stato appena rimosso.

Event Listeners

Iniziamo con lo spiegare che cosa s'intende per Event Listener. "Event" in inglese significa "Evento" e "Listener" significa "Ascoltatore". Un Event Listener è un ascoltatore di eventi che viene attivato quando un evento viene scatenato. Ad esempio, quando clicchiamo su un pulsante, quando passiamo il mouse su un elemento, quando un elemento viene caricato, quando un elemento viene modificato, ecc.

Infatti quando un utente arriva sul nostro sito web in base al sito potrebbe eseguire determinate azioni che scatenano degli eventi. In base a quanta dinamicità noi vogliamo dare al nostro sito andremo a codificare questi "event listeners" che verranno eseguiti quando un evento viene scatenato.

Esempio pratico: quando l'utente clicca su pulsante "Clicca qui" colora il pulsante di rosso.

Proviamoci insieme. Aggiungiamo il seguente codice al nostro file index.html:

<button id="pulsante">Clicca qui</button>

Adesso aggiungiamo il seguente codice al nostro file script.js:

const pulsante = document.querySelector('#pulsante');
pulsante.addEventListener('click', () => {
  pulsante.style.backgroundColor = 'red';
});

Proviamo a modificare il codice per far si che quando l'utente clicca sul pulsante il colore di sfondo del pulsante diventa rosso e quando l'utente clicca nuovamente sul pulsante il colore di sfondo del pulsante ritorna al colore di default.

const pulsante = document.querySelector('#pulsante');
pulsante.addEventListener('click', () => {
  if (pulsante.style.backgroundColor === 'red') {
    pulsante.style.backgroundColor = '';
  } else {
    pulsante.style.backgroundColor = 'red';
  }
});

Questo è quando il pulsante si trova sul colore di default:

Questo è quando il pulsante si trova sul colore rosso:

Che cosa stiamo facendo qui? Abbiamo aggiunto una condizione if che controlla se il pulsante ha uno stile CSS backgroundColor con valore red. Se questo ritorna un valore booleano true allora cambiamo lo stile ad una stringa vuota '' che significa che non c'è nessuno stile CSS impostato ed il pulsante torna al colore di default. Se invece il valore ritornato è false allora cambiamo lo stile a red.

Abbiamo quindi visto l'event listener click che viene eseguito quando l'utente clicca sul pulsante. Esistono molti altri event listener che possiamo utilizzare, ad esempio event listeners che si basano su click di mouse o su pressione di tasti sulla tastiera.

Puoi trovare una lista completa di tutti gli event listener disponibili su MDN.

Modificare il CSS

Utilizzare il metodo style

Nella sezione precedente ti ho già introdotto il metodo style quando abbiamo cambiato colore al pulsante. Questo metodo è disponibile per tutti gli elementi HTML e ci permette di modificare lo stile CSS di un elemento HTML come abbiamo visto nel caso del pulsante cambiandolo di colore.

Facciamo qualche altro test, per esempio aggiungiamo un elemento div con un id e proviamo a modificare lo stile CSS di questo elemento.

Prima della div di prova aggiungiamo due breaklines <br> per creare un po' di spazio tra il pulsante e la div di prova. Questo è solamente per un fattore estetico e vedere meglio il risultato nel browser.

<br>
<br>

<div id="div-di-prova"></div>

const divDiProva = document.querySelector('#div-di-prova');
divDiProva.style.backgroundColor = 'yellow';
divDiProva.style.width = '100px';
divDiProva.style.height = '100px';
divDiProva.style.border = '2px dotted black';

Questo è il codice nel mio file index.html:

Questo è il codice nel mio file script.js:

Questo è il risultato nel Browser:

Utilizzare il metodo classList

Attraverso l'utilizzo del metodo classList possiamo aggiungere o rimuovere delle classi CSS. Questo metodo è molto utile quando vogliamo aggiungere o rimuovere più stili CSS contemporaneamente e magari a più elementi HTML contemporaneamente. Inoltre possiamo utilizzare questo metodo anche semplicemente per controllare quali sono le classi CSS che un determinato elemento HTML ha già.

Andremo a vedere tre metodi: add, remove e toggle.

Facciamo qualche esempio pratico!

Iniziamo con il creare un nuovo file style.css dove aggiungeremo gli stili CSS che vogliamo utilizzare.

Il file puoi crearlo nella stessa cartella del file index.html e script.js e chiamarlo style.css.

Questa è la struttura della cartella che dovresti avere:

Dopodichè aggiungiamo il seguente codice al file style.css:

.classe-aggiunta-dinamicamente {
  background-color: #9a4c4c;
}

Ora aggiungiamo il seguente elemento h3 al body del file index.html:

<h3 id="h3-di-prova">Cliccami per evidenziare il mio testo</h3>

Ed infine vedremo come utilizzare i tre diversi metodi nel file script.js.

Metodo add

const h3DiProva = document.querySelector('#h3-di-prova');
h3DiProva.addEventListener('click', () => {
  h3DiProva.classList.add('classe-aggiunta-dinamicamente');
});

In JavaScript stiamo aggiungendo un event listener che viene azionato quando clicchiamo sull'elemento h3 e quando questo viene cliccato aggiungeremo la classe classe-aggiunta-dinamicamente. Questa classe è stata definita nel file style.css e contiene lo stile CSS che renderà lo sfondo del testo dell'elemento h3 di colore esadecimale #9a4c4c.

Nota come inizialmente l'elemento non ha alcuno sfondo e non ha la classe classe-aggiunta-dinamicamente:

Una volta che ci clicchiamo sopra, l'elemento h3 avrà lo sfondo di colore esadecimale #9a4c4c e la classe classe-aggiunta-dinamicamente:

In figura noti come sto utilizzando la funziona "Strumenti per sviluppatori" per vedere quali sono le classi CSS che i vari elementi HTML hanno.

Metodo remove

Bene, ora abbiamo aggiunto la classe e lo sfondo al stesto cliccandoci sopra ma come facciamo a farlo ritornare allo stato originale? In questo momento se ricarichi la pagina del browser questo rimuoverà la classe CSS aggiunta dinamicamente e quindi verrà rimosso il CSS che aggiungeva lo sfondo. Ma come facciamo a farlo senza ricaricare la pagina?

Per farlo possiamo utilizzare il metodo remove. Aggiorniamo il codice che abbiamo scritto nel file script.js aggiungendo un if statement dove praticamente controlliamo se l'elemento ha già la classe classe-aggiunta-dinamicamente e se la ha la rimuoviamo, altrimenti la aggiungiamo.

const h3DiProva = document.querySelector('#h3-di-prova');
h3DiProva.addEventListener('click', () => {
  if (h3DiProva.classList.contains('classe-aggiunta-dinamicamente')) {
    h3DiProva.classList.remove('classe-aggiunta-dinamicamente');
  } else {
    h3DiProva.classList.add('classe-aggiunta-dinamicamente');
  }
});

Adesso prova a cliccare una volta sull'elemento h3 e poi clicca nuovamente. Vedrai che il testo ritorna allo stato originale. Piuttosto divertente, vero? 😃

Metodo toggle

Abbiamo una logica perfettamente funzionante dove controlliamo se la classe è già presente e se lo è la rimuoviamo e se non lo è la aggiungiamo. Ma esiste un metodo più semplice per fare questo? Sì, esiste! Il metodo toggle!

Il termine toggle si può tradurre in italiano come un interruttore. Come l'interruttore per accendere e spegnere la luce. Quindi con un solo metodo possiamo ottenere esattamente quello che stiamo facendo con il nostro if statement, il metodo add ed il metodo remove.

Aggiorniamo il codice che abbiamo scritto nel file script.js sostituendolo con il codice seguente:

const h3DiProva = document.querySelector('#h3-di-prova');
h3DiProva.addEventListener('click', () => {
  h3DiProva.classList.toggle('classe-aggiunta-dinamicamente');
});

Prova a testare nuovamente sulla pagina web. Vedrai che funziona esattamente allo stesso modo come abbiamo visto prima ma ora il codice è più semplice e più leggibile.

Adesso è arrivato il momento di fare sul serio e di costruire un progettino più complesso. Costruiremo infatti non uno ma ben due progetti: Lista di cose da fare e uno Slider di immagini. Iniziamo! 🚀

Costruiamo una lista di cose da fare

Un ottimo esercizio da fare quando si inizia ad imparare un linguaggio di programmazione è quello di costruire una lista di cose da fare. In questo caso costruiremo un piccolo progettino che ci permetterà di aggiungere nuove cose da fare e di segnare quelle che abbiamo già completato.

Questo è il risultato finale che vogliamo ottenere:

Creiamo la cartella del progetto

Mettiamo da parte la cartella in cui abbiamo lavorato finora e creiamo una nuova cartella. Chiamiamola lista-cose-da-fare e creiamo i seguenti file:

• index.html
• style.css
• script.js

Creiamo il file HTML

Apriamo il file index.html e aggiungiamo un template HTML con dei tag basici per costruire lo scheletro della lista di cose da fare ed inoltre aggiungiamo il link al nostro file CSS e il link al nostro file JavaScript.

<!DOCTYPE html>
<html lang="it"></html>
<html>
  <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>Lista di cose da fare</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <div id="cose-da-fare">
      <h1>Cose da fare</h1>
      <ul id="lista-cose-da-fare"></ul>
      <div className="aggiungi-impegno">
        <input type=text placeholder="Aggiungi un nuovo impegno" id="nuovo-impegno">
        <button id="aggiungi">Aggiungi</button>
      </div>
    </div>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

L'applicazione è contenuta in una div che appunto funge da contenitore principale con un id assegnato di cose-da-fare. All'interno di questo contenitore abbiamo l'intestazione h1 con il titolo Cose da fare e una lista vuota con un id assegnato di lista-cose-da-fare. Questa lista è dove andremo ad inserire le cose da fare tramite JavaScript. Inoltre abbiamo un div con una classe aggiungi-impegno che contiene un input e un button. Questi due elementi ci permetteranno di aggiungere nuove cose da fare alla lista.

A questo punto la nostra lista avrà un look noioso e molto basico. Questo perchè ancora non abbiamo aggiunto ancora nessun stile CSS. Questo è il risultato che dovremmo avere ora:

Creiamo il file CSS

Apriamo il file style.css e aggiungiamo il seguente codice:

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.2rem;
  line-height: 1.5;
  color: #333;
  background-color: #f4f4f4;
  padding: 0;
  margin: 0;
}

#cose-da-fare {
  width: 80%;
  margin: 0 auto;
}

#cose-da-fare>h1 {
  text-align: center;
}

#lista-cose-da-fare {
  list-style: none;
  padding: 0;
}

li {
  font-size: 1.2rem;
  margin-bottom: 10px;
  cursor: pointer;
}

li:hover {
  background-color: #a53939;
  color: #fff;
  text-decoration: line-through;
  display: inline-block;
}

.completed {
  text-decoration: line-through;
  color: #aaa;
}

#nuovo-impegno[type=text] {
  display: block;
  width: 100%;
  font-size: 1.2rem;
  padding: 5px;
  border: none;
  border-bottom: 2px solid #ccc;
  margin-bottom: 10px;
}

#aggiungi {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 8px 16px;
  font-size: 1.2rem;
  border-radius: 4px;
  cursor: pointer;
}

#aggiungi:hover {
  background-color: #0062cc;
}

Ora dovremmo avere un risultato molto più interessante:

Creiamo il file JavaScript

Se adesso provassi ad aggiungere un elemento alla lista e cliccare su "Aggiungi" non succederebbe nulla. Questo perchè ancora non abbiamo scritto nessun codice JavaScript. Iniziamo quindi a divertirci con JavaScript!

Apriamo il file script.js e aggiungiamo il seguente codice:

// selezioniamo gli elementi della pagina con cui dobbiamo interagire
const inputImpegno = document.getElementById("nuovo-impegno");
const bottoneAggiungi = document.getElementById("aggiungi");
const listaImpegni = document.getElementById("lista-cose-da-fare");

// definiamo una funzione che crea un nuovo elemento `li` HTML dinamicamente e lo aggiunge alla lista
const creaImpegno = () => {
  // creiamo l'elemento `li` dinamicamente
  const nuovoImpegno = document.createElement("li");
  
  // aggiungiamo il testo dell'input come testo dell'elemento `li`
  nuovoImpegno.innerText = inputImpegno.value;
  
  // aggiungiamo un evento click all'elemento `li` per aggiungere la classe `completed` che ci permette di evidenziare l'impegno come completato
  nuovoImpegno.addEventListener("click", function() {
    this.classList.toggle("completed");
  });
  
  // aggiungiamo quindi l'elemento `li` alla lista come figlio dell'elemento genitore `ul`
  listaImpegni.appendChild(nuovoImpegno);
  
  // resettiamo quindi il valore dell'input con una stringa vuota per permettere all'utente di inserire un nuovo impegno
  inputImpegno.value = "";
}

// aggiungiamo un evento click al bottone "Aggiungi" per eseguire la funzione `creaImpegno` quando viene cliccato
bottoneAggiungi.addEventListener("click", creaImpegno);

// aggiungiamo un evento keypress all'input per eseguire la funzione `creaImpegno` quando viene premuto il tasto Enter sulla tastiera anzichè utilizzare il mouse
inputImpegno.addEventListener("keypress", function(event) {
  if (event.key == 'Enter') { creaImpegno(); }
});

I commenti nel codice ci aiutano a capire cosa sta succedendo. Fermati un attimo e leggi i commenti per capire cosa stiamo facendo.

Ora dovremmo essere in grado di aggiungere nuove cose da fare alla lista. Prova a fare un po' di prove e a vedere cosa succede. Se tutto va bene dovresti ottenere un risultato simile a questo:

Abbiamo completato la nostra applicazione con un bel pò di codice JavaScript che interagisce sulla pagina web in modo dinamico! 🎉

Più ci alleniamo e più capiremo meglio i concetti, diventeremo più bravi a risolvere i problemi attraverso il codice e ricorderemo sempre più velocemente come risolvere i problemi che abbiamo già risolto in passato.

Bando alle ciance, proseguiamo subito con un secondo progetto!

Costruiamo uno slider di immagini

In questo progetto costruiremo uno slider di immagini che ci permetterà di scorrere tra le immagini di un album fotografico.

Questo è il risultato finale che vogliamo ottenere:

Creiamo la cartella del progetto

Mettiamo da parte la cartella del progetto lista-cose-da-fare e creiamo una nuova cartella. Chiamiamola slider-immagini e come abbiamo fatto per il progetto precedente creiamo i seguenti file:

• index.html
• style.css
• script.js

Questa volta abbiamo bisogno anche di una cartella chiamata images che conterrà le immagini che utilizzeremo per il nostro progetto.

• images (cartella)

Questa dovrebbe essere la struttura finale del progetto:

Un modo facile e veloce per ottenere varie immagini è utilizzare il servizio gratuito Unsplash. Il link per ottenere un'immagine casuale è il seguente: https://source.unsplash.com/random/300x300

Ogni volta che apri questo link su una tab del browser ti verrà mostrata una nuova immagine casuale. Puoi salvarla nel tuo computer ed aggiungerla alla cartella images del progetto. Ripeti questo processo per ottenere 5 immagini diverse. Altrimenti se hai cinque immagini sul tuo computer puoi utilizzare quelle, non fa nessuna differenza. Una cosa importante da ricordare è il nome dei files di queste immagini. Ti consiglio di assegnare un nome semplice ad ogni immagine. Per esempio: image-1.jpg, image-2.jpg, image-3.jpg, image-4.jpg e image-5.jpg.

Alla fine dovresti ritrovarti con una struttura del genere:

- slider-immagini (cartella)
  - images (cartella)
    - image-1.jpg
    - image-2.jpg
    - image-3.jpg
    - image-4.jpg
    - image-5.jpg
  - index.html
  - style.css
  - script.js

Creiamo il file HTML

Apriamo il file index.html e aggiungiamo un template HTML con dei tag basici per costruire lo scheletro della nostra pagina web:

<!DOCTYPE html>
<html lang="it"></html>
<html>
  <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>Slider Immagini</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <div className="container">
      <div className="slider-immagini">
        <img src="/images/image-1.jpg" alt="immagine 1">
      </div>
      <div className="pulsanti">
        <button id="precedente">Precedente</button>
        <button id="seguente">Seguente</button>
      </div>
    </div>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

L'applicazione è contenuta in una div che appunto funge da contenitore principale con una classe assegnata di container. All'interno di questo contenitore abbiamo un div con una classe slider-immagini che conterrà l'immagine che stiamo visualizzando. Inoltre abbiamo un div con una classe pulsanti che conterrà i pulsanti per scorrere tra le immagini. Questi pulsanti hanno un id assegnato di precedente e seguente che ci permetterà di accedere a questi elementi tramite JavaScript.

Questo è il risultato che dovremmo avere ora:

Creiamo il file CSS

Apriamo il file style.css e aggiungiamo il seguente codice:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  max-width: 300px;
  max-height: 300px;
}

.slider-immagini {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}

.slider-immagini img {
  width: 100%;
  height: auto;
}

.slider-immagini button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5em;
  padding: 10px 20px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.7);
  color: #333;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  z-index: 1;
}

.slider-immagini button:hover {
  background-color: #333;
  color: #fff;
}

.slider-immagini #precedente {
  left: 0;
}

.slider-immagini #seguente {
  right: 0;
}

Ora dovremmo avere lo slider delle immagini che si trova al centro della pagina:

Creiamo il file JavaScript

Se adesso provassi a cliccare sui pulsanti per scorrere tra le immagini noteresti che non succede nulla. Questo perché non abbiamo ancora scritto il codice JavaScript che gestisce la logica di questo slider.

Apriamo il file script.js e aggiungiamo il seguente codice:

// L'array delle immagini
const immagini = [
  '/images/image-1.jpg',
  '/images/image-2.jpg',
  '/images/image-3.jpg',
  '/images/image-4.jpg',
  '/images/image-5.jpg'
];

// Selezioniamo gli elementi del DOM che abbiamo definito nella nostra pagina HTML
const sliderImmagini = document.querySelector('.slider-immagini');
const precedente = document.getElementById('precedente');
const seguente = document.getElementById('seguente');
const immagineCorrente = document.querySelector('img');

// Creiamo una variabile che tiene traccia dell'indice dell'immagine corrente
let indiceImmagineCorrente = 0;

// Creiamo una funzione che ci permette di passare all'immagine successiva
let aumentaIndice = function() {
  indiceImmagineCorrente = indiceImmagineCorrente + 1;
  if (indiceImmagineCorrente > immagini.length - 1) {
    indiceImmagineCorrente = 0;
  }
  return indiceImmagineCorrente;
}

// Creiamo una funzione che ci permette di passare all'immagine precedente
let diminuisciIndice = function() {
  indiceImmagineCorrente = indiceImmagineCorrente - 1;
  if (indiceImmagineCorrente < 0) {
    indiceImmagineCorrente = immagini.length - 1;
  }
  return indiceImmagineCorrente;
}

// Aggiungiamo un event listener al pulsante "seguente" che ci permette di passare all'immagine successiva
seguente.onclick = function() {
  immagineCorrente.setAttribute('src', immagini[aumentaIndice(indiceImmagineCorrente)]); 
}

// Aggiungiamo un event listener al pulsante "precedente" che ci permette di passare all'immagine precedente
precedente.onclick = function() {
  immagineCorrente.setAttribute('src', immagini[diminuisciIndice(indiceImmagineCorrente)]); 
}

Che cosa succede quando clicchiamo sui pulsanti "Precedente" e "Seguente"?

Quando clicchiamo sui pulsanti "Precedente" e "Seguente" viene eseguita la funzione aumentaIndice() o diminuisciIndice() che aumenta o diminuisce l'indice dell'immagine corrente. Questo indice viene utilizzato per selezionare l'immagine corrente dall'array immagini e viene passato alla funzione setAttribute() che cambia l'attributo src dell'elemento img che abbiamo selezionato in precedenza.

Quando il numero dell'indice raggiunge la lunghezza dell'array immagini (5) viene resettato a 0. Questo ci permette di tornare all'inizio dell'array quando abbiamo raggiunto la fine.

I commenti nel codice ci aiutano a capire cosa sta succedendo. Fermati un attimo e leggi i commenti per capire cosa stiamo facendo.

Adesso dovremmo riuscire a scorrere tra le immagini cliccando sui pulsanti "Precedente" e "Seguente".

Conclusione

Datti una bella pacca sulla spalla per l'ottimo lavoro fatto finora! 👏👏👏

Ti consiglio di spendere il giusto tempo per capire bene il codice che abbiamo scritto in entrambi i progetti. Questo ti aiuterà a consolidare le tue conoscenze e a capire meglio come abbiamo risolto i problemi che ci siamo trovati.

Il motivo per cui abbiamo deciso di creare questi due progetti è perche presentano alcuni problemi che si verificano spesso quando si sviluppa un sito web e quindi è importante esercitarsi a risolverli sin da subito! 😊

In questa lezione abbiamo abbiamo parlato per la prima volta della manipolazione del DOM e abbiamo visto come possiamo utilizzare JavaScript per modificare il contenuto e l'aspetto di una pagina web.

Se hai anche completato le lezioni precedenti del Corso completo Web Developer allora ora dovresti essere in grado di creare un sito web completo da zero!

Il prossimo step sarà quello di imparare dei concetti più avanzati di JavaScript come le Classi, il concetto di Error Handling, le funzioni asincrone ed altro ancora.

Infatti la prossima lezione si chiama proprio JavaScript Advanced e sarà l'ultima lezione prima di intraprendere il percorso del Backend! 😃

Ci vediamo nella lezione di JavaScript Advanced! 👋