Interne og eksterne JavaScripts
Hvad går det ud på?
Når man skal bruge et JavaScript til en eller anden funktion, kan man enten have sit script liggende integreret i den side man arbejder på, eller man kan have det liggende i en separat fil, som man så kalder, når man har brug for det. Dette er forskellen på at have et internt (dvs. integreret) script eller et eksternt script.
Om man skal vælge den ene eller den anden løsning er lidt en smagssag, og hvad der er praktisk. Skal man nu kun bruge scriptet på én side, gør det ikke den store forskel hvor man har scriptet, men bruger man det nu på flere sider, er der i forhold til vedligeholdelse af siderne en fordel i at have scriptet eksternt, så det kun skal rettes ét sted, og så fungerer det på alle sider.
Om man skal vælge den ene eller den anden løsning er lidt en smagssag, og hvad der er praktisk. Skal man nu kun bruge scriptet på én side, gør det ikke den store forskel hvor man har scriptet, men bruger man det nu på flere sider, er der i forhold til vedligeholdelse af siderne en fordel i at have scriptet eksternt, så det kun skal rettes ét sted, og så fungerer det på alle sider.
Interne scripts
Hvis vi nu starter med det helt basale i interne scripts, så er syntaxen således:
Her indsætter man sin kode, og så er man kørende, f.eks. et stykke tekst man vil skrive:
På siden kommer der så:
Dette kan man så udvidde til at gøre forskellige aktive ting som f.eks. at hente data fra en database eller vælge mellem beskeder afhængig af browser type eller sprog.
Et script som dette vil man have til at stå et sted i BODY-tag'en, for den skal blot eksekveres når siden indhold læses. Har man derimod brug for et script man kalder, f.eks. ved tryk på en knap, skal det op i HEAD-tag'en. Man kan i princippet også have det i BODY-tag'en med det er ikke en stabil løsning, så man risikerer at få noget det kun fungerer en gang imellem. I HEAD-tag'en er man sikker på, at scriptet bliver indlæst hver gang.
Når man laver scripts der skal være i HEAD-tag'en, skal scriptets rutine have et navn. Det skal det fordi man ved eksekveringen skal kalde rutinens navn. Dette ser således ud:
Bemærk de to paranteser, (), efter RutinensNavn. De skal være der, og man bruger dem når man skal specificere en eller flere værdier som scriptet skal anvende.
Man kan sagtens have flere rutiner i det samme script, så skal man bare deklarere flere functions, f.eks.
VIGTIGT! Ingen mellemrum i navne på functions!
Herfra kan man så eksekvere scriptet ved f.eks. ONCLICK="RutinensNavn()" hvis det er en knap eller ONSUBMIT="RutinensNavn()" hvis det er en formular man udfylder.
Så, interne scripts: alle ens JavaScripts ligger på den side man arbejder på.
En vigtigt detalje mht. interne scripts: Event-attributter, f.eks. ONMOUSEOVER eller ONCLICK, kan også afvikle JavaScripts som interne scripts. Her behøver man ikke SCRIPT-tag'en, men skriver kommandoerne direkte, som f.eks. ONCLICK="window.open()", og skal flere kommandoer eksekveres, adskilles disse blot med semikolon, f.eks. ONCLICK="window.open(); alert()". Af hensyn til overskueligheden af ens kode, er anbefalingen herfra, at har man flere kommandoer, der skal eksekveres på denne måde, skal man kraftigt overveje at have et script med en function som man kalder.
<SCRIPT>
</SCRIPT>
</SCRIPT>
Her indsætter man sin kode, og så er man kørende, f.eks. et stykke tekst man vil skrive:
<SCRIPT>
document.write("Her står din besked");
</SCRIPT>
document.write("Her står din besked");
</SCRIPT>
På siden kommer der så:
Dette kan man så udvidde til at gøre forskellige aktive ting som f.eks. at hente data fra en database eller vælge mellem beskeder afhængig af browser type eller sprog.
Et script som dette vil man have til at stå et sted i BODY-tag'en, for den skal blot eksekveres når siden indhold læses. Har man derimod brug for et script man kalder, f.eks. ved tryk på en knap, skal det op i HEAD-tag'en. Man kan i princippet også have det i BODY-tag'en med det er ikke en stabil løsning, så man risikerer at få noget det kun fungerer en gang imellem. I HEAD-tag'en er man sikker på, at scriptet bliver indlæst hver gang.
Når man laver scripts der skal være i HEAD-tag'en, skal scriptets rutine have et navn. Det skal det fordi man ved eksekveringen skal kalde rutinens navn. Dette ser således ud:
<SCRIPT>
function RutinensNavn() {
}
</SCRIPT>
function RutinensNavn() {
}
</SCRIPT>
Bemærk de to paranteser, (), efter RutinensNavn. De skal være der, og man bruger dem når man skal specificere en eller flere værdier som scriptet skal anvende.
Man kan sagtens have flere rutiner i det samme script, så skal man bare deklarere flere functions, f.eks.
<SCRIPT>
function Rutine-1() {
}
function Rutine-2() {
}
function Rutine-3() {
}
</SCRIPT>
function Rutine-1() {
}
function Rutine-2() {
}
function Rutine-3() {
}
</SCRIPT>
VIGTIGT! Ingen mellemrum i navne på functions!
Herfra kan man så eksekvere scriptet ved f.eks. ONCLICK="RutinensNavn()" hvis det er en knap eller ONSUBMIT="RutinensNavn()" hvis det er en formular man udfylder.
Så, interne scripts: alle ens JavaScripts ligger på den side man arbejder på.
En vigtigt detalje mht. interne scripts: Event-attributter, f.eks. ONMOUSEOVER eller ONCLICK, kan også afvikle JavaScripts som interne scripts. Her behøver man ikke SCRIPT-tag'en, men skriver kommandoerne direkte, som f.eks. ONCLICK="window.open()", og skal flere kommandoer eksekveres, adskilles disse blot med semikolon, f.eks. ONCLICK="window.open(); alert()". Af hensyn til overskueligheden af ens kode, er anbefalingen herfra, at har man flere kommandoer, der skal eksekveres på denne måde, skal man kraftigt overveje at have et script med en function som man kalder.
Eksterne scripts
Hvis man bruger den samme rutine flere steder, eller man har et større script, kan man med fordel have sit script til at ligge eksternt. I praksis betyder det, at man lave en separat fil med extension .js, dvs. en JavaScript-fil. Jeg plejer at have mine eksterne JavaScripts til at ligge i et directory der hedder JavaScripts, så de er samlet ét sted.
Måden man bruger filen på, er at kan i HEAD-tag'en uploader scriptet. Hvis vi har .js-filen MitJavaScript i directoriet JavaScripts, så ser det således ud:
Nu bliver filen MitJavaScript.js indlæst sammen med siden der åbnes, og rutinerne startes med f.eks. ONCLICK eller ONSUBMIT som hvis de lå internt i HEAD-tag'en.
Der er én væsentlig forskel på scripts om de ligger internt eller eksternt. Internt skal man bruge SCRIPT-tag'en, men i .js-filen udelader man dette, så scriptet med de tre rutiner fra foregående afsnit skal i .js-filen se således ud:
Så, eksterne scripts: alle ens JavaScripts ligger i en eller flere .js-filer som man læser sammen med siderne, hvor man skal bruge dem.
Måden man bruger filen på, er at kan i HEAD-tag'en uploader scriptet. Hvis vi har .js-filen MitJavaScript i directoriet JavaScripts, så ser det således ud:
<SCRIPT TYPE="text/javascript" SRC="JavaScripts/MitJavaScript.js"></SCRIPT>
Nu bliver filen MitJavaScript.js indlæst sammen med siden der åbnes, og rutinerne startes med f.eks. ONCLICK eller ONSUBMIT som hvis de lå internt i HEAD-tag'en.
Der er én væsentlig forskel på scripts om de ligger internt eller eksternt. Internt skal man bruge SCRIPT-tag'en, men i .js-filen udelader man dette, så scriptet med de tre rutiner fra foregående afsnit skal i .js-filen se således ud:
function Rutine-1() {
}
function Rutine-2() {
}
function Rutine-3() {
}
}
function Rutine-2() {
}
function Rutine-3() {
}
Så, eksterne scripts: alle ens JavaScripts ligger i en eller flere .js-filer som man læser sammen med siderne, hvor man skal bruge dem.