Lezione 5

Lezione 5 – Magia degli Eventi: Rendiamo le Pagine Web Interattive 🎩✨

Benvenuto nella Lezione 5! Oggi faremo un po’ di magia con gli eventi di JavaScript. Pulsanti che rispondono, campi di testo che reagiscono, e forse, se sei fortunato, gli utenti smetteranno di chiedere: “Ma perché non funziona?!”

Gli eventi sono come il sale nelle ricette: senza di loro, le pagine web sono insipide e statiche. Ma con loro? Diventano vive, coinvolgenti, e, perché no, un po’ divertenti. Andiamo!

Creiamo il Nostro Progetto 🛠️

Per questa lezione, mettiamoci al lavoro con un nuovo progetto, completo di un file HTML, un po’ di JavaScript e il nostro fidato Caddy come server locale.

Crea una nuova cartella per la lezione (o usa la tua cartella DOM_Project):
```
mkdir Lezione5
cd Lezione5
```

Crea un file HTML chiamato index.html:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Magia degli Eventi</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .button { margin: 10px 0; padding: 10px; background: lightblue; border: none; cursor: pointer; }
        .button:hover { background: deepskyblue; }
        #output, #task-list { margin-top: 10px; }
        #task-list li { margin-bottom: 5px; }
    </style>
</head>
<body>
    <h1 id="main-heading">Benvenuto alla Magia degli Eventi! 🪄</h1>
    <button id="click-me-btn" class="button">Cliccami</button>
    <input type="text" id="text-input" placeholder="Scrivi qualcosa..." />
    <div id="output"></div>
    <input type="text" id="task-input" placeholder="Inserisci un’attività e premi Invio" />
    <ul id="task-list"></ul>

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

Crea un file JavaScript chiamato script.js:

// Selezione degli elementi
let button = document.getElementById("click-me-btn");
let textInput = document.getElementById("text-input");
let outputDiv = document.getElementById("output");
let taskInput = document.getElementById("task-input");
let taskList = document.getElementById("task-list");

// Evento per il clic del pulsante
button.addEventListener("click", function () {
    alert("Hai cliccato il pulsante! 🎉");
});

// Evento per l’input dinamico
textInput.addEventListener("input", function () {
    outputDiv.textContent = `Hai scritto: ${textInput.value}`;
});

// Lista di attività: aggiungi elementi premendo Invio
taskInput.addEventListener("keydown", function (event) {
    if (event.key === "Enter" && taskInput.value.trim() !== "") {
        let taskItem = document.createElement("li");
        taskItem.textContent = taskInput.value;
        taskList.appendChild(taskItem);
        taskInput.value = ""; // Svuota il campo
    }
});

Serve il Nostro Progetto con Caddy 🌐

Ora che i file sono pronti, usiamo Caddy per servire il nostro progetto localmente e vedere il risultato nel browser.

Vai nella tua cartella del progetto (Lezione5):
```
cd Lezione5
```
Avvia il server Caddy:
```
caddy file-server --listen :8080
```
Apri il browser e vai su http://localhost:8080. Il tuo progetto è ora vivo e vegeto!

Esploriamo gli Eventi 🎉

Ecco cosa succede nel nostro progetto:

Evento Click sul Pulsante

Quando clicchi sul pulsante “Cliccami”, compare un alert:

button.addEventListener("click", function () {
    alert("Hai cliccato il pulsante! 🎉");
});

Evento Input nel Campo di Testo

Quando scrivi nel campo di testo, il testo appare dinamicamente sotto di esso:

textInput.addEventListener("input", function () {
    outputDiv.textContent = `Hai scritto: ${textInput.value}`;
});

Aggiungere Attività Dinamicamente

Premendo Invio nel campo attività, aggiungi una nuova attività alla lista:

taskInput.addEventListener("keydown", function (event) {
    if (event.key === "Enter" && taskInput.value.trim() !== "") {
        let taskItem = document.createElement("li");
        taskItem.textContent = taskInput.value;
        taskList.appendChild(taskItem);
        taskInput.value = ""; // Svuota il campo
    }
});

Aggiorna con Ctrl + F5 🔄

A volte i cambiamenti non appaiono subito nel browser. La combinazione Ctrl + F5 ricarica la pagina ignorando la cache. Un trucco da mago per vedere sempre l’ultima versione del tuo lavoro!

Cosa Succederà Dopo?

Ottimo lavoro! Ora sei un maestro degli eventi JavaScript. Dalla gestione dei clic alle liste dinamiche, hai tutto ciò che serve per creare pagine interattive. Nella prossima lezione esploreremo la delegazione degli eventi, un modo efficiente per gestire eventi in modo dinamico.

Ci vediamo in Lezione 6 – Delegazione degli Eventi: Efficienza con Stile!

Ora vai e fai brillare le tue pagine web con la magia degli eventi! 🎠