akkaz / scuola
3G · 16 ottobre 2026 · In gruppi di 2–3

Dal clic alla risposta.

Ripara un collegamento, fai vivere un contatore e aggiungi un vero pulsante Azzera. Poi porta l’interazione nel tuo sito.

Cominciamo da qui ↓

Un PC, un progetto, 2–3 persone

Create insieme il pulsante per Officina aperta.

Prima di scrivere, uno dice cosa pensa che succederà. Dopo ogni missione riuscita, cambiate chi usa il PC. Alla fine un altro gruppo prova i pulsanti.

Il risultato del gruppo

Uno script.js del gruppo: una vostra frase, contatore e Azzera. Deve funzionare dopo 1 clic, 2 clic, Azzera e un altro clic.

Prima di chiudere, ognuno spiega un pezzo diverso del lavoro. Chi ha già finito aiuta con domande e indizi, lasciando usare il mouse al compagno.

Scegliete chi è al posto A, B e C. Non servono nomi.

    1

    Prevedi che cosa cambia

    5 minuti

    Nel tuo sito hai già HTML, CSS e un pulsante di saluto. Oggi passi dal riconoscere il codice al cambiarne il comportamento: un clic cambia il testo, una variabile conta, un secondo pulsante azzera.

    Il progetto di prova è un evento inventato, «Officina aperta»: un piccolo ponte verso il sito di un evento sul territorio. Qui non raccogliamo prenotazioni vere.

    Che cosa scatena il codice dentro il gestore del clic?

    2

    Tre pezzi da riconoscere

    5 minuti

    document.querySelector("#partecipa")
    Cerca il pulsante con quell'id nell'HTML. Il nome deve coincidere, lettera per lettera.
    addEventListener("click", function () { … })
    Esegue il blocco quando premi il pulsante.
    messaggio.textContent = "…"
    Cambia il testo di un elemento della pagina, senza riscrivere l'HTML del file.

    let ti serve per un valore che cambia, come un contatore. L'azzeramento iniziale deve stare fuori dal gestore del clic: altrimenti riparte a ogni pressione.

    3

    Fai reagire la pagina

    30 minuti

    Lavorate su una missione alla volta. Dopo ogni missione scambiate chi usa il PC: prima di scrivere, spiegatevi la modifica. L'HTML è già pronto: modifica JavaScript. Premi «Esegui» dopo ogni modifica; poi prova anche tu i pulsanti nell'anteprima.

    1. Ripara il collegamento. Il codice cerca un id diverso dall'HTML. Trova e correggi l'errore: il primo clic deve cambiare il messaggio.
    2. Conta davvero. Il contatore si azzera a ogni clic. Sposta l'inizializzazione: dopo due clic devi vedere 2.
    3. Scrivi il tuo messaggio. Cambia il testo in una frase utile per l'evento; conserva il numero del contatore nel messaggio.
    4. Aggiungi Azzera. Collega il secondo pulsante: deve rimettere contatore e messaggio allo stato iniziale.
    Leggi l'HTML che stai collegando
    L'HTML del banco prova resta uguale. Dopo trasferirai l'interazione al tuo sito.
    Esegui riparte da zero. Collauda apre una copia separata e prova 1 clic, 2 clic, azzera, nuovo clic. Le tue prove manuali restano nella pagina visibile.
      Aiuto 1 · Un indizio
      Confronta l’id nel querySelector con quello del button nell’HTML. Poi cerca dove il contatore viene messo a zero.
      Aiuto 2 · Un esempio da adattare
      Prima del gestore: let persone = 0;. Dentro il gestore: persone = persone + 1;. Per Azzera cerca #azzera, aggiungi il suo listener e dentro rimetti il valore a 0 e il messaggio iniziale.
      Officina aperta · anteprima del tuo codice
      Questa è una simulazione: clic e numero non sono vere iscrizioni. L'anteprima è isolata dal resto del laboratorio.
      La sequenza di prova
      1. All'avvio: messaggio iniziale.
      2. Un clic: numero 1.
      3. Secondo clic: numero 2.
      4. Azzera: messaggio iniziale.
      5. Nuovo clic: numero 1.
      Se non cambia niente, leggi il messaggio della console e verifica prima i nomi.
      4
      Portalo nel tuo sito
      15–40 minuti · estensione
      Prima fate provare il banco di Officina aperta a un altro gruppo: chiedete due clic, Azzera e un nuovo clic. Se avanza tempo, scegliete il sito di un componente del gruppo. Fate prima una copia della cartella del sito. Usa il tuo sito personale già iniziato: non sostituirlo con un nuovo template. Cambia il pulsante di saluto in «Mostra il mio prossimo obiettivo» e fai comparire un testo utile. Se non hai i file, usa Blueprint per ripartire.
      1. Trova il pulsante e il paragrafo nel tuo HTML; annota gli id.
      2. Nel tuo script.js cerca quegli stessi id.
      3. Collega un clic a una modifica di textContent. Salva e aggiorna.
      4. Aggiungi un pulsante «Azzera» e prova due clic, reset e nuovo clic.
      Se hai due pagine: apri anche quella senza pulsante. Un elemento assente dà null: proteggi il collegamento con if (pulsante && messaggio) { … }. Controlla la Console con F12 su entrambe.
      Extra: cambia anche l'aspetto
      Nel CSS crea .evidenza. Nel gestore del clic usa messaggio.classList.toggle("evidenza"). Osserva primo e secondo clic: lo stile si attiva e si disattiva. Evita lampeggiamenti e conserva testo leggibile.
      Scarica il banco prova per VS Code
      Il kit contiene la versione iniziale con errori e gli stessi id del laboratorio. Per usarvi il tuo risultato, sostituisci script.js con quello che hai scaricato. Estrai prima lo ZIP.
      5
      Il vostro lavoro, da mostrare
      5 minuti
      Fai vedere che cosa hai capito
      Mostrate al docente il risultato del gruppo. A turno, ognuno spiega una scelta o una modifica diversa. Le spunte sono un'autovalutazione: il docente guarda anche il lavoro.
      I progressi restano su questo browser. Scarica una copia se cambi PC.
      Questo laboratorio non invia risposte al docente. Il file è una copia del lavoro da conservare; evita nomi, contatti e dati personali. Non è una verifica con voto.