Berack/esercizi-web
1
0
Fork 0
Code Issues 1 Pull Requests Activity

rinomina esercizi js

Browse Source
This commit is contained in:
Giacomo Bertolazzi
2026-02-12 18:36:35 +01:00
parent f0b6b85b36
commit 60878cf770
150 changed files with 16 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
javascript/08_DOM+/00_ripasso/index.html Normal file
View File

@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ripasso DOM</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="../index.html" style="position: absolute; top: 20px; left: 20px; text-decoration: none; color: #555; font-weight: bold; font-size: 14px;">← Dashboard</a>
<div class="container">
<h1>🎓 Ripasso DOM - Step by Step</h1>
<p class="subtitle">Selettori, Manipolazione Testo, Eventi</p>
<!-- ============ STEP 1: SELETTORI ============ -->
<div class="step">
<h2>Step 1️⃣ - Selettori CSS</h2>
<p class="step-description">Impara a selezionare elementi dal DOM usando querySelector</p>
<div class="exercise">
<h3>Esercizio 1.1: Seleziona per ID</h3>
<p id="messaggio-id">Questo elemento ha un ID</p>
<p class="risultato" id="risultato-1-1">Aspettando...</p>
</div>
<div class="exercise">
<h3>Esercizio 1.2: Seleziona per Classe</h3>
<p class="testo-blu">Sono blu</p>
<p class="testo-blu">Anche io sono blu</p>
<p class="risultato" id="risultato-1-2">Aspettando...</p>
</div>
<div class="exercise">
<h3>Esercizio 1.3: Seleziona per Tag</h3>
<span>Sono uno span</span>
<span>Sono un altro span</span>
<p class="risultato" id="risultato-1-3">Aspettando...</p>
</div>
</div>
<!-- ============ STEP 2: MANIPOLAZIONE TESTO ============ -->
<div class="step">
<h2>Step 2️⃣ - Manipolazione Testo</h2>
<p class="step-description">Cambia il contenuto dei tag usando textContent</p>
<div class="exercise">
<h3>Esercizio 2.1: Cambia Testo in un Paragrafo</h3>
<p id="paragrafo-da-cambiare">Clicca il bottone qui sotto per cambiarmi!</p>
<button id="btn-cambiaP">Cambia Testo</button>
<p class="risultato" id="risultato-2-1">Aspettando...</p>
</div>
<div class="exercise">
<h3>Esercizio 2.2: Scrivi nel DOM</h3>
<div id="area-scrittura" class="area-output"></div>
<button id="btn-scrivi">Scrivi nel DOM</button>
<p class="risultato" id="risultato-2-2">Aspettando...</p>
</div>
<div class="exercise">
<h3>Esercizio 2.3: Testo Dinamico</h3>
<input type="text" id="input-nome" placeholder="Scrivi il tuo nome">
<button id="btn-saluta">Saluta</button>
<p id="area-saluto" class="area-output"></p>
<p class="risultato" id="risultato-2-3">Aspettando...</p>
</div>
</div>
<!-- ============ STEP 3: EVENTI ============ -->
<div class="step">
<h2>Step 3️⃣ - Eventi</h2>
<p class="step-description">Rispondi ai click dell'utente e agli input</p>
<div class="exercise">
<h3>Esercizio 3.1: Click Semplice</h3>
<button id="btn-click">Cliccami!</button>
<p id="contatore-click" class="area-output">Click: 0</p>
<p class="risultato" id="risultato-3-1">Aspettando...</p>
</div>
<div class="exercise">
<h3>Esercizio 3.2: Input Event</h3>
<p>Scrivi qualcosa e vedi il risultato in tempo reale:</p>
<input type="text" id="input-tempo-reale" placeholder="Digita qui...">
<p id="echo" class="area-output">Qui apparirà quello che scrivi...</p>
<p class="risultato" id="risultato-3-2">Aspettando...</p>
</div>
<div class="exercise">
<h3>Esercizio 3.3: Click su Elemento Specifico</h3>
<div class="box-click" id="box1">Box 1</div>
<div class="box-click" id="box2">Box 2</div>
<div class="box-click" id="box3">Box 3</div>
<p id="log-click" class="area-output">Log click:</p>
<p class="risultato" id="risultato-3-3">Aspettando...</p>
</div>
<div class="exercise">
<h3>Esercizio 3.4: Toggle Classe CSS (Bonus)</h3>
<p id="elemento-toggle" class="elemento-normale">Clicca su di me per cambiarmi</p>
<p class="risultato" id="risultato-3-4">Aspettando...</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

263
javascript/08_DOM+/00_ripasso/script.js Normal file
View File

@@ -0,0 +1,263 @@
/**
* ============================================================
* RIPASSO DOM - STEP BY STEP
* ============================================================
* Questo file contiene esercizi di base sul DOM.
* Ogni esercizio ha una soluzione che modifica l'HTML
* e mostra il risultato visibile immediatamente.
*/
// ============ STEP 1: SELETTORI ============
/**
* ESERCIZIO 1.1: Selettori per ID
* Passi:
* 1. Seleziona l'elemento con id="messaggio-id" usando document.querySelector('#messaggio-id')
* 2. Scrivi il risultato in console per verificare
* 3. Aggiorna il paragrafo con id="risultato-1-1" scrivendo "✅ Elemento selezionato: " + il testo dell'elemento
*/
function esercizio_1_1() {
const elemento = document.querySelector('');
if (elemento) {
const risultato = document.querySelector('#risultato-1-1');
risultato.textContent = '✅ Elemento selezionato: ' + elemento.textContent;
}
}
/**
* ESERCIZIO 1.2: Selettori per Classe
* Passi:
* 1. Seleziona il PRIMO elemento con classe "testo-blu" usando document.querySelector
*/
function esercizio_1_2() {
const elemento = document.querySelector('');
if (elemento) {
const risultato = document.querySelector('#risultato-1-2');
risultato.textContent = '✅ Prima classe trovata: ' + elemento.textContent;
}
}
/**
* ESERCIZIO 1.3: Selettori per Tag
* Passi:
* 1. Seleziona il PRIMO elemento <span> usando document.querySelector
*/
function esercizio_1_3() {
const elemento = document.querySelector('');
if (elemento) {
const risultato = document.querySelector('#risultato-1-3');
risultato.textContent = '✅ Span trovato: ' + elemento.textContent;
}
}
// Eseguire gli esercizi 1.x
esercizio_1_1();
esercizio_1_2();
esercizio_1_3();
// ============ STEP 2: MANIPOLAZIONE TESTO ============
/**
* ESERCIZIO 2.1: Cambia il testo in un paragrafo
* Passi:
* 1. Seleziona il bottone con id="btn-cambiaP"
* 2. Seleziona il paragrafo con id="paragrafo-da-cambiare"
* 3. Aggiungi un event listener al bottone che, al click:
* - Cambia il textContent del paragrafo a "Ho cambiato! ✨"
*/
function esercizio_2_1() {
const btn = document.querySelector('');
const paragrafo = document.querySelector('');
if (btn && paragrafo) {
btn.addEventListener('click', () => {
paragrafo.textContent
});
const risultato = document.querySelector('#risultato-2-1');
risultato.textContent = "✅ Testo cambato"
}
}
/**
* ESERCIZIO 2.2: Scrivi nel DOM
* Passi:
* 1. Seleziona il bottone con id="btn-scrivi"
* 2. Seleziona il div con id="area-scrittura"
* 3. Aggiungi un event listener che, al click:
* - Aggiungi un nuovo <p> con il testo "Riga aggiunta al DOM!"
* - Usa append() per aggiungere il paragrafo al div
*/
function esercizio_2_2() {
const btn = document.querySelector('');
const area = document.querySelector('');
if (btn && area) {
btn.addEventListener('click', () => {
const nuovoParagrafo = document.createElement('');
nuovoParagrafo.textContent
});
const risultato = document.querySelector('#risultato-2-2');
risultato.textContent = "✅ Elemento aggiunto"
}
}
/**
* ESERCIZIO 2.3: Testo Dinamico da Input
* Passi:
* 1. Seleziona l'input con id="input-nome"
* 2. Seleziona il bottone con id="btn-saluta"
* 3. Seleziona il div con id="area-saluto"
* 4. Aggiungi un event listener al bottone che:
* - Leggi il valore dell'input (input.value)
* - Scrivi nel area-saluto: "Ciao [NOME]! 👋"
*/
function esercizio_2_3() {
const input = document.querySelector('');
const btn = document.querySelector('');
const area = document.querySelector('');
if (input && btn && area) {
btn.addEventListener('click', () => {
const nome = '';
area.textContent
});
const risultato = document.querySelector('#risultato-2-3');
risultato.textContent = "✅ Saluto inviato"
}
}
// Eseguire gli esercizi 2.x
esercizio_2_1();
esercizio_2_2();
esercizio_2_3();
// ============ STEP 3: EVENTI ============
/**
* ESERCIZIO 3.1: Click Semplice - Contatore
* Passi:
* 1. Seleziona il bottone con id="btn-click"
* 2. Seleziona l'elemento con id="contatore-click"
* 3. Aggiungi un event listener che, al click:
* - Incrementa count (count++)
* - Aggiorna il testo mostrando "Click: " + count
*/
let count = 0; // NOTA: Variabile globale
function esercizio_3_1() {
const btn = document.querySelector('');
const contatore = document.querySelector('');
if (btn && contatore) {
btn.addEventListener('click', () => {
});
const risultato = document.querySelector('#risultato-3-1');
risultato.textContent = "✅ Contatore attivo";
}
}
/**
* ESERCIZIO 3.2: Input Event - Echo Tempo Reale
* Passi:
* 1. Seleziona l'input con id="input-tempo-reale"
* 2. Seleziona il paragrafo con id="echo"
* 3. Aggiungi un event listener su 'input' (NON click!) che:
* - Leggi il valore dell'input (event.target.value o input.value)
* - Scrivi nel echo lo stesso testo in tempo reale
* - Se input vuoto, mostra "Scrivi qualcosa..."
*
* Nota: 'input' è l'evento che si scatta mentre l'utente digita
* 'click' è l'evento che si scatta quando l'utente clicca
* 'change' è l'evento che si scatta quando l'utente finisce di modificare
*/
function esercizio_3_2() {
const input = document.querySelector('');
const echo = document.querySelector('');
if (input && echo) {
input.addEventListener('input', (event) => {
});
const risultato = document.querySelector('#risultato-3-2');
risultato.textContent = "✅ Echo attivo";
}
}
/**
* ESERCIZIO 3.3: Click su Elementi Specifici
* Passi:
* 1. Seleziona tutti gli elementi con classe "box-click" usando querySelectorAll
* 2. Seleziona il paragrafo con id="log-click"
* 3. Per ogni box, aggiungi un event listener al click che:
* - Leggi l'id del box (event.target.id)
* - Crea un nuovo elemento <p>
* - Imposta il testo del paragrafo a "[id del box] cliccato"
* - Aggiungi il paragrafo al log usando append()
*
* Nota: Devi usare un loop (for o forEach) per aggiungere il listener a tutti i box
*/
function esercizio_3_3() {
const boxes = document.querySelectorAll('');
const log = document.querySelector('');
if (boxes.length > 0) {
boxes.forEach((box) => {
box.addEventListener('click', (event) => {
});
});
const risultato = document.querySelector('#risultato-3-3');
risultato.textContent = "✅ Log attivo";
}
}
/**
* ESERCIZIO 3.4 (BONUS): Toggle Classe CSS
* Passi:
* 1. Seleziona l'elemento con id="elemento-toggle"
* 2. Aggiungi un event listener al click che:
* - Usa classList.toggle('elemento-attivo') per aggiungere/rimuovere la classe
*
* Nota: Assicurati che in style.css esista una classe .elemento-attivo
*/
function esercizio_3_4() {
const elemento = document.querySelector('');
if (elemento) {
elemento.addEventListener('click', () => {
});
const risultato = document.querySelector('#risultato-3-4');
risultato.textContent = "✅ Toggle attivo";
}
}
// Eseguire gli esercizi 3.x
esercizio_3_1();
esercizio_3_2();
esercizio_3_3();
esercizio_3_4();

232
javascript/08_DOM+/00_ripasso/style.css Normal file
View File

@@ -0,0 +1,232 @@
/* ============================================================
RIPASSO DOM - STILI
============================================================ */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Stesso font dashboard */
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* Stesso sfondo dashboard */
min-height: 100vh;
margin: 0;
padding: 20px;
color: #2c3e50;
}
.container {
background: white;
width: 100%;
max-width: 650px;
margin: 0 auto;
padding: 30px;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #34495e;
margin: 0 0 10px 0;
font-size: 2rem;
}
.subtitle {
text-align: center;
color: #7f8c8d;
font-size: 1rem;
margin-bottom: 30px;
}
/* ============ STEP ============ */
.step {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #ddd;
}
.step:last-child {
border-bottom: none;
}
.step h2 {
color: #2980b9;
margin-top: 0;
margin-bottom: 5px;
font-size: 1.5rem;
}
.step-description {
color: #7f8c8d;
margin-bottom: 15px;
font-size: 0.95rem;
margin-top: 0;
}
/* ============ EXERCISE ============ */
.exercise {
background: white;
margin-bottom: 15px;
padding: 15px;
border-bottom: 1px solid #eee;
border-radius: 6px;
transition: box-shadow 0.2s ease;
}
.exercise:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.exercise:last-child {
border-bottom: none;
}
.exercise h3 {
color: #2c3e50;
margin: 15px 0 10px 0;
font-size: 1rem;
}
.exercise p {
margin: 5px 0;
font-size: 0.9rem;
}
.testo-blu {
color: #3498db;
font-weight: 500;
}
/* ============ INPUT & BUTTON ============ */
input[type="text"],
input[type="number"],
textarea {
width: 100%;
padding: 8px;
margin: 8px 0;
border: 1px solid #bdc3c7;
border-radius: 5px;
font-size: 0.95rem;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
box-sizing: border-box;
}
input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.2);
}
button {
background: #3498db;
color: white;
border: none;
padding: 10px 20px;
margin: 8px 5px 8px 0;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
transition: all 0.2s ease;
font-size: 0.9rem;
box-shadow: 0 2px 6px rgba(52, 152, 219, 0.2);
}
button:hover {
background: #2980b9;
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
transform: translateY(-1px);
}
button:active {
border-radius: 5px;
color: #2c3e50;
white-space: pre-wrap;
word-break: break-word;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
}
/* ============ RISULTATO & AREA OUTPUT ============ */
.risultato {
background: #f8fafb;
border: 1px solid #d5d8dc;
padding: 8px;
border-radius: 5px;
margin-top: 8px;
color: #34495e;
font-size: 0.85rem;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
}
.area-output {
background: #f8fafb;
border: 1px solid #d5d8dc;
padding: 10px;
border-radius: 5px;
margin-top: 8px;
color: #34495e;
font-size: 0.9rem;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
min-height: 20px;
word-wrap: break-word;
white-space: pre-wrap;
}
/* ============ BOX CLICK ============ */
.box-click {
display: inline-block;
width: 90px;
height: 90px;
background: #f0f3f4;
color: #2c3e50;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
cursor: pointer;
margin: 5px;
font-weight: bold;
font-size: 0.9rem;
border: 1px solid #d5d8dc;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.box-click:hover {
background: #e8ecef;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.box-click:active {
transform: translateY(0);
}
/* ============ ELEMENTO TOGGLE ============ */
.elemento-normale {
padding: 15px;
border: 2px solid #3498db;
border-radius: 8px;
background: white;
cursor: pointer;
transition: all 0.3s ease;
color: #2c3e50;
}
.elemento-normale:hover {
background: #ecf0f1;
box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
}
.elemento-attivo {
background: #3498db;
color: white;
border-color: #2980b9;
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}