Il tag <script> in HTML serve per indicare l’uso di script nei documenti HTML. Oltre all’in­te­gra­zio­ne diretta del codice Ja­va­Script, puoi anche fare ri­fe­ri­men­to a script esterni. Esistono anche vari attributi opzionali, come async o defer, che regolano la gestione degli script uti­liz­za­ti.

Cos’è <script> in HTML e a cosa serve?

Il tag HTML <script> è usato per integrare script lato client in pagine web o documenti HTML. All’interno del tag <script>, in­tro­dut­ti­vo e con­clu­si­vo, puoi fornire istru­zio­ni dirette per lo script o fare ri­fe­ri­men­to a un file esterno uti­liz­zan­do l’attributo src. A partire da HTML5, Ja­va­Script è definito come un possibile lin­guag­gio di scripting per l’elemento; nelle versioni pre­ce­den­ti di HTML era ne­ces­sa­ria un’ulteriore spe­ci­fi­ca­zio­ne del lin­guag­gio di scripting.

Gli usi tipici di HTML <script> o di Ja­va­Script in generale sono la convalida delle voci dei moduli, la ma­ni­po­la­zio­ne delle immagini e le modifiche dinamiche al contenuto del sito web.

Web Hosting
Diventa il n°1 della rete con il provider di hosting n°1 in Europa
  • Di­spo­ni­bi­li­tà garantita al 99,99%
  • Dominio, SSL ed e-mail inclusi
  • As­si­sten­za 24/7 in lingua italiana

Tag <script> HTML: sintassi con un esempio di codice

La sintassi degli elementi <script> è re­la­ti­va­men­te semplice: un tag <script> in­tro­dut­ti­vo segna l’inizio di uno script, mentre un tag <\script> di chiusura ne segna la fine. La struttura sin­tat­ti­ca di base è quindi la seguente:

<script>Codice JavaScript o riferimento a uno script esterno</script>
html

Se scrivi il codice Ja­va­Script di­ret­ta­men­te nell’elemento, non avrai bisogno di altri parametri. Per un ri­fe­ri­men­to a uno script esterno, è ne­ces­sa­rio anche l’attributo HTML src (in inglese “source”, sorgente). La sintassi estesa per HTML <script> si presenta quindi così:

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

Esempio di in­te­gra­zio­ne diretta di Ja­va­Script

Qui ti il­lu­stria­mo la sintassi e la fun­zio­na­li­tà dell’in­te­gra­zio­ne diretta di Ja­va­Script tramite il tag HTML <script> con un semplice esempio. All’interno dell’area <body>, inseriamo un pulsante con il <button id> “mio­pul­san­te”. Subito dopo viene integrato il codice Ja­va­Script, con cui verrà vi­sua­liz­za­to il messaggio “Pulsante cliccato!“ non appena l’utente preme il pulsante:

<body>
    <h1>Esempio di pulsante in JavaScript: integrazione diretta</h1>
    <button id="miopulsante">Clicca qui!</button>
    <script>
        document.getElementById('miopulsante').addEventListener('click', function() {
            alert('Pulsante cliccato!');
        });
    </script>
</body>
html
Consiglio

È con­si­glia­bi­le includere un testo al­ter­na­ti­vo che venga pre­sen­ta­to al posto dello script se questo non può essere eseguito, ad esempio perché l’utente ha di­sat­ti­va­to Ja­va­Script. A questo scopo si può sem­pli­ce­men­te usare l’elemento <noscript> (tag in­tro­dut­ti­vo e di chiusura).

Esempio di in­te­gra­zio­ne di uno script esterno

Tra­sfe­ria­mo l’esempio all’opzione al­ter­na­ti­va di integrare il codice Ja­va­Script come script esterno. Nel primo passo, salviamo il codice del pulsante clic­ca­bi­le, che riproduce il messaggio “Pulsante cliccato!“ dopo un clic, in un nuovo file con il nome di esempio script.js:

// script.js
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('miopulsante').addEventListener('click', function() {
        alert('Pulsante cliccato!');
    });
});
ja­va­script

Nel secondo passaggio, in­te­gria­mo lo script in un documento HTML che si trova nella stessa directory dello script:

<body>
    <h1>Esempio di pulsante in JavaScript: integrazione tramite riferimento</h1>
    <button id="miopulsante">Clicca qui!</button>
    <script src="script.js"></script>
</body>
</html>
html

Quali sono gli attributi di <script> in HTML?

Il tag HTML <script> può essere combinato con una serie di attributi. Tra i più im­por­tan­ti rientrano:

  • async: con questo attributo fai in modo che uno script esterno venga scaricato ed eseguito pa­ral­le­la­men­te all’in­ter­pre­ta­zio­ne del codice della pagina, non appena questo è di­spo­ni­bi­le (anche se la pagina non è ancora com­ple­ta­men­te caricata).
  • crossorigin: se desideri impostare la modalità di richiesta dello script alle richieste HTTP CORS, utilizza l’attributo crossorigin.
  • defer: se l’attributo defer è impostato, viene scaricato anche uno script esterno pa­ral­le­la­men­te all’in­ter­pre­ta­zio­ne del codice della pagina. Tuttavia, viene eseguito solo quando la pagina è stata in­ter­pre­ta­ta com­ple­ta­men­te.
  • integrity: per aumentare la sicurezza, puoi ag­giun­ge­re l’attributo integrity a <script> in HTML. Questo ga­ran­ti­sce che i browser possano con­trol­la­re lo script re­cu­pe­ra­to e assicura che il codice non venga mai caricato se il codice sorgente è stato ma­ni­po­la­to.
  • nomodule: con nomodule ti assicuri che gli script non vengano eseguiti nei browser che sup­por­ta­no i moduli ES2015.
  • referrerpolicy: se desideri spe­ci­fi­ca­re quali in­for­ma­zio­ni sul referrer devono essere inviate quando viene ri­chia­ma­to uno script, utilizza l’attributo referrerpolicy. I valori possibili sono no-referrer (nessuna pagina di ri­fe­ri­men­to) e strict-origin (il referrer ha sempre un dominio di origine).
  • src: l’attributo src specifica l’URL di uno script esterno.
  • type: con questo attributo (ora opzionale), puoi spe­ci­fi­ca­re quale contenuto contiene l’elemento HTML <script>. Oltre al classico script, sono possibili anche moduli EC­MA­Script (module) e mappe di im­por­ta­zio­ne (importmap) con regole per l’im­por­ta­zio­ne di moduli EC­MA­Script, ad esempio.
Acquista e registra il tuo dominio con il provider n°1 in Europa
  • Domain Connect gratuito per una con­fi­gu­ra­zio­ne facile del DNS
  • Cer­ti­fi­ca­to SSL Wildcard gratuito
  • Pro­te­zio­ne privacy inclusa
Vai al menu prin­ci­pa­le