JavaScript non è un linguaggio che può essere usato da solo (per la programmazione web), ma deve essere collegato ad una pagina HTML. Quindi, scopriamo dove posizione e come inserire uno script JS all'interno della nostra pagina.
Dove inserire JavaScript
Ci sono diversi modi per inserire uno script JS all'interno del tuo HTML. Vediamoli insieme.
Tramite <script>
Puoi inserire il tuo codice JavaScript all'interno di un tag HTML chiamato <script>. Vediamo un esempio.
<script>
alert("Pagina di esempio");
</script>
Il metodo alert() serve per visualizzare un popup nella pagina.
Nota: puoi approfondire alert() nella lezione degli output.
Nei browser più vecchi, era necessario specificare <script type="text/javascript"> per indicare che si trattava di un codice JavaScript. Ora, però, non è più necessario.
Tramite file esterno
È anche possibile inserire il codice JavaScript in un file esterno, diviso dall'HTML. Questa pratica è più consigliata, perché mantiene in ordine il vostro codice e permette di salvare il file nella cache dei browser. Si utilizza anche in questo caso il tag <script>, ma usando l'attributo src.
<script src="script.js"></script>L'URL da inserire all'interno di src può essere di diversi tipi:
Ecco i 3 tipi diversi di <script>:
<script src="script.js"></script>
<script src="https://example.com/javascript/script.js"></script>
<script src="/javascript/script.js"></script>Dove posizionare gli script
Puoi posizionare gli <script> sia all'interno di <head> che in <body>. Vediamo quale scegliere in base ai casi.
Gli script all'interno di head
Gli script inseriti nel <head> vengono caricati prima del contenuto della pagina. Quindi, l'esecuzione degli script nel <head> avviene prima che il browser mostri qualsiasi parte della pagina.
Questa posizione è spesso utilizzata per includere librerie o file JavaScript che sono necessari per il corretto funzionamento della pagina. Ad esempio, il codice necessario per visualizzare il popup dei cookie (che deve essere visualizzato prima di qualsiasi cosa).
Questi script rallentano il caricamento della pagina, perché si trovano prima del contenuto.
Gli script all'interno di body
Gli script inseriti nel <body> vengono caricati durante il rendering del contenuto della pagina. Perciò il browser interrompe il rendering del contenuto per eseguire gli script nel <body>, quindi il rendering viene ripreso dopo l'esecuzione degli script.
Questa posizione è spesso utilizzata per includere script che modificano il contenuto della pagina, interagiscono con elementi HTML o gestiscono eventi dell'utente. Ad esempio, script per la gestione di click dei pulsanti inseriti in <body>.
Se si inserisce lo script appena prima della chiusura del tag </body>, tutto il contenuto della pagina è stato caricato.
Attributi defer e async
Per far si che gli script non blocchino il caricamento del contenuto della pagina, puoi utilizzare due attributi:
<script src="script.js" defer></script><script src="script.js" async></script>