Consente l'inclusione di script dinamici o
blocchi di dati
(data block) all'interno del documento.
Quando è utilizzato per includere
script dinamici il codice può essere
scritto direttamente all'interno della sezione
<script> (
inline) oppure importato da
file esterno mediante l'attributo
src. Appena il tag
<script>
viene rilevato il browser sospende l'attività in corso ed inizia a scaricare
ed eseguire lo script. Questo comportamento predefinito è noto con il nome
di
synchronous blocking e fino a che l'esecuzione dello
script non si è conclusa la visualizzazione della pagina resta sospesa. Il
tag
<script> è utilizzato soprattutto per l'esecuzione di codice
JavaScript.
Quando invece racchiude un
blocco di dati questo può essere scritto
solo in modo
inline. Il contenuto del tag
<script> è trattato come
data block quando soddisfa i seguenti criteri:
- l'attributo "src" non è specificato
- Il tipo MIME indicato nell'attributo "type" non può essere
interpretato come eseguibile come ad esempio: text/plain,
text/xml, application/octet-stream,
application/xml
Il blocco dati inserito nel tag
<script>
risulta nascosto all'utente che naviga ed è accessibile agli sviluppatori tramite
il
linguaggio di scripting. Alcuni degli attributi del
tag
<script> sono:
- type
- L'attributo type
specifica il linguaggio
di programmazione utilizzato per lo script oppure il formato adottato per il blocco dati. Il suo valore deve essere un valido tipo MIME. Il valore predefinito, quando questo attributo è assente è "text/javascript".
In Html5 l'attributo è opzionale.
- src
- L'attributo src fornisce l'url dello
script esterno da utilizzare.
Se il tag <script> contiene tale attributo allora il tag
<script> deve essere vuoto (tra
<script ...> e </script>
non ci deve essere nulla).
- async
- Durante il "synchronous blocking" (caricamento ed
esecuzione dello script) la pagina appare lenta o addirittura bloccata.
Per minimizzare il problema HTML5 ha introdotto l'attributo booleano "async"
che specifica se lo script debba essere eseguito in modo asincrono
senza bloccare
l'attività di parsing sul resto della pagina. Secondo le specifiche è un attributo applicabile solo a script esterni (quelli con
src
settato). L'attributo non è supportato da
tutti i browser.
- defer
- Come già illustrato in precedenza, l'esecuzione immediata degli script
con il conseguente blocco dell'analisi sul resto della pagina può creare dei problemi se lo
script effettua dei riferimenti ad elementi della pagina che non sono stati
ancora creati. L'attributo
defer postpone
l'esecuzione dello script al termine del caricamento e dell'analisi della
pagina. Si tratta di un attributo booleano che permette al browser
di proseguire con l'analisi e la riproduzione della pagina lasciando in
fondo l'esecuzione dello script.
E' applicabile solo per script esterni (quelli con attributo
src settato!). Non tutti i browser supportano
tale attributo.
Se gli attributi
defer e
async
non sono presenti lo script (anche esterno) viene eseguito immediatamente
bloccando la conclusione dell'analisi del
documento.
Gli script
inline sono caricati ed eseguiti
immediatamente (a prescindere dalla presenza o meno dei due attributi
defer e
async)
da quasi tutti i browser. Se gli attributi
defer e
async
sono presenti contemporaneamente l'attributo
defer
viene ignorato.
<!DOCTYPE html>
<html lang="it">
<head>
...
<script src="javascript.js"></script>
<script src="fileA.js" async="async"></script>
<script src="fileB.js" defer="defer"></script>
<!-- codifica Inline -->
<script>
window.addEventListener("load", function()
{
var dblock = document.getElementById("datablock");
var stored = document.getElementById("stored");
stored.textContent = dblock.textContent;
}, false);
</script>
...
</head>
<body>
...
<script>
alert("Script JavaScript");
</script>
...
<script type="text/vbscript">
MsgBox("Script VBScript")
</script>
...
<!-- D A T A B L O C K -->
<script id="datablock" type="text/plain">
Sono un'informazione nascosta nel corrente data block!
</script>
...
<span id="stored"></span>
...
</body>
</html>
Il posizionamento dei tag
<script> può avvenire all'interno della sezione
<head></head> oppure di
<body></body>. La differenza è importante in quanto
il caricamento di un grosso script
all'interno della coppia
<head></head> potrebbe causare un
significativo periodo di tempo in cui la pagina appare bloccata in attesa che venga completato
il suo scaricamento e il relativo parsing. Per questo motivo è meglio
posizionare il
nostro codice javascript all'interno del tag
<body>. Per ovviare, oltre all'uso di
defer,
un trucco consiste nel porre gli script, o almeno quello più pesante,
appena prima del tag
</body>, in modo da permettere il parsing di
quasi tutta la pagina. Ovviamente quando questo è possibile in base alla logica del'applicazione.
E' possibile piazzare più sezioni di script all'interno della nostra pagina, verranno eseguiti sequenzialmente uno dopo l'altro ma solo dopo il completamento del precedente.
L'attributo
language in HTML 5 è stato
rimosso poichè ridondante quando utilizzo
type.
