Kan kodskript sparas i en extern fil?

Placering JavaScript 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 betydande funktionalitet för din webbsida, men mängden av JavaScript kan bli ganska stort, och att inkludera dessa stora skript direkt på webbsidan innebär 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.

Lyckligtvis utvecklare av HTML och JavaScript har gett en lösning på det här problemet. 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 själva JavaScript-koden (utan de omgivande HTML-skripttaggarna) 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:

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 kommentar taggar 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 bort HTML-kommentarstaggarna och i kodprovet nedan:

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.

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

Ta först bort allt mellan skripttaggarna:

Detta säger ännu inte sidan vilken JavaScript som ska köras, så vi måste nästa lägga till ett extraattribut till själva skripttaggen som berättar webbläsaren var man hittar skriptet.

Vårt exempel kommer nu att se ut så här:

src = "hello.js">

Src-attributet berättar webbläsaren namnet på den externa filen varifrån JavaScript-koden för denna webbsida ska läsas (som är hello.js i vårt exempel ovan).

Du behöver inte sätta alla dina JavaScripts på samma plats som dina HTML-webbsidor. Du kanske vill lägga dem i en separat JavaScript-mapp. I det här fallet ändrar du bara värdet i src attribut för att inkludera filens plats. Du kan ange vilken som helst relativ eller absolut webbadress för platsen för JavaScript-källfilen.

Du kan nu ta alla skript som du har skrivit eller något skript som du har fått från ett skriptbibliotek och flytta det från HTML-webbsidan till en extern JavaScript-fil.

Du kan sedan komma åt den skriptfilen från vilken webbsida som helst genom att bara lägga till lämpliga HTML-skripttaggar som kallar den skriptfilen.