JavaScript è uno dei linguaggi di programmazione più popolari al mondo, utilizzato per aggiungere interattività e dinamicità ai siti web. Con JavaScript, puoi creare animazioni, gestire eventi dell’utente, validare moduli e molto altro. In questa guida, ti mostreremo come iniziare a usare JavaScript per migliorare il tuo sito web. 

Puoi aggiungere JavaScript a una pagina HTML in due modi: inline o come file esterno. Per iniziare, apri il file HTML che hai creato nella guida precedente e aggiungi il seguente codice prima della chiusura del tag </body>: 

<script>

    // Questo è un semplice script JavaScript

    alert("Benvenuto nel mio sito web!");

</script>

Questo codice mostrerà un messaggio di alert quando la pagina viene caricata. Se preferisci usare un file esterno, crea un nuovo file chiamato script.js e aggiungi il codice JavaScript lì. Poi, collega il file al tuo HTML aggiungendo questa riga prima della chiusura del tag </body>: 

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

JavaScript è un linguaggio versatile e potente. Ecco alcuni concetti di base che devi conoscere:

• Variabili: Le variabili sono utilizzate per memorizzare dati. Puoi dichiarare una variabile con let, const o var. Ad esempio:

let nome = "Mario";

const eta = 30;

Funzioni: Le funzioni sono blocchi di codice riutilizzabili. Puoi definirle con la parola chiave function. Ad esempio: 

function saluta() {

    alert("Ciao, " + nome + "!");

}

Eventi: JavaScript ti permette di rispondere alle azioni dell’utente, come clic o input. Ad esempio, puoi aggiungere un evento al clic di un pulsante: 

document.querySelector("button").addEventListener("click", saluta);

Esempio Pratico: Validazione di un Modulo

Un uso comune di JavaScript è la validazione dei moduli. Ecco un esempio semplice:

<form id="modulo">

    <input type="text" id="nome" placeholder="Inserisci il tuo nome">

    <button type="submit">Invia</button>

</form>

<script>

    document.getElementById("modulo").addEventListener("submit", function(event) {

        let nome = document.getElementById("nome").value;

        if (nome === "") {

            alert("Il campo nome è obbligatorio!");

            event.preventDefault(); // Impedisce l’invio del modulo

        }

    });

</script>

Questo script controlla se il campo nome è vuoto e mostra un messaggio di alert se non è stato compilato. 

Aggiungere Animazioni con JavaScript

JavaScript può essere usato per creare animazioni dinamiche. Ad esempio, puoi far apparire e scomparire un elemento:

<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>

<button id="toggleButton">Mostra/Nascondi</button>

<script>

    document.getElementById("toggleButton").addEventListener("click", function() {

        let box = document.getElementById("box");

        if (box.style.display === "none") {

            box.style.display = "block";

        } else {

            box.style.display = "none";

        }

    });

</script>

Questo script alterna la visibilità di un quadrato rosso quando si clicca sul pulsante.