Inserire JavaScript in HTML: tag script e primo Hello World
verificato il 7 Settembre 2026 · 6 min
Per aggiungere JavaScript a una pagina HTML, crea un file app.js e caricalo con <script src="app.js" defer></script> nel head, oppure subito prima di </body> senza defer. Scrivi console.log('Hello World'); nel file, apri la pagina e la console (F12): il messaggio compare.
Questo primo capitolo prepara tutto ciò che serve ai successivi: una pagina HTML, un file JavaScript collegato a quella pagina e due modi per mostrare un messaggio e verificare che il collegamento funzioni. Bastano venti minuti. Alla fine avrai scritto ed eseguito il tuo primo programma JavaScript in un browser.
Che cos’è JavaScript (e che cosa non è)
JavaScript è il linguaggio di programmazione dei browser web. L’HTML descrive il contenuto di una pagina, il CSS il suo aspetto, JavaScript il suo comportamento: reagire a un clic, controllare un form, modificare il testo di un elemento, caricare dei dati. Ogni browser include un motore che legge ed esegue questo codice.
Due precisazioni che ti risparmiano ricerche inutili:
- JavaScript non ha niente a che vedere con Java. Il nome risale al 1995 e a una scelta di marketing. I due linguaggi non condividono né la sintassi né gli usi.
- Non si limita più al browser. Con Node.js, lo stesso linguaggio scrive server e strumenti. Questo tutorial resta nel browser: è l’ambiente più semplice per imparare ed è già installato sulla tua macchina.
Creare la pagina HTML di partenza
Apri un editor di codice (Visual Studio Code va benissimo) e crea una cartella tutoriel-js. Al suo interno, un file index.html con la struttura minima di un documento:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon premier script</title>
</head>
<body>
<h1>Bonjour</h1>
<!-- Le contenu de votre site ira ici -->
</body>
</html>Apri questo file nel browser (doppio clic, oppure trascinalo nella finestra). La pagina mostra «Bonjour». Per ora niente JavaScript.
Il tag script: dove mettere il JavaScript
Il JavaScript entra in una pagina con il tag <script>. Può contenere il codice direttamente, oppure puntare a un file esterno con l’attributo src. Le posizioni possibili sono tre, e la scelta ha delle conseguenze.
Alla fine del body: semplice e sicuro
<body>
<h1>Bonjour</h1>
<script src="app.js"></script>
</body>Il browser legge l’HTML dall’alto verso il basso. Quando arriva al tag, l’h1 esiste già: lo script può manipolarlo. È la posizione classica e funziona sempre.
Nel head con defer: la scrittura moderna
<head>
<meta charset="UTF-8">
<title>Mon premier script</title>
<script src="app.js" defer></script>
</head>defer chiede al browser di scaricare il file subito, ma di eseguirlo solo quando l’HTML è stato letto per intero. Ottieni il meglio dei due: il download parte presto, il codice viene eseguito quando la pagina è pronta. Gli script defer vengono eseguiti nell’ordine in cui sono scritti.
Nel head senza niente: l’errore classico
<head>
<script src="app.js"></script> <!-- s'exécute avant que le body existe -->
</head>Qui lo script viene eseguito prima che l’h1 sia costruito. Qualsiasi tentativo di leggerlo restituisce null, e in console compare l’errore «Cannot read properties of null». Se incontri questo errore al capitolo 9, controlla prima di tutto dove hai messo il tag.
Anche async scarica in parallelo, ma esegue lo script appena è arrivato, senza aspettare l’HTML né gli altri script. È utile per uno script indipendente (le statistiche di traffico, per esempio), non per del codice che manipola la pagina. Per questo tutorial, ricorda defer.
Script inline o file esterno?
Il codice si può anche scrivere direttamente nella pagina:
<script>
console.log('Hello World');
</script>Comodo per una prova di tre righe, pessimo per tutto il resto: il codice non è riutilizzabile da una pagina all’altra, non viene messo in cache dal browser e si mescola all’HTML. Da questo capitolo in poi lavoriamo in un file separato, app.js, messo accanto a index.html.
Primo codice: «Hello World» con alert()
Crea app.js nella stessa cartella di index.html e collegalo con il tag defer visto sopra. Nel file:
alert('Hello World!');Ricarica la pagina: una finestra di dialogo mostra il messaggio. alert() è una funzione del browser che blocca la pagina finché non fai clic su OK. Serve a verificare che uno script venga eseguito; in un sito vero non si usa, perché interrompe l’utente.
Lo strumento vero: console.log() e la console del browser
Sostituisci il contenuto di app.js:
console.log('Hello World!');
console.log('Titre de la page :', document.title);
console.log(2 + 3);Ricarica: sullo schermo non cambia niente. Apri gli strumenti di sviluppo con il tasto F12 (oppure clic destro, «Ispeziona»), poi la scheda Console. Le tre righe compaiono lì:
Hello World!
Titre de la page : Mon premier script
5La console è il posto in cui JavaScript parla. Mostra quello che le chiedi con console.log(), ma anche tutti gli errori, con il nome del file e il numero di riga. Tienila aperta per tutto il tutorial: è il tuo primo strumento di debug e permette perfino di scrivere JavaScript direttamente, senza file, per provare un’idea.
I tuoi primi errori, e come leggerli
Se non compare niente, la console dice perché. I tre casi più frequenti a questo punto:
- «Failed to load resource: 404»: il file
app.jsnon viene trovato. Controlla che sia davvero nella stessa cartella diindex.htmle che il nome sia identico, maiuscole comprese. - «Uncaught SyntaxError»: un errore di battitura nel codice, spesso una parentesi o un apice non chiusi. Il numero di riga ti ci porta.
- Niente del tutto, nemmeno un errore: il browser mostra una versione in cache. Ricarica con Ctrl+F5 (Cmd+Maiusc+R su Mac).
Riepilogo
- Il JavaScript entra in una pagina con
<script src="app.js" defer></script>nelhead, oppure con lo stesso tag senzadeferalla fine delbody. - Un file esterno è meglio di uno script inline non appena il codice supera qualche riga.
alert()conferma che uno script gira;console.log()e la console (F12) sono gli strumenti di tutti i giorni.- Un errore si legge nella console: file, riga, messaggio.
Nel capitolo successivo, Variabili e tipi di dati, il programma comincia a memorizzare dei valori. E se preferisci prima una visione d’insieme del percorso, la guida per imparare JavaScript presenta i dodici capitoli e un piano di trenta giorni.
document.title. Verifica che l'ordine dei due messaggi sia davvero quello del tuo codice.Errori frequenti
script nel head senza defer viene eseguito prima che la pagina sia costruita: document.querySelector('h1') restituisce null. Aggiungi defer, oppure metti il tag alla fine del body.src="app.js" cerca il file accanto alla pagina HTML. La scheda Rete degli strumenti di sviluppo mostra il 404; la console scrive «Failed to load resource».App.js e app.js sono due file diversi sulla maggior parte dei server, anche se in locale Windows li confonde.