giovedì 6 febbraio 2025

Corso di HTML: 6 Introduzione a JavaScript

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:

  1. 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.

  1. 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.

  1. 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:

  • La funzione toggle(id) è riutilizzabile per qualsiasi elemento passando il suo id.

  • style.display controlla la visibilità dell’elemento.

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:

  • L’input dell’utente viene memorizzato in nome.

  • L’alert mostra un messaggio concatenando il testo con il valore inserito.

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:

  • Qui si modifica sia la visibilità che il colore del testo al click.

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:

  • Modifica dinamica dell’attributo src dell’immagine.

  • Utile per slider o gallerie interattive.

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:

  • Gestione numeri tramite prompt() e parseFloat().

  • Calcolo semplice con + e risultato mostrato tramite alert.

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:

  • Confronto case-insensitive tramite toLowerCase().

  • Possibilità di creare quiz interattivi con più domande.

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.

alle
Etichette: ,

Nessun commento:

Posta un commento

Iscriviti a: Commenti sul post (Atom)

Corso Fondamenti di Informatica e Reti: 6 Reti di computer e Internet

Reti di computer e Internet Introduzione Prova a pensare alla vita quotidiana senza reti informatiche: niente messaggi WhatsApp, niente m...