Introduzione a JavaScript
JavaScript è un linguaggio di programmazione che consente di aggiungere interattività e dinamismo alle pagine web. Mentre HTML fornisce la struttura e CSS gestisce lo stile, JavaScript permette di manipolare il comportamento degli elementi di una pagina web in risposta alle azioni dell’utente, come clic del mouse, invio di form e movimenti del mouse.
Dove Viene Utilizzato JavaScript?
JavaScript è usato principalmente per:
- Interattività: Aggiungere elementi interattivi come menu a discesa, modali e caroselli.
- Manipolazione del DOM: Modificare in tempo reale la struttura del documento HTML.
- Validazione dei Form: Verificare che i dati inseriti dagli utenti siano corretti prima di inviarli al server.
- Comunicazione Asincrona (AJAX): Scambiare dati con un server in background senza ricaricare l’intera pagina.
- Animazioni: Creare animazioni fluide e reattive.
- Gestione degli Eventi: Rispondere agli eventi dell’utente come clic, pressioni dei tasti o spostamenti del mouse.
Aggiungere JavaScript a un Documento HTML
Ci sono tre modi principali per includere JavaScript in una pagina web:
- Script Inline:
- JavaScript può essere inserito direttamente all’interno di un elemento HTML usando l’attributo
onclick,onload, etc. - Esempio:
- JavaScript può essere inserito direttamente all’interno di un elemento HTML usando l’attributo
<button onclick="alert('Ciao, Mondo!')">Clicca qui</button>- Script Interno:
- JavaScript può essere inserito direttamente all’interno della pagina HTML tra i tag
<script>. - Esempio:
- JavaScript può essere inserito direttamente all’interno della pagina HTML tra i tag
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>- Script Esterno:
- JavaScript può essere inserito in un file separato con estensione
.js, collegato alla pagina HTML usando il tag<script>con l’attributosrc. - Esempio:
- JavaScript può essere inserito in un file separato con estensione
<script src="script.js"></script>Nel file script.js:
document.getElementById("demo").innerHTML = "Hello JavaScript!";Sintassi di Base di JavaScript
JavaScript ha una sintassi semplice e simile a molti altri linguaggi di programmazione. Ecco alcune delle basi:
- Variabili: Dichiarazione di variabili per memorizzare dati.
var nome = "Mario";
let età = 25;
const città = "Roma";- Operatori: Usati per eseguire operazioni sui valori.
let somma = 5 + 10;
let prodotto = 5 * 10;
let confronto = 5 > 3; // true- Condizioni: Eseguire codice in base a determinate condizioni.
if (età >= 18) {
console.log("Sei maggiorenne");
} else {
console.log("Sei minorenne");
}- Cicli: Eseguire ripetutamente una serie di istruzioni.
for (let i = 0; i < 5; i++) {
console.log(i);
}- Funzioni: Blocchi di codice riutilizzabili.
function saluta(nome) {
return "Ciao, " + nome + "!";
}
console.log(saluta("Mario"));Manipolazione del DOM (Document Object Model)
Il DOM è una rappresentazione strutturata di un documento HTML come un albero di nodi. JavaScript può accedere e modificare il DOM per cambiare dinamicamente il contenuto e la struttura della pagina.
Esempi di manipolazione del DOM:
- Selezionare Elementi:
let paragrafo = document.getElementById("demo");
let bottoni = document.getElementsByClassName("btn");
let paragrafi = document.querySelectorAll("p");- Modificare Contenuto:
document.getElementById("demo").innerHTML = "Nuovo contenuto!";- Modificare Stili:
document.getElementById("demo").style.color = "blue";- Aggiungere o Rimuovere Elementi:
let nuovoParagrafo = document.createElement("p");
nuovoParagrafo.innerHTML = "Paragrafo aggiunto dinamicamente.";
document.body.appendChild(nuovoParagrafo);
document.getElementById("demo").remove();Eventi in JavaScript
JavaScript gestisce gli eventi, che sono azioni scatenate dagli utenti o dal browser, come clic di un pulsante, caricamento di una pagina o invio di un modulo.
Esempio di gestione di eventi:
document.getElementById("myButton").addEventListener("click", function() {
alert("Hai cliccato il pulsante!");
});Esempio Completo: Cambio di Colore di Sfondo
Ecco un esempio semplice di come utilizzare JavaScript per cambiare il colore di sfondo della pagina quando si preme un pulsante:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Esempio JavaScript</title>
</head>
<body>
<h1 id="titolo">Cambia il colore di sfondo</h1>
<button onclick="cambiaColore()">Clicca qui</button>
<script>
function cambiaColore() {
document.body.style.backgroundColor = "lightblue";
}
</script>
</body>
</html>Conclusione
JavaScript è uno strumento essenziale per rendere le pagine web interattive e dinamiche. La sua capacità di manipolare il DOM, gestire eventi e comunicare con il server lo rende un componente chiave nello sviluppo web moderno. Con una conoscenza di base di JavaScript, puoi creare esperienze utente ricche e coinvolgenti.
