6 – Introduzione a JavaScript
In questo modulo ci concentreremo su JavaScript, il linguaggio di programmazione che permette di rendere le pagine web interattive. Con JavaScript non ci limitiamo più a contenuti statici: possiamo rispondere alle azioni dell’utente, modificare testi, immagini e stili direttamente nel browser, e creare funzionalità dinamiche come menu interattivi, slideshow, calcoli automatici e molto altro.
Inserire Script in una Pagina HTML
Il primo passo per usare JavaScript è imparare a inserire il codice nella pagina HTML. Ci sono tre metodi principali:
-
Inline: il codice JavaScript è scritto direttamente negli attributi HTML. Ad esempio:
<button onclick="alert('Ciao!')">Clicca</button>
In questo caso, quando l’utente clicca sul bottone, viene mostrato un alert con il messaggio “Ciao!”. Questo metodo è utile per piccole azioni veloci, ma non è consigliato per progetti complessi perché mescola codice e contenuto.
-
Internal: il codice JavaScript viene inserito all’interno di un tag <script> nella pagina HTML, di solito prima della chiusura del <body>:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Esempio JavaScript</title>
</head>
<body>
<h1 id="titolo">Benvenuti</h1>
<button onclick="cambiaTesto()">Cambia Testo</button>
<script>
function cambiaTesto() {
document.getElementById('titolo').innerText = 'Testo Modificato!';
}
</script>
</body>
</html>
Qui, il codice JavaScript è organizzato all’interno del documento e può gestire più elementi senza creare confusione.
-
Esterno: il codice viene messo in un file separato, ad esempio script.js, e collegato con:
<script src="script.js"></script>
Questo metodo è il più consigliato per siti complessi, perché permette di separare contenuto e comportamento, facilitando manutenzione e aggiornamenti.
Variabili e Funzioni
Variabili
Le variabili sono contenitori che memorizzano dati. In JavaScript possiamo dichiararle con:
let nome = 'Mario'; // variabile modificabile
const PI = 3.1416; // costante, non modificabile
var eta = 25; // vecchio metodo, sconsigliato
Le variabili permettono di memorizzare numeri, testi, valori booleani e molto altro, per poi usarli nei calcoli o nelle funzioni.
Funzioni
Le funzioni sono blocchi di codice riutilizzabili:
function saluta(nome) {
alert('Ciao, ' + nome + '!');
}
saluta('Mario');
In questo esempio, la funzione saluta prende un parametro (nome) e mostra un alert personalizzato. Possiamo richiamarla tutte le volte che vogliamo.
Interazioni con l’Utente
JavaScript permette di interagire direttamente con l’utente tramite finestre di dialogo:
-
alert(): mostra un messaggio
-
prompt(): riceve un input dall’utente
-
confirm(): chiede conferma (OK/Annulla)
Esempio pratico:
let nome = prompt('Inserisci il tuo nome:');
alert('Benvenuto, ' + nome + '!');
In questo modo possiamo raccogliere informazioni dall’utente e usarle immediatamente per personalizzare la pagina.
Manipolazione del DOM
Il DOM (Document Object Model) è una rappresentazione della struttura HTML della pagina. Con JavaScript possiamo modificare testi, immagini, stili e contenuti dinamicamente.
Esempio: Mostrare o nascondere contenuti
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Interattività</title>
</head>
<body>
<h2 id="titolo">Contenuto Segreto</h2>
<p id="testo">Questo testo può essere nascosto o mostrato.</p>
<button onclick="toggleTesto()">Mostra/Nascondi</button>
<script>
function toggleTesto() {
let p = document.getElementById('testo');
if(p.style.display === 'none') {
p.style.display = 'block';
} else {
p.style.display = 'none';
}
}
</script>
</body>
</html>
Spiegazione
-
document.getElementById('testo') seleziona l’elemento HTML con id testo.
-
p.style.display controlla se l’elemento è visibile o nascosto.
-
La funzione toggleTesto() cambia lo stato ogni volta che l’utente clicca il bottone.
Perfetto! Possiamo sviluppare in maniera approfondita e narrativa gli esercizi operativi di JavaScript, con spiegazioni dettagliate, esempi di codice pronti da copiare e consigli pratici su cosa avviene in ogni passaggio. Suddividiamoli in paragrafi chiari.
Mini-Esercizi Operativi di JavaScript
1 – Modifica del Testo
In questo esercizio creeremo un pulsante che, quando cliccato, cambia il contenuto di un paragrafo. Questo permette di comprendere come manipolare il DOM e rispondere a eventi dell’utente.
<p id="paragrafo">Questo testo può cambiare.</p>
<button onclick="cambiaParagrafo()">Clicca qui</button>
<script>
function cambiaParagrafo() {
document.getElementById('paragrafo').innerText = "Il testo è stato modificato!";
}
</script>
Spiegazione:
-
document.getElementById('paragrafo') seleziona il paragrafo.
-
innerText modifica il contenuto testuale.
-
La funzione cambiaParagrafo() viene eseguita al click del bottone.
2 – Input dell’Utente
Chiederemo all’utente di inserire il suo colore preferito e cambieremo lo sfondo della pagina di conseguenza.
<button onclick="cambiaColore()">Scegli il tuo colore</button>
<script>
function cambiaColore() {
let colore = prompt("Inserisci il tuo colore preferito (nome o codice esadecimale):");
document.body.style.backgroundColor = colore;
}
</script>
Spiegazione:
-
prompt() mostra una finestra per inserire dati.
-
document.body.style.backgroundColor cambia il colore dello sfondo del body.
-
Questo esercizio aiuta a collegare input dell’utente e modifiche dinamiche della pagina.
3 – Funzione con Parametro: calcolaArea
Creiamo una funzione calcolaArea che riceve base e altezza come parametri e mostra l’area di un rettangolo.
<button onclick="mostraArea()">Calcola Area</button>
<script>
function calcolaArea(base, altezza) {
return base * altezza;
}
function mostraArea() {
let base = parseFloat(prompt("Inserisci la base del rettangolo:"));
let altezza = parseFloat(prompt("Inserisci l'altezza del rettangolo:"));
alert("L'area del rettangolo è: " + calcolaArea(base, altezza));
}
</script>
Spiegazione:
-
parseFloat() converte il testo inserito in numero.
-
calcolaArea() prende due parametri e restituisce il risultato.
-
mostraArea() gestisce l’interazione con l’utente.
4 – Mostra/Nascondi Multiplo
Creiamo due paragrafi con due bottoni indipendenti per mostrarli o nasconderli.
<p id="par1">Primo paragrafo</p>
<button onclick="toggle('par1')">Mostra/Nascondi 1</button>
<p id="par2">Secondo paragrafo</p>
<button onclick="toggle('par2')">Mostra/Nascondi 2</button>
<script>
function toggle(id) {
let elemento = document.getElementById(id);
if(elemento.style.display === "none") {
elemento.style.display = "block";
} else {
elemento.style.display = "none";
}
}
</script>
Spiegazione:
5 – Alert Personalizzati
Combiniamo prompt() e alert() per salutare l’utente con un messaggio personalizzato.
<button onclick="salutaUtente()">Saluta</button>
<script>
function salutaUtente() {
let nome = prompt("Come ti chiami?");
alert("Ciao " + nome + ", benvenuto nel sito!");
}
</script>
Spiegazione:
6 – Modifica del Testo e dei Colori di Contenuti Nascosti
Possiamo estendere gli esercizi combinando toggle del testo e cambio colore:
<p id="testoSegreto">Contenuto segreto</p>
<button onclick="mostraNascondiColore()">Mostra/Nascondi e Colora</button>
<script>
function mostraNascondiColore() {
let elemento = document.getElementById('testoSegreto');
if(elemento.style.display === 'none') {
elemento.style.display = 'block';
elemento.style.color = 'blue';
} else {
elemento.style.display = 'none';
}
}
</script>
Spiegazione:
7 – Cambiare Immagine della Pagina
<img id="foto" src="immagine1.jpg" alt="Immagine iniziale" width="200">
<button onclick="cambiaImmagine()">Cambia Immagine</button>
<script>
function cambiaImmagine() {
document.getElementById('foto').src = "immagine2.jpg";
}
</script>
Spiegazione:
8 – Calcolo Somma di Due Numeri
<button onclick="sommaNumeri()">Calcola Somma</button>
<script>
function sommaNumeri() {
let num1 = parseFloat(prompt("Inserisci il primo numero:"));
let num2 = parseFloat(prompt("Inserisci il secondo numero:"));
alert("La somma è: " + (num1 + num2));
}
</script>
Spiegazione:
9 – Piccolo Quiz
<button onclick="quiz()">Quiz</button>
<script>
function quiz() {
let risposta = prompt("Qual è la capitale d'Italia?");
if(risposta.toLowerCase() === "roma") {
alert("Corretto!");
} else {
alert("Sbagliato, la risposta corretta è Roma.");
}
}
</script>
Spiegazione:
10 – Eventi Multipli: onclick, onmouseover, onmouseout
<p id="par">Passa il mouse qui!</p>
<script>
let p = document.getElementById('par');
p.onclick = function() { alert("Hai cliccato sul paragrafo!"); };
p.onmouseover = function() { p.style.color = "red"; };
p.onmouseout = function() { p.style.color = "black"; };
</script>
Spiegazione:
-
onclick reagisce al click.
-
onmouseover cambia colore al passaggio del mouse.
-
onmouseout ripristina lo stile.
-
Mostra come combinare diversi eventi per rendere la pagina più interattiva.
✅ Risultati Attesi
Al termine di questo modulo, sarai in grado di inserire script JavaScript nelle pagine HTML, creare variabili e funzioni, interagire con l’utente e manipolare dinamicamente il DOM, rendendo le pagine web veramente interattive e operative.
Commenti
Posta un commento