Hur man skapar och använder externa JavaScript-filer

Att placera JavaScripts direkt i filen som innehåller HTML för en webbsida är idealisk för korta skript som används när du lär dig JavaScript. När du börjar skapa skript för att ge en betydande funktionalitet för din webbsida kan emellertid mängden JavaScript bli ganska stor, och att inkludera dessa stora skript direkt på webbsidan ger två problem:

• Det kan påverka rankningen på din sida med de olika sökmotorerna om JavaScript tar upp en majoritet av sidinnehållet. Detta sänker användningen av nyckelord och fraser som identifierar vad innehållet handlar om.
• Det gör det svårare att återanvända samma JavaScript-funktion på flera sidor på din webbplats. Varje gång du vill använda den på en annan sida måste du kopiera den och infoga den på varje ytterligare sida, plus eventuella ändringar som den nya platsen kräver. 

Det är mycket bättre om vi gör JavaScript oberoende av webbsidan som använder den.

Välja JavaScript-kod som ska flyttas

Lyckligtvis har utvecklarna av HTML och JavaScript tillhandahållit en lösning på detta problem. Vi kan flytta våra JavaScripts från webbsidan och fortfarande ha det exakt samma.

Det första vi behöver göra för att skapa en JavaScript extern till sidan som använder den är att välja själva JavaScript-koden (utan de omgivande HTML-skript taggarna) och kopiera den till en separat fil.

Om till exempel följande skript finns på vår sida skulle vi välja och kopiera delen med fet stil:

var hello = 'Hej världen';
document.write (hello);

Det brukade vara en praxis att placera JavaScript i ett HTML-dokument inuti kommentar taggar för att hindra äldre webbläsare från att visa koden; nya HTML-standarder säger dock att webbläsare automatiskt ska behandla koden inuti HTML-kommentarstaggar som kommentarer, och detta resulterar i att webbläsare ignorerar ditt Javascript. 

Om du har ärvt HTML-sidor från någon annan med JavaScript inuti kommentar taggar, behöver du inte inkludera taggarna i JavaScript-koden som du väljer och kopierar.

Till exempel kopierar du bara den djärva koden och lämnar HTML-kommentarstaggarna i kodprovet nedan:

Spara JavaScript-kod som en fil

När du har valt JavaScript-koden du vill flytta klistra in den i en ny fil. Ge filen ett namn som föreslår vad skriptet gör eller identifierar sidan där skriptet hör hemma.

Ge filen en .js suffix så att du vet att filen innehåller JavaScript. Vi kan till exempel använda hello.js som namnet på filen för att spara JavaScript från exemplet ovan.

Länk till det externa skriptet

Nu när vi har JavaScript kopierat och sparat i en separat fil behöver vi bara hänvisa till den externa skriptfilen i vårt HTML-webbsidokument.

Ta först bort allt mellan skripttaggarna: