Skapa en JS-file
Postad: 9 april 2009 | Javascript · Uppdaterad | No CommentsJavascript 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örjade förr alltid med <script type=”javascript”> (om koden skulle validera), annars kunde den även skrivas som <script language=”javascript”>.
Uppdaterat: Nu för tiden skriver vi istället <script> samt </script> i html-dokumentet. Om du däremot 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å rensa 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 vara hänvisningar eller kommentarer till scriptets funktioner.
Vi lägger in detta överst i js-filen så vi slipper stoppa in ’use strict’; i varje funktion.
jQuery(function($){
'use strict';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.
Document ready event
Nedanstående kod förhindrar att jQuery körs innan dokumentet i sin helhet har laddat in
$(document).ready(function(){
// jQuery methods go here...
});Det går också utmärkt att förkorta ovanstående.
$(function(){
// jQuery methods go here...
});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 html-filen och det gör vi genom att sätta in <script src=”skript.js”></script> precis innan</body> och det gör vi numer för att html-sidan ska kunna laddas innan javascriptet. Nu är det bara att skicka upp din nya js-file och ditt html/phpdokument på nätet.
<script src="skript.js"></script>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
- Datum, dag år och månad? Kika i date.js.
- Besökare ska bokmärka din sida? Kika i bookmark.js.
- Klocka uppe i statusraden? Kika i clock.js