In questa lezione vi spiego dove posizionare il codice JavaScript nella pagina (o fuori da essa).
Come per i fogli di stile CSS, il codice JavaScript può essere inserito all’interno della pagina oppure può essere collocato in un file esterno, opportunamente collegato.
Se il codice JS è interno alla pagina, dovrà essere posizionato nell’head o nel body, purché racchiuso nel tag <script>.
Codice nell’head
Posizionando il codice nell’head, questo verrà letto al caricamento della pagina, prima del caricamento degli oggetti che poi compongono la pagina da visualizzare (quelli interni al body).
<html> <head> <title>Collocazione</title> <script> document.write("bla bla bla"); </script> </head> <body> <h1>Intestazione</h1> <p>Paragrafo 1</p> <p>Paragrafo 2</p> </body> </html>
In questo caso la scritta “Bla bla bla” verrà visualizzata prima dei due paragrafi Pippo e Pluto.
Codice nel body
Collocandolo nel body, invece, il codice sarà letto assieme agli elementi della pagina ed eseguito mentre il browser li visualizza.
<html> <head> <title>Collocazione</title> </head> <body> <h1>Intestazione</h1> <p>Paragrafo 1</p> <script> document.write("bla bla bla"); </script> <p>Paragrafo 2</p> </body> </html>
In questo caso la scritta “Bla bla bla” verrà visualizzata tra il paragrafo 1 ed il paragrafo 2, in quanto lo script viene eseguito in mezzo ai tag dei due paragrafi.
A cosa serve questa distinzione? Perché scegliere di inserire un codice prima, in mezzo o addirittura dopo il codice HTML degli elementi della pagina?
Se inserite un codice nell’head, potete scegliere di farlo eseguire subito (prima di caricare il resto della pagina) oppure di renderlo “innocuo” fino a quando non decidete voi di eseguirlo: in questo caso si parla di funzioni, ovvero blocchi di codice che si possono richiamare al momento del bisogno.
Il codice può anche essere inserito al fondo della pagina, di solito prima della chiusura del body, perché in questo modo il browser ha già letto tutto il contenuto della pagina e sarà in grado di trovare nello script i riferimenti agli oggetti in essa contenuti.
In questo corso di base sul linguaggio JavaScript, viene trattato principalmente il codice eseguito tra gli elementi HTML, ma nei corsi successivi vedrete come si usano gli script caricati prima o dopo la pagina, e imparerete ad utilizzare le funzioni.
Codice esterno
Un codice JS esterno, viene inserito in un file di testo semplice, di solito contrassegnato con un nome ed una estensione .JS:
nomefile.js
Il file esterno viene poi collegato alle pagine con il tag <script> e l’attributo src, che indica il percorso del file JS:
<html> <head> <title>Collocazione</title> </head> <body> <h1>Intestazione</h1> <p>Paragrafo 1</p> <p>Paragrafo 2</p> <script src="codice.js"> </script> </body> </html>
Nel file esterno il codice va inserito direttamente, senza quindi usare il tag script.