JavaScript - jososoft - Jørgen Sørensen

JavaScript 

Grundlæggende elementer 

Jørgen Sørensen 

jososoft software development 

© 1998-2007 Jørgen Sørensen

JavaScript Jørgen Sørensen js@jososoft.dk 

Indholdsfortegnelse 

Introduktion ………………………………………………………………………………………………………………………… 

Det første program ……………………………………………………………………………………………………………… 

Variabler ………………………………………………………………………………….….……………………………………… 

Operatorer …………………………………………………………………………………………………………………………… 

Objekthierarkiet i JavaScript ……………………………………………………………………………………………… 

document objektet ……………………………………………………………………………………………………………… 

window objektet ………………………………………………………………………………………………………………… 

frames objektet …………………………………………………………………………………………………………………… 

location objektet ………………………………………………………………………………………………………………… 

history objektet …………………………………………………………………………………………………………………… 

navigator objektet ……………………………………………………………………………………………………………… 

Date objektet ……………………………………………………………………………………………………………………… 

Math objektet ……………………………………………………………………………………………………………………… 

String objektet …………………………………………………………………………………………………………………… 

Kontrolstrukturer ………………………………………………………………………………………………………………… 

Funktioner …………………………………………………………………………………………………………………………… 

Hændelser …………………………………………………………………………………………………………………………… 

Validering af formularer ……………………………………………………………………………………………………… 

Scriptfiler …………………………………………………………………………………………………………………………….. 

Side 2 

3 

3 

4 

4 

5 

5 

6 

7 

8 

8 

8 

9 

9 

9 

10 

12 

13 

14 

16


Introduktion 

JavaScript er et sprog, der kan give en hjemmeside mere funktionalitet og gøre den interaktiv, 

så den reagerer på læserens handlinger. JavaScript kan bl.a. bruges til validering af formularer 

før disse sendes til en server, hvilket er med til at nedsætte trafikken på internettet og samtidig 

vil en lokal validering være hurtigere. 

JavaScript afvikles lokalt i klientens browser og kræver ikke forbindelse til en server. Kombinationen 

af Html, CSS og JavaScript kaldes ofte "Dynamisk Html". 

JavaScript er udviklet af Netscape og hed oprindeligt LiveScript. JavaScript kan fortolkes af alle 

browsere i modsætning til VBScript og JScript, der begge er Microsoft opfindelser. 

JavaScript er et scriptsprog, der – i forhold til rigtige programmeringssprog – har en relativ 

simpel syntaks og kun få regler. Forskelle og ligheder er blandt andet: 

• JavaScript kode er fortolket kode, den kompileres ikke til f.eks. exe.filer eller dll.filer 

• JavaScript kode er ofte integreret i html-dokumenter 

• JavaScript variabler erklæres ikke og ej heller deres type 

• JavaScript er objektbaseret, bruger indbyggede objekter 

• JavaScripts objektreferencer kontrolleres under afvikling, dvs. en dynamisk binding 

NB: I kodeeksemplerne indeholder html-koden for overskuelighedens skyld ikke alle 

kravene i W3C-standarderne. 

Det første program 

Lad os straks skrive det første JavaScript program. Brug f.eks. Notesblok. 

 

 

Mit første JavaScript 

 

 

 

document.write("Hello World"); 

 

Det gik jo rigtig fint! 

 

 

Gem filen som "detførsteprogram.htm" og åbn filen i browseren. 

Du skulle nu gerne se dette billede: 

Side 3


Før vi går dybere i "Mit første JavaScript", skal vi lige have lidt basisviden om variabler og operatorer 

samt JavaScripts indbyggede objekter. 

Variabler 

Man definerer en variabel ved at tildele den en værdi, f.eks. 

sum = 15; 

tekst = "Hej med dig"; 

Tekststrenge skal angives i dobbelte eller enkelte anførselstegn. Der bør sættes semikolon 

efter alle linier, der udfører noget; selv om nogle browsere er ligeglade! 

Variabelnavne skal begynde med et bogstav eller _. Efterfølgende kan også tallene anvendes. 

I visse tilfælde kan de specielle danske bogstaver give problemer i variabelnavne - undgå dem. 

Variabler, der benyttes i funktioner (se eksempler i afsnittet "Funktioner") kan skjules for andre 

funktioner med nøgleordet "var", f.eks. 

var tal = 315; 

var minTekst = "Velkommen"; 

Operatorer 

Tildelende operatorer 

En tildelende operator giver en værdi til venstre operand baseret på værdien af højre operand. 

y = 5; 

Ovenstående betyder at y tildeles værdien 5. 

Aritmetiske operatorer 

JavaScript har de almindelige regningsarter ( + , - , * og / ). Der er også andre, f.eks. 

resultat = 7 % 3; 

Procenttegnet betyder modulus, hvilket er resten ved divisionen. I eksemplet går 3 op i 7 to 

gange og resten er 1. Dvs. variablen resultat bliver 1. 

Man forøger en variabel med 1 ved at bruge to plustegn, f.eks. 

a = ++b; 

a = b++; 

I første linie forøges b med 1 og resultatet tildeles a. 

I anden linie sættes a lig med b hvorefter b forøges med 1. 

Formindskelse sker på samme måde med -. 

Sammenlignende operatorer 

Et lille udvalg, som vist er umiddelbart forståelige: 

a > b; 

a >= c; 

a


og et par stykker, der kræver lidt forklaring: 

a == b; 

a != c; 

To lighedstegn (==) betyder en sammenligning, der kan være enten sand eller falsk. Sammenligningen 

er sand hvis værdien af a er lig med værdien af b. 

Det betyder ikke, at a bliver tildelt værdien af b. 

Udråbstegn og lighedstegn (!=) betyder en sammenligning, der kan være sand eller falsk. Der 

testes her på om værdierne af de to variable er forskellige. Hvis f.eks. a har værdien 3 og c 

har værdien 7 i eksemplet ovenfor er udsagnet sandt. 

Logiske operatorer 

Disse omfatter "And", "Or" og "Not". Disse anvendes oftest i kontrolstrukturer (se senere). 

And skrives &&; Or skrives || og Not skrives !. Se eksempler i afsnittet "Kontrolstrukturer". 

Objekthierarkiet i JavaScript 

document-objektet har vi set, da vi skrev vort første script. 

document er en del af objekthierarkiet i JavaScript. Strukturen i objekthierarkiet er: 

window 

parent, frames, self, top 

location 

history 

document 

links 

anchors 

forms 

elements (text, textarea, button, checkbox, radio, submit, reset) 

window refererer til browservinduet 

parent, frames, self, top refererer til rammer 

location indeholder oplysninger om sidens protokol, adresse, kommunikationsport og vært 

history indeholder en liste over de tidligere besøgte sider 

document er selve siderne, som brugeren ser 

JavaScript har nogle objekter, der ligger uden for hierarkiet. Disse er: 

• navigator 

• Date 

• String 

• Math 

document objektet 

write() er en metode på objektet document. Vi brugte metoden i vort første script. 

document-objektet har også nogle egenskaber, f.eks. indstilling af baggrundsfarven. 

Ved at tilføje linien 

document.bgColor = "#666666"; 

Side 5


i scriptet bliver siden vist som herunder. 

Vi bruger her egenskaben bgColor til at sætte baggrundsfarven til den hexidecimale værdi 

666666. De to første cifre er Rød = 66; de to næste cifre er Grøn = 66 og de to sidste cifre er 

Blå = 66. Den hexidecimale værdi 66 = 6 * 16 + 6 * 1 = 102. 

En farves værdi kan f.eks. findes i tegneprogrammet Paint, der findes i Programmer | Tilbehør 

i alle Windows versioner. Åbn Farver | Rediger farver | Definer farver. Sæt markøren i det store 

felt til højre og aflæs værdierne for Rød, Grøn og Blå og omregn til hexidecimale værdier. 

Prøv at ændre værdien 666666 til en anden værdi og se hvad der sker. 

Prøv at skrive bgcolor i stedet for bgColor. Hvad sker der? 

Prøv at glemme et anførselstegn. Hvad sker der? 

window objektet 

window-objektet har en række metoder og egenskaber. 

Metoderne open() og close() åbner og lukker browservinduer. 

Prøv i scriptet at tilføje linien 

nytVindue = window.open("http://www.google.com", "nyt"); 

Egenskaberne sætter vinduets udseende. Prøv at erstatte linien ovenfor med: 

nytVindue = window.open("http://www.google.com", "nyt", "toolbar=no, location=no, status=no, 

width=400, height=400"); 

Andre egenskaber er directories, menubar, scrollbars og resizable, der er "yes" eller "no". 

Prøv nogle af disse egenskaber og bemærk hvordan det nye browservindue ændrer udseende. 

alert 

alert() -metoden åbner en meddelelsesboks i browseren. Prøv at rette script-blokken til: 

 

alert("Klik OK for at fortsætte"); 


 

Prøv at bytte rækkefølgen på de to linier i scriptet til: 


alert("Klik OK for at fortsætte"); 

Side 6


confirm 

confirm() er lidt mere avanceret end alert. confirm() har en Ok-knap og en Annuller-knap. 

Det vil så være naturligt, at der sker noget forskelligt, afhængig af hvilken knap, der aktiveres. 

Prøv at rette de to script-linier til: 

if (confirm("Klik OK for at sende en hilsen")) 


else 

document.write("Jeg sender ingen hilsen til dig"); 

Så fik vi også lige klaret if…else konstruktionen. Mere om den senere! 

prompt 

prompt() beder brugeren om en indtastning. Prøv at rette script-linierne til: 

mitNavn = prompt("Skriv dit navn"); 

document.write("Hello World from " + mitNavn); 

Bemærk, at tekststrenge sættes sammen (konkatineres) med "+". 

frames objektet 

Med et frame-objekt kan man styre indholdet i de enkelte vinduer i et frameset. 

Vi prøver en simpel konstruktion med tre rammer. Gem filen som "frameset.htm" 

 

 

Rammer og JavaScript 

 

 

 

 

 

 

 

 

 

Skriv nu en ny fil og gem den som "heading.htm". 

 

 

Mine favoritlinks 

 

top.left.document.write("Her er en liste"); 

top.right.document.write("Her er noget indhold"); 

 

 

 

Åbn "frameset.htm" i browseren og du vil se følgende: 

Side 7


Filerne "liste.htm" og "indhold.htm" defineret i "frameset.htm" behøver du slet ikke oprette! 

Men pas på, at dit JavaScript er placeret i et dokument, der er synligt. 

location objektet 

location-objektet er JavaScripts måde at fortælle på, hvilket dokument, der skal åbnes. 

Prøv i filen "heading.htm" at ændre script-linierne til: 

top.left.location = "http://www.google.com"; 

top.right.location = "http://www.jp.dk"; 

history objektet 

history-objektet indeholder en liste over besøgte sider. Der kan springes som vist i eksemplet: 

 

 

History objektet 

 

 

 

history.go(-1); 

 

 

 

Anvendelse som ovenfor har ikke umiddelbart megen mening, da åbning af siden automatisk 

vil sende brugeren videre til den sidst åbnede. Hvis derimod scriptet kaldes f.eks. fra en knap 

(se afsnittet "Hændelser"), kan det have god mening. 

navigator objektet 

navigator-objektet kan give information om brugerens browser. Objektet har flere egenskaber, 

blandt andre disse som er vist i følgende kode: 

Side 8


 

 

Naviagtor objektet 

 

 

 

document.write("" + navigator.appCodeName); //browserens kodenavn 

document.write("" + navigator.appName); //browserens navn 

document.write("" + navigator.appVersion); //browserens version 

document.write("" + navigator.userAgent); //browserens headerinform. 

 

 

 

Bemærk, at kommentarer kan indsættes efter // - enten som vist eller på selvstændige linier. 

Større kommentarblokke på flere linier kan indsættes mellem /* og */. 

Date objektet 

Date-objektet har metoder til at hente dato, ugedage, timer, minutter, sekunder m.m. Se et 

eksempel på anvendelse af Date i afsnittet "Kontrolstrukturer". 

Math objektet 

Math-objektet indeholder en række matematiske konstanter (egenskaber). 

 

 

Math objektet 

 

 

 

document.write("Hvis cirklens radius er 5, så er dens areal = " + 5 * 5 * Math.PI); 

 

 

 

String objektet 

String-objektet er nok det mest benyttede; og ofte sker det uden man er klar over det. Ved 

en tildeling af en værdi til en variabel, f.eks. 

tekst = "Davs med dig"; 

opretter man faktisk et String-objekt. 

String-objektet har kun én egenskab. Det er length, som returnerer strengens længde. Derimod 

er der en lang række metoder. Her vises et mindre udvalg: 

Metode Forklaring 

charAt(x) Returnerer tegnet på position x. Position går fra 0 og slutter på length-1 

fontcolor(rrggbb) Ændrer tekstfarven 

Side 9


fontsize(x) Ændrer tekststørrelse. Gyldige værdier er 1 – 7 

indexOf(x,y) Returnerer position af det først fundne x. Søgningen starter fra y 

lastIndexOf(x,y) Returnerer sidste position af x. Søgningen starter bagfra. 

substring(x,y) Udtrækker teksten fra position x til position y. (y er ikke strengens længde) 

toLowerCase() Alle bogstaver gøres små 

toUpperCase() Alle bogstaver gøre store 

Derudover er der en række tekstformateringsmetoder, som i html, f.eks. bold() og small(). 

Kontrolstrukturer 

if…else 

Test af en betingelse og udførelse af kode, der afhænger af om betingelsen er sand eller falsk, 

foretages med if… eller med if…else kontrolstrukturen. 

Prøv at skrive følgende kode, og gem den som "hvaderklokken.htm". 

 

 

Hvad er klokken ? 

 

 

 

dato = new Date(); 

time = dato.getHours(); 

minut = dato.getMinutes(); 

// vi skal have to cifre i variablen minut 

if (minut = 7 && time < 23) 

{ 

document.bgColor = "Yellow"; 

document.fgColor = "Red"; 

document.write("Hvilken dejlig dag!"); 

} 

else 

{ 

document.bgColor = "Black"; 

document.fgColor = "White"; 

document.write("Nu er det nat!"); 

} 

 

 

 

Prøv at stille tiden om på din pc. 

Bemærk, at: 

• En kodeblok på flere linier skal være i {} 

• Standardfarver kan angives med deres engelske navn 

Side 10


for 

for-kontrolstrukturen anvendes når en løkke skal gennemløbes et kendt antal gange. Syntaksen 

er: 

for (tællerens startværdi; slutbetingelse; tællerens optælling pr. gennemløb) 

{ 

kommandoer 

} 

Prøv at indtaste følgende og gem det som "tekststørrelse.htm" 

 

 

Tekststørrelse 

 

 

 

tekst = "Tekst i mange størrelser"; 

for (i = 1; i


break og continue 

break anvendes når en løkke skal afbrydes permanent. 

continue anvendes når kun det aktuelle gennemløb i løkken skal springes over. 

Prøv at indtaste følgende og gem det som "dividermednul.htm" 

 

 

Divider med nul 

 

 

 

for (i = -5; i


function udskriv(tekst) 

{ 

document.write(tekst); 

} 

 

 

 

 

udskriv("Forskellige regnestykker"); 

linieskift(); 

udskriv("2 gange 4 er = " + gange(2,4)); 

linieskift(); 

udskriv("3 plus 5 er = " + plus(3,5)); 

 

 

 

Bemærk: 

• Funktioner kaldes med "function" hvad enten funktionen returnerer noget eller ej. 

• Husk () efter funktionens navn – også selv om der ikke skal overføres parametre. 

• Parametre overføres uden typeangivelse. 

• Returværdier sendes tilbage med "return". 

Hændelser 

Funktioner er velegnede til at udføre bestemte opgaver. Hændelser er velegnede til at kalde en 

funktion når brugeren ønsker den udført, f.eks. ved klik på et hyperlink eller tryk på en knap. 

Lad os prøve! Skriv koden herunder og gem den som "hændelser.htm". 

 

 

Hændelser 

 

function linkklik() 

{ 

alert("Du klikkede på et link"); 

} 

function farvel() 

{ 

alert("Du forlader nu denne side"); 

} 

function velkommen() 

{ 

alert("Velkommen på denne side"); 

} 

 

 

 

Klik her 

 

 

Side 13


Skriv også følgende og gem den som "side2.htm". 

 

 

Side 2 

 

 

Side 2 

 

 

Prøv i filen "hændelser.htm" at ændre linien 

Klik her 

til 

Klik her 

Hvad sker der i statuslinien i bunden af browser-vinduet? 

Bemærk 

• anvendelsen af dobbelte og enkelte anførselstegn 

• at der kan kobles flere hændelser på det enkelte element. 

Andre hændelser: 

Hændelse Udføres når Anvendes ved 

onBlur Et formularfelt mister fokus Select, Text, Textarea 

onChange Indholdet i et formularfelt ændres Select, Text, Textarea 

onClick Et element klikkes med musen Button, Checkbox, Radio, A, Reset, Submit 

onFocus Et formularfelt får fokus Select, Text, Textarea 

onLoad Browser har indlæst dokumentet Body, Frameset 

onMouseOver Markøren er over elementet A 

onSelect En tekst i en formular markeres Text, Textarea 

onSubmit Submit-knappen trykkes Form 

onUnload Et andet dokument indlæses Body, Frameset 

Validering af formularer 

JavaScript kan anvendes til validering af formularer før disse sendes til serveren. Det kan være 

med til at reducere belastningen på nettet og at nedsætte svartiden. 

Forestil dig denne formular: 

Side 14


Vi vil nu kontrollere, at unge mennesker under 16 år ikke kan bestille mere end 1 kasse øl. 

Skriv koden nedenfor og gem den som "validering.htm" 

 

 

Bestilling 

 

function kontrol() 

{ 

if (document.MinFormular.Kasser.value > 1 && document.MinFormular.Alder.value < 16) 

{ 

alert("Hov, hov. Det er du ikke gammel nok til"); 

return false; 

} 

return true; 

} 

 

 

 

Bestilling af øl 

Unge under 16 år kan højst bestille 1 kasse øl. 

 

 

Navn: 

Adresse: 

Alder: 

Antal kasser: 

 

 

 

 

 

 

Side 15


Valideringen udføres af funktionen kontrol(), der kaldes ved afsendelse af formularen. 

Scriptfiler 

Genbrug af JavaScripts kan laves ved at placere funktioner i særskilte script-filer. 

Hvis du vil have en fast top- og bundtekst (måske i en ramme) på dine hjemmesider kan det 

gøres sådan: 

 

 

 

Min hjemmeside 

 

 

toptekst(); 

Indhold på siden. 

bundtekst(); 

 

 

Gem filen som "bareenside.htm". 

Bemærk linien: 

 

i sektionen af siden. Denne linie skal indsættes på alle sider, hvor top- og/eller bundtekst 

funktionen ønskes anvendt. 

Du skal nu skrive en tekstfil og gemme den som "minefunktioner.js". 

function toptekst() 

{ 

document.write(""); 

document.write("Du er nu på min hjemmeside."); 

document.write("Jeg håber at du kan finde noget nyttigt"); 


} 

function bundtekst() 

{ 


document.write("Copyright 2003 Mig"); 


} 

Resultatet skulle gerne se sådan ud: 

Side 16


På denne måde kan man samle alle sine generelle scripts i én fil. Det letter i høj grad opdateringen 

af et større website. 

Side 17

JavaScript - jososoft - Jørgen Sørensen

Create successful ePaper yourself

Delete template?

Save as template?