3E e 3I SIA: Creare un banner pubblicitario che appare appena apri una pagina html ( procedura con Javascript)
Esercizio completo
Useremo 3 file:
index.html (lo scheletro)
style.css (i vestiti e i colori)
script.js (il cervello)
Immagina di costruire una casa: l'HTML sono i mattoni e le stanze. Il CSS sono i mobili, il colore delle pareti e le tende. Lo JavaScript è l'impianto elettrico che accende le luci e apre le porte.
📁 1. File: index.html (Lo Scheletro)
Questo file costruisce la struttura di tutto. Dice al browser "qui c'è un titolo, qui c'è un banner, qui c'è il testo normale".
HTML
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Pagina Principale (Senza Server)</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="banner-overlay">
<div class="banner-content">
<h2>🎉 OFFERTA SPECIALE! 🎉</h2>
<p>Questa pubblicità sparirà automaticamente tra...</p>
<div class="timer">
<span id="countdown">5</span>
</div>
<p>...secondi.</p>
<button id="close-banner-btn">Chiudi Ora</button>
</div>
</div>
<header>
<h1>Benvenuti sul Mio Sito</h1>
</header>
<main>
<p>Questo è il contenuto principale della pagina.</p>
</main>
<script src="script.js"></script>
</body>
</html>
🎨 2. File: style.css (I Vestiti e i Colori)
Questo file decide l'aspetto. La parte più importante è che nasconde il banner all'inizio.
CSS
/* Stili per la pagina normale (il testo "Benvenuti") */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
/* 💡 Blocco Importante 1: La Regola Magica */
/* Il simbolo # (cancelletto) significa: "Cerca l'ID..." */
#banner-overlay {
/* Questo è il TRUCCO! */
/* "display: none;" significa "NASCONDITI". */
/* È come un mantello dell'invisibilità. */
/* Appena la pagina si carica, il banner è invisibile. */
display: none;
/* Le prossime 4 righe dicono: */
/* "Copri l'INTERO schermo, da cima a fondo". */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Sfondo nero, ma un po' trasparente (0.75) */
background-color: rgba(0, 0, 0, 0.75);
/* Assicurati di stare SOPRA a tutto il resto (z-index) */
z-index: 1000;
/* Queste 3 righe servono a centrare la scatola bianca */
/* (il "banner-content") in mezzo allo schermo. */
display: flex;
justify-content: center;
align-items: center;
}
/* 💡 Blocco Importante 2: Lo Stile del Banner */
/* Il simbolo . (punto) significa: "Cerca la classe..." */
/* Queste regole sono per la scatola bianca interna */
.banner-content {
background-color: #ffffff;
padding: 30px; /* Spazio interno */
border-radius: 8px; /* Angoli arrotondati */
text-align: center; /* Testo al centro */
}
/* Regole per il numero "5" (lo fa diventare grande) */
.timer {
font-size: 3.5em; /* Molto grande */
font-weight: bold;
}
/* Regole per il pulsante (lo fa diventare verde) */
#close-banner-btn {
background-color: #5cb85c;
color: white;
border: none;
padding: 12px 25px;
cursor: pointer; /* Fa apparire la "manina" al passaggio del mouse */
}
🧠 3. File: script.js (Il Cervello)
Questo file è il "cervello" che fa accadere le cose. È quello che toglie il mantello dell'invisibilità e avvia il timer.
// 💡 Blocco Importante 1: L'Ascolto// Questa riga è come un "grande orecchio".// Dice: "Aspetta che l'HTML (lo scheletro) sia tutto costruito".// Solo QUANDO è pronto, esegui il codice che c'è dentro.document.addEventListener("DOMContentLoaded", function() {
// 💡 Blocco Importante 2: Trova gli Elementi // Adesso andiamo a "catturare" i pezzi dell'HTML che ci servono, // usando i loro nomi "id" (quelli del campanello). // Cattura la scatola grande (l'overlay) const overlay = document.getElementById('banner-overlay'); // Cattura il pulsante verde const closeButton = document.getElementById('close-banner-btn'); // Cattura il numero "5" const countdownElement = document.getElementById('countdown');
// 💡 Blocco Importante 3: Variabili del Timer // Creiamo una "scatola" per i secondi. // Usiamo "let" perché è un numero che CAMBIERÀ (da 5 a 4, 3...). let secondiRimanenti = 5; let timerInterval; // Una scatola per "ricordarci" come fermare il timer.
/** * 💡 Blocco Importante 4: Istruzioni per il COUNTDOWN * "function" significa: "Ecco una lista di istruzioni". * Le diamo un nome ("avviaCountdown") così possiamo chiamarla. */ function avviaCountdown() { // Scrivi il numero 5 dentro l'HTML (dove c'è l'id "countdown") countdownElement.textContent = secondiRimanenti;
// "setInterval" è un comando che dice: // "Esegui questo codice OGNI 1000 millisecondi (cioè ogni secondo)". timerInterval = setInterval(() => { // 1. Togli 1 ai secondi secondiRimanenti--; // (diventa 4) // 2. Aggiorna il numero sulla pagina countdownElement.textContent = secondiRimanenti;
// 3. Controlla: i secondi sono arrivati a 0? if (secondiRimanenti <= 0) { // Se sì, esegui le istruzioni per "chiudere il banner" chiudiBanner(); } }, 1000); // 1000 millisecondi = 1 secondo }
/** * 💡 Blocco Importante 5: Istruzioni per CHIUDERE * Un'altra lista di istruzioni, chiamata "chiudiBanner". */ function chiudiBanner() { // 1. FERMA il timer (sennò continuerebbe ad andare a -1, -2...) clearInterval(timerInterval); // 2. RIMETTI il mantello dell'invisibilità! // Diciamo al CSS: "Rimetti 'display: none;'". overlay.style.display = 'none'; }
// --------------------------------- // 💡 Blocco Importante 6: L'AVVIO! // Tutto quello che abbiamo scritto sopra erano solo le "istruzioni". // Adesso le usiamo. // ---------------------------------
// 1. Diciamo al cervello: "Stai in ascolto". // "Se qualcuno fa CLICK sul pulsante verde (closeButton)..." // "...esegui le istruzioni 'chiudiBanner'". closeButton.addEventListener('click', chiudiBanner); // 2. Questo è il momento MAGICO. // Diciamo al CSS: "TOGLI il mantello dell'invisibilità!". // Cambiamo "display: none;" in "display: flex;". // (Usiamo "flex" perché nel CSS avevamo usato "flex" per centrare). // ...IL BANNER APPARE! overlay.style.display = 'flex';
// 3. Ora che il banner è visibile, // eseguiamo le istruzioni per far partire il timer. avviaCountdown();
}); // Fine del "grande orecchio"🏁 Riassunto del Flusso (Cosa succede)
Quando apri index.html:
HTML costruisce la pagina, ma il CSS dice al banner display: none; (Mantello dell'invisibilità).
Tu vedi solo il testo "Benvenuti sul Mio Sito" per un millisecondo.
Lo JavaScript (script.js) si sveglia (perché la pagina è "pronta").
Il JS dice: overlay.style.display = 'flex'; (Togli il mantello!).
Il Banner appare e copre la pagina.
Il JS avvia la funzione avviaCountdown().
Il timer parte: 5... 4... 3...
Quando arriva a 0, il timer chiama chiudiBanner().
La funzione chiudiBanner() dice: overlay.style.display = 'none'; (Rimetti il mantello!).
Il Banner scompare e tu puoi finalmente vedere il contenuto della pagina.
Commenti
Posta un commento