JavaScript per Principianti: Guida Completa alla Programmazione Web Interattiva

Principiante
JavaScript

Scopri le basi di JavaScript, il linguaggio fondamentale per rendere i tuoi siti web dinamici e interattivi. Questa guida completa ti accompagnerà dai concetti introduttivi fino alla manipolazione del DOM e alla gestione degli eventi, con esempi pratici e consigli utili.

Pubblicato
Tag
programmazione web sviluppo web Beginner javascript frontend DOM Eventi tutorial variabili funzioni

Introduzione a JavaScript: Il Cuore Dinamico del Web

Benvenuti nel mondo di JavaScript! Se stai leggendo questo articolo, probabilmente sei all'inizio del tuo percorso nello sviluppo web e sei curioso di capire come dare vita ai tuoi siti. Hai già familiarità con HTML per la struttura e CSS per lo stile, ma ora è il momento di aggiungere l'ingrediente magico che rende le pagine web interattive e dinamiche: JavaScript.

Cos'è JavaScript e Perché è Fondamentale?

JavaScript (spesso abbreviato in JS) è un linguaggio di programmazione leggero, interpretato e orientato agli oggetti, noto per essere il linguaggio di scripting del web. È stato creato nel 1995 da Brendan Eich e da allora è diventato uno dei pilaggi portanti di internet, insieme a HTML e CSS. Ogni browser web moderno include un motore JavaScript che esegue il codice JS direttamente sul dispositivo dell'utente.

Perché è così importante?

  1. Interattività: JS permette di creare pagine web che rispondono alle azioni dell'utente (click, digitazione, spostamento del mouse) senza dover ricaricare l'intera pagina.
  2. Dinamicità: Puoi modificare il contenuto HTML e gli stili CSS di una pagina in tempo reale, rendendo l'esperienza utente molto più fluida e moderna.
  3. Validazione: Consente di validare i dati inseriti nei form prima che vengano inviati al server, migliorando l'usabilità e riducendo il carico sul backend.
  4. Sviluppo Full-Stack: Con l'avvento di Node.js, JavaScript non è più confinato al browser. Ora puoi usarlo anche per lo sviluppo lato server, creando applicazioni web complete (full-stack) con un unico linguaggio.
  5. Ecosistema Vasto: Ha una community enorme e un ecosistema ricchissimo di librerie e framework (come React, Angular, Vue.js) che velocizzano enormemente lo sviluppo.

In questa guida, esploreremo le fondamenta di JavaScript, partendo da zero e costruendo gradualmente la tua comprensione, con l'obiettivo di farti sentire a tuo agio nel manipolare gli elementi di una pagina web.

Configurare l'Ambiente: Dove Scrivere e Eseguire JavaScript

Per iniziare a scrivere codice JavaScript, hai bisogno di due cose: un editor di testo (come VS Code, Sublime Text, Atom) e un browser web moderno (Chrome, Firefox, Edge, Safari). Il browser è dove il tuo codice JS verrà eseguito.

Ci sono tre modi principali per includere JavaScript in una pagina HTML:

1. JavaScript Inline (Sconsigliato per codice esteso)

Puoi inserire piccole porzioni di codice JavaScript direttamente negli attributi HTML, ad esempio per gestire un evento.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Inline</title>
</head>
<body>
    <button dal JavaScript inline!');">Clicca qui</button>
</body>
</html>

Questo approccio è sconsigliato per codice più complesso perché mescola la logica con la struttura HTML, rendendo il codice difficile da leggere, mantenere e debuggare.

2. JavaScript Interno (All'interno del file HTML)

Puoi inserire il tuo codice JavaScript all'interno di un tag <script> direttamente nel file HTML. È buona pratica posizionare il tag <script> prima della chiusura del tag <body> (</body>). Questo assicura che l'HTML sia già stato caricato e interpretato dal browser prima che JavaScript tenti di interagire con esso, evitando errori.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Interno</title>
</head>
<body>
    <h1>Benvenuto!</h1>
    <p id="messaggio"></p>

    <script>
        // Questo è un commento in JavaScript
        document.getElementById('messaggio').textContent = 'Questo messaggio è stato aggiunto da JavaScript interno!';
        console.log('Script interno caricato!');
    </script>
</body>
</html>

Questo metodo è accettabile per script di piccole dimensioni specifici per una singola pagina, ma per progetti più grandi, il file HTML diventerebbe troppo affollato.

3. JavaScript Esterno (Il Metodo Consigliato)

Il metodo più comune e raccomandato è scrivere il codice JavaScript in un file separato (ad esempio, script.js) e collegarlo al tuo file HTML usando l'attributo src del tag <script>.

index.html:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Esterno</title>
</head>
<body>
    <h1>Ciao Mondo!</h1>
    <p id="saluto"></p>

    <!-- Il tag script è posizionato prima della chiusura del body -->
    <script src="script.js"></script>
</body>
</html>

script.js:

// Questo codice si trova nel file script.js
const elementoSaluto = document.getElementById('saluto');
elementoSaluto.textContent = 'Questo saluto viene dal file JavaScript esterno!';
console.log('Script esterno caricato con successo!');

Vantaggi del JS Esterno:

  • Separazione delle Responsabilità: Mantiene l'HTML pulito e focalizzato sulla struttura, e il JS sulla logica.
  • Riusabilità: Lo stesso file JS può essere collegato a più pagine HTML, evitando la duplicazione del codice.
  • Cache del Browser: Il browser può memorizzare in cache il file JS, migliorando i tempi di caricamento per le visite successive.

Per il resto di questo tutorial, useremo l'approccio del file JavaScript esterno.

Le Basi del Linguaggio JavaScript: Variabili, Tipi e Operatori

Ogni linguaggio di programmazione ha dei blocchi fondamentali. In JavaScript, questi includono variabili, tipi di dato e operatori.

Dichiarare Variabili: let, const e var

Le variabili sono contenitori che memorizzano valori. In JavaScript, ci sono tre parole chiave per dichiararle:

  • var: Il modo tradizionale per dichiarare variabili. Ha uno scope di funzione e può essere ridefinita e riassegnata. È stata superata da let e const a causa di alcune problematiche relative allo scope e al hoisting.
  • let: Introdotta con ES6 (ECMAScript 2015), let ha uno scope di blocco. Può essere riassegnata, ma non ridefinita nello stesso scope.
  • const: Anch'essa introdotta con ES6, const è usata per dichiarare costanti. Ha uno scope di blocco e non può essere riassegnata (il suo valore rimane costante dopo l'inizializzazione). Per gli oggetti e gli array, significa che non si può riassegnare la variabile a un nuovo oggetto/array, ma si possono modificare le proprietà interne dell'oggetto o gli elementi dell'array.

Esempio:

// Dichiarazione con var (sconsigliato per nuovo codice)
var nomeUtente = "Mario";
console.log(nomeUtente); // Output: Mario
nomeUtente = "Luigi"; // Può essere riassegnata
console.log(nomeUtente); // Output: Luigi

// Dichiarazione con let
let eta = 30;
console.log(eta); // Output: 30
eta = 31; // Può essere riassegnata
console.log(eta); // Output: 31

// Dichiarazione con const
const PI = 3.14159;
console.log(PI); // Output: 3.14159
// PI = 3.14; // ERRORE! Non può essere riassegnata

const persona = { nome: "Anna", cognome: "Rossi" };
persona.nome = "Giovanna"; // Le proprietà interne di un oggetto const possono essere modificate
console.log(persona.nome); // Output: Giovanna
// persona = { nome: "Luca" }; // ERRORE! Non può essere riassegnata a un nuovo oggetto

Regola d'oro: Usa const per default, e let solo se sai che la variabile dovrà cambiare valore. Evita var nel nuovo codice.

Tipi di Dato in JavaScript

JavaScript è un linguaggio a tipizzazione dinamica, il che significa che non devi specificare il tipo di una variabile quando la dichiari. Il tipo viene determinato automaticamente al momento dell'assegnazione.

Esistono diversi tipi di dato primitivi e un tipo di dato non primitivo (oggetto):

  • String (stringa): Una sequenza di caratteri. Si definisce con virgolette singole (') o doppie (") o con backtick (`) per i template literal. 
    let saluto = 'Ciao mondo!';
let nome = "Alice";
let messaggio = `Il mio nome è ${nome}.`; // Template literal con interpolazione
  • Number (numero): Numeri interi o decimali (floating-point). 
    let intero = 10;
let decimale = 3.14;
  • Boolean (booleano): Rappresenta un valore di verità: true o false. 
    let isAttivo = true;
let haFinito = false;
  • Null (nullo): Rappresenta l'assenza intenzionale di qualsiasi valore o oggetto. È un valore che un programmatore può assegnare. 
    let valoreNullo = null;
  • Undefined (indefinito): Indica che una variabile è stata dichiarata ma non le è stato ancora assegnato un valore. È il valore predefinito di una variabile non inizializzata. 
    let nonDefinito;
console.log(nonDefinito); // Output: undefined
  • Symbol (simbolo): Introdotto in ES6, è un tipo di dato primitivo i cui valori sono unici e immutabili. Viene usato spesso per identificatori di proprietà unici in oggetti.
  • BigInt (intero grande): Introdotto in ES2020, può rappresentare numeri interi di dimensioni arbitrarie.
  • Object (oggetto): Il tipo di dato non primitivo. Tutto il resto in JavaScript è un oggetto o può essere trattato come tale (array, funzioni, date, ecc.).

Operatori in JavaScript

Gli operatori sono simboli che eseguono operazioni su uno o più valori (operand).

  • Operatori Aritmetici: + (addizione), - (sottrazione), * (moltiplicazione), / (divisione), % (modulo), ** (potenza). 
    let a = 10;
let b = 3;
console.log(a + b); // 13
console.log(a % b); // 1 (resto della divisione)
console.log(a ** b); // 1000 (10 elevato alla 3)
  • Operatori di Assegnazione: = (assegnazione), +=, -=, *=, /=, %=, **=. 
    let x = 5;
x += 3; // Equivalente a x = x + 3; (x è ora 8)
  • Operatori di Confronto: Restituiscono un valore booleano (true o false).
    • == (uguale, confronta solo il valore, può fare coercizione di tipo)
    • === (strettamente uguale, confronta valore e tipo)
    • != (diverso, confronta solo il valore)
    • !== (strettamente diverso, confronta valore e tipo)
    • > (maggiore di), < (minore di), >= (maggiore o uguale), <= (minore o uguale)
    console.log(5 == '5');   // true (coercizione di tipo)
console.log(5 === '5');  // false (tipi diversi)
console.log(10 > 5);     // true
  • Operatori Logici: Usati per combinare espressioni booleane.
    • && (AND logico): true se entrambi gli operandi sono true.
    • || (OR logico): true se almeno uno degli operandi è true.
    • ! (NOT logico): Inverte il valore booleano dell'operando.
    let isMaggiorenne = true;
let haPatente = false;
console.log(isMaggiorenne && haPatente); // false
console.log(isMaggiorenne || haPatente); // true
console.log(!isMaggiorenne);             // false

Controllo del Flusso: Istruzioni Condizionali e Cicli

Il controllo del flusso ti permette di eseguire blocchi di codice diversi in base a determinate condizioni o di ripetere l'esecuzione di un blocco di codice più volte.

Istruzioni Condizionali (if/else if/else, switch)

  • if/else: Esegue un blocco di codice se una condizione è vera, altrimenti esegue un altro blocco (opzionale). 
    let temperatura = 25;
if (temperatura > 30) {
    console.log("Fa molto caldo!");
} else if (temperatura > 20) {
    console.log("È una bella giornata.");
} else {
    console.log("Fa fresco.");
}
  • switch: Usato per gestire più condizioni in modo più pulito rispetto a una lunga catena di if/else if, specialmente quando si confronta una singola variabile con diversi valori. 
    let giornoSettimana = 'Lunedì';
switch (giornoSettimana) {
    case 'Lunedì':
        console.log("Inizio settimana!");
        break;
    case 'Venerdì':
        console.log("Quasi weekend!");
        break;
    default:
        console.log("Giorno feriale.");
}
    È fondamentale usare break; alla fine di ogni case per evitare il fall-through (esecuzione dei case successivi).

Cicli (for, while, do/while)

I cicli permettono di ripetere un blocco di codice un certo numero di volte.

  • for loop: Il più comune, usato quando si conosce il numero di iterazioni. 
    for (let i = 0; i < 5; i++) {
    console.log("Il contatore è: " + i);
}
// Output:
// Il contatore è: 0
// Il contatore è: 1
// Il contatore è: 2
// Il contatore è: 3
// Il contatore è: 4
  • while loop: Continua a eseguire il blocco finché una condizione è vera. Attenzione ai loop infiniti! 
    let contatore = 0;
while (contatore < 3) {
    console.log("While loop, iterazione: " + contatore);
    contatore++;
}
// Output:
// While loop, iterazione: 0
// While loop, iterazione: 1
// While loop, iterazione: 2
  • do/while loop: Simile a while, ma garantisce che il blocco di codice venga eseguito almeno una volta, prima che la condizione venga controllata. 
    let j = 0;
do {
    console.log("Do/While loop, iterazione: " + j);
    j++;
} while (j < 0);
// Output:
// Do/While loop, iterazione: 0 (eseguito una volta anche se j < 0 è false)

Funzioni: Blocchi di Codice Riutilizzabili

Le funzioni sono blocchi di codice che puoi definire una volta e richiamare più volte. Questo promuove la riusabilità e l'organizzazione del codice.

Dichiarare e Chiamare Funzioni

// Dichiarazione di funzione tradizionale
function saluta(nome) {
    return "Ciao, " + nome + "!";
}

// Chiamata della funzione
let messaggioSaluto = saluta("Marco");
console.log(messaggioSaluto); // Output: Ciao, Marco!

// Funzione senza parametri e senza return esplicito
function mostraDataCorrente() {
    const data = new Date();
    console.log("Oggi è il: " + data.toLocaleDateString());
}
mostraDataCorrente(); // Chiama la funzione per mostrare la data

Funzioni Anonime e Arrow Functions

Le funzioni possono anche essere assegnate a variabili (funzioni anonime) o definite in una forma più concisa con le arrow functions (funzioni freccia), introdotte in ES6.

// Funzione anonima assegnata a una variabile (espressione di funzione)
const moltiplica = function(a, b) {
    return a * b;
};
console.log(moltiplica(4, 5)); // Output: 20

// Arrow function (forma concisa)
const somma = (a, b) => a + b;
console.log(somma(10, 20)); // Output: 30

// Arrow function con un solo parametro (le parentesi possono essere omesse)
const quadrato = num => num * num;
console.log(quadrato(7)); // Output: 49

// Arrow function con più istruzioni (richiede le graffe e return esplicito)
const calcolaIva = (prezzo, aliquota) => {
    const iva = prezzo * aliquota;
    return prezzo + iva;
};
console.log(calcolaIva(100, 0.22)); // Output: 122

Le arrow functions sono molto usate nello sviluppo web moderno per la loro sintassi più pulita e per come gestiscono il contesto this (un argomento più avanzato, ma importante).

Interagire con il DOM: Rendere le Pagine Vive

Il Document Object Model (DOM) è un'interfaccia di programmazione per i documenti HTML e XML. Rappresenta la struttura della pagina come un albero di oggetti, permettendo a JavaScript di accedere e manipolare il contenuto, la struttura e lo stile della pagina.

Cos'è il DOM?

Immagina il tuo documento HTML come un albero genealogico. Ogni tag HTML (come <html>, <head>, <body>, <h1>, <p>, <a>) è un nodo in questo albero. JavaScript può navigare in questo albero, trovare nodi specifici e modificarli.

Selezionare Elementi HTML

Per manipolare un elemento, dobbiamo prima selezionarlo. I metodi più comuni sono:

  • document.getElementById('id-elemento'): Seleziona un elemento tramite il suo attributo id. Restituisce un singolo elemento.
  • document.querySelector('selettore-css'): Seleziona il primo elemento che corrisponde al selettore CSS specificato (es. '#myId', '.myClass', 'div p').
  • document.querySelectorAll('selettore-css'): Seleziona tutti gli elementi che corrispondono al selettore CSS. Restituisce una NodeList (simile a un array).
  • document.getElementsByClassName('nome-classe'): Seleziona tutti gli elementi con una data classe. Restituisce una HTMLCollection.
  • document.getElementsByTagName('nome-tag'): Seleziona tutti gli elementi con un dato nome di tag. Restituisce una HTMLCollection.
<!-- index.html (solo la parte body per brevità) -->
<body>
    <h1 id="titolo">Benvenuto nel mio Sito</h1>
    <p class="testo-introduzione">Questo è un paragrafo introduttivo.</p>
    <p class="testo-introduzione">Un altro paragrafo.</p>
    <button id="btnCambiaTesto">Cambia Testo</button>
</body>

// script.js

// Selezionare un elemento per ID
const titolo = document.getElementById('titolo');
console.log(titolo.textContent); // Output: Benvenuto nel mio Sito

// Selezionare il primo elemento per classe
const primoParagrafo = document.querySelector('.testo-introduzione');
console.log(primoParagrafo.textContent); // Output: Questo è un paragrafo introduttivo.

// Selezionare tutti gli elementi per classe
const paragrafi = document.querySelectorAll('.testo-introduzione');
paragrafi.forEach(p => {
    console.log(p.textContent);
});
// Output:
// Questo è un paragrafo introduttivo.
// Un altro paragrafo.

Manipolare Contenuto e Attributi

Una volta selezionato un elemento, puoi modificarne il contenuto, gli attributi e gli stili.

  • textContent: Ottiene o imposta il contenuto testuale di un elemento (senza HTML).
  • innerHTML: Ottiene o imposta il contenuto HTML di un elemento. Attenzione: l'uso indiscriminato di innerHTML può portare a vulnerabilità di sicurezza (XSS) se si inseriscono stringhe non sanificate provenienti dall'utente.
  • setAttribute('nome-attributo', 'valore'): Imposta il valore di un attributo.
  • getAttribute('nome-attributo'): Ottiene il valore di un attributo.
  • removeAttribute('nome-attributo'): Rimuove un attributo.
// script.js (continua dall'esempio precedente)

// Modificare il contenuto testuale
titolo.textContent = "JavaScript è Fantastico!";

// Modificare il contenuto HTML (con cautela)
primoParagrafo.innerHTML = 'Questo paragrafo ora contiene testo <em>formattato</em>!';

// Aggiungere/modificare un attributo
const myButton = document.getElementById('btnCambiaTesto');
myButton.setAttribute('title', 'Clicca per cambiare il testo');

// Ottenere un attributo
console.log(myButton.getAttribute('id')); // Output: btnCambiaTesto

Modificare gli Stili CSS

Puoi modificare gli stili di un elemento direttamente tramite la proprietà style dell'oggetto elemento. Le proprietà CSS con trattini (es. background-color) devono essere convertite in camelCase (es. backgroundColor).

titolo.style.color = 'blue';
titolo.style.backgroundColor = '#f0f0f0';
titolo.style.padding = '10px';

// Aggiungere/rimuovere classi CSS è spesso preferibile per gestire stili complessi
titolo.classList.add('titolo-speciale');
titolo.classList.remove('titolo-predefinito');
titolo.classList.toggle('evidenziato'); // Aggiunge se non c'è, rimuove se c'è

Gestione degli Eventi: Rispondere alle Azioni dell'Utente

Il web è interattivo grazie agli eventi. Un evento è qualcosa che accade nella pagina, come un clic del mouse, la pressione di un tasto, il caricamento della pagina, l'invio di un form, ecc. JavaScript ti permette di "ascoltare" questi eventi e reagire ad essi.

Aggiungere Event Listener

Il modo più comune e flessibile per gestire gli eventi è usare addEventListener().

elemento.addEventListener(tipoEvento, funzioneDiCallback);

  • tipoEvento: Una stringa che specifica il tipo di evento da ascoltare (es. 'click', 'mouseover', 'submit', 'keydown').
  • funzioneDiCallback: Una funzione che verrà eseguita quando l'evento si verifica.
<!-- index.html (solo la parte body per brevità) -->
<body>
    <button id="bottoneCliccami">Cliccami!</button>
    <p id="statoBottone">Il bottone non è stato cliccato.</p>
    <input type="text" id="inputTesto" placeholder="Digita qui...">
    <p id="testoDigitato"></p>
</body>

// script.js

const bottone = document.getElementById('bottoneCliccami');
const statoBottone = document.getElementById('statoBottone');
const inputTesto = document.getElementById('inputTesto');
const testoDigitato = document.getElementById('testoDigitato');

// Evento click su un bottone
bottone.addEventListener('click', function() {
    statoBottone.textContent = 'Il bottone è stato cliccato!';
    bottone.style.backgroundColor = 'lightgreen';
});

// Evento input su un campo di testo
inputTesto.addEventListener('input', function(event) {
    // event.target si riferisce all'elemento che ha scatenato l'evento (l'input)
    testoDigitato.textContent = 'Hai digitato: ' + event.target.value;
});

// Un altro esempio: mouseover e mouseout
bottone.addEventListener('mouseover', () => {
    bottone.style.transform = 'scale(1.05)';
    bottone.style.transition = 'transform 0.2s';
});
bottone.addEventListener('mouseout', () => {
    bottone.style.transform = 'scale(1)';
});

Esempi Pratici: Costruiamo Qualcosa!

Per consolidare la comprensione, vediamo alcuni esempi pratici di ciò che abbiamo imparato.

Esempio 1: Un Semplice Contatore

Creiamo un contatore che aumenta e diminuisce al clic di due bottoni.

index.html:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contatore JS</title>
    <style>
        body { font-family: sans-serif; text-align: center; margin-top: 50px; }
        #contatore { font-size: 3em; margin: 20px 0; }
        button { padding: 10px 20px; font-size: 1.2em; margin: 0 10px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>Il Mio Contatore</h1>
    <p id="contatore">0</p>
    <button id="btnDiminuisci">Diminuisci</button>
    <button id="btnAumenta">Aumenta</button>

    <script src="script.js"></script>
</body>
</html>

script.js:

const contatoreElement = document.getElementById('contatore');
const btnDiminuisci = document.getElementById('btnDiminuisci');
const btnAumenta = document.getElementById('btnAumenta');

let valoreContatore = 0;

function aggiornaContatore() {
    contatoreElement.textContent = valoreContatore;
    // Aggiungiamo un po' di stile dinamico
    if (valoreContatore > 0) {
        contatoreElement.style.color = 'green';
    } else if (valoreContatore < 0) {
        contatoreElement.style.color = 'red';
    } else {
        contatoreElement.style.color = 'black';
    }
}

btnAumenta.addEventListener('click', () => {
    valoreContatore++;
    aggiornaContatore();
});

btnDiminuisci.addEventListener('click', () => {
    valoreContatore--;
    aggiornaContatore();
});

// Inizializza il contatore al caricamento della pagina
aggiornaContatore();

Questo esempio mostra come selezionare elementi, gestire eventi di click, aggiornare il contenuto testuale e persino applicare stili dinamici in base al valore del contatore.

Esempio 2: Validazione Semplice di un Form

Vediamo come fare una validazione molto base di un campo email in un form.

index.html:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Validazione Form JS</title>
    <style>
        body { font-family: sans-serif; margin: 50px; }
        form { max-width: 400px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 8px; }
        div { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input[type="email"] { width: calc(100% - 22px); padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
        button { padding: 10px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
        .errore { color: red; font-size: 0.9em; margin-top: 5px; }
        .successo { color: green; font-size: 0.9em; margin-top: 5px; }
    </style>
</head>
<body>
    <h1>Registrazione Utente</h1>
    <form id="formRegistrazione">
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
            <p id="messaggioErroreEmail" class="errore"></p>
        </div>
        <button type="submit">Registrati</button>
        <p id="messaggioSuccesso" class="successo"></p>
    </form>

    <script src="script.js"></script>
</body>
</html>

script.js:

const form = document.getElementById('formRegistrazione');
const emailInput = document.getElementById('email');
const messaggioErroreEmail = document.getElementById('messaggioErroreEmail');
const messaggioSuccesso = document.getElementById('messaggioSuccesso');

form.addEventListener('submit', function(event) {
    // Impedisce l'invio predefinito del form (che causerebbe un ricaricamento della pagina)
    event.preventDefault();

    const emailValore = emailInput.value.trim(); // .trim() rimuove spazi bianchi all'inizio/fine
    let isValid = true;

    // Reset dei messaggi
    messaggioErroreEmail.textContent = '';
    messaggioSuccesso.textContent = '';
    emailInput.style.borderColor = '#ddd';

    // Validazione semplice dell'email
    if (emailValore === '') {
        messaggioErroreEmail.textContent = 'Il campo email non può essere vuoto.';
        emailInput.style.borderColor = 'red';
        isValid = false;
    } else if (!emailValore.includes('@') || !emailValore.includes('.')) {
        messaggioErroreEmail.textContent = 'Inserisci un indirizzo email valido.';
        emailInput.style.borderColor = 'red';
        isValid = false;
    }

    if (isValid) {
        messaggioSuccesso.textContent = 'Registrazione avvenuta con successo!';
        // Qui potresti inviare i dati a un server con AJAX, ma per ora ci fermiamo qui.
        console.log('Form valido, email:', emailValore);
        form.reset(); // Resetta il form dopo l'invio
    } else {
        console.log('Form non valido.');
    }
});

Questo esempio dimostra come catturare l'evento submit di un form, prevenire il suo comportamento predefinito, validare i dati e fornire feedback all'utente. È un pattern fondamentale per qualsiasi applicazione web interattiva.

Errori Comuni e Suggerimenti per il Debugging

Quando si impara un nuovo linguaggio, è normale incontrare errori. Saperli identificare e correggerli è una competenza cruciale.

Errori Comuni:

  1. Uncaught TypeError: Cannot set properties of null (reading 'textContent') o simili: Questo è probabilmente l'errore più comune per i principianti. Significa che stai cercando di manipolare un elemento HTML che JavaScript non è riuscito a trovare. Le cause più comuni sono:
    • Hai scritto male l'id o la classe dell'elemento nel tuo selettore (getElementById, querySelector, ecc.).
    • Hai posizionato il tag <script> nell'<head> senza l'attributo defer o async, e il tuo script tenta di accedere a elementi HTML prima che il browser li abbia caricati nel DOM. Soluzione: sposta il tag <script> alla fine del <body> o usa defer.
  2. Variabili non definite (Uncaught ReferenceError: variabile non è definita): Hai provato a usare una variabile che non è stata dichiarata o è fuori dal suo scope.
  3. Errore di sintassi (Uncaught SyntaxError): Hai dimenticato una parentesi, una graffa, una virgola, o hai usato una parola chiave in modo errato.
  4. const riassegnata: Hai provato a riassegnare una variabile dichiarata con const.
  5. == vs ===: Usare == può portare a comportamenti inaspettati a causa della coercizione di tipo. Quasi sempre, dovresti usare === per un confronto stretto.

Debugging con la Console del Browser

Il tuo browser è il tuo migliore amico per il debugging. Tutti i browser moderni hanno strumenti per sviluppatori integrati (solitamente accessibili premendo F12 o Ctrl+Shift+I / Cmd+Option+I).

  • Console: La scheda Console è dove JavaScript stampa i messaggi (console.log()) e dove vengono visualizzati gli errori. Usa console.log() abbondantemente per capire il valore delle variabili in diversi punti del tuo codice. 
    let num1 = 10;
let num2 = 5;
console.log('Valore di num1:', num1);
let somma = num1 + num2;
console.log('La somma è:', somma);
  • Sources/Sorgenti: Questa scheda ti permette di vedere i tuoi file JavaScript, impostare breakpoint (punti in cui l'esecuzione del codice si ferma) e ispezionare lo stato delle variabili passo dopo passo. È uno strumento potentissimo per capire il flusso del tuo programma.
  • Elements/Elementi: Qui puoi ispezionare e modificare l'HTML e il CSS della tua pagina in tempo reale. Utile per verificare se le tue manipolazioni DOM stanno avendo l'effetto desiderato.

Prendi l'abitudine di aprire gli strumenti per sviluppatori ogni volta che incontri un problema. La console ti darà quasi sempre un indizio su cosa non funziona e dove.

Prossimi Passi: Il Tuo Viaggio Continua!

Congratulazioni! Hai coperto le basi fondamentali di JavaScript e ora hai gli strumenti per iniziare a costruire pagine web interattive. Ma questo è solo l'inizio. Il mondo di JavaScript è vasto e in continua evoluzione. Ecco alcuni argomenti che potresti voler esplorare successivamente per approfondire le tue conoscenze:

  1. Asincronicità (Promises, Async/Await): Fondamentale per gestire operazioni che richiedono tempo, come il recupero di dati da un server (AJAX/Fetch API), senza bloccare l'interfaccia utente.
  2. API Fetch e AJAX: Impara a fare richieste HTTP a server esterni per caricare o inviare dati senza ricaricare la pagina. Questo è il cuore delle "Single Page Applications" (SPA).
  3. JSON (JavaScript Object Notation): Il formato standard per lo scambio di dati sul web. Capire come lavorare con JSON è cruciale per le comunicazioni con le API.
  4. Oggetti e Programmazione Orientata agli Oggetti (OOP): Approfondisci la creazione di oggetti più complessi, prototipi, classi e ereditarietà in JavaScript.
  5. Moduli JavaScript (ES Modules): Come organizzare il tuo codice in file separati e importarli/esportarli per una migliore modularità e mantenibilità.
  6. Framework e Librerie Front-End: Una volta che ti senti a tuo agio con il "Vanilla JavaScript" (JavaScript puro), esplora librerie come React, Vue.js o Angular. Questi strumenti ti aiuteranno a costruire applicazioni web complesse in modo più efficiente.
  7. Node.js: Se ti interessa il backend, Node.js ti permette di usare JavaScript anche lato server, aprendoti le porte allo sviluppo full-stack.
  8. Test in JavaScript: Impara a scrivere test per il tuo codice per assicurarti che funzioni come previsto e per prevenire regressioni.

Ricorda, la pratica è la chiave. Continua a costruire piccoli progetti, a sperimentare con il codice e a non aver paura di sbagliare. Ogni errore è un'opportunità per imparare. Buona fortuna nel tuo percorso di programmazione web con JavaScript!

Continua a leggere