Skapa en JS-file

Javascript har en tendens att vara stora med många tecken som dessutom är svårvaliderade förutsatt att du har lagt in koden direkt på sidan. Vi ska nu gå igenom hur man skapar en js-file för att sedan länka in den till sidan.

Börja med att öppna din texteditor och skapa ett tomt dokument.

Traditionella javascript börjar alltid med <script type="javascript"> (om koden ska validera), annars kan den även skrivas som <script language="javascript">. När du ska göra en js-file så börjar du med att ta bort denna startkod, sedan tar du även bort </script> i slutet av javascriptet. Därefter bör du också ta bort alla SGML kommentarer, det vill säga följande tecken <!-- och --> (och det som står emellan dom). Vissa tecken – som exempelvis /* */ eller // kan man låta vara kvar eftersom det brukar stå hänvisningar eller kommentarer till scriptet.

Finns det en body-onload funktion<body onload="här_ska_något_hända"> - så lägger vi in den funktionen i js-filen istället, men då måste vi också skriva om scriptet lite. Själva ordet body byts till window. Du ska dessutom sätta in en punkt mellan window och onload OCH ett blanksteg på varje sida om likhetstecknet = annars fungerar det inte. Där koden tidigare sett ut så här <body onload="one();two();three();"> – så ska den i din js-file nu se ut så här:

window.onload = function () {
one();two();three();
} 

Man ska undvika att modifiera eller lägga till andra koder i den befintliga html-koden – den vill vi behålla så ren och intakt som möjligt. Dessutom – det uppstår en konflikt om vi på samma sida använder både body onload= och window.onload på en och samma gång – du måste välja ett av alternativen.

Kika nu på ditt befintliga javascript. Tag bort <script type="javascript"> eller <script language="javascript"> som finns i början och </script> som finns i slutet. Fortsätt sedan med att ta bort scriptets SGML märken <!-- och --> och det som står däremellan.

När du har tagit bort dessa tecken så kopierar du in det som är kvar av scriptet till det tomma dokumentet och sparar det. Tänk bara på att rulla ned gardinen och markera alla filer och att filändelsen på dokumentet ska vara .js. Kontrollera även om det finns någon body onload= funktion som ska infogas i html-dokumentets <body>. Flytta i så fall också den funktionen till jsfilen genom att göra såsom jag beskrev här ovanför. Radera sedan koden < onload="här_ska_något_hända"> - från själva htmldokumentets body-tagg.

Sist länkar vi in filen i layouten och det gör vi genom att sätta in <script type="javascript" src="din_fil.js"></script> innan </head>. Nu är det bara att skicka upp din nya js-file och din header.php på nätet.

Jag vill erinra om att man kan skapa en multipel js-file och i denna samla sina javascript – liksom att man kan skapa en enda js-file till alla script – den får bara inte bli alltför stor. En del script måste dock ligga i varsin fil så det inte uppstår konflikter när de ska läsas in av webbläsarna. Mootols, Script.aculo.us och jQuery kan skapa konflikter med varandra då deras ramverk i vissa fall inte alltid är byggda på samma vis. Det man däremot bör tänka på är att varje nytt script som läggs in måste börja med document.write(' och sluta med ');. I vissa fall så räcker det inte bara med att länka in din externa jsfil – du måste även lägga in vissa koder i ditt dokument. Det framkommer i varje javascript.

Exempelfiler

  1. Datum, dag år och månad? Kika i date.js.
  2. Besökare ska bokmärka din sida? Kika i bookmark.js.
  3. Klocka uppe i statusraden? Kika i clock.js

Liknande poster:

Leave a Reply

Your email address will not be published. Required fields are marked *