Cambiare il colore di sfondo di una pagina web con un semplice click è uno degli esercizi più comuni e utili per chi si avvicina al mondo dello sviluppo front-end. Nonostante possa sembrare un'operazione banale, dietro questa funzionalità si nasconde l'interazione tra tre linguaggi fondamentali del web: HTML, che struttura il contenuto, CSS, che si occupa dello stile, e JavaScript che aggiunge logica e interattività.
Modificare il colore di sfondo con HTML, CSS e JavaScript
Imparare a gestire questo tipo di dinamiche è il primo passo per comprendere come i siti moderni rispondono alle azioni dell'utente, offrendo esperienze sempre più dinamiche e coinvolgenti. In questa guida pratica vedremo, passo dopo passo, come realizzare un pulsante che al click modifichi il colore di sfondo della pagina, analizzando il codice necessario e osservandone insieme il risultato finale.
I linguaggi utilizzati e anteprima del risultato
Per dare vita al nostro piccolo progetto ci affideremo a tre pilastri dello sviluppo web: HTML, CSS e JavaScript. L'HTML fungerà da scheletro della pagina, permettendoci di inserire il pulsante su cui l'utente potrà interagire. Il CSS entrerà in gioco per curare l'aspetto grafico, sia del pulsante che dell'intera pagina, così da non avere un risultato grezzo ma un'interfaccia piacevole alla vista. Infine, il cuore dell'interattività sarà affidato a JavaScript, che si occuperà di "ascoltare" il click e di reagire cambiando il colore di sfondo ogni volta che l'utente lo desidera.
Il risultato finale, seppur semplice, rende bene l'idea di come questi tre linguaggi possano lavorare insieme. Vedremo una pagina essenziale con un pulsante ben visibile, e con un semplice click lo sfondo passerà da un colore all'altro. Questo esercizio dimostra come la logica di programmazione possa rendere dinamico un contenuto che altrimenti rimarrebbe statico.
Codice HTML:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cambia Colore Sfondo</title>
</head>
<body>
<h1>Cambia il colore di sfondo con un click</h1>
<button id="changeColorBtn">Clicca qui</button>
</body>
</html>Nel <body> di questo codice HTML troviamo il contenuto principale della pagina: un titolo (<h1>) che descrive lo scopo dell'esercizio e un pulsante (<button>). Al pulsante assegniamo un id, chiamato changeColorBtn, che ci servirà più avanti per collegarlo con lo stile e soprattutto con la logica JavaScript.
Codice CSS:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
flex-direction: column;
}
button {
padding: 12px 20px;
font-size: 16px;
border: none;
border-radius: 8px;
background-color: #0077ff;
color: white;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #005fcc;
}In questo codice CSS
body
effetto hover
body
Ora arriva la parte più interessante: aggiungere l'interattività. Con poche righe di JavaScript possiamo fare in modo che, quando l'utente clicca sul pulsante, il colore di sfondo della pagina cambi automaticamente:
// Selezioniamo il pulsante tramite il suo id
const button = document.getElementById("changeColorBtn");
// Aggiungiamo un "ascoltatore" per il click
button.addEventListener("click", function() {
// Generiamo un colore casuale in formato esadecimale
const randomColor = "#" + Math.floor(Math.random()*16777215).toString(16);
// Applichiamo il nuovo colore come sfondo del body
document.body.style.backgroundColor = randomColor;
});Il funzionamento è molto semplice. Con getElementById recuperiamo il pulsante. Con addEventListener diciamo al browser di eseguire una funzione ogni volta che viene cliccato. Dentro la funzione creiamo infine un colore casuale e lo applichiamo allo sfondo del documento. In questo modo ad ogni click la pagina avrà un colore diverso rendendo subito visibile l'effetto della nostra logica.
Risultato finale
Una volta messi insieme i tre pezzi di codice – HTML, CSS e JavaScript – otteniamo una pagina semplice ma efficace. Al centro dello schermo compare un titolo che spiega l'obiettivo e, subito sotto, un pulsante ben visibile. Finché non viene premuto, la pagina mostra uno sfondo neutro impostato dal CSS. Dopo il primo click tutto prende vita: il colore di sfondo cambia in modo casuale, regalando un effetto immediato e sempre diverso.
La cosa interessante è che non esistono limiti al numero di volte in cui l'utente può interagire. Ogni click genera una nuova tonalità trasformando la pagina in una sorta di tavolozza interattiva. Pur trattandosi di un esempio molto semplice, questo piccolo esperimento mette bene in luce il potenziale di JavaScript quando lavora insieme a HTML e CSS. Con poche righe di codice si passa da una pagina statica ad un contenuto dinamico e coinvolgente.
Conclusioni
Cambiare il colore di sfondo con un click è un esercizio semplice ma al tempo stesso molto istruttivo. In poche righe di codice abbiamo visto come HTML, CSS e JavaScript possano collaborare tra loro per dare vita a una pagina che non si limita a mostrare contenuti ma risponde alle azioni dell'utente. Questo piccolo progetto ci insegna che l'interattività non è qualcosa di complesso riservato solo a sviluppatori esperti. Con basi solide e concetti semplici è possibile arricchire l'esperienza di navigazione.
Da qui le possibilità sono infinite: si possono usare colori predefiniti al posto di quelli casuali, aggiungere animazioni di transizione per rendere il cambio più fluido o integrare altri elementi interattivi. L'importante è comprendere la logica alla base: la struttura con l'HTML, la presentazione con il CSS e l'interattività con JavaScript.
Se sei agli inizi, esercizi come questo sono il modo migliore per prendere confidenza con i linguaggi fondamentali del web e costruire le basi per progetti più complessi e creativi.
