# Il tag script HTML in sintesi

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](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/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](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/cose-lhtml5/), **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.

## 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:

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

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](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/attributi-html/) `src` (in inglese “source”, sorgente). La sintassi estesa per HTML `<script>` si presenta quindi così:

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

### 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:

```html
<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>
<div class="hash d-none" hidden>hash_affa9ce35503197058f168aaa74902b443a0b5bb</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
```

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](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/disattivare-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`:

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

Nel secondo passaggio, integriamo lo script in un documento HTML che si trova **nella stessa directory** dello script:

```html
<body>
    <h1>Esempio di pulsante in JavaScript: integrazione tramite riferimento</h1>
    <button id="miopulsante">Clicca qui!</button>
    <script src="script.js"></script>
<div class="hash d-none" hidden>hash_affa9ce35503197058f168aaa74902b443a0b5bb</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</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](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/cross-origin-resource-sharing/), 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.


This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/script-html/](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/script-html/) for AI/LLM consumption.