Programmering i Javascript

Transkript

1 Programmering i Javascript 1. Introduktion HTML er et fortrinligt værktøj til at strukturere og præsentere information, men hvis web siderne skal være interaktive, så der kan reageres på brugerens handlinger, må vi til at programmere. I princippet kan et program afvikles enten på serveren (den computer, der har websiden) eller på klienten (browser-brugerens computer). Javascript er beregnet til at køre på klenten, og i Internet Explorer er der indbygget en Javascript fortolker. Javascript indlejres direkte i HTML-koden med et specielt tag: <script Language = JavaScript >... her står scriptet... </script> Med attributten Language= JavaScript fortæller vi browseren, hvilket sprog scriptet er skrevet i. Der kan benyttes andre scriptsprog, fx VBScript (Visual Basic Script) og JScript, der er et sprog, der ligner JavaScript meget. Hvad kan Javascript bruges til? Her er nogle blandt utallige eksempler: Vise meddelelser til brugeren - enten som en del af selve web-siden eller i separate meddelelsesbokse. Fx kan der vises oplysninger om, hvornår siden sidst er opdateret. Vise forskellige effekter, når brugeren bevæger musen over bestemte områder eller hvis der trykkes på en knap. Tilføje rulletekster i browserens statuslinje Inden du starter... Med standardindstilling viser Internet Explorer ingen fejlmeddelelser, hvis der er fejl i et dokument det virker bare ikke. Hvis du vil have fejlmeddelelser vist, skal du lave følgende indstilling: I Internet Explorer vælger du i menuen: Funktioner > Internetindstillinger På fanebladet Avanceret skal du fjerne markeringen fra boksen ved siden af Deaktiver scriptfejlfinding og sætte kryds i boksen ved siden af Vis en meddelelse om hver scriptfejl. 1

2 Eksempel 1.1 et script i body-delen Der benyttes linjenumre i HTML-koden. Dette gør referencen til de enkelte linjer nemmere. Du skal ikke skrive linjenumrene, hvis du vil afprøve scriptet. 1 <html> 2 <head> 3 <title>javascript Eksempel 1</title> 4 </head> 5 <body> 6 Velkommen til min webside. <br/> 7 Siden er under udvikling.<br/> 8 Siden er sidst ændret på følgende tidspunkt <br/> 9 <script language="javascript"> 10 document.write(document.lastmodified); 11 </script> 12 </body> 13 </html> Hent dokumentet ind i en browser og studer resultatet nøje. Hvis du læser HTML-dokumentet ind i en editor og gemmer det, så vil du se et ændret tidspunkt næste gang du åbner dokumentet i browseren. Scriptet er placeret i HTML-dokumentets body-del. Dette bevirker, at output fra scriptet bliver en del af selve HTML-dokumentet. Linje 10 ser lidt langhåret ud, og kan være svær at forstå på nuværende tidspunkt, men lad os alligevel løfte sløret en smule for, hvad der foregår: Document (selve HTML-dokumentet) er et såkaldt objekt. Til et objekt er det knyttet visse egenskaber (hukommelse) og metoder (handlinger). Tidspunktet for seneste ændring af dokumentet, er noget objektet husker. Vi kan så på et senere tidspunkt spørge objektet om dette tidspunkt vi skal blot gøre det på den rigtige måde: document.lastmodified vil returnere tidspunktet for seneste ændring af dokumentet Det at skrive noget i HTML-dokumentet er en handling, Java scriptet skal udføre. For at udføre en sådan handling skal der være en metode tilstede. Denne metode hedder write, og aktiveres således: document.write() Det, der står inde i parentesen, vil blive skrevet i HTML-dokumentet 2

3 Øvelse Skriv en eller anden tekst i document.write( ), fx dit navn. Det, du skriver, skal være omsluttet af enkelt-anførselstegn altså dem her:. Det er JavaScripts måde at identificere tekststrenge på. 2. Tilføj en formateringstag fx <b>...</b> omkring den tekst du skrev i document.write( ). Se resultatet i en browser. Betyder det noget, om tag ene står inden for anførselstegnene eller udenfor? 3. Hvad sker der, hvis linje 10 ændres til document.write("<b>sidst ændret: </b>" + document.lastmodified); Eksempel 1.3 Mere om objekter Date objektet Objektet Date er et indbygget Javascript objekt, der sætter dig i stand til at arbejde med datoer og klokkeslæt på en meget nem måde. Date-objektet har ingen egenskaber (hukommelse), men derimod en række metoder til at håndtere dato og klokkeslæt. Date-objekter opbevarer dato og klokkeslæt på en temmelig speciel form, nemlig som antallet af millisekunder efter 1. januar 1970, men ved hjælp af Date-objektets metoder kan dette formateres til almindelige dato- og tidsformat. 1 <html> 2 <head> 3 <title>dato og Klokken</title> 4 </head> 5 <body> 6 <h1>dato og Klokken</h1> 7 <script language="javascript"> 8 now=new Date(); 9 lokaltid=now.tostring() 10 document.write("<b>lokal tid:</b>" + lokaltid + "<br/>"); 11 </script> 12 </body> 13 </html> I linje 8 oprettes et nyt Date-objekt, som vi kalder now. Objektet now arver alle de metoder, der er knyttet til et Date-objekt. Date-objektet now indeholder dato og et klokkeslæt som antallet af millisekunder efter 1. januar Dette tal kan omdannes til en streng vha. metoden tostring( ). Dette sker i linje 9: lokaltid=now.tostring() Her er lokaltid en variabel (en beholder) der benyttes til at opbevare dato og klokkeslæt som en tekststreng. Variablen lokaltid indeholder altså en tekststeng af formen Sun Nov 6 18:49:35 UTC

4 Øvelse Tilføj en linje til scriptet i eksempel 1.3, hvor du definerer en ny variabel (kald den fx GMTtid og tildel denne værdien af now.togmtstring() Tilføj også en linje (ligesom linje 10), der udskriver GMT tiden. 2. Et Date-objekt har metoder til at hente detaljer om det aktuelle klokkeslæt timer, minutter og sekunder. Definer variablerne timer, minutter og sekunder således timer=now.gethours(); minutter=now.getminutes(); sekunder=now.getseconds(); Opbyg vha. disse en tekststreng, der med document.write( ) skriver det aktuelle tidspunkt på formen tt:mm:ss Eksempel 1.5 et script i head-delen Indlæs nedenstående HTML-kode i en browser og studer nøje, hvad der sker 1 <html> 2 <head><title>et eksempel på en rullende meddelelse</title> 3 <script language="javascript"> 4 var msg = Her er en rullende meddelelse. Spændende, ikke? ; 5 var spacer = "......"; 6 var pos = 0; 7 function ScrollMessage() { 8 window.status = msg.substring(pos,msg.length) + spacer + msg.substring(0, pos); 9 pos++; 10 if (pos > msg.length) pos = 0; 11 window.settimeout("scrollmessage()",200); 12 } 13 ScrollMessage(); 14 </script> 15 </head> 16 <body> 17 <h1>et eksempel på en rullende meddelelse</h1> 18 Prøv at kigge på statuslinjen nederst på siden. 19 </body> 20 </html> Her er scriptet placeret i head-delen, og det bevirker, at scriptet bliver udført før HTML-dokumentets body-del bliver behandlet af browseren. I modsætning til de foregående eksempler producerer dette script intet output på selve web-siden. Det er ikke meningen, at du skal forstå, hvad der sker i scriptet (linje 3-14), men derfor kan vi jo godt kigge lidt på det. 4

5 Øvelse Lav de nødvendige ændringer, så du får udskrevet din egen rulletekst i statuslinje. 2. Lav en ændring i scriptet, så rulleteksten kører dobblet så hurtigt. 3. Fjern scriptet, der laver rulleteksten, og sæt dette script ind i stedet <script language = "JavaScript"> function Vis_tid() { now = new Date(); lokaltid = now.tostring(); window.status = lokaltid; window.settimeout("vis_tid()",1000); } Vis_tid(); </script> Prøv at give en forklaring på, hvad der sker i dette script herunder hvorfor timeout er sat til Eksempel 1.7 et script som hændelsesprocedure En hændelsesprocedure afvikles først, når en eller anden hændelse er indtruffet. Det kan fx (og typisk) være et klik med musen på en knap, men også meget andet men dette kommer vi tilbage til. Denne HTML-kode opretter en knap: 1 <html> 2 <head> 3 <title>en knap på formen</title> 4 </head> 5 <body> 6 <input type="button" value="klik her" name="knap1"> 7 </body> 8 </html> Indlæs koden i en browser og tryk på knappen. Du vil sikkert erfare, at der intet sker, men det kommer der til om et øjeblik. I linje 6 oprettes en knap med et input tag. De enkelte attributter i dette tag skal tolkes således: type="button" value="klik her" name="knap1" Dette betyder, at det er en knap, der oprettes. Der kan oprettes mange andre input-typer Der kommer til at stå Klik her på knappen Knappen får navnet knap1. 5

6 Det snedige er nu, at der kan tilføjes JavaScript kommandoer, som udføres når der klikkes på knappen. Disse tilføjes i en onclick-attribut på denne form: onclick="her står de JavaScript kommandoer der skal udføres" Hvis vi fx vil have en lille meddelelse til at stå i stauslinjen, ved vi fra eksempel 1.5, at dette klares med JavaScript kommandoen window.status='du klikkede på knappen' Hvis du erstatter linje 6 i ovenstående HTML-kode med denne linje: <input type="button" value="klik her" name="knap1" onclick="window.status='du klikkede på knappen'"> så sker der noget, når du trykker på knappen. Prøv eksempel 7.b. Øvelse 1.8 Skift baggrundsfarve med knapper 1. Udskift linje 6 i HTML-koden i eksempel 1.7 med denne <INPUT type="button" value="skift til gul" name="knap1" onclick="document.bgcolor='yellow'"> Så vil et klik på knappen bevirke, at baggrunden skifter til gul. Prøv! 2. Tilføj to knapper med påskriften hhv. "Skift til rød" og "Skift til hvid". Prøv af! Eksempel 1.9 meddelelser til brugeren i meddelelsesbokse Et af de simpleste scripts et et, hvor brugeren bydes velkommen til et website med en meddelelsesboks. Scriptet fylder én linje (linje 5 i HTML-dokumentet nedenfor): 1 <html> 2 <head> 3 <title>alert boks</title> 4 <script language="javascript"> 5 alert('velkommen til min website'); 6 </script> 7 </head> 8 <body> </body> 10 </html> 6

7 Øvelse Scriptet i ekssempel 1.9 er placeret i HTML-dokumentets head-del. Hvilken virkning har dette? Hvad ville der ske, hvis scriptet var placeret i body-delen? 2. Indsæt en alert-kommando mere i scriptet. Hvad sker der? 3. Lav de nødvendige ændringer i HTML-dokumentet fra øvelse 1.8, så der vises en alert boks med teksten Baggrunden skifter til gul. Først når der klikkes på alert boksens OK knap, skifter baggrunden til gul. (Husk, at JavaScript sætninger adskilles med et semikolon) 7

8 2. Betingede sætninger I øvelse 1.8 opstod der et spørgsmål om, hvordan man kunne programmere knappen, der skifter baggrunden til gul farve, således at knappen ved næste tryk skifter baggrundsfarven tilbage til hvid. Opgaven, vi her stiller os, er altså: Lav en knap med påskriften Skift til gul, der ved et tryk ændrer baggrundsfarven til gul og samtidig ændrer knappens påskrift til Skift til hvid. Ved et nyt tryk på knappen skal baggrundsfarven ændres til hvid og påskriften ændres til Skift til gul. Hvis påskriften = Skift til gul skift baggrundsfarven til gul; skift påskriften til Skift til hvid ellers skift baggrundsfarven til hvid; skift påskriften til Skift til gul Knappen lavede vi i øvelse 1.8 således: <INPUT type="button" value="skift til gul" name="knap1" onclick="document.bgcolor='yellow'"> Knappens navn (name) er altså knap1, dens påskrift (value) er fra starten Skift til gul og den JavaScript kommando, som udføres når der klikkes på knappen står i anførelsestegn efter OnClick. Hvis du vil have et Javascript program til at aflæse, hvad der står på en knap, skal du bruge punktum-notationen: knap1.value hvor knap1 er navnet på det objekt, du refererer til, og value er den egenskab ved objektet, du vil have fat i. Vil du i stedet ændre denne egenskab, skal du skrive knap1.value = Skift til hvid Herved får knappens value tildelt en ny værdi ( her værdien Skift til hvid ) Øvelse 2.1 Lav en knap med navnet knap1 og påskriften Skift til gul. a) I onclick placerer du en Javascript kommando, der viser knappens påskrift i en alert boks. b) Lav en lille ændring, så du i stedet får vist knappens navn i alert boksen. c) Indsæt en Javascript kommando i knappens onclock, så du får ændret knappens påskrift til Skift til hvid. 8

9 Herefter kan vores programstump komme noget tættere på Javascript (linjenumrene tjener kun til reference) 1 hvis knap1.value = Skift til gul 2 document.bgcolor= yellow ; 3 knap1.value= Skift til hvid 4 ellers 5 document.bgcolor= white ; 6 knap1.value= Skift til gul I linje 1 og i linje 6 forekommer Javascript kommandoen knap1.value= Skift til hvid, men i vidt forskellige betydninger: I linje 6 er der tale om en tildeling - knap1 skal have en ny påskift. I linje 1 er der tale om betingelse - hvis der rent faktisk står Skift til gul på knap1, så skal der returneres true (sandt), men står der noget andet, så skal der returneres false (falsk). For at skelne mellem disse betydninger skal betingelsen skrives med et dobbelt-lighedstegn og parenteser omkring: (knap1.value == Skift til gul ) Tilbage er blot at oversætte Hvis og ellers til engelsk, og sætte krøllede parenteser { } om både hvis-delen og ellers-delen: if (knap1.value = Skift til gul ) { document.bgcolor= yellow ; knap1.value= Skift til hvid } else { document.bgcolor= white ; knap1.value= Skift til gul } Hele denne programstump placeres mellem anførelsestegn efter onclick=, og så skulle det hele gerne fungere. Det færdige program finder du øverst på næste side. 9

10 <html> <head> <title>untitled</title> </head> <body> <input type="button" name="knap1" value="skift til gul" onclick=" if (knap1.value=='skift til gul') { document.bgcolor='yellow'; knap1.value='skift til hvid'} else {document.bgcolor='white'; knap1.value='skift til gul'}"> </body> </html> Øvelse I stedet for at lade knappens påskrift afgøre, hvilken del af scriptet, der skal udføres, havde det måske været mere naturligt at lade den aktuelle baggrundsfarve afgøre dette. Dvs., at betingelsen i if-else sætningen skal ændtres til if (document.bgcolor = white ) Lav denne ændring og konstater, at det ikke virker! Hvis du i stedet for white skriver #ffffff, så virker det. Prøv at give en forklaring på dette. 2. Du kan få siden til at starte med en rød baggrundsfarve ved at tilføje en attribut til body-taget: <body bgcolor= red > Hvordan opfører programmet sig, hvis der startes med en rød baggrundsfarve? Prøv at give et svar på dette inden du laver ændringen i programmet. Øvelse 2.3 Lav nogle ændringer til programmet i øvelse 2.2, således at første gang du klikker på kanppen, så skifter baggrundsfarven til gul. Næste gang, der klikkes, kommer en meddelelse om, at du allerede har skiftet til gul baggrund. 10

11 Den generelle stuktur af en if-else konstuktion ser således ud: if (betingelse) {action1} else {action2} Hvis betingelsen er opfyldt, så udføres action1. Action2 overspringes. Hvis betingelsen ikke er opfyldt, så overspringes action1 og action2 udføres. Hvis der ingen kommandoer er i else-delen, kan denne udelades. Strukturen er da if (betingelse) {action} Hvis betingelsen er opfyldt, så udføres action. Hvis betingelsen ikke er opfyldt, så overspringes action. Betingelsen skal indeholde to værdier, der skal sammenlignes. Ovenfor checkede vi om de to værdier var ens. Vi kan naturligvis også checke, om de er forskellige og (hvis det giver mening) om den ene er større end eller mindre end den anden. Syntaksen er denne: == (er lig med)!= (er forskellig fra) < (er mindre end) > (er større end) <= (er mindre end eller lig med) >= (er større end eller lig med) action1 og action2 består af en eller flere Javascript kommandoer adskilt af semikolon. Fx må der i action-delene gerne forekomme nye if-else konstruktioner. Øvelse 2.4 Lav knappen således, at du kan skifte mellem 3 baggrundsfarver (hvid-gul-rød) og således, at knappens på skrift skifter mellem Skift til gul, Skift til rød og Skift til hvid. Måske får du brug for at kende hex-farvekoderne. Åbn linket hexfarver på datalogi hjemmesiden. Her finder du dem alle! 11

12 Skal der handles forskelligt på 3 eller flere muligheder, så bliver if-else konstuktionerne for indviklede. Til sådanne opgaver benyttes switch-sætningen og en række case-sætninger. Syntaksen er switch(udtryk) { case værdi1: action1; break; case værdi2: action2; break; : : } default: action_default break-sætningen bevirker et udhop fra switch-konstruktionen. En switch-sætning er i det væsentlige det samme som en serie if-else-if sætninger. For at forstå syntaksen er det nemmest at se på et eksempel: Vi skal have lavet en knap, der kan skifte mellem 3 baggrundsfarver (hvid-gul-rød) og således, at knappens på skrift skifter mellem Skift til gul, Skift til rød og Skift til hvid. Knappen laves som tidligere, så vi behandler kun Javascriptet knyttet til onclick-hændelsen.vi lader knap1.value være det udtryk, der skal styre de enkelte cases. knap1.value vil altid have én af værdierne Skift til gul, Skift til rød eller Skift til hvid. Scriptet kommer til at se således ud: switch(knap1.value) { case 'Skift til gul': document.bgcolor='yellow'; knap1.value='skift til rød'; break; case 'Skift til rød': document.bgcolor='red'; knap1.value='skift til hvid'; break; case 'Skift til hvid': document.bgcolor='white'; knap1.value='skift til gul'; break } break-sætningen bevirker et udhop fra switch-konstruktionen Øvelse 2.5 Indsæt ovenstående script som onclick i knap1. Test programmet. Lav en lille tilføjelse, så knappen kan skifte mellem 4 baggrundsfarver. Gem scriptet. 12

13 3. Funktioner Ofte har man behov for at kunne genbruge sin JavaScript kode. I det, vi hidtil har lavet, er koden bundet til en bestemt knaps onclick-hændelse. Vi ser først på et lille eksempel, der byder velkommen til websiden. Hertil vil vi bruge et tekstfelt til at skrive navnet i. Et tekstfelt laves vha. et input-tag (ligesom en knap). Desuden skal vi bruge en knap med påskriften OK <body> Hvad hedder du? <br /> <input type="text" name="text1" maxlength="50" /><br /> <input type="button" value="ok" /> </body> Vi skulle gerne have det til at fungere således, at når der klikkes på OK-knappen, så vises det indtastede navn i en arlertboks. Dette kan let klares ved at tilføje onclick="alert('velkommen ' + text1.value)" til input-tag et. Læg mærke til, at text1.value altid indeholder det, der er skrevet i tekstfeltet. Øvelse 3.1 Få dette lille script til at fungere. Forklar, hvad der sker i 'Velkommen ' + text1.value. Hvorfor er der anførselstegn om Velkommen og ikke om text1.value? I HTML-dokumentets head del placerer du dette script (det meste af det sætter HTML-kit ind ganske automatisk): <script language="javascript" type="text/javascript">  </script> Her defineres en funktion med navnet velkomst. Denne funktion kan kaldes fra fx en knap s onclickhændelse. Funktionen skal kaldes med en parameter - navn - og et kald bevirker, at en alertboks kommer frem mad en velkomst det pågældende navn. 13

14 Øvelse 3.2 Erstat OK-knappens onclick-hændelsen med dette funktionskald: Hvad sker? onclick="velkomst(bente)" Hvad skal der stå i stedet for Bente, hvis navnet, der indstastes i tekstfeltet, skal have velkomsten? Øvelse 3.3 I denne øvelse skal du et specielt tekstfelt kaldet password. Prøv dette eksempel: <html> <head> <title>password check</title> <script language="javascript" type="text/javascript">  </script> </head> <body> <input type="password" name="pw" /><br /> <input type="button" name="knap" value="check" onclick="check()" /> </body> </html> Lav ændringer i koden, så flere passwords kan accepteres. Lav et tekstfelt til indtastning af brugernavn. Såvel password som brugernavn skal checkes. 14

15 Øvelse 3.4 I denne øvelse skal du lave comboboks til at skifte baggrundsfarve med. En comboboks laves således: <html> <head> <title>test af combobolse</title> </head> <body> <select name="combo1" size="1" onchange="alert(combo1.value)"> <option value="hvid"> Hvid baggrund </option> <option value="gul"> Gul baggrund</option> <option value="rød"> Rød baggrund</option> <option value="grøn"> Grøn baggrund</option> </select> </html> Udvid listen med flere farver og undersøg, hvad der sker, hvis du ændrer værdien i size. Hvis du ønsker, at en af farverne er valgt som standard fra begyndelsen - fx. den hvide, så tilføjer du selected = true i option-tagget for hvid. Lav et JavaScript, der kan ændre farverne efter comboboksens indstilling. 4. Regn med JavaScript Vi starter med at lave et simpelt JavaScript, der kan addere to hele tal. Hertil skal vi bruge to tekstfelter til at rumme de to tal, der skal adderes, og en knap til at iværksætte additionen. <body> <input type="text" value="" name="boks1" /> + <input type="text" value="" name="boks2" /> <input type="button" value=" = " name="ligmed"/> <input type="text" value="" name="facit" readonly="true" /> </body> Indsæt denne kode i et html-dokument og check, at alt ser fornuftigt ud. Øvelse 4.1 Lav en onclick-procedure til ligmed-knappen der henter indholdet af de to tekstfelter boks1 og boks2, og udskriver summen af de to tal i en alert-boks. Ser resultatet rigtigt ud? 15

16 Problemet er, at boks1.value opfattes som en tekst og ikke som et tal. Når indholdet af de to tekstfelter derefter lægges sammen, så betyder det, at de to tekster skrives i forlængelse af hinanden. For at få summen af tallene regnet ud, skal vi altså have JavaScript til at opfatte boks1.value og boks2.value som tal. Hertil er JavaScript udstyret med standardfunktionen parseint(). Denne fungerer således, at når linjen tal1 = parseint(boks1.value) udføres, så vil tal1 indeholde det hele tal, der står i boks1 - vel at mærke opfattet som et tal. Det reviderede script ser således ud:: <html> <head> <title>læg to tal sammen</title> <script language="javascript" type="text/javascript">  </script> </head> <body> <input type="text" value="" name="boks1" /> + <input type="text" value="" name="boks2" /> <input type="button" value=" = " name="ligmed" onclick="regn()" /> <input type="text" value="" name="facit" readonly="true" /> </body> </html> Øvelse 4.2 Lav de nødvendige ændringer i koden ovenfor, så resultatet udskrives i facit-feltet i stedet for i en alert boks. Hvis du erstatter parseint med parsefloat, så kan du regne med decimaltal. Prøv at bruge såvel decimal-punktum som decimal-komma. Hvad sker? Lav en knap med påskriften Slet, der sletter indholdet af alle tekstfelterne før indtastning af et nyt regnestykke. 16