Corso Javascript – Includere Javascript in documento HTML

Come includere codice Javascript in un documento HTML.

Per poter comprendere meglio i concetti presentati nel corso, sarà molto utile poter eseguire alcuni esempi nel browser. Per questo, come prima cosa, vediamo come includere codice Javascript in un documento HTML.

A questo link è possibile scaricare il codice usato in questo articolo, presente nella cartella 01.

https://github.com/nerdityourself/javascript_tutorial.git

Prima cosa importante da dire è che il browser interpreterà il nostro file html dall’alto verso il basso, riga dopo riga.

Illustreremo inizialmente due modi di integrare il Javascript per i quali sarà importante dove posizioneremo il codice all’interno del file html, e poi altre due modalità, che sono i modi più moderni e consigliati per integrarlo.

1) Codice all’interno del tag <script>

Se aprite il file index_1.html presente al link ( o copiate il codice seguente in un file e lo chiamate index.html e poi aprite il file in un browser) otterrete questo.

esempio hello carolina

Vediamo perché analizzando il codice.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Corso Javascript</title>
  </head>
  <body>
    <h1>Hello!</h1>
  </body>
  <script>
    const myContent = document.querySelector("h1");
    myContent.innerHTML = "Hello Carolina";    
  </script>
</html>

In questo documento html a riga 9 si vuole mostrare un header con il contenuto “Hello!”. Poi però abbiamo inserito la parte

 <script>
    const myContent = document.querySelector("h1");
    myContent.innerHTML = "Hello Carolina!";    
  </script>

Ovvero abbiamo inserito del codice Javascript all’interno del nostro file html. Come abbiamo detto il browser esegue il file interpetandolo dall’alto verso il basso. Quindi, dopo avere incontrato la riga 9 secondo la quale avrebbe dovuto visualizzare “Hello!”, ha trovato il codice Javascript e lo ha eseguito. Questo è andato quindi a modificare il contenuto del nostro elemento h1. E quello che vediamo nel browser è la scritta “Hello Carolina!”.

Per il momento non scendiamo nel dettaglio del codice Javascript, parleremo di variabili e funzioni querySelector successivamente.

Quello che ci interessa è avere visto un modo per inserire il codice Javascript all’interno del documento html. Ovvero inserendo il codice all’interno del tag <script> </script> e posizionando questa parte in fondo al documento html.

Perché in fondo e non all’inizio? Se provate a spostare il tag <script> con il suo contenuto all’interno dell’head del documento ad esempio, nel browser vedrete la scritta “Hello“. Inoltre nella Console del browser vedrete l’errore Uncaught TypeError: myContent is null. Infatti, poiché il browser interpreta dall’alto verso il basso, il codice Javascript viene eseguito prima ancora che il componente h1 esista!

Quindi, potreste anche inserire il tag script all’inizio, ma solo se il codice Javascript che volete inserire, non va ad agire su elementi del DOM, ovvero su oggetti html dei quali ancora il browser non conosce l’esistenza.

2) Codice Javascript in file separato

Nella maggior parte dei casi il codice Javascript non si limita a qualche riga di codice e viene quindi gestito in file separati. Nel nostro esempio abbiamo il file index_2.html che utilizza il file javascript script.js.

Per poter includere e usare il file js nell’html si usa la sintassi

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

Anche in questo caso, vale quanto detto al punto 1. Ovvero è importante dove si posiziona il codice Javascritpt. Se lo integrassi nell’head, avremo l’errore visto al punto 1. Anche in questo caso quindi va posizione in fondo, dopo che tutto il corpo dell’html è stato interpretato dal browser

3) Caricamento con async e defer

Come abbiamo detto il browser interpreta il documento html riga per riga, dall’alto verso il basso. Quando incontra quindi il codice Javascript lo carica, lo esegue, e poi prosegue. Questo come abbiamo visto negli esempi precedenti, ci ha portato a dover mettere il tag <script> in fondo al documento. Ma questo è solo un hack, non è certamente la soluzione migliore.

Quello che possiamo fare è utilizzare le keyword async e defer. Vediamo la differenza.

La sequenza del caricamento della pagina di default (senza async e defer) sarebbe:

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

Viene parsato l’html, poi quando incontra il codice JS questo viene caricato ed eseguito, e dopo si prosegue con il parsing della parte html.

Con async diventa

<script src="myScritp.js" async></script>

Viene parsato l’HTML, ma durante il caricamento del JS, si continua comunque a fare il parsing dell’html. Una volta finito di caricare il JS, viene interrotto il parsing dell’html, ed eseguito il JS. Una volta finita la sua esecuzione, riprende il parsing html. Questa soluzione, anche se non risolve il problema di cui abbiamo parlato nel punto 1 e 2, permette per prima cosa di velocizzare molto il caricamento della pagina. Ed inoltre è utile quando abbiamo del codice JS che vogliamo venga parsato il prima possibile.

Nel nostro caso però vogliamo essere sicuri che l’html sia completamente caricato prima di eseguire il codice JS. Per questo possiamo usare defer.

<script src="myScritp.js" defer></script>

Come con async il parsing dell’html non si interrompe quando si incontra il codice JS. Mentre questo viene caricato, il parsing prosegue. La differenza è che per eseguire il codice JS si aspetterà la fine del parsing dell’html.