Impara JavaScript da zero con la guida più completa in italiano: tutti gli argomenti dalle variabili agli oggetti, dagli array al DOM, fino a RegExp, Set, Map ed eventi. Ogni capitolo ha esempi col codice colorato e l'editor “Provalo tu” che esegue davvero il codice.
Corso di JavaScript completo in italiano
Benvenuto nel corso di JavaScript più completo in italiano. JavaScript è il linguaggio di programmazione del web: rende le pagine interattive e dinamiche ed è oggi usato anche fuori dal browser (server, app, giochi) grazie a Node.js.
In questo corso trovi tutti gli argomenti, dalle variabili agli oggetti, dagli array alle espressioni regolari, fino alla manipolazione della pagina (DOM) e agli eventi. Ogni capitolo ha esempi col codice colorato e l'editor “Provalo tu” che esegue davvero il codice nel browser.
💡 HTML, CSS e JavaScript: l'HTML è la struttura, il CSS è l'aspetto e JavaScript è il comportamento. Insieme formano le basi dello sviluppo web.
Esempio
Introduzione a JavaScript
JavaScript nasce nel 1995 e oggi è uno dei linguaggi più usati al mondo. Gira direttamente nel browser, quindi non serve installare nulla per iniziare. Permette di reagire ai clic, validare i form, aggiornare i contenuti senza ricaricare la pagina e molto altro.
È un linguaggio interpretato (eseguito riga per riga).
È dinamico: le variabili possono cambiare tipo.
Funziona ovunque: browser, server (Node.js), app mobili e desktop.
Dove inserire JavaScript
Il codice JavaScript si inserisce nell'elemento <script>. Può stare nel <head>, nel <body> (di solito alla fine, per caricare prima i contenuti) oppure in un file esterno.js collegato con <script src="file.js">.
⭐ Mettere lo script appena prima di </body> velocizza il caricamento: la pagina appare subito e poi parte il codice.
Esempio
Mostrare i risultati (output)
JavaScript può mostrare i dati in vari modi: document.write() (scrive nella pagina), innerHTML (cambia il contenuto di un elemento), alert() (finestra pop-up), console.log() (nella console per sviluppatori, ottimo per il debug).
Esempio
La sintassi e le variabili
Le variabili memorizzano dati e si dichiarano con let (modificabili), const (costanti) o var (vecchio stile). Le istruzioni terminano con il punto e virgola. JavaScript distingue maiuscole e minuscole.
Esempio
Gli operatori
Gli operatori principali:
Aritmetici:+ - * / % **
Assegnazione:= += -= *=
Confronto:== === != > < >= <=
Logici:&& (e), || (o), ! (non)
💡 Usa sempre === (uguaglianza stretta) invece di ==: confronta valore e tipo, evitando sorprese.
Esempio
Le condizioni (if/else)
Le condizioni eseguono codice diverso a seconda di un test. Si usano if, else if, else, e lo switch per molti casi. Esiste anche l'operatore ternario condizione ? a : b.
Esempio
I cicli (for, while)
I cicli ripetono istruzioni. Il for per un numero noto di volte, il while finché una condizione è vera, il for...of per scorrere gli array, il for...in per gli oggetti. break interrompe, continue salta un giro.
Esempio
Le stringhe
Le stringhe sono testo tra apici. Hanno proprietà e metodi utili: length, toUpperCase(), toLowerCase(), indexOf(), slice(), replace(), split(). I template literal con i backtick permettono di inserire variabili con ${...}.
Esempio
I numeri
JavaScript ha un unico tipo numerico (interi e decimali). Metodi utili: toFixed(n) (decimali), parseInt() e parseFloat() (da stringa a numero), Number(), isNaN() (verifica “non è un numero”).
Esempio
Le funzioni
Una funzione è un blocco riutilizzabile che riceve parametri e può restituire un valore con return. Si possono scrivere come dichiarazione, come espressione o come arrow function (=>), la forma moderna più compatta.
Esempio
Gli oggetti
Un oggetto raggruppa dati correlati in coppie chiave: valore (le proprietà) e può contenere funzioni (i metodi). Si accede con la notazione punto oggetto.proprietà.
Esempio
Lo scope (visibilità)
Lo scope determina dove una variabile è accessibile. Le variabili let e const hanno scope di blocco (valgono solo tra le graffe in cui sono dichiarate); quelle dichiarate fuori da ogni funzione sono globali. Limitare lo scope evita errori e conflitti.
Esempio
Le date
L'oggetto Date gestisce date e orari. Si crea con new Date() e offre metodi come getFullYear(), getMonth(), getDate(), getHours().
Esempio
Temporal (nuova API date)
Temporal è la nuova API moderna per gestire date e orari, pensata per risolvere i limiti storici dell'oggetto Date (fusi orari, calcoli, immutabilità). È ancora in fase di adozione nei browser, ma rappresenta il futuro della gestione del tempo in JavaScript.
🆕 Argomento avanzato e recente: per ora, nei progetti reali, si usa ancora Date o librerie come date-fns.
Gli array
Gli array sono liste ordinate di valori, indicizzate da 0. Metodi fondamentali: push()/pop() (fine), shift()/unshift() (inizio), map(), filter(), forEach(), find(), length.
Esempio
I Set (insiemi)
Un Set è una collezione di valori unici: i duplicati vengono ignorati automaticamente. Utile per eliminare i doppioni da un array. Metodi: add(), has(), delete(), size.
Esempio
Le Map (mappe)
Una Map associa chiavi a valori, come un oggetto, ma le chiavi possono essere di qualsiasi tipo e mantiene l'ordine di inserimento. Metodi: set(), get(), has(), delete(), size.
Esempio
Le iterazioni
Iterare significa scorrere gli elementi di una collezione. Oltre ai cicli classici, JavaScript offre forEach() per gli array, for...of per i valori e for...in per le chiavi degli oggetti.
Esempio
L'oggetto Math
L'oggetto Math offre funzioni matematiche: Math.round() (arrotonda), Math.floor()/Math.ceil() (giù/su), Math.sqrt() (radice), Math.max()/Math.min(), Math.random() (numero casuale tra 0 e 1).
Esempio
Le espressioni regolari (RegExp)
Le espressioni regolari descrivono schemi di testo per cercare, validare o sostituire. Si scrivono tra slash /schema/ e si usano con metodi come test() (verifica) e replace(). Utilissime per validare email, telefoni, password.
Esempio
I tipi di dato
I tipi primitivi sono: string (testo), number (numeri), boolean (true/false), undefined, null, bigint e symbol. Poi ci sono gli object (array, oggetti, funzioni). L'operatore typeof rivela il tipo di un valore.
Esempio
La gestione degli errori
Per gestire gli errori senza bloccare il programma si usa try...catch: il codice rischioso va nel try, e se genera un errore viene eseguito il catch. Con throw si possono lanciare errori personalizzati e con finally si esegue del codice in ogni caso.
Esempio
Il debugging
Il debugging è la ricerca e correzione degli errori. Strumenti principali: console.log() per ispezionare i valori, gli strumenti per sviluppatori del browser (tasto F12), i breakpoint per fermare l'esecuzione riga per riga, e l'istruzione debugger.
⭐ Apri la Console del browser con F12 e prova a stampare variabili con console.log(): è il primo strumento di ogni programmatore.
Le buone pratiche (style guide)
Scrivere codice ordinato lo rende leggibile e mantenibile:
Nomi di variabili chiari e in camelCase.
Usa const di default, let se serve modificare; evita var.
Indentazione coerente (2 o 4 spazi) e punto e virgola.
Commenta il perché, non l'ovvio.
Le versioni (ES6 e oltre)
JavaScript segue lo standard ECMAScript. La svolta è stata ES6 (2015), che ha introdotto let/const, le arrow function, i template literal, le classi e i moduli. Da allora esce una versione ogni anno (ES2016, ES2017, …) con nuove funzionalità.
Il DOM (modificare la pagina)
Il DOM (Document Object Model) è la rappresentazione ad albero della pagina HTML. Con JavaScript puoi selezionare elementi (getElementById, querySelector) e modificarne contenuto (innerHTML), stile (style) e attributi.
Esempio
Gli eventi
Gli eventi sono azioni a cui la pagina può reagire: clic (click), passaggio del mouse (mouseover), pressione di tasti (keydown), invio di un form (submit). Si gestiscono con attributi come onclick o, meglio, con addEventListener().
Esempio
JS HTML First — prima l'HTML, poi JavaScript
Una regola d'oro per chi inizia: prima si costruisce la pagina con l'HTML, poi la si rende interattiva con JavaScript. JavaScript non disegna la struttura: la manipola. Per questo conviene sempre avere già pronti gli elementi HTML (con i loro id) e solo dopo agganciarli con il codice.
Esempio
⭐ Metti il tag <script> appena prima di </body>: così l'HTML è già caricato quando JavaScript va a cercarlo.
JS Functions avanzate
Le funzioni in JavaScript sono valori a tutti gli effetti: puoi assegnarle a variabili, passarle come argomento e restituirle. Da qui nascono le arrow function, le callback e le closure.
Esempio
💡 Una closure è una funzione che continua ad accedere alle variabili del punto in cui è stata creata, anche dopo che quella funzione esterna è terminata.
JS Objects avanzati
Gli oggetti raggruppano dati (proprietà) e comportamenti (metodi). In JavaScript avanzato usi destructuring, spread e i metodi di Object per lavorarci comodamente.
Esempio
JS Classes
Le classi sono modelli per creare oggetti dello stesso tipo. Il constructor inizializza le proprietà, e con extends una classe può ereditare da un'altra.
Esempio
JS Asynchronous (Promise, async/await)
JavaScript è asincrono: alcune operazioni (come scaricare dati) richiedono tempo e non bloccano il resto del codice. Si gestiscono con le Promise e la sintassi moderna async/await.
Esempio
⭐ await mette in pausa la funzione finché la Promise non si risolve, rendendo il codice asincrono leggibile come quello normale.
JS Modules
I moduli permettono di dividere il codice in più file e riutilizzarlo con export e import. Si attivano con <script type="module">.
// file utili.js
export function somma(a, b){ return a + b; }
// file main.js
import { somma } from './utili.js';
console.log( somma(2, 3) ); // 5
💡 I moduli evitano di avere un unico file enorme e prevengono conflitti tra variabili con lo stesso nome.
JS Meta & Proxy
Un Proxy è un oggetto che “avvolge” un altro oggetto e intercetta le operazioni (lettura, scrittura) tramite dei trap. Insieme a Reflect è la base della meta-programmazione in JavaScript.
Esempio
JS Typed Arrays
Gli array tipizzati (come Int8Array, Float32Array) gestiscono dati binari grezzi in modo efficiente: utili per grafica, audio, file e prestazioni elevate.
const numeri = new Int16Array(3); // tre interi a 16 bit
numeri[0] = 100;
numeri[1] = 250;
console.log(numeri.length); // 3
JS DOM Navigation
Il DOM è un albero: da ogni nodo puoi spostarti verso genitori, figli e fratelli per leggere o modificare la pagina.
Proprietà
Restituisce
parentElement
Il genitore dell'elemento
children
I figli (solo elementi)
firstElementChild
Il primo figlio
nextElementSibling
Il fratello successivo
JS Windows (oggetto window e BOM)
L'oggetto window rappresenta la finestra del browser (BOM, Browser Object Model). Da qui accedi a dimensioni dello schermo, URL, cronologia, timer e finestre di dialogo.
Membro
Cosa fa
window.innerWidth
Larghezza della finestra
window.location
URL della pagina
window.history
Cronologia di navigazione
setTimeout() / setInterval()
Timer
alert() / prompt()
Finestre di dialogo
JS Web API
Le Web API sono funzionalità che il browser mette a disposizione di JavaScript, oltre al linguaggio in sé: Web Storage, Fetch, Geolocation, Canvas, Web Workers e molte altre.
Esempio — Web Storage API
JS AJAX (Fetch API)
AJAX permette di caricare dati dal server senza ricaricare la pagina. Oggi si usa la moderna fetch(), che restituisce una Promise.
fetch('https://api.example.com/dati')
.then(risposta => risposta.json())
.then(dati => console.log(dati))
.catch(errore => console.log('Errore:', errore));
// versione con async/await
async function carica(){
const r = await fetch('/dati');
const dati = await r.json();
console.log(dati);
}
💡 AJAX significa “Asynchronous JavaScript And XML”, ma oggi i dati viaggiano quasi sempre in formato JSON.
JS JSON
JSON (JavaScript Object Notation) è il formato standard per scambiare dati sul web. Si converte con JSON.stringify() (oggetto → testo) e JSON.parse() (testo → oggetto).
Esempio
JS jQuery
jQuery è una storica libreria JavaScript che semplifica selezione di elementi, eventi e animazioni con la sintassi $(). Oggi il JavaScript moderno copre quasi tutto, ma jQuery si incontra ancora in molti progetti esistenti.
⭐ Impara prima il JavaScript “puro”: capirai jQuery in pochi minuti e saprai quando (non) serve.
JS Graphics (Canvas)
Con JavaScript e l'elemento <canvas> puoi disegnare grafica, grafici e semplici giochi direttamente nel browser.
Esempio
Esempi JavaScript pronti da copiare
Il modo migliore per imparare JavaScript è partire da esempi già funzionanti: copiali, aprili nell'editor “Provalo tu” e modificali. Ogni esempio di questo corso è anche un piccolo esercizio.
Contatore di clic
Editor JavaScript online (Provalo tu)
Su questo corso hai un editor JavaScript online gratuito integrato. Ogni esempio ha il pulsante “Provalo tu ▶” che apre l'editor a schermo intero, con il codice da una parte e il risultato dall'altra.
Clicca “Provalo tu” su un esempio.
Modifica il codice JavaScript dentro il blocco <script>.
Premi ▶ Esegui e guarda subito il risultato.
Quiz JavaScript — metti alla prova le tue conoscenze
Un breve quiz di JavaScript per autovalutarti. Pensa alla risposta e poi apri la soluzione.
1. Quale parola chiave dichiara una variabile che non cambia?
✅ "object" — in JavaScript gli array sono oggetti. Per verificarli si usa Array.isArray().
4. Differenza tra == e ===?
✅ == confronta i valori convertendo i tipi; === confronta valore e tipo (consigliato).
5. Cosa fa array.map()?
✅ Crea un nuovo array trasformando ogni elemento di quello originale.
Esercizi JavaScript con soluzioni (per principianti)
Questi esercizi di JavaScript svolti sono pensati per chi vuole fare pratica con esempi reali. Per ognuno c'è la consegna e la soluzione commentata: prova prima da solo, poi confronta. Sono gli stessi esercizi di JavaScript che assegno ai miei studenti durante le ripetizioni a Roma.
Esercizio 1 — Saluto personalizzato Base
Chiedi il nome all'utente con prompt() e mostra un saluto.
Mostra soluzione
const nome = prompt("Come ti chiami?");
alert("Ciao " + nome + "!");
Esercizio 2 — Pari o dispari Base
Scrivi una funzione che dato un numero restituisce "pari" o "dispari".
Mostra soluzione
function pariDispari(n){
return n % 2 === 0 ? "pari" : "dispari";
}
console.log( pariDispari(7) ); // dispari
Esercizio 3 — Somma di un array Medio
Calcola la somma di tutti i numeri di un array.
Mostra soluzione
const numeri = [4, 8, 15, 16, 23, 42];
const somma = numeri.reduce((tot, n) => tot + n, 0);
console.log(somma); // 108
Esercizio 4 — Cambia testo al clic Medio
Quando si clicca un pulsante, cambia il testo di un paragrafo.
⭐ Apri ogni soluzione nell'editor “Provalo tu” e modificala: cambiare il codice è il modo migliore per fissare i concetti.
Sfide JavaScript — esercizi avanzati senza soluzione
Le sfide JavaScript sono esercizi più impegnativi, senza soluzione data: l'obiettivo è ragionare e costruire da soli.
🎯 Sfida 1 — To-do list
Crea una lista di cose da fare: aggiungi attività, spuntale come completate e salvale nel localStorage così restano dopo aver chiuso il browser.
🎯 Sfida 2 — Calcolatrice
Realizza una calcolatrice funzionante con i quattro operatori, gestendo anche la divisione per zero.
🎯 Sfida 3 — Orologio digitale
Mostra l'ora corrente che si aggiorna ogni secondo usando setInterval e l'oggetto Date.
Programma del corso JavaScript (syllabus)
Questo è il programma completo del corso di JavaScript, l'elenco ordinato degli argomenti dal principiante all'avanzato. È lo stesso syllabus che seguo in classe e nelle ripetizioni.
Basi: sintassi, variabili, operatori, condizioni e cicli.
Dati: stringhe, numeri, array, oggetti, set e map.
Funzioni: funzioni, scope, arrow function e closure.
DOM ed eventi: selezionare e modificare la pagina, gestire i clic.
Avanzato: classi, asincronia, moduli, JSON, Fetch/AJAX, Web API.
Pratica: esempi, esercizi, sfide e mini-progetti interattivi.
Piano di studio JavaScript
Quanto ci vuole per imparare JavaScript? Le basi in una/due settimane. Ecco un piano di studio realistico studiando circa un'ora al giorno.
Giorno
Cosa studiare
1–2
Sintassi, variabili, operatori, condizioni
3
Cicli, stringhe e numeri
4
Array e oggetti
5
Funzioni, scope e arrow function
6
DOM ed eventi
7
Asincronia, JSON, esercizi e sfide
Preparazione al colloquio — domande JavaScript frequenti
Le domande di JavaScript più frequenti ai colloqui per ruoli web (front-end). Utili anche per le interrogazioni a scuola.
Differenza tra var, let e const?
var è vecchio e ha scope di funzione; let e const hanno scope di blocco. const non si riassegna.
Cos'è una closure?
Una funzione che mantiene accesso alle variabili del contesto in cui è stata creata, anche dopo la fine di quella funzione esterna.
Cosa significa che JavaScript è asincrono?
Operazioni lunghe (rete, timer) non bloccano il codice: si gestiscono con callback, Promise e async/await.
Differenza tra null e undefined?
undefined: variabile dichiarata ma senza valore; null: assenza di valore impostata volontariamente.
Bootcamp JavaScript — percorso intensivo
Un bootcamp JavaScript condensa la teoria nella pratica continua. Per imparare velocemente, alterna ogni argomento con un esercizio immediato:
✅ Studia un argomento (max 20 minuti).
✅ Riproduci l'esempio nell'editor “Provalo tu”.
✅ Svolgi un esercizio collegato senza guardare la soluzione.
✅ Ripeti con l'argomento successivo.
💡 Vuoi un bootcamp JavaScript seguito di persona a Roma? Con le ripetizioni in presenza costruiamo insieme un percorso su misura, dalla prima variabile alla prima web app.
Riepilogo JavaScript — i concetti chiave
Un riepilogo veloce di JavaScript da ripassare prima di una verifica o un colloquio:
📌 JavaScript rende interattive le pagine web.
📌 Variabili con let e const; usa === per i confronti.
📌 Array e oggetti sono le strutture dati di base.
📌 Le funzioni sono valori: callback, arrow function, closure.
📌 Il DOM permette di leggere e modificare la pagina; gli eventi reagiscono all'utente.
📌 L'asincronia (Promise, async/await, fetch) gestisce dati e tempo.
Riferimento — Metodi delle stringhe
Metodo
Cosa fa
length
Numero di caratteri
toUpperCase()
Tutto maiuscolo
includes()
Verifica se contiene un testo
slice()
Estrae una porzione
replace()
Sostituisce del testo
split()
Divide in un array
Riferimento — Metodi degli array
Metodo
Cosa fa
push() / pop()
Aggiunge / rimuove in fondo
map()
Trasforma ogni elemento
filter()
Tiene solo gli elementi che superano un test
reduce()
Riduce a un singolo valore (es. somma)
find()
Trova il primo elemento che corrisponde
forEach()
Esegue una funzione per ogni elemento
Riferimento — Metodi dei numeri
Metodo
Cosa fa
toFixed(2)
Arrotonda a N decimali
parseInt()
Testo → numero intero
parseFloat()
Testo → numero decimale
Number.isInteger()
Verifica se è un intero
Riferimento — Oggetto Math
Funzione
Cosa fa
Math.round()
Arrotonda all'intero più vicino
Math.floor() / Math.ceil()
Arrotonda per difetto / eccesso
Math.random()
Numero casuale tra 0 e 1
Math.max() / Math.min()
Massimo / minimo
Riferimento — Metodi delle date
Metodo
Restituisce
new Date()
Data e ora attuali
getFullYear()
L'anno
getMonth()
Il mese (0–11)
getDate()
Il giorno del mese
getHours()
L'ora
Riferimento — Metodi del DOM
Metodo
Cosa fa
getElementById()
Seleziona per id
querySelector()
Seleziona con un selettore CSS
createElement()
Crea un nuovo elemento
appendChild()
Aggiunge un figlio
addEventListener()
Aggancia un evento
Riferimento — Eventi JavaScript
Evento
Quando scatta
click
Al clic
input
Mentre si digita in un campo
submit
All'invio di un form
keydown
Alla pressione di un tasto
load
Al caricamento della pagina
Riferimento — Operatori JavaScript
Operatore
Significato
=== / !==
Uguaglianza / diversità stretta
&& / ||
AND / OR logici
?:
Operatore ternario (if compatto)
??
Valore di riserva se null/undefined
...
Spread / rest
Riferimento — Parole chiave JavaScript
Parola chiave
Uso
let / const
Dichiarare variabili
function
Definire una funzione
return
Restituire un valore
if / else
Condizioni
for / while
Cicli
class / extends
Classi ed ereditarietà
async / await
Codice asincrono
Certificato JavaScript
Vuoi una certificazione di JavaScript da mostrare nel CV? Al termine di questo corso hai le competenze per affrontare i test di certificazione online più diffusi e, soprattutto, per costruire pagine e app web interattive reali.
Se sei un mio studente, posso rilasciarti un attestato di partecipazione al percorso di JavaScript svolto durante le ripetizioni in presenza a Roma, con l'elenco degli argomenti e dei progetti realizzati.
⭐ Il vero “certificato” è il tuo portfolio: una web app che hai costruito da solo vale più di qualsiasi attestato.
Conclusione
Complimenti! 🎉 Hai completato il corso di JavaScript completo e gratuito in italiano: dalle basi (variabili, condizioni, cicli) ad array e oggetti, dal DOM e gli eventi fino a classi, asincronia, moduli, JSON, Fetch/AJAX e Web API, con esercizi, sfide e riferimenti. Ora sai rendere interattiva qualsiasi pagina web.
Il modo migliore per imparare JavaScript è fare pratica ogni giorno: rifai gli esercizi JavaScript, affronta le sfide e prova a costruire una piccola web app.
E ora?
Con HTML, CSS e JavaScript hai la triade completa dello sviluppo web front-end. Il prossimo passo è approfondire framework moderni o il back-end (database, server). Se vuoi un percorso guidato passo passo o aiuto per una verifica, posso seguirti con le ripetizioni di informatica in presenza a Roma.
🎯 La tua sfida finale
Costruisci una piccola to-do list: aggiungi attività, spuntale come completate e salvale nel localStorage così restano anche dopo aver chiuso il browser.
