JavaScript. Grundlæggende elementer. Jørgen Sørensen. jososoft software development Jørgen Sørensen

Transkript

1 JavaScript Grundlæggende elementer Jørgen Sørensen jososoft software development Jørgen Sørensen

2 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 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. <title>mit første JavaScript</title> document.write("hello World"); <br>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

4 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 <= d; a < e; Side 4

5 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

6 i scriptet bliver siden vist som herunder. Vi bruger her egenskaben bgcolor til at sætte baggrundsfarven til den hexidecimale værdi 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 * * 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 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(" "nyt"); Egenskaberne sætter vinduets udseende. Prøv at erstatte linien ovenfor med: nytvindue = window.open(" "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"); document.write("hello World"); Prøv at bytte rækkefølgen på de to linier i scriptet til: document.write("hello World"); alert("klik OK for at fortsætte"); Side 6

7 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")) document.write("hello World"); 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" <title>rammer og JavaScript</title> <frameset Rows= 50,* > <frame src= heading.htm name= head > <frameset Cols= 200,* > <frame src= liste.htm name= left > <frame src= indhold.htm name= right > </frameset> </frameset> Skriv nu en ny fil og gem den som "heading.htm". <h2>mine favoritlinks</h2> 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

8 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 = " top.right.location = " history objektet history-objektet indeholder en liste over besøgte sider. Der kan springes som vist i eksemplet: <title>history objektet</title> 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

9 <title>naviagtor objektet</title> document.write("<p>" + navigator.appcodename); document.write("<p>" + navigator.appname); document.write("<p>" + navigator.appversion); document.write("<p>" + navigator.useragent); //browserens kodenavn //browserens navn //browserens version //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). <title>math objektet</title> 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

10 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". <title>hvad er klokken?</title> dato = new Date(); time = dato.gethours(); minut = dato.getminutes(); // vi skal have to cifre i variablen minut if (minut <= 9) minut = "0" + minut; document.write("klokken er " + time + "." + minut); // indsætter et linieskift document.write("<br>"); if (time >= 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

11 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" <title>tekststørrelse</title> tekst = "Tekst i mange størrelser"; for (i = 1; i <= 7; i++) document.write("størrelse " + i + ": " + tekst.fontsize(i)); document.write("<br>"); while while-kontrolstrukturen anvendes når en løkke skal gennemløbes et på forhånd ukendt antal gange. Prøv at indtaste følgende og gem det som "kvadrattal.htm" <title>kvadrattal</title> x = 0; while (x*x < 123) document.write("kvadratet af " + x + " = " + x*x); document.write("<br>"); x++; Husk at tælle op i while-løkker! Side 11

12 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" <title>divider med nul</title> for (i = -5; i <= 5; i++) if (i == 0) document.write("hovsa. Division med 0 er ikke tilladt! <br>"); continue; document.write("10/" + i + " = " + 10/i + "<br>"); Prøv at erstatte "continue" med "break". Funktioner I de eksempler vi har set på indtil nu, er JavaScript ene skrevet i body-sektionen i html-koden og er blevet afviklet når browseren er nået frem til dem i fortolkningen af siden. I dette afsnit vil vi placere script-koden i funktioner i head-setionen. Disse kan kaldes ved indlæsning af siden eller når bestemte hændelser indtræffer (se afsnittet "Hændelser"). Skriv denne kode og gem den som "funktioner.htm". <title>funktioner</title> function linieskift() document.write("<br>"); function gange(x,y) var resultat = x*y; return resultat; function plus(x,y) var resultat = x+y; return resultat; Side 12

13 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". <title>hændelser</title> function linkklik() alert("du klikkede på et link"); function farvel() alert("du forlader nu denne side"); function velkommen() alert("velkommen på denne side"); <body onload="velkommen();" onunload="farvel();"> <a href= side2.htm onclick="linkklik();" onmouseover="window.status= Link til side 2 ; return true;">klik her</a> Side 13

14 Skriv også følgende og gem den som "side2.htm". <title>side 2</title> Side 2 Prøv i filen "hændelser.htm" at ændre linien <a href="side2.htm" onclick="linkklik();" onmouseover="window.status= Link til side 2 ; return true;">klik her</a> til <a href="side2.htm" onclick="linkklik();" onmouseover="window.status= Link til side 2 ;">Klik her</a> 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

15 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" <title>bestilling</title> 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; <h2>bestilling af øl</h2> <p>unge under 16 år kan højst bestille 1 kasse øl.</p> <Form Name="MinFormular" onsubmit="return kontrol();"> <table> <tr><td>navn:</td><td><input Type="text" Size="50" Name="Navn"></td></tr> <tr><td>adresse:</td><td><input Type="text" Size="50" Name="Adresse"></td></tr> <tr><td>alder:</td><td><input Type="text" Size="10" Name="Alder"></td></tr> <tr><td>antal kasser:</td><td><input Type="text" Size="10" Name="Kasser"></td></tr> <tr><td><input Type="Reset" Value="Nulstil felter"> </td><td><input Type="Submit" Value="Send formular"></td></tr> </table> </Form> Side 15

16 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: <script src= minefunktioner.js type= text/javascript > <title>min hjemmeside</title> <p>toptekst();</p> <p>indhold på siden. </p> <p>bundtekst();</p> Gem filen som "bareenside.htm". Bemærk linien: <script src="minefunktioner.js"> 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("<table bgcolor="#aaaaaa" width="100%"><tr><td>"); document.write("<h2>du er nu på min hjemmeside.</h2>"); document.write("jeg håber at du kan finde noget nyttigt"); document.write("</td></tr></table>"); function bundtekst() document.write("<table bgcolor="#aaaaaa" width="100%"><tr><td>"); document.write("copyright 2003 Mig"); document.write("</td></tr></table>"); Resultatet skulle gerne se sådan ud: Side 16

17 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