Script HTML
In HTML, uno script è un piccolo programma incorporato che aggiunge interattività al sito. Scopri come aggiungere script con W3Docs.
Uno script è un piccolo frammento di codice incorporato nelle pagine web per renderle dinamiche e interattive. Ad esempio, con gli script puoi creare un messaggio pop-up, un menu a discesa o validare un modulo prima che venga inviato. JavaScript è il linguaggio di scripting più comune utilizzato sui siti web.
Questa pagina spiega come aggiungere JavaScript a un documento HTML, dove posizionare l'elemento <script>, come controllare quando viene eseguito con defer e async, e come fornire un'alternativa per gli utenti senza JavaScript. Per l'elenco completo degli attributi di <script>, consulta il riferimento al tag <script> dedicato.
Come aggiungere script
L'elemento <script> contiene codice inline oppure fa riferimento a un file esterno. Ci sono due modi per utilizzarlo:
1. Script inline — scrivi il codice direttamente tra i tag di apertura e chiusura:
<script>
document.body.style.backgroundColor = "lightyellow";
</script>2. Script esterno — punta l'attributo src verso un file .js. L'elemento deve essere vuoto (nessun codice tra i tag):
<script src="scripts.js"></script>Se hai bisogno dello stesso codice su molte pagine web, inseriscilo in un file .js separato e fai riferimento ad esso con src. I file esterni vengono memorizzati nella cache dal browser, mantengono il tuo HTML pulito e ti permettono di riutilizzare uno script su tutto il sito.
Gli script vengono spesso posizionati nell'<head> o appena prima del tag di chiusura </body>, ma un <script> può apparire ovunque nel documento. Il posizionamento è importante a causa di come il browser analizza la pagina — vedi Dove posizionare uno script di seguito.
Esempio di manipolazione del DOM inline
Uno script inline può leggere e modificare la pagina tramite il DOM. L'esempio seguente trova un paragrafo tramite il suo id e ne riscrive il testo quando lo script viene eseguito:
Script Inline — Script HTML — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Inline script example</title>
</head>
<body>
<p id="message">Original text.</p>
<script>
document.getElementById("message").textContent = "Changed by JavaScript!";
</script>
</body>
</html>Poiché il <script> si trova dopo il <p>, l'elemento esiste già nel DOM quando lo script viene eseguito, quindi getElementById lo trova. Se lo script fosse eseguito prima dell'elemento, restituirebbe null.
Nota: In HTML5, l'attributo type è opzionale (con valore predefinito text/javascript) ed è considerato deprecato per gli script JavaScript.
defer vs async
Quando uno script si trova nell'<head>, il browser normalmente interrompe l'analisi dell'HTML, scarica lo script, lo esegue e solo allora continua. Con script di grandi dimensioni, questo blocca il rendering e rallenta la pagina. Gli attributi defer e async (applicabili solo agli script esterni con src) risolvono il problema scaricando lo script in parallelo con l'analisi dell'HTML — la differenza sta in quando lo script viene eseguito.
| Attributo | Download | Momento di esecuzione | Mantiene l'ordine sorgente? |
|---|---|---|---|
| (nessuno) | Blocca l'analisi durante il download | Immediatamente, bloccando l'analisi | Sì |
defer | In parallelo con l'analisi | Dopo che l'HTML è completamente analizzato, appena prima di DOMContentLoaded | Sì |
async | In parallelo con l'analisi | Non appena il download è completato, interrompendo l'analisi in quel momento | No — chi si carica prima viene eseguito per primo |
<head>
<!-- Runs in order, after the whole page is parsed -->
<script src="library.js" defer></script>
<script src="app.js" defer></script>
<!-- Runs as soon as it loads, order not guaranteed -->
<script src="analytics.js" async></script>
</head>Usa defer per gli script che dipendono dal DOM o l'uno dall'altro (la maggior parte del codice dell'applicazione). Usa async per gli script indipendenti che non dipendono da nient'altro, come analytics o tag pubblicitari.
Dove posizionare uno script
Il punto in cui metti un <script> determina se gli elementi della pagina esistono già quando viene eseguito.
Uno script posizionato appena prima del tag di chiusura </body> viene eseguito dopo che tutto l'HTML sopra di esso è stato analizzato, quindi può accedere in sicurezza a qualsiasi elemento della pagina:
<body>
<h1 id="title">Loading…</h1>
<!-- The <h1> already exists, so this works -->
<script>
document.getElementById("title").textContent = "Ready!";
</script>
</body>Lo stesso effetto si può ottenere inserendo lo script nell'<head> con defer, poiché gli script differiti attendono il completamento dell'analisi:
<head>
<script src="app.js" defer></script>
</head>
<body>
<h1 id="title">Loading…</h1>
</body>Un <script> semplice nell'<head> (senza defer) viene eseguito prima che il corpo venga analizzato, quindi document.getElementById("title") restituirebbe null.
type="module"
Imposta type="module" per caricare lo script come modulo JavaScript. I moduli possono usare import ed export per condividere codice tra file, vengono eseguiti in strict mode automaticamente e sono differiti per impostazione predefinita (si eseguono dopo che l'HTML è stato analizzato, anche senza l'attributo defer):
<script type="module">
import { greet } from "./utils.js";
greet("World");
</script>Come attivare gli script
Puoi specificare se far eseguire uno script automaticamente (non appena la pagina si carica) o dopo che l'utente ha fatto qualcosa (come passare il mouse sopra o fare clic su un link). Se vuoi che lo script venga eseguito quando l'utente compie un'azione (chiamata evento), devi usare gestori di eventi per comunicare al browser quale evento è responsabile dell'attivazione dello script.
I gestori di eventi possono essere specificati come attributi all'interno dei tag HTML, oppure collegati tramite JavaScript usando metodi come addEventListener.
Esempio del tag HTML <script> con un gestore di eventi:
Esempio di Gestore di Eventi — Script HTML — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Event Handler Example</title>
</head>
<body>
<span id="trigger">
Bring your mouse here to see an alert
</span>
<script>
function myAlert() {
alert("I am an event handler....");
}
document.getElementById('trigger').addEventListener('mouseover', myAlert);
</script>
</body>
</html>L'elemento <noscript>
Sebbene molti browser moderni supportino JavaScript, alcuni browser più vecchi non sono in grado di eseguire codice JavaScript e gli utenti possono anche avere JavaScript disabilitato nel browser. Per fornire informazioni alternative ai browser non-JavaScript o con JavaScript disabilitato, usa il tag <noscript>. Il contenuto di questo tag viene mostrato all'utente solo quando JavaScript è disabilitato o quando il browser non supporta JavaScript.
Esempio del tag HTML <noscript>:
Il mio primo esempio JavaScript! — Script HTML — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p id="output"></p>
<script>
document.getElementById('output').textContent = "My first JavaScript example!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>If JavaScript is disabled or the browser doesn't support it, the content inside the noscript element is shown instead.</p>
</body>
</html>Qui il <p id="output"> è dichiarato prima dello <script>, quindi il paragrafo esiste già nel DOM quando lo script viene eseguito e getElementById può trovarlo. Quando JavaScript è abilitato, l'utente vede "My first JavaScript example!"; quando è disabilitato, il browser ignora lo script e mostra il messaggio di <noscript>.
Argomenti correlati
- Tag HTML
<script>— riferimento completo agli attributi (src,type,defer,asynce altro). - Tag HTML
<noscript>— contenuto alternativo per gli utenti senza JavaScript. - Eventi JavaScript — rispondere a clic, passaggi del mouse e altre azioni dell'utente.