Il tag <script> in HTML serve per indicare l’uso di script nei documenti HTML. Oltre all’integrazione diretta del codice JavaScript, puoi anche fare riferimento a script esterni. Esistono anche vari attributi opzionali, come async o defer, che regolano la gestione degli script utilizzati.

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>, introduttivo e conclusivo, puoi fornire istruzioni dirette per lo script o fare riferimento a un file esterno utilizzando l’attributo src. A partire da HTML5, JavaScript è definito come un possibile linguaggio di scripting per l’elemento; nelle versioni precedenti di HTML era necessaria un’ulteriore specificazione del linguaggio di scripting.

Gli usi tipici di HTML <script> o di JavaScript in generale sono la convalida delle voci dei moduli, la manipolazione 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
  • Disponibilità garantita al 99,99%
  • Dominio, SSL ed e-mail inclusi
  • Assistenza 24/7 in lingua italiana

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

La sintassi degli elementi <script> è relativamente semplice: un tag <script> introduttivo segna l’inizio di uno script, mentre un tag <\script> di chiusura ne segna la fine. La struttura sintattica di base è quindi la seguente:

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

Se scrivi il codice JavaScript direttamente nell’elemento, non avrai bisogno di altri parametri. Per un riferimento a uno script esterno, è necessario 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 integrazione diretta di JavaScript

Qui ti illustriamo la sintassi e la funzionalità dell’integrazione diretta di JavaScript tramite il tag HTML <script> con un semplice esempio. All’interno dell’area <body>, inseriamo un pulsante con il <button id> “miopulsante”. Subito dopo viene integrato il codice JavaScript, con cui verrà visualizzato 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

È consigliabile includere un testo alternativo che venga presentato al posto dello script se questo non può essere eseguito, ad esempio perché l’utente ha disattivato JavaScript. A questo scopo si può semplicemente usare l’elemento <noscript> (tag introduttivo e di chiusura).

Esempio di integrazione di uno script esterno

Trasferiamo l’esempio all’opzione alternativa di integrare il codice JavaScript come script esterno. Nel primo passo, salviamo il codice del pulsante cliccabile, 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!');
    });
});
javascript

Nel secondo passaggio, integriamo 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ù importanti rientrano:

  • async: con questo attributo fai in modo che uno script esterno venga scaricato ed eseguito parallelamente all’interpretazione del codice della pagina, non appena questo è disponibile (anche se la pagina non è ancora completamente 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 parallelamente all’interpretazione del codice della pagina. Tuttavia, viene eseguito solo quando la pagina è stata interpretata completamente.
  • integrity: per aumentare la sicurezza, puoi aggiungere l’attributo integrity a <script> in HTML. Questo garantisce che i browser possano controllare lo script recuperato e assicura che il codice non venga mai caricato se il codice sorgente è stato manipolato.
  • nomodule: con nomodule ti assicuri che gli script non vengano eseguiti nei browser che supportano i moduli ES2015.
  • referrerpolicy: se desideri specificare quali informazioni sul referrer devono essere inviate quando viene richiamato uno script, utilizza l’attributo referrerpolicy. I valori possibili sono no-referrer (nessuna pagina di riferimento) 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 specificare quale contenuto contiene l’elemento HTML <script>. Oltre al classico script, sono possibili anche moduli ECMAScript (module) e mappe di importazione (importmap) con regole per l’importazione di moduli ECMAScript, ad esempio.
Acquista e registra il tuo dominio con il provider n°1 in Europa
  • Domain Connect gratuito per una configurazione facile del DNS
  • Certificato SSL Wildcard gratuito
  • Protezione privacy inclusa
Hai trovato questo articolo utile?
Vai al menu principale