Come creare e utilizzare file JavaScript esterni

Posizionare JavaScript direttamente nel file contenente l’HTML per una pagina web è l’ideale per brevi script utilizzati durante l’apprendimento di JavaScript. Quando inizi a creare script per fornire funzionalità significative per la tua pagina web, tuttavia, la quantità di JavaScript può diventare piuttosto grande e l’inclusione di questi script di grandi dimensioni direttamente nella pagina web pone due problemi:

  • Può influenzare il posizionamento della tua pagina con i vari motori di ricerca se JavaScript occupa la maggior parte del contenuto della pagina. Ciò riduce la frequenza di utilizzo di parole chiave e frasi che identificano l’argomento del contenuto.
  • Rende più difficile riutilizzare la stessa funzione JavaScript su più pagine del tuo sito web. Ogni volta che si desidera utilizzarlo su una pagina diversa, sarà necessario copiarlo e inserirlo in ogni pagina aggiuntiva, oltre a eventuali modifiche richieste dalla nuova posizione. 

È molto meglio se rendiamo il JavaScript indipendente dalla pagina web che lo utilizza.

Selezione del codice JavaScript da spostare

Fortunatamente, gli sviluppatori di HTML e JavaScript hanno fornito una soluzione a questo problema. Possiamo spostare i nostri JavaScript dalla pagina web e continuare a farli funzionare esattamente allo stesso modo.

La prima cosa che dobbiamo fare per rendere un JavaScript esterno alla pagina che lo utilizza è selezionare il codice JavaScript effettivo stesso (senza i tag di script HTML circostanti) e copiarlo in un file separato.

Ad esempio, se il seguente script è sulla nostra pagina, selezioneremo e copieremo la parte in grassetto:


var hello = ‘Hello World’;
document.write (ciao);

C’era una pratica inserendo JavaScript in un documento HTML all’interno dei tag di commento per impedire ai browser meno recenti di visualizzare il codice; tuttavia, i nuovi standard HTML dicono che i browser dovrebbero trattare automaticamente il codice all’interno dei tag di commento HTML come commenti, e questo fa sì che i browser ignorino il tuo Javascript. 

Se hai ereditato pagine HTML da qualcun altro con JavaScript all’interno dei tag di commento, non è necessario includere i tag nel codice JavaScript che selezioni e copi.

Ad esempio, copieresti solo il codice in grassetto, tralasciando i tag di commento HTML nell’esempio di codice riportato di seguito:

<!–
var hello = ‘Hello World’;
document.write (ciao);

// ->

Salvataggio del codice JavaScript come file

Dopo aver selezionato il codice JavaScript che desideri spostare, incollalo in un nuovo file. Assegna al file un nome che suggerisca cosa fa lo script o identifichi la pagina a cui appartiene lo script.

Assegna al file un suffisso .js in modo da sapere che il file contiene JavaScript. Ad esempio, potremmo usare hello.js come nome del file per salvare JavaScript dall’esempio sopra.

Collegamento allo script esterno

Ora che abbiamo copiato e salvato il nostro JavaScript in un file separato, tutto ciò che dobbiamo fare è fare riferimento al file di script esterno sul nostro documento della pagina Web HTML.

Innanzitutto, elimina tutto ciò che si trova tra i tag dello script:


Questo non dice ancora alla pagina quale JavaScript eseguire, quindi dobbiamo aggiungere un ulteriore attributo al tag dello script stesso che indichi al browser dove trovare lo script.

Il nostro esempio ora sarà simile a questo:

<script type=”text/javascript”
src = “ciao.js”>

L’attributo src dice al browser il nome del file esterno da cui dovrebbe essere letto il codice JavaScript per questa pagina web (che è hello.js nel nostro esempio sopra). 

Non è necessario inserire tutti i JavaScript nella stessa posizione dei documenti della pagina Web HTML. Potresti metterli in una cartella JavaScript separata. In questo caso, devi solo modificare il valore nel file src attributo per includere la posizione del file. È possibile specificare qualsiasi indirizzo Web relativo o assoluto per la posizione del file di origine JavaScript.

Usando ciò che sai

Ora puoi prendere qualsiasi script che hai scritto o qualsiasi script che hai ottenuto da una libreria di script e spostarlo dal codice della pagina web HTML in un file JavaScript referenziato esternamente.

È quindi possibile accedere a quel file di script da qualsiasi pagina Web semplicemente aggiungendo i tag di script HTML appropriati che richiamano quel file di script.