rinomina esercizi js

javascript/08_DOM/esercizi/esercizi1/lettura.js

@@ -0,0 +1,19 @@
+/**
+ * ESERCIZIO 1: Selezione e Lettura
+ * 
+ * ISTRUZIONI:
+ * 1. Usa `document.querySelector` per selezionare l'h1 con id 'titolo-principale'.
+ * - Stampa in console il suo `textContent`.
+ * 
+ * 2. Usa `document.querySelector` per selezionare l'elemento con classe '.prezzo'.
+ * - Stampa in console il suo `textContent`.
+ * 
+ * 3. Usa `document.querySelector` per selezionare l'immagine 'img-prodotto'.
+ * - Stampa in console il valore del suo attributo `src` (puoi usare .src o .getAttribute('src')).
+ * - Stampa in console il valore del suo attributo `alt`.
+ * 
+ * 4. Usa `document.querySelectorAll` per trovare tutti i `div` nella pagina.
+ * - Stampa in console quanti div ci sono (usa la proprietà .length della lista risultante).
+ */
+
+// Scrivi qui sotto il tuo codice:

javascript/08_DOM/esercizi/esercizi1/modifica_stile.js

@@ -0,0 +1,20 @@
+/**
+ * ESERCIZIO 2: Modifica Stile e Classi
+ * 
+ * ISTRUZIONI:
+ * 1. Seleziona il div con id 'messaggio-sistema'.
+ * - Cambia il suo `style.backgroundColor` in '#ccffcc' (verde chiaro).
+ * - Cambia il suo `style.border` in '2px solid green'.
+ * - Cambia il suo `style.color` in 'green'.
+ * 
+ * 2. Seleziona il titolo h1 ('titolo-principale').
+ * - Cambia il suo `style.textAlign` in 'center'.
+ * - Cambia il suo `style.textTransform` in 'uppercase'.
+ * 
+ * 3. Seleziona il div con id 'status-magazzino'.
+ * - Al momento ha la classe 'out-of-stock' (scritta rossa barrata).
+ * - Usa `classList.remove('out-of-stock')` per togliere lo stile vecchio.
+ * - Usa `classList.add('in-stock')` per aggiungere lo stile nuovo (scritta verde).
+ */
+
+// Scrivi qui sotto il tuo codice:

javascript/08_DOM/esercizi/esercizi1/modifica_testo.js

@@ -0,0 +1,22 @@
+/**
+ * ESERCIZIO 3: Modifica Testo e Attributi
+ * 
+ * ISTRUZIONI:
+ * 1. Il messaggio di sistema dice "ERRORE DI SISTEMA...". 
+ * - Selezionalo e cambia il suo `textContent` in "Sistema Operativo: Tutto OK!".
+ * 
+ * 2. Il prodotto è sconosciuto.
+ * - Seleziona l'elemento con id 'nome-prodotto'.
+ * - Cambia il suo testo in "Smartphone Super 3000".
+ * 
+ * 3. Manca la descrizione.
+ * - Seleziona il paragrafo con classe '.descrizione' (usa querySelector).
+ * - Cambia il suo `innerHTML` inserendo: "Ultimo modello <b>disponibile ora</b> in offerta.".
+ * 
+ * 4. L'immagine è un placeholder.
+ * - Seleziona l'immagine.
+ * - Cambia il suo attributo `src` in 'https://placehold.co/300x150/0000FF/0000FF'.
+ * - Cambia il suo attributo `alt` in 'Foto Smartphone Blu'.
+ */
+
+// Scrivi qui sotto il tuo codice:

javascript/08_DOM/esercizi/esercizi2/base.js

@@ -0,0 +1,16 @@
+/**
+ * Esercizio Intermedio 1: Il Semaforo (Manipolazione Stili e Classi)
+ * 
+ * OBIETTIVO:
+ * Simulare l'accensione delle luci di un semaforo modificando il colore di sfondo.
+ * 
+ * ISTRUZIONI:
+ * 0. Controlla se nel file HTML è incluso questo script.
+ * 1. Seleziona i tre div delle luci (id: 'luce-rossa', 'luce-gialla', 'luce-verde').
+ * 2. Seleziona i due bottoni (id: 'btn-attiva-rosso', 'btn-attiva-verde').
+ * 3. Aggiungi un event listener al bottone "Attiva Rosso":
+ * - Deve cambiare il background della luce rossa da '#500' a '#f00' (o 'red').
+ * - Deve spegnere le altre luci (impostando il background a '#550' o '#050').
+ * 4. Fai lo stesso per il bottone "Attiva Verde" (luce passa da '#050' a '#0f0' o 'green').
+ */
+

javascript/08_DOM/esercizi/esercizi2/contatore.js

@@ -0,0 +1,18 @@
+/**
+ * Esercizio Intermedio 2: Contatore Click (Eventi e Testo)
+ * 
+ * OBIETTIVO:
+ * Creare un contatore che aumenta ogni volta che si preme un bottone.
+ * 
+ * ISTRUZIONI:
+ * 0. Controlla se nel file HTML è incluso questo script.
+ * 1. Seleziona lo span che contiene il numero (id: 'contatore-valore') e i bottoni.
+ * 2. Crea una variabile let `conteggio` inizializzata a 0.
+ * 3. Al click su 'btn-incrementa':
+ *   - Aumenta la variabile `conteggio` di 1.
+ *   - Aggiorna il testo dello span con il nuovo valore.
+ * 4. Al click su 'btn-reset':
+ *   - Riporta `conteggio` a 0.
+ *   - Aggiorna il testo dello span.
+ */
+

javascript/08_DOM/esercizi/esercizi2/debug.js

@@ -0,0 +1,22 @@
+/**
+ * Esercizio Intermedio 3: Debugging (Trova l'errore)
+ * 
+ * DESCRIZIONE:
+ * Il codice qui sotto dovrebbe colorare di blu TUTTI i paragrafi con classe 'testo-colorato' 
+ * quando si preme il bottone. Ma non funziona o genera errore.
+ * 
+ * TASK:
+ * 1. Apri il BROWSER esterno e leggi cosa mostra la console
+ *    Se provi a cliccare il bottone dovrebbe apparire un messaggio di errore.
+ * 2. Capisci perché questo codice non funziona.
+ *    Potrebbe essere un errore di selezione, di metodo, o di logica.
+ * 3. Correggi il codice.
+ */
+
+const bottone = document.getElementById('btn-colora-tutti');
+const paragrafi = document.querySelectorAll('.testo-colorato');
+
+bottone.addEventListener('click', () => {
+    paragrafi.style.color = 'blue'; 
+    console.log("Colorati!");
+});

javascript/08_DOM/esercizi/esercizio.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <title>Esercizi DOM</title>
+    <style>
+        body { font-family: sans-serif; padding: 20px; max-width: 800px; margin: 0 auto }
+        section { border: 1px solid #bbb; padding: 15px; margin-bottom: 30px; border-radius: 8px; background-color: #f9f9f9}
+        h2 { background: #eee; padding: 10px; margin-top: 0; }
+
+        /* Stili comuni agli esercizi della parte 1 */
+        .scheda-prodotto { border: 1px solid #ccc; padding: 15px; background: white; border-radius: 8px; max-width: 300px; margin-bottom: 20px; }
+        .prezzo { font-weight: bold; color: #333; }
+        .in-stock { color: green; }
+        .out-of-stock { color: red; text-decoration: line-through; }
+        .nascosto { display: none; }
+        #messaggio-sistema { padding: 10px; background: #ffcccc; border: 1px solid red; color: darkred; margin-bottom: 20px; }
+
+        /* Stili per esercizi della parte 2 */
+        .error { color: red; }
+        .success { color: green; }
+        
+        /* Stili per parte Extra */
+        #zona-extra ul { list-style-type: none; padding-left: 20px; display: flex; gap: 10px; }
+        #zona-extra ul > li { margin: 5px 0; border: 1px solid #ccc; padding: 10px; border-radius: 4px; background: #f0f0f0; }
+        .esercizio-box { min-height: 50px; border: 1px dashed #999; padding: 10px; margin: 10px 0;  max-width: 320px; }
+        #container-extra-box { display: flex; gap: 10px; flex-wrap: wrap; }
+        #zona-extra input { padding: 5px; font-size: 16px; border-radius: 4px; border: 2px solid #ccc; }
+    </style>
+</head>
+<body>
+    <h1>Pagina Esercizi</h1>
+    <p>Collega <strong>TUTTI</strong> gli script in fondo a questa pagina per risolvere gli esercizi.</p>
+
+    <!-- Sezione iniziale comune a tutti gli esercizi della parte 1 -->
+    <section id="es-init">
+        <h2 id="titolo-principale">Benvenuti nel Negozio</h2>
+        <div id="messaggio-sistema">ERRORE DI SISTEMA: Connessione persa.</div>
+
+        <div class="scheda-prodotto">
+            <img id="img-prodotto" src="" alt="Immagine Generica">
+            <h2 id="nome-prodotto">Prodotto Sconosciuto</h2>
+            <p class="descrizione">Descrizione non disponibile al momento.</p>
+            <p class="prezzo">€ 0.00</p>
+            <div id="status-magazzino" class="out-of-stock">Esaurito</div>
+        </div>
+    </section>
+
+    <!-- Gli esercizi della parte 2 iniziano qui, ognuno in una sezione separata -->
+    <section id="es-base">
+        <h2>Esercizio 1: Il Semaforo</h2>
+        <div id="semaforo" style="width: 50px; height: 150px; background: #333; padding: 10px; display: flex; flex-direction: column; gap: 10px;">
+            <div id="luce-rossa" style="width: 50px; height: 50px; background: #500; border-radius: 50%;"></div>
+            <div id="luce-gialla" style="width: 50px; height: 50px; background: #550; border-radius: 50%;"></div>
+            <div id="luce-verde" style="width: 50px; height: 50px; background: #050; border-radius: 50%;"></div>
+        </div>
+        <br>
+        <button id="btn-attiva-rosso">Attiva Rosso</button>
+        <button id="btn-attiva-verde">Attiva Verde</button>
+    </section>
+
+    <section id="es-contatore">
+        <h2>Esercizio 2: Contatore Click</h2>
+        <p>Numero di click: <span id="contatore-valore">0</span></p>
+        <button id="btn-incrementa">Cliccami (+)</button>
+        <button id="btn-reset">Reset</button>
+    </section>
+
+    <section id="es-debug">
+        <h2>Esercizio 3: Debug Colori</h2>
+        <p class="testo-colorato">Paragrafo 1</p>
+        <p class="testo-colorato">Paragrafo 2</p>
+        <p class="testo-colorato">Paragrafo 3</p>
+        <button id="btn-colora-tutti">Colora Tutti di Blu</button>
+    </section>
+
+    <!-- Sezione extra per esercizi opzionali -->
+    <section id="zona-extra">
+        <h2>Zona Extra</h2>
+        <div id="container-extra-debug" class="esercizio-box"></div>
+        <div id="container-extra-box" class="esercizio-box"></div>
+        <div id="container-extra-validatore" class="esercizio-box"></div>
+    </section>
+
+
+    <!-- Script collegati della parte 1 -->
+    <script src="esercizi1/lettura.js"></script>
+    <script src="esercizi1/modifica_stile.js"></script>
+    <script src="esercizi1/modifica_testo.js"></script>
+    <!-- Collega qui i tuoi script per la parte 2 & extra -->
+    <script src="extra/validatore_input.js"></script>
+</body>
+</html>

javascript/08_DOM/esercizi/extra/debug_avanzato.js

@@ -0,0 +1,32 @@
+/**
+ * Esercizio Extra: Debug Avanzato (Problemi di Logica DOM)
+ * 
+ * DESCRIZIONE:
+ * Vogliamo spostare un elemento da una lista A a una lista B al click.
+ * Il codice sotto crea le liste dinamicamente, ma c'è un problema logico o di selezione.
+ * 
+ * TASK:
+ * 1. Analizza il codice, includilo nel file HTML, ed eseguilo.
+ * 2. Il problema: Il codice tenta di aggiungere un event listener a un elemento che forse non esiste ancora o sbaglia il riferimento.
+ * 3. Correggi il codice affinché cliccando su 'item-1', questo si sposti nella Lista B.
+ */
+
+// Setup del DOM per l'esercizio
+// NON TOCCARE QUESTA PARTE, SERVE PER L'ESERCIZIO
+const container = document.querySelector('#container-extra-debug');
+container.innerHTML = `
+    <p>Lista A:</p>
+    <ul id="lista-a"><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul>
+    <p>Lista B:</p>
+    <ul id="lista-b"><li>Item</li></ul>
+`;
+
+// CODICE BUGGATO:
+// Vogliamo che cliccando su un item della Lista A, questo venga spostato nella Lista B.
+// MA il codice attuale non funziona come previsto.
+const tuttiItem = document.querySelectorAll('#lista-a > li');
+const listaB = document.querySelector('#lista-b');
+
+tuttiItem.forEach(item => {
+    listaB.innerHTML = item;
+});

javascript/08_DOM/esercizi/extra/generatore_box.js

@@ -0,0 +1,18 @@
+/**
+ * Esercizio Extra: Generatore di Box (Creazione complessa)
+ * 
+ * OBIETTIVO:
+ * Creare una griglia di quadrati colorati generati dinamicamente.
+ * 
+ * ISTRUZIONI:
+ * 1. Seleziona il div 'container-extra-box' nella pagina esercizi.html.
+ * 2. Crea un array di colori: const colori = ['red', 'blue', 'green', 'orange', 'purple'];
+ * 3. Usa un ciclo `for` che va da 0 a 4 (o lunghezza array):
+ *    Per ogni iterazione:
+ *   - Crea un nuovo `div` e salvalo in una variabile `box`.
+ *   - Assegnagli una larghezza e altezza di 100px (style)
+ *   - Assegnagli il colore di sfondo prendendolo dall'array in base all'indice.
+ *   - Aggiungi un event listener 'click' che rimuove il div quando viene cliccato. (box.remove())
+ *   - Aggiungi il div al 'container-extra-box'.
+ */
+

javascript/08_DOM/esercizi/extra/validatore_input.js

@@ -0,0 +1,18 @@
+/**
+ * Esercizio Extra: Validatore Input (Logica e Stili)
+ * 
+ * OBIETTIVO:
+ * Creare un campo input che cambia colore se il testo è troppo corto.
+ * 
+ * ISTRUZIONI (Usa 'container-extra-validatore' per generare l'HTML necessario via JS o scrivilo a mano):
+ * 1. Crea/Inserisci un input type="text" e un paragrafo per il messaggio di errore.
+ *    Inseriscili dentro il div con id 'container-extra-validatore' (puoi farlo via JS o scrivendoli direttamente nell'HTML).
+ * 2. Ascolta l'evento 'input' (mentre l'utente scrive).
+ * 3. Se la lunghezza del valore (`value.length`) è inferiore a 5 caratteri:
+ *   - Bordo dell'input: Rosso.
+ *   - Messaggio: "Troppo corto!".
+ * 4. Se la lunghezza è 5 o più:
+ *   - Bordo dell'input: Verde.
+ *   - Messaggio: "OK!".
+ */
+

javascript/08_DOM/tutorial.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <title>Tutorial DOM Parte 1</title>
+    <style>
+        body { font-family: sans-serif; padding: 20px; }
+        .tutorial { border: 2px solid #000; padding: 15px; margin-bottom: 30px; }
+        .box { padding: 20px; border: 1px solid #ccc; margin-top: 10px; }
+        .evidenziato { background-color: yellow; font-weight: bold; }
+        .nascosto { display: none; }
+        ul { list-style-type: none; padding: 0; }
+        li { background: #f0f0f0; margin: 5px 0; padding: 10px; border-bottom: 1px solid #ddd; cursor: pointer; }
+        li:hover { background: #e0e0e0; }
+        #area-messaggi { margin-top: 20px; padding: 10px; border: 1px dashed blue; min-height: 50px; }
+        input { padding: 5px; width: 200px; display: block; margin-bottom: 10px; }
+    </style>
+</head>
+<body>
+    <div class="tutorial">
+        <h1 id="titolo-principale">Tutorial DOM</h1>
+        
+        <div id="contenitore-info">
+            <p class="paragrafo-testo">Questo è il primo paragrafo.</p>
+            <p class="paragrafo-testo">Questo è il secondo paragrafo.</p>
+            <p id="paragrafo-unico">Questo paragrafo ha un ID speciale.</p>
+        </div>
+
+        <input type="text" id="input-nome" placeholder="Inserisci il tuo nome">
+
+        <a id="link-google" href="#">Link vuoto</a>
+
+        <div id="box-stile" class="box">Modifica il mio stile!</div>
+    </div>
+    <div class="tutorial">
+        <h1>Tutorial DOM<br>Creazione ed Eventi</h1>
+
+        <div id="controlli">
+            <button id="btn-aggiungi">Aggiungi Elemento</button>
+            <button id="btn-rimuovi-tutti">Rimuovi Tutti</button>
+        </div>
+
+        <h3>Lista Dinamica:</h3>
+        <ul id="lista-dinamica">
+            <li>Elemento Esistente 1</li>
+            <li>Elemento Esistente 2</li>
+        </ul>
+
+        <h3>Area Input:</h3>
+        <input type="text" id="input-utente" placeholder="Scrivi qualcosa...">
+        <p>Hai scritto: <span id="output-testo"></span></p>
+    </div>
+
+    <script src="tutorial_interattivo_parte1.js"></script>
+    <script src="tutorial_interattivo_parte2.js"></script>
+</body>
+</html>

javascript/08_DOM/tutorial_interattivo_parte1.js

@@ -0,0 +1,73 @@
+// TUTORIAL INTERATTIVO: DOM Parte 1 - Selezione e Manipolazione
+// Apri il file 'tutorial_parte1.html' nel browser e guarda la CONSOLE (F12).
+
+/**
+ * ===========================================
+ * === 1. Selezionare tramite ID ===
+ * Il metodo `querySelector` seleziona un singolo elemento.
+ * Possiamo usare un selettore CSS per identificare l'elemento.
+ */
+// TODO: Seleziona l'elemento h1 con id 'titolo-principale' e salvalo in una variabile.
+// TODO: Stampa la variabile in console.
+// TODO: Seleziona l'elemento p e salvalo in una variabile.
+// TODO: Stampa la variabile in console e verifica q chi appartiene il paragrafo.
+
+
+/**
+ * ===========================================
+ * === 2. QuerySelectorAll ===
+ * `querySelector` trova il PRIMO elemento che corrisponde al selettore CSS.
+ * `querySelectorAll` trova TUTTI gli elementi e restituisce una lista.
+ */
+// TODO: Usa `querySelectorAll` per selezionare tutti gli elementi con classe 'paragrafo-testo'.
+// TODO: Usa `querySelectorAll` per selezionare tutti gli elementi p nella pagina.
+// TODO: Stampa entrambi i risultati in console.
+
+
+/**
+ * ===========================================
+ * === 3. Modificare Testo e HTML ===
+ * `textContent` modifica solo il testo visibile.
+ * `value` modifica il valore di input (es. campi di testo).
+ * `innerHTML` può inserire tag HTML all'interno dell'elemento.
+ */
+// TODO: Cambia il testo dell'elemento 'titolo-principale' in "Workshop JavaScript".
+// TODO: Cambia il valore dell'input con id 'input-nome' a "Mario Rossi".
+// TODO: Cambia il testo del paragrafo con id 'paragrafo-unico' in "<b>Testo in grassetto</b>".
+// TODO: Usa `innerHTML` al posto di `textContent` per inserire il testo in grassetto.
+
+
+/**
+ * ===========================================
+ * === 4. Leggere e Modificare Attributi ===
+ * `getAttribute` legge un valore (es. href, src, id).
+ * `setAttribute` imposta un nuovo valore.
+ * Un attributo si può anche accedere direttamente come proprietà dell'elemento.
+ */
+// TODO: Seleziona il link con id 'link-google'.
+// TODO: Imposta il suo attributo 'href' a 'https://www.google.com'.
+// TODO: Cambia il testo del link in "Vai a Google".
+
+
+/**
+ * ===========================================
+ * === 5. Modificare lo Stile (CSS) ===
+ * Puoi accedere alle proprietà CSS tramite l'oggetto `.style`.
+ * Le proprietà usano il camelCase (es. background-color diventa backgroundColor).
+ */
+// TODO: Seleziona il div con id 'box-stile'.
+// TODO: Cambia il suo `style.color` in 'red'.
+// TODO: Cambia il suo `style.border` in '2px solid red'.
+
+
+/**
+ * ===========================================
+ * === 6. Gestire le Classi CSS ===
+ * `classList` permette di aggiungere, rimuovere o alternare classi CSS.
+ * Metodi utili: .add(), .remove(), .toggle().
+ */
+// TODO: Seleziona nuovamente il div 'box-stile'.
+// TODO: Aggiungi la classe 'evidenziato' (definita nel CSS) usando `classList.add`.
+// TODO: Rimuovi la classe 'box' usando `classList.remove`.
+// TODO: Alterna la classe 'box' o la classe 'evidenziato' usando `classList.toggle`.
+

javascript/08_DOM/tutorial_interattivo_parte2.js

@@ -0,0 +1,60 @@
+// TUTORIAL INTERATTIVO: DOM Parte 2 - Creazione, Rimozione ed Eventi
+// Apri il file 'tutorial_parte2.html'.
+
+/**
+ * ===========================================
+ * === 1. Creazione di Elementi ===
+ * `document.createElement(tagName)` crea un nuovo elemento in memoria (non ancora visibile).
+ */
+// TODO: Crea un nuovo elemento 'li' e salvalo in una variabile chiamata `nuovoElemento`.
+// TODO: Imposta il suo `textContent` a "Sono un nuovo elemento creato via JS".
+
+
+/**
+ * ===========================================
+ * === 2. Aggiunta di Elementi al DOM ===
+ * `genitore.appendChild(figlio)` o `genitore.append(figlio)` aggiunge l'elemento alla pagina.
+ */
+// TODO: Seleziona la lista `ul` con id 'lista-dinamica'.
+// TODO: Aggiungi `nuovoElemento` alla lista usando `appendChild`.
+
+
+/**
+ * ===========================================
+ * === 3. Rimozione di Elementi ===
+ * `elemento.remove()` elimina l'elemento dal DOM.
+ */
+// TODO: Seleziona il PRIMO elemento `li` della lista (puoi usare querySelector che prende il primo).
+// TODO: Rimuovilo usando il metodo `.remove()`.
+
+
+/**
+ * ===========================================
+ * === 4. AddEventListener (Click) ===
+ * Permette di eseguire una funzione quando avviene un evento.
+ */
+// TODO: Seleziona il bottone con id 'btn-aggiungi'.
+// TODO: Aggiungi un ascoltatore per l'evento 'click'.
+// TODO: Nella funzione, mostra un `alert("Hai cliccato il bottone!")`.
+
+
+/**
+ * ===========================================
+ * === 5. Eventi Comuni (Input) ===
+ * L'evento 'input' scatta ogni volta che si digita in un campo di testo.
+ */
+// TODO: Seleziona l'input con id 'input-utente' e lo span con id 'output-testo'.
+// TODO: Aggiungi un listener 'input' al campo di testo.
+// TODO: Nella funzione, copia il valore dell'input (`input.value`) dentro il `textContent` dello span.
+
+
+/**
+ * ===========================================
+ * === 6. Event Object (e.target) ===
+ * La funzione dell'evento riceve un argomento (spesso chiamato `e` o `event`) che contiene dettagli.
+ * `e.target` è l'elemento specifico che ha scatenato l'evento.
+ */
+// TODO: Seleziona l'intera lista `ul` ('lista-dinamica').
+// TODO: Aggiungi un listener 'click' alla LISTA INTERA (non ai singoli li).
+// TODO: Nella funzione, usa `e.target.style.color = 'red'`.
+