Come creare e utilizzare file JavaScript esterni

Posizionare gli script Java direttamente nel file contenente l'HTML per una pagina Web è ideale per gli script brevi 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ò influire sul 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 il contenuto del contenuto.
• Rende più difficile riutilizzare la stessa funzione JavaScript su più pagine del tuo sito Web. Ogni volta che vuoi usarlo su una pagina diversa, dovrai copiarlo e inserirlo in ogni pagina aggiuntiva, oltre a qualsiasi modifica richiesta dalla nuova posizione. 

È molto meglio se rendiamo 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. Siamo in grado di spostare i nostri JavaScript dalla pagina Web e 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, selezioniamo e copiamo la parte in grassetto:

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

In passato si praticava l'inserimento di 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 affermano che i browser dovrebbero considerare automaticamente il codice all'interno dei tag di commento HTML come commenti e ciò comporta 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 seguente:

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 identifica la pagina a cui appartiene lo script.

Dai il file a .js suffisso per sapere che il file contiene JavaScript. Ad esempio, potremmo usare hello.js come nome del file per il salvataggio di 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 tra i tag di script: