Lezione 4

Lezione 4 – Manipolazione del DOM: Trasforma il Web nel Tuo Parco Giochi Personale 🎢✨

Benvenuto alla Lezione 4! Oggi impariamo a usare JavaScript per interagire con gli elementi HTML su una pagina. Immagina JavaScript come una bacchetta magica, e tu sei il mago che può aggiungere testo, pulsanti e persino far sparire le cose—niente pozioni magiche, solo un po’ di codice!

Prepariamo il Campo: Installazione di VS Code e Caddy

Per iniziare a lavorare come un vero sviluppatore, dobbiamo configurare il nostro spazio di lavoro. Installiamo VS Code come quartier generale del nostro codice e Caddy come server locale, così possiamo vedere i nostri aggiornamenti in tempo reale (sì, sarai il tuo piccolo admin di sistema).

Installazione di VS Code: Vai al mio post sull’installazione di VS Code.
Installazione di Caddy: Segui le istruzioni nel mio post sull’installazione di Caddy.

Ora che abbiamo tutto a posto, creiamo la cartella del nostro progetto e aggiungiamo i file magici che trasformeremo in una pagina web interattiva.

Creazione del Progetto e Configurazione dei File

Crea una cartella di progetto (per esempio, DOM_Project) in un luogo facile da raggiungere. Ecco, un altro passo verso il titolo di “Sviluppatore”!
```
mkdir DOM_Project
cd DOM_Project
```

Crea un file HTML. Dentro la cartella del progetto, crea un file chiamato index.html—sarà il nostro “tempio HTML” dove accadrà tutta la magia:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parco Giochi del DOM</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        #message-container { margin-top: 20px; }
    </style>
</head>
<body>
    <h1 id="main-heading">Ciao, DOM!</h1>
    <button id="add-message-btn">Aggiungi Messaggio</button>
    <div id="message-container"></div>
    <input type="text" id="task-input" placeholder="Inserisci un’attività" />
    <button id="add-task-btn">Aggiungi Attività</button>
    <ul id="task-list"></ul>

    <script src="script.js"></script>
</body>
</html>

Crea un file JavaScript. Nella stessa cartella, crea un file chiamato script.js dove scriveremo tutta la nostra magia JavaScript.

Ora che il progetto è impostato, è il momento di dargli vita!

Avvio del Server Locale con Caddy

Assicurati di trovarti nella cartella DOM_Project, e avvia Caddy per lanciare il progetto:
```
caddy file-server --listen :8080
```

Ora il tuo progetto è disponibile su http://localhost:8080. Senti il calore? È il tuo server locale che aspetta la magia del tuo JavaScript!

Aggiornare la Pagina: Quando F5 Non Basta

A volte F5 non è sufficiente quando lavori su un progetto, e il browser insiste a mostrarti una vecchia versione. Prova Ctrl + F5—questa combinazione speciale cancella la cache e ricarica la pagina, dandoti la versione più aggiornata di tutto.

Scriviamo JavaScript per Manipolare il DOM

Ora che abbiamo configurato il nostro HTML, iniziamo a trasformarlo in qualcosa di più dinamico. È tempo di JavaScript!

Passo 1: Selezione e Registrazione di un Elemento nella Console

Per iniziare a controllare gli elementi, dobbiamo prima trovarli. Cominciamo con l’intestazione.

In script.js, aggiungi il seguente codice per selezionare l’intestazione e registrarla nella console:

let heading = document.getElementById("main-heading");
console.log(heading); // Registriamo l’intestazione nella console per salutare il browser!

Apri la pagina nel tuo browser e apri la console degli sviluppatori (F12 o Ctrl + Shift + J)—dovresti vedere l’intestazione registrata lì. Complimenti, hai appena trovato il tuo primo elemento DOM!

Passo 2: Modificare il Contenuto di un Elemento

Ora cambiamo il testo dell’intestazione per darle un po’ più di personalità.

Aggiungi il seguente codice:

heading.textContent = "Benvenuto nel Parco Giochi del DOM!";

Aggiorna la pagina—l’intestazione dovrebbe dire qualcosa di nuovo. È come se l’intestazione ti dicesse: “Sì, sono sotto il tuo controllo!”

Passo 3: Aggiungere Nuovi Elementi alla Pagina

Aggiungiamo un nuovo paragrafo con un piccolo messaggio da JavaScript.

In script.js, aggiungi il codice per creare e aggiungere un nuovo elemento:

let newParagraph = document.createElement("p");
newParagraph.textContent = "Questo è un nuovo paragrafo aggiunto da JavaScript!";
document.body.appendChild(newParagraph);

Aggiorna la pagina e vedrai il nuovo paragrafo. È come lasciare un piccolo messaggio sul tuo sito, solo per te!

Passo 4: Aggiungere Stile agli Elementi

I veri maghi sanno come aggiungere un po’ di stile alle loro creazioni. Facciamo risaltare l’intestazione.

In script.js, aggiungi il seguente codice:

heading.style.color = "blue";
heading.style.fontSize = "3em";
heading.style.fontFamily = "Comic Sans MS";

Aggiorna la pagina—ora l’intestazione sembra pronta per una festa di fumetti!

Passo 5: Aggiungere Interattività con gli Eventi

Che mago sarebbe senza effetti interattivi? Aggiungiamo un pulsante che crea un messaggio quando viene cliccato.

Assicurati che in index.html ci sia un pulsante con id="add-message-btn".

In script.js, aggiungi questo codice:

let addButton = document.getElementById("add-message-btn");
addButton.addEventListener("click", function() {
    let message = document.createElement("p");
    message.textContent = "Ce l’hai fatta, Mago di JavaScript!";
    document.getElementById("message-container").appendChild(message);
});

Ora, ogni volta che clicchi sul pulsante, apparirà un nuovo messaggio. È come se lasciassi piccoli messaggi di congratulazioni per te stesso!

Cosa Succederà Dopo?

Fantastico lavoro! Ora sei ufficialmente un maestro della manipolazione del DOM. Nella prossima lezione aggiungeremo ancora più magia lavorando con eventi per rendere le pagine davvero interattive.

Ci vediamo in Lezione 5 – Magia degli Eventi: Rendi le Pagine Web Interattive!

Ora vai e trasforma il web nel tuo parco giochi! 🎠