Dynamisk HTML JavaScript och webbläsarens objektmodell

Transkript

1 Dynamisk HTML 1 JavaScript och webbläsarens objektmodell Ove Lundgren (2009) Ove Lundgren DOMDHTML2009.doc

2 Innehåll Dynamisk HTML Webbläsarens variabler och metoder. Objektmodellen. Anropa metoder med JavaScript Händelsehanteraren onclick Skriv egna JavaScript-metoder Händelsehanteraren onload Variabler och metoder i objektet document Händelsehanterarna onmouseover och onmouseout Referera till objekt med name Referera till objekt med this Metoden bytabild() JavaScript JavaScript-övningar Förkunskapskrav Du bör vara väl förtrogen med HTML och CSS Det är en fördel om du kan (grunderna i) något programmeringsspråk (t.ex. C++ eller Java) Arbetssätt Läs noga igenom all text och gör övningarna. Övningar markeras med en liten kvadrat till vänster, så här t.ex: Skriv in följande (o.s.v.) Dynamisk HTML Förr var webbsidor statiska: När de väl var laddade gick det inte att ändra utseende eller innehåll utan att ladda om sidan. Numera är dokument på webben dynamiska: Utseende och innehåll kan förändras utan att sidan behöver laddas på nytt. För att bygga dynamiska webbsidor används dynamisk HTML (DHTML). DHTML är inte ett speciellt språk eller verktyg. DHTML är en kombination av följande: HTML CSS DOM ( = Document Object Model) JavaScript HTML och CSS känner du redan till. DOM är en standard för hur elementen i ett webbdokument är organiserade och innehåller metoder för att påverka elementens egenskaper. JavaScript utnyttjas för att exekvera metoderna i DOM, för att utföra beräkningar mm. Ove Lundgren DOMDHTML2009.doc

3 Webbläsarens variabler och metoder. Objektmodellen. I en webbläsare - t.ex. MicroSoft Internet Explorer (IE) och Mozilla Firefox finns ett antal inbyggda variabler och metoder (ibland använder man ordet funktioner i stället för metoder). Några exempel på variabler: navigator.appname navigator.appversion window.status Webbläsarens namn, t.ex. "Netscape" Webbläsarens versionsnummer t.ex. "4.5.." Vad statusraden visar (längst ned i fönstret) Exempel på metoder (funktioner) : window.alert(str) Visar meddelanderuta med texten str samt OK-knapp window.confirm(str) Meddelanderuta med texten str samt OK- och Avbryt-knapp Fuktionsvärdet blir true om man klickar OK, false om man klickar false window.prompt(str, str2) En meddelanderuta med texten str. Försedd med ett inmatningsfält som visar standardvärdet str2 Funktionsvärde blir det som står / skrivs in i inmatningsfältet window.setinterval(m,t) Startar timer. Metoden m anropas var t:e millisekund window.settimeout(m,t) Fördröjning. Metoden m anropas efter t millisekunder. window.open() Öppna nytt fönster Vissa metoder kräver att man skriver argument mellan parenteserna när metoden anropas. Detta är värden, tal eller texter, som "skickas med" för att på något sätt bearbetas av metoden. Om vi t.ex. gör anropat window.alert("hej") så är textsträngen "HEJ" argument. Metoden kommer att skriva ut just den texten i en meddelanderuta. Vissa metoder kräver flera argument, andra inget alls En del metoder lämnar ett värde, ett funktionsvärde, när de anropas. Sådana metoder kallas ofta funktioner. window.prompt() är exempel på en sådan. Funktionen kommer all lämna ett värde (returnera ett värde), nämligen den text som användaren matar in i inmatningsfältet. Metoder och variabler i webbläsaren är organiserade i en objektmodell: - Tänk dig ett objekt som något som äger en rad metoder och variabler. - Varje metod eller variabel i webbläsaren tillhör ett visst objekt. De variabler och metoder ovan vars namn börjar med navigator tillhör ett objekt som heter navigator. De variabler och metoder ovan vars namn börjar med window tillhör ett objekt som heter window. Om du har studerat objektorienterad programmering är du bekant med begreppet objekt. Om du inte har gjort det så räcker det (i denna kurs) att du tänker dej ett objekt som just detta: - Något som har en uppsättning metoder och variabler. Ove Lundgren DOMDHTML2009.doc

4 Anropa metoder med JavaScript För att exekvera en metod i webbläsarens objektmodell används JavaScript. JavaScriptkod skrivs (normalt) mellan taggarna och och kan (i princip) placeras var som helst i koden. JavaScript startar en metod i webbläsarens objektmodell om man helt enkelt skriver den aktuella metodens namn, med eventuellt argument mellan parenteserna. En JavaScript-sats bör också ha ett semikolon (;) på slutet. Skriv in koden nedan. Spara som dovn1.html. Provkör. (Meddelanderuta med texten "HEJ" visas) window.alert("hej!"); Lägg märke till: En sträng (en text) skrivs inom citationstecken, t.ex. "HEJ" Ändra scriptet till: window.alert(navigator.appname); (Namnet på din web browser visas ) Ändra sedan till: window.alert("din webbläsare: " + navigator.appname + " Version " + navigator.appversion); (Namnet på din web browser med versionsnummer visas ) Lägg märke till hur man använder plustecken för att sammanfoga (konkatenera) textsträngar. Naturligtvis kan scriptet innehålla fler satser: Satserna åtskiljs av semikolon (;) I exemplet nedan deklareras först i scriptet en variabel som vi kallar namnet En variabel är något som kan lagra en textsträng eller ett tal. En variabel deklareras med ordet var Metoden (funktionen) window.prompt(str, str2) returnerar det som matats in i textrutan. (Om man inte skriver in något returneras standardvärdet - defaultvärdet - str2. ) Metoden window.alert(str) skriver ut ett välkomstmeddelande. Ändra scriptet enligt nedan. Spara och provkör. var namnet; namnet = window.prompt("skriv ditt namn!", "Kalle"); window.alert("välkommen " + namnet + "!"); Om du inte har programmerat förut kan det vara svårt med alla nya begrepp. Var lugn! En utförligare genomgång om JavaScript kommer senare Ove Lundgren DOMDHTML2009.doc

5 Händelsehanteraren onclick Det finns en speciell typ av attribut i HTML-taggar som kallas händelsehanterare. Dessa används för att starta ett JavaScript då en viss händelse inträffar, t.ex. när man klickar på en knapp. Händelsen "klicka på ett element" fångas upp av händelsehanteraren onclick. Vi ska börja med att bekanta oss med just onclick. Vi ska låta en knapp reagera på klickning. Vi skriver in attributet onclick i taggen <input type = "button"...> Skriv in kod enligt nedan. Spara som dovn2.html <input type="button" value="tryck" onclick = " window.alert('hej!'); " > Efter händelsehanteraren skriver man ett tilldelningstecken och citationstecken: onclick = " " Mellan citationstecknen skriver man JavaScript-kod! Vi har nyss lärt oss att sådan kod normalt ska skrivas mellan - taggar, men här är alltså ett undantag! Efter händelsehanterare skrivs JavaScript-kod mellan citationstecknen onclick=" window.alert('hej!'); " Observera apostroftecknen kring strängen HEJ Observera en viktig sak: Normalt omges textsträngar med citationstecken ( t.ex. "HEJ!" ) För all JavaScript-kod som skrivs efter händelsehanterare (alltså inom "yttre" citationstecken) måste man byta eventuella citationstecken i själva koden mot apostroftecken! Här skriver vi 'HEJ!' Ändra enligt nedan: <input type="button" value="tryck" onclick = " var namnet; namnet=window.prompt('skriv ditt namn!', 'Kalle'); window.alert('välkommen ' + namnet + '!'); " > Man kan alltså skriva flera satser. Tänk bara på att åtskilja satserna med semikolon. Och - glöm inte: Eftersom scriptet står inom "yttre" citationstecken måste alla 'inre' citationstecken bytas ut mot apostrofer. Ove Lundgren DOMDHTML2009.doc

6 Skriv egna JavaScript-metoder Om det blir mycket kod ska man inte skriva koden direkt efter händelsehanteraren. Då definierar man i stället en egen metod och anropar denna i händelsehanteraren. Så här går det till: Skriv koden nedan. Spara som dovn3.html Definitionen av egna JavaScript-metoder placerar vi mellan <SCRIPT>-taggar i HEAD-blocket function hejsan() { var namnet; namnet = window.prompt("skriv ditt namn!", "Kalle"); window.alert("välkommen " + namnet + "!"); <input type="button" value="tryck" onclick=" hejsan(); " > Här anropas metoden hejsan() Man deklarerar en egen metod med ordet function följt av det metodnamn man har hittat på. I vårt exempel är metodnamnnet hejsan(). Observera att metodnamnet ska följas av två parenteser. Sedan kommer ett antal satser som står inom "krullparenteser" {. Där beskriver man vad metoden ska göra. Hela metoddefinitionen lägger man inom -taggar i -blocket. Metoden anropas sedan med metodens namn, hejsan(). Händelsehanteraren onload Händelsen "ny webbsida laddas och visas" fångas upp med händelsehanteraren onload. I föregående övning: Skriv in händelsehanteraren onload i body-taggen. Så här: <body bgcolor="silver" onload=" hejsan()"> Nu visas inmatningsrutan direkt när sidan laddats Ove Lundgren DOMDHTML2009.doc

7 Variabler och metoder i objektet document I webbläsarens objektmodell finns objektet document som har variabler och metoder som har att göra med den aktuella webbsidan! Exempel på variabler i document: document.bgcolor document.lastmodified Webbsidans bakgrundsfärg t.ex. "red" eller "#ff0000" Datum när sidan senast uppdaterades Variabler som beskriver egenskaper hos en bild på webbsidan (se bild nedan) : document.images[0].src Filnamn "Katt.jpg" document.images[0].width Bilden bredd t.ex "109" (pixels) document.images[0].height Bilden höjd t.ex "83" (pixels) Om webbsidan har ytterligare en bild har den variablerna (se bild nedan) : document.images[1].src Filnamn "Lejon.jpg" document.images[1].width Bilden bredd t.ex "109" (pixels) document.images[1].height Bilden höjd t.ex "83" (pixels) Variabler för formulär: Antag att en webbsida har ett formulär med två textfält (se bild nedan) : document.forms[0].elements[0].value document.forms[0].elements[1].value Textinnehållet i det första textfältet t.ex Mjau Textinnehållet i det andra textfältet t.ex. Grrr document.images[0] document.images[1] Mjau Grrr document. forms[0].elements[0] document. forms[0].elements[1] Tryck Vi ska i nästa dynamiska övning utnyttja document.images[0].src för att påverka en bild. Vi ska få en <img>-tagg att växla bild. Bilder för övningarna finns här: dynabilder.zip Ove Lundgren DOMDHTML2009.doc

8 Händelsehanterarna onmouseover och onmouseout Händelsen "muspilen går in över ett element" fångas upp av händelshanteraren onmouseover Händelsen "muspilen lämnar ett element" fångas upp av händelshanteraren onmouseout Vi ska få något att hända då muspilen går in över, respektive lämnar, en länk. Vi placerar alltså händelsehanterarna i ankartaggen, a. Skriv in nedanstående kod och spara som dovn4.html och testa. <h1>katter</h1> <img src = "Katt.jpg"> <a href="#" onmouseover="document.images[0].src = 'Lejon.jpg';" onmouseout="document.images[0].src = 'Katt.jpg';" > Klicka </a> (Ny bild visas när muspilen går in över länken. Den ursprungliga återkommer när muspilen lämnar ) Flytta <img>-taggen så att den ersätter länk-texten Klicka. Så här alltså: <h1>katter</h1> <a href="#" onmouseover="document.images[0].src = 'Lejon.jpg';" onmouseout="document.images[0].src = 'Katt.jpg';" > <img src = "Katt.jpg" > </a> ( När muspilen går in över bilden byts bilden.. ) Tips: När bilden, som här, är en länk visas en ram kring bilden. Denna kan tas bort med attributet border="0" i <img>-taggen. Ove Lundgren DOMDHTML2009.doc

9 Referera till objekt med name När vi skriver t.ex. document.images[0] så pekar vi ut det objekt som "håller reda på" den första bilden. ( Vi kan då påverka någon egenskap hos det objektet, t.ex. innehållet med document.images[0].src ) Ofta säger vi att document.images[0] är en pekare eller en referens till objektet. Det finns andra sätt att referera till objekt: Om vi utnyttjar attributet name för att sätta ett namn på en <img>-tagg (t.ex. name = "minbild" ) så kan man sedan referera till <img>-elementet med detta namn (t.ex. document.minbild ) Gör följande ändringar i dovn4.jpg. Spara sedan filen som dovn5.jpg <h1>katter</h1> <a href="#" onmouseover="document.kattbild.src = 'Lejon.jpg';" onmouseout="document.kattbild.src = 'Katt.jpg';" > <img src = "Katt.jpg" name = "kattbild" > </a> Referera till objekt med this I äldre webbläsare var man ofta hänvisad till ankartaggen (som i föregående avsnitt) när man behövde ett muskänsligt element. Men om vi nu inte har för avsikt att skapa en länk till en annan sida, utan bara vill att bildelementet ska byta innehåll när vi pekar på det, så kan vi numera skriva händelsehanterarna i själva <img>-taggen. Skriv in koden nedan. Spara som dovn6.html <h1>katter</h1> <img src = "Katt.jpg" name = "kattbild" onmouseover = "document.kattbild.src='lejon.jpg';" onmouseout = "document.kattbild.src='katt.jpg';" > Enkelt, eller hur? Referensen document.kattbild i övningen ovan refererar ju till det element där den är skriven. Referensen pekar på sitt eget element! I sådana fall kan vi ersätta referensen med ordet this. Ändra så att koden blir enligt nedan: <h1>katter</h1> <img src = "Katt.jpg" onmouseover = "this.src = 'Lejon.jpg';" onmouseout = "this.src = 'Katt.jpg';" > Ove Lundgren DOMDHTML2009.doc

10 Metoden bytbild() I exemplen ovan skriver vi JavaScript inom citationstecken direkt efter onmouseover respektive onmouseout. Många gånger anropar man i stället här en egendefinierad metod. Nedan finns ett förslag på hur en sådan metod kan utformas: Skriv in koden nedan. Spara filen som dovn7.html function bytbild( x ) { if (x == 0) document.kattbild.src = "Katt.jpg"; else document.kattbild.src = "Lejon.jpg"; <h1>katter</h1> <img src = "Katt.jpg" name = "kattbild" onmouseover = "bytbild(1);" onmouseout = "bytbild(0);" > Metoden bytbild(x) är försedd med en parameter som vi kallat x. När metoden anropas med bytbild(0); så kommer parametern x att få värdet 0 (noll). Se på koden i metoddefinitionen! Där står det att om x är lika med 0 (noll) så ska Katt.jpg visas, annars, det vill säga om x inte är lika med noll, så ska bilden Lejon.jpg visas. Det värde som man skriver på parameterns plats vid anrop brukar man kalla metodens argument. Observera att vi inte kan använda referensen this här eftersom elementen inte pekas ut inuti <img>-taggen. Vi har nu sett att i html-kod som är avsedd för moderna webbläsare kan vi skriva in händelsehanterare i t.ex. <img>- och <div>-taggar och på sätt göra dessa muskänsliga. Vi kommer att lära oss sätt att referera till andra element än bilder och formulär. Vi kommer då att dynamiskt kunna förändra textinnehåll och texters utseende, ändra storlek och placering hos lager, och på så sätt skapa animeringar, med mera. Allt detta tar vi upp i häfte 2. Se till att du har sparat filen dovn7.html ovan. Vi använder den i häfte 2. Detta häfte avslutar vi med en kort genomgång av scriptspråket JavScript och några övningar. Ove Lundgren DOMDHTML2009.doc

11 JavaScript Var skrivs JavaScript-kod? JavaScript skrivs inom -taggar. Satserna i JavaScript åtskiljs av semikolon (;) och/eller genom radbyte. Exempel: <script language = "JavaScript"> sats; sats; sats sats; Råd: Använd semikolon så att du får överensstämmelse med C++ och Java! Efter en händelsehanterare skrivs JavaScript inom citationstecken. Eventuella citationstecken i koden byts då ut mot apostrof. Exempel: onclick=" window.alert('hej!'); " Kommentarer En kommentar är ett stycke kod som nonchaleras av webbläsaren (Används för att skriva minnesanteckningar, med mera, i koden) I JavaScript skriver man kommentarer på samma sätt som i C++ och Java: Efter en "dubbel-slash" ( // ) - kommentaren gäller då raden ut. Flerradiga kommentarer skrivs mellan "slash-stjärna" och "stjärna-slash": /* en kommentar... */ Namnge och deklarera variabler Du har arbetat med variabler i matematiken (bokstavsbeteckningar för tal) På samma sätt kan en variabel i JavaScript ha (lagra) olika värden. De tecken som kan användas i variabelnamnet är bokstäverna a-z och siffror (0-9) samt understrykningstecken ( _ ) Använd t.ex. inte blanktecken eller å, ä, ö i variabelnamn! I början av ett script brukar man deklarera de variabler man tänker använda. Man skriver då ordet var följt av variabelnamnen, t.ex. så här: var i,j; var x; var namn2, reg_nr; var vippa; I de flesta programmeringsspråk är variabeldeklarationen obligatorisk. I JavaScript är den frivillig. Variablerna tilldelas värden i koden. Tilldelning sker med likhetstecknet, så här: i = 7; j = -6; x = 3.14; namn2 = Bengt-Åke Karlsson ; reg_nr = ABC123 ; vippa = true; // heltal // heltal // flyttal // sträng // sträng // boolean Deklaration och tilldelning kan göras samtidigt, i en enda sats, så här: var i = 7; Likhetstecknet kallar vi i JavScript-, Java- och C++-sammanhang hellre tilldelningstecknet. Ove Lundgren DOMDHTML2009.doc

12 Variabler kan också tilldelas värden från andra variabler. Exempel: Med satsen c = a + b; får c värdet av summan av de tal som lagrats i a respektive b Satsen k = k + 1; gör att k ökar sitt värde med 1 (ett) Satsen k++; är en kortform för samma sak, det vill säga k ökar med 1 Datatyper Vi arbetar med fyra datatyper: Heltal, flyttal, strängar och boolean. Se avsnittet Variablerna tilldelas värden i koden ovan. Variablerna i och j ovan har tilldelats heltal. Variabeln x har tilldelas ett decimaltal, eller flyttal som man brukar säga i programmeringskretsar. Observera att decimaltecknet ska vara en punkt inte ett kommatecken! Variablerna namn2 och reg_nr har tilldelats strängar. En sträng är en följd av tecken (bokstäver, siffror eller andra tecken vilka som helst). En sträng ska omges av citationstecken. Se upp när du tilldelar tal till en variabel! Exempel: Med x = 3.14 blir x inte ett tal utan en sträng. Variabeln x kan då inte ingå i en räkneformel t.ex. Variabel vippa har tilldelats ett boolskt värde. Det finns bara två: true och false. Variablerna tilldelas värden från tangentbordet Variabler kan tilldelas värden från tangentbord, via inmatningsruta eller textfält. Exempel: namn2 = window.prompt("skriv ditt namn!", ""); Variabeln namn2 tilldelas den sträng som matas in i inmatningsrutan. reg_nr = document.mittfrm.mintxt.value; Variabeln reg_nr tilldelas den sträng som matas in i textfältet. Metoderna parseint( ) och parsefloat( ) Detta är två av JavaScripts fördefinierade metoder. Vi ska se hur de används: Det som står i inmatningsrutor och textfält är strängar. Antag att vi vill kunna tilldela en heltalsvariabel ett värde från tangentbordet. Då måste vi kunna omvandla en sträng till ett tal. För detta ändamål används metoden parseint( ) Exempel: i = parseint( window.prompt("skriv ett heltal!", "") ) ; Antag att du matar in 325 Metoden window.promp() returnerar strängen "325" Metoden parseint() omvandlar strängen "325" till talet 325. Variabeln i får alltså heltalsvärdet 325. Metoden parsefloat( ) omvandlar en sträng till ett flyttal. Exempel: s = document.mittfrm.mintxt.value; // Om s exempelvis har värdet "12.75" x = parsefloat( s ); // så kommer x att få värdet Ove Lundgren DOMDHTML2009.doc

13 Aritmetiska operatorer addition + subtraktion - multiplikation * division / modulus % (resten vid heltalsdivision) Sammanfoga strängar med strängar och strängar med tal Plustecknet har ytterligare en betydelse. Det används för att sammanfoga (konkatenera) strängar. Exempel: s1 = "Hej "; s2 = s1 + "Kalle"; Strängvariabeln s2 har efter att dessa satser utförts värdet "Hej Kalle" Exempel: t = 17; s2 = "Talet är " + t ; När en sträng konkateneras med ett tal blir resultatet - en sträng! s2 får alltså värdet "Talet är 17" Utskrift Med alert-metoden. Exempel: window.alert("hej!"); Utskrift i ett textfält. Exempel: document.mittfrm.mintxt.value = "HEJ"; (Fler möjligheter att få snyggare utskrifter kommer senare ) Selektion ( = val ) Exempel if (a > b) { sats; sats;... else { sats; sats;... Om det är sant (true) att a > b så utförs dessa satser annars utförs dessa satser Om det bara är en enda sats som ska utföras efter if (eller else)behövs inte krullparenteserna. Exempel: if (a > b) sats; else sats; Om ingenting ska utföres efter else tar man inte med else över huvud taget. Exempel: if (a > b) { sats; sats;... Relationsoperatorer Större än > Mindre än < Större än eller lika med >= Mindre än eller lika med <= Lika med == (Obs! dubbelt likhetstecken) Ej lika med!= Ove Lundgren DOMDHTML2009.doc

14 Logiska operatorer Ett uttryck som kan ha värdet true eller värdet false kallas ett logiskt uttryck (eller boolskt uttryck) Exempel: (a > b) är ett logiskt uttryck. Flera sådana uttryck kan sättas samman till ett logiskt uttryck med de logiska operatorerna && ("logiskt OCH") och ("logiskt ELLER") Exempel: (a > b ) && ( c > d ) (a > b ) ( c > d ) Hela uttrycket är sant om båda deluttrycken är sanna Hela uttrycket är sant om minst ett av deluttrycken är sant ( Pipe-tecknet,, hittar du långt ned till vänster på tangentbordet, på samma tangent som tecknen < och > ) Den logiska operatorn "icke" skrivs med ett utropstecken,! Denna operator ger motsatt värde hos en boolsk variabel. Exempel: vippa =!vippa ; //om vippa är true blir det nya värdet false och tvärtom. Iteration ( = upprepning) Följande konstruktion gör att satserna i blocket kommer att upprepas n gånger: for(var i = 0; i < n; i++) { sats; sats;... for-loopen används när man vet hur många gånger något ska upprepas. Ibland vill man att något ska upprepas så länge ett viss logiskt uttryck är sant. Då används while-loopen: while ( logiskt uttryck ) { sats; sats;... Egna metoder Det vanligaste är att JavaScript-kod återfinns i egendefinierade metoder som sedan anropas från en händelsehanterare. Egna metoder skriver man mellan -taggar i head-blocket. Man hittar på ett lämpligt namn på metoden. (Namngivningsreglerna är de samma som för variabeler.) Metodnamnet ska föregås av function och följas av parenteser. Sedan följer ett block inom "krullparenteser". Där skrivs vad metoden ska göra. Så här alltså: function minmetod() { sats; sats; Metoden anropas sedan med t.ex. onclick = " minmetod() ; " Ove Lundgren DOMDHTML2009.doc

15 En metod kan också förses med (en eller fler) parametrar. Vi tar ett exempel: function namnloop( s, n) { for(var i = 0 ; i < n ; i++) { document.write( s + "<br>" ); En sådan metod måste anropas med lämpliga argument. Om metoden anropas exempelvis så här onclick = " namnloop('lisa',3);" så kommer namnet Lisa att skrivas 3 gånger i ett nytt dokument. Metoder som returnerar värde Metoder som returnerar ett värde (funktionsvärde) kallas ofta funktioner. Vi tar ett exempel: function rektarea( a, b ) { var area = a * b; return area; Arean för en rektangel med sidorna a och b kommer att beräknas. Observera att det som funktionen ska" lämna ifrån sig" ska föregås av ordet return. Vi anropar metoden med lämplig argument. Exempel: Utskrift av "Arean är " + rektarea(4,5) ger resultatet Arean är 20 Exempel: Satsen area = rektarea(3,4); gör att variabeln area tilldelas värdet 12 De två typerna av metoder har lite olika benämningar i olika programmeringsspråk: Metod som ej returnerar värde Metod som returnerar värde JavaScript metod metod (ofta funktion) Java void metod metod C++ void funktion funktion Pascal procedur funktion Ove Lundgren DOMDHTML2009.doc

16 JavaScript-övningar Här är några övningar där du får tillämpa vad du lärt dig om JavaScript. Du får också utnyttja några metoder och variabler i objektmodellen som vi nämnt, men inte använt tidigare. Försök att lösa uppgifterna på egen hand. Lösningsförslag finns på efterföljande sidor. (Observera att det är lösningsförslag. Uppgifterna kan lösas på flera likvärdiga sätt ) JS1 Skriv html-kod för en enkel webbsida med bakgrundsfärg "silver". Lägg in ett formulär med en knapp. När man trycker på knappen ska bakgrunden bli röd. JS2 Som ovan men ersätt knappen med tre radioknappar. Beroende på vilken knapp som klickas ska bakgrundsfärgen bli röd, grön eller blå och den aktuella färgens namn ( red, green, blue ) ska visas på statusraden. JS3 Skapa ett formulär med tre textfält och en knapp. Man ska skriva in heltal i textfälten. När man trycker på knappen ska det tredje textfältet visa summan av talen i de övriga textfälten. JS4 Som ovan, men ersätt knappen med fyra radioknappar. Beroende på vilken knapp som klickas ska summan, differensen, produkten resp. kvoten beräknas och visas. JS5 Skapa ett formulär med två textfält och en knapp. I det första textfältet skriver man ett namn, i det andra ett heltal. Om man exempelvis skriver Kalle respektive talet 5 ska strängen Hejsan Kalle skrivas ut 5 gånger på en ny webbsida. JS6 Skriv html-kod för en webbsida med denna body: <body bgcolor="silver" onload= " window.setinterval( 'bildloop()', 500 ); "> <img src="katt.jpg" width="109" height="83" name="bilden"> Metoden bildloop() kommer att anropas var 500:e millisekund. Skriv metoden bildloop() så att bilden byts ut vid varje anrop. Använd minst två (gärna fler) bilder. JS7 Skriv html-kod för en webbsida som visar en knapp. När man klickar på knappen ska metoden window.open() anropas: window.open("minsida.html","mittfonster","width=200,height=200"); Det första argumentet i window.open( ) är en länk till den sida som ska visas i fönstret. Det andra argumentet är ett namn på det nya fönstret. Det tredje argumentet kan se ut så här: "toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes, scrollbars=yes,resizable=yes,width=200,height=200" Här anges alltså (med yes eller no) vilka egenskaper fönstret ska ha. Testa gärna! Allt skrivs på en enda rad. Inga blanktecken (mellanslag) får förekomma i argumenten. Ove Lundgren DOMDHTML2009.doc

17 Lösningsförslag <title> js1 </title> <form> <input type="button" value = "Tryck" onclick = " document.bgcolor='red'; " > </form> <title>js2</title> function farg(f) { document.bgcolor = f ; <form> <input type="radio" name = "färg" onclick = "farg('red');" > Röd <br> <input type="radio" name = "färg" onclick = "farg('green');" > Grön <br> <input type="radio" name = "färg" onclick = "farg('blue');" > Blå </form> <br> <title>js3</title> function rakna() { var x, y, summa; x = parseint( document.frm.t1.value ); y = parseint( document.frm.t2.value ); summa = x + y; document.frm.t3.value = "Summan är " + summa; <form name="frm"> <input type="text" name = "t1" ><br> <input type="text" name = "t2" ><br> <input type="text" name = "t3" ><br> <input type="button" value="tryck" onclick = "rakna();" > </form> Ove Lundgren DOMDHTML2009.doc

18 <title>js4</title> function rakna(t) { var x, y, r; x = parseint( document.frm.t1.value ); y = parseint( document.frm.t2.value ); if(t=='+'){r=x+y; document.frm.t3.value = "Summan är " + r; if(t=='-'){r=x-y; document.frm.t3.value = "Differensen är " + r; if(t=='*'){r=x*y; document.frm.t3.value = "Produkten är " + r; if(t=='/'){r=x/y; document.frm.t3.value = "Kvoten är " + r; <form name="frm"> <input type="text" name = "t1" ><br> <input type="text" name = "t2" ><br> <input type="text" name = "t3" ><br> <input type="radio" value = "aritm" onclick = "rakna('+');" >+<br> <input type="radio" value = "aritm" onclick = "rakna('-');" >-<br> <input type="radio" value = "aritm" onclick = "rakna('*');" >*<br> <input type="radio" value = "aritm" onclick = "rakna('/');" >/<br> </form> <title>js5</title> function namnloop( s, n) { for(var i = 0 ; i < n ; i++) { document.write( s + "<br>" ); <form name="frm"> <input type="text" name = "t1" ><br> <input type="text" name = "t2" ><br> <input type="button" value = "Tryck" onclick = " namnloop(document.frm.t1.value, parseint(document.frm.t2.value));"> </form> <title>js6</title> var i=0; function bildloop() { i++; if (i == 1) document.bilden.src = "Katt.jpg"; if (i == 2) document.bilden.src = "Lejon.jpg"; if (i==2) i=0; <body bgcolor="silver" onload= "window.setinterval( 'bildloop()', 500 );"> <img src="katt.jpg" width="109" height="83" name="bilden"> Ove Lundgren DOMDHTML2009.doc

19 <title> js7 </title> function OppnaFonster() { window.open("js20.html","mittfonster","width=200,height=200"); <body bgcolor="lightblue" > <h1>testar script</h1> <FORM> <INPUT TYPE="BUTTON" NAME="knapp1" VALUE="Tryck" onclick ="OppnaFonster();"> </FORM> Testa med följande stäng som tredje argument i window.open() "toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes, scrollbars=yes,resizable=yes,width=200,height=200" Fortsätt med arbetshäftet Dynamisk HTML 2: DOM och mer om JavaScript Ur innehållet: DOM (document object model) Referera till objekt med id Förändra textinnehåll på en webbsida Förändra style-egenskaper på en webbsida Fler händelsehanterare Egna namn på pekare Synlig osynlig Animering JavaScripts coreobjekt Ove Lundgren DOMDHTML2009.doc