Innehållsförteckning. Innehåll

Transkript

1 Javascript övningar

2 Innehåll Detta dokument innehåller flera stycken olika javascript-övningar i olika svårighetsnivåer. Vissa är utförligare beskrivna än andra. Du kan själv välja vilka du vill testa på, men alla övningar bjuder på något nytt så du får bäst insikt om javascript om du försöker dig på alla. Innehållsförteckning Javascript övningar...1 Sidtruktur html...3 Alert - enkel...4 Utskriftsfunktion enkel...5 Utskriftsfunktion lite bättre, lite svårare...6 Miniräknare Medelsvår...8 Vilkor Enkel...12 Loopar Enkel...13 Formulärvalidering Medel...14 Formulärvalidering Medel/Svår...16 Utskriftsfunktion Svår...19

3 Sidtruktur html Till alla javascript övningar behöver ni ett html-dokument. Vi använder oss, som vanligt, av xhtml standarden strict till detta. Se till att de html-dokument som ni jobbar utifrån har följande struktur: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled Document</title> </head> <body> </body> </html> I övningarna som följer kommer övrig html-formatering att ges samt eventuella stilregler som ni får infoga i en CSS. Varje övning bör ha en egen html-sida.

4 Alert - enkel För att komma igång med javascript så testar vi en enkel javascript funktion som heter alert. Alert är en funktion som kastar ett pop-up fönster i en webbläsare. Den bör man egentligen bara använda för att felsöka javascript eftersom användare oftast anser att pop-up -fönster är påträngande och i vägen. Det är dock en enkel funktion som man kan använda sig av för att förstå hur javascript fungerar. Skriv följande i html-dokumentet: <p><a>alert</a></p> Vi har här skapat ett stycke som innehåller en länk som inte leder någonstans. Vi vill nu skapa funktionalitet för att kasta en alert-ruta när man klickar på länken. Detta kan vi enkelt göra genom att skriva javascript direkt i html-dokumentet. I a-taggen kan du lägga in följande javascript: onclick="alert('hej');" onclick är ett event, en händelse som vi vill ska utlösa vår alert-ruta. Onclick betyder helt enkelt på klick. Alltså, när man klickar vill man att något ska hända. Precis som vilket annat html-attribut som helst så skriver man ett = efter onclick för att säga vad som ska hända när man klickar. Efter = så skriver vi vårt lilla javascript som ska kasta vår alertruta. alert('hej'); Det är funktionen alert() som gör att vi kan få upp vår alert-ruta. Innanför paranteserna skriver vi sedan vad vi vill att det ska stå i alert-rutan. Testa att byta ut 'hej' mot något annat för att se vad som händer. Den fullständiga koden för vår funktionalitet ser alltså ut så här: <p><a href="" onclick="alert('hej');">alert</a></p>

5 Utskriftsfunktion enkel En funktion som kan, om den är gjord på rätt sätt, göra en webbapplikation mer användarvänlig är en utskriftsfunktion. Istället för att tvinga användaren att gå in på menyerna i browsern för att skriva ut en sida så kan man med javascripts hjälp infoga en skriv ut -länk eller knapp direkt på sidan som automatiskt öppnar upp browserns utskrift -dialog ruta. Detta kan göras på olika sätt, i den här övningen så går vi igenom det enklaste sättet att göra det på, men det är också det sätt som är minst tillgängligt. Skriv följande i html-dokumentet: <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra congue urna, eget tincidunt odio gravida quis. Phasellus tempus porttitor placerat. Sed quis lacus mi. Suspendisse mattis posuere dignissim. Nunc ipsum mi, aliquam hendrerit tristique eu, volutpat nec elit. Sed dapibus imperdiet cursus. Morbi nec urna quis est mattis auctor ac ut libero. In consectetur rutrum urna eleifend lacinia. Donec eu metus felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <p>phasellus in arcu vitae dolor vulputate sodales nec a arcu. Sed scelerisque, tellus eget aliquet vestibulum, purus mauris consequat est, ut convallis turpis ipsum tincidunt odio. Vestibulum dapibus massa at eros malesuada blandit. In hac habitasse platea dictumst. Donec at nisi augue. Donec aliquet dignissim purus, ut sollicitudin lorem tempor ut. Integer tempus urna vel dolor mattis accumsan at id nunc. Phasellus tempus arcu nibh. Etiam pretium aliquam nisi, euismod tristique enim gravida vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque est arcu, imperdiet in bibendum ac, luctus vitae lacus. Donec dignissim dignissim felis, malesuada pulvinar massa viverra a. Sed mattis tortor quis nulla viverra convallis. Nam id velit sem.</p> <p><a>print page</a></p> Vi har nu en html-sida med några textstycken. Längst ner har vi också en länk som vi vill ska sätta igång vår utskriftsfunktionalitet. Utskriftsfunktionen är, liksom alert, funktionen väldigt enkel. Infoga följande javascript i a-taggen i html-dokumentet: onclick="window.print();" Här säger vi att vi vill att något ska hända på klick. Javascript funktionen som gör att vi kan skriva ut sidan heter window.print(). Den säger åt browsern att öppna upp utskriftsdialog-rutan och eventuellt skriva ut det fönster man har funktionen på.

6 Utskriftsfunktion lite bättre, lite svårare Vi börjar mer samma html-struktur som vi hade i den föregående utskriftsfunktionen, det vill säga att vi börjar med att skriva in följande i html-dokumentet: <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra congue urna, eget tincidunt odio gravida quis. Phasellus tempus porttitor placerat. Sed quis lacus mi. Suspendisse mattis posuere dignissim. Nunc ipsum mi, aliquam hendrerit tristique eu, volutpat nec elit. Sed dapibus imperdiet cursus. Morbi nec urna quis est mattis auctor ac ut libero. In consectetur rutrum urna eleifend lacinia. Donec eu metus felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <p>phasellus in arcu vitae dolor vulputate sodales nec a arcu. Sed scelerisque, tellus eget aliquet vestibulum, purus mauris consequat est, ut convallis turpis ipsum tincidunt odio. Vestibulum dapibus massa at eros malesuada blandit. In hac habitasse platea dictumst. Donec at nisi augue. Donec aliquet dignissim purus, ut sollicitudin lorem tempor ut. Integer tempus urna vel dolor mattis accumsan at id nunc. Phasellus tempus arcu nibh. Etiam pretium aliquam nisi, euismod tristique enim gravida vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque est arcu, imperdiet in bibendum ac, luctus vitae lacus. Donec dignissim dignissim felis, malesuada pulvinar massa viverra a. Sed mattis tortor quis nulla viverra convallis. Nam id velit sem.</p> <p><a>print page</a></p> Det vi ska ändra på i denna utskriftsfunktion är att lägga själva javascript funktionen för utskrift i en egen javascript-fil. På så sätt separerar vi innehåll från beteende. Skapa en ny javascript fil och spara den som easyprint.js. Vi vill nu länka in javascript-filen i vårt html-dokument och vi väljer att göra det genom att placera en script -tagg längst ner i dokumentet, precis innan </body>. <script type="text/javascript" src="easyprint.js"></script> Här säger vi att vi vill länka in ett dokument av typen text/javascript i html-dokumentet. I srcattributet specificerar vi sökvägen till vår nya javascript-fil (kom ihåg att ändra sökvägen om javascriptet inte ligger i samma mapp som html-dokumentet). Nu vill vi skapa vår utskriftsfunktionalitet i den javascriptfilen vi skapade. Vi börjar med att skapa en funktion, en behållare av kod som vi senare kan anropa från html-dokumentet. Vi skriver därför in detta i javascriptfilen: function printpage() Med hjälp av nyckelordet function så definierar vi en funktion som vi senare kan återanvända hur många gånger som helst. Efter function skriver vi funktionsnamnet, vilket vi hittar på själva. Jag väljer att kalla min funktion för printpage, men ni får välja namn på funktionen själva, viktigt att tänka på är dock att namnet bör vara förklarande, så ni vet vad den gör och att funktionsnamnet inte får innehålla konstiga tecken (åäö-=)(/! ; etc...) eller börja med en siffra. Paranteserna som följer, efter funktionsnamnet är obligatoriska. De finns alltid med på funktioner och de kan användas för att skicka saker till funktionen. Vi behöver inte göra det i detta fall så vi lämnar paranteserna tomma. Nu ska vi skriva vår funktionalitet i funktionen. Innanför måsvingarna (curly-brackets) skriver vi in följande: window.print(); Det är samma print-funktion som vi använde oss av i den föregående övningen, men vi har nu lagt den i en funktion i ett separat javascript-dokument.

7 Javascriptet bör nu se ut så här: function printpage() window.print(); Det som återstår att göra är att koppla funktionen till vår skriv ut -knapp. Detta gör vi i htmldokumentet. I a-taggen för vår utskriftsknapp skriver vi in ett onclick-event som ska köra igång vår utskriftsfunktion: onclick= printpage(); I html-koden säger vi nu åt länken att köra igång vår funktion printpage() (kom ihåg att byta namn om ni har döpt den till något annat). Spara båda filerna och testa om det fungerar. En av fördelarna med att vi nu har separerat lite mer av javascriptsfuktionaliteten och lagt den i en separat fil är att vi kan återanvända den i alla andra html-dokumet som vi vill ha funktionen i. Det är bara att länka in javascript-filen och sedan kalla på funktionen med printpage(), där man vill köra den.

8 Miniräknare Medel/svår I den här övningen ska vi skapa en enkel miniräknare som kan addera två tal med varandra. Vi vill att en användare ska kunna ange två tal och utifrån dem få ett resultat. Därför börjar vi med att skapa ett formulär som gör att användaren kan skriva in talen. Vi skriver därför in följande i det html-dokument som vi arbetar med: <form action="#"> <p><input type="text" name="tal1" /> + <input type="text" name="tal2" /></p> <p id="out">= </p> <input type="submit" value="beräkna" /> </form> Här har vi ett vanligt formulär med två textfält som användaren ska använda för att skriva in de tal som ska adderas i vår miniräknare. I formuläret skriver vi in det obligatoriska action -attributet. Men vi vill ju inte skicka datat till en annan sida därför skriver vi action= #. Håll också reda på vilka name ni ger input-fälten. Dessa behöver vi nämligen för att komma åt fälten i javascriptet. I formuläret finns också ett stycke som har id-namnet out. Denna är viktig då det är här vi ska redovisa uträkningen. Till denna miniräknare vill vi ha javascriptet i en separat fil, därför skapar vi en ny fil som vi exempelvis kan döpa till calc.js. Denna infogar vi i html-dokumentet längst ner på sidan med en script-tagg: <script type="text/javascript" src="calc.js"></script> I javascriptfilen ska vi nu påbörja vår miniräknar-funktion som vi sedan vill ska köras varje gång användaren klickar på Beräkna -knappen. Vi börjar med att definiera funktionen: function calc(theform) För att skapa en funktion använder vi oss av nyckelordet function därefter följer vårt funktionsnamn, jag har valt att döpa funktionen till calc, men ni kan givetvis döpa det till vad ni känner för. Innanför paranteserna efter funktionsnamnet står det theform. Detta är en variabel (som också kan döpas till vad ni vill) som vi vill ska skickas med till funktionen när vi anropar den. Just den här variabeln vill vi ska innehålla en referens om vilket formulär det är som anropar funktionen. Anledningen till detta är att det blir mycket enklare för oss att kunna hämta de tal som vi ska addera om vi direkt i funktionen vet vilket formulär det är som innehåller talen. I funktionen vill vi nu hämta in våra tal. Vi fortsätter därför funktionen med: var tal1 = theform.tal1.value; var tal2 = theform.tal2.value; Vi skapar här två variabler tal1 och tal2 och ger dessa värdet från input-fälten som innehåller de tal som vi vill addera med varandra. Med hjälp av nyckelordet var skapar vi en variabel, tal1 och tal2 är variabelnamn och kan egentligen döpas till vad ni känner för.

9 Med = säger vi att vi vill tilldela dessa variabler ett värde. Det är det värde som står till höger som ges till det som står på vänstersida om lika-med -tecknet. Man skulle alltså kunna skriva så här: var tal1 = 12; Vilket hade betytt att variabeln tal1 hade fått värdet 12. Men då vi i detta fall vill att användaren ska bidra med värdet, genom att denne skriver in ett värde i input-fältet så kan vi inte bara hitta på ett värde. Vi måste komma åt input-fältens värde och det är det vi gör genom theform.tal1.value. theform är det formuläret som anropar funktionen, tal1 är namnet ( name ) på input-fältet och value säger att vi vill ha input-fältets värde. Vi gör samma sak för tal2. Nu kan det vara ett bra tillfälle att testa att det fungerar, att tal1 och tal2, faktiskt får värden från input-fälten. Vi kan testa detta genom att, först och främst, kalla på funktionen från html-koden. I vår form-tag, efter action -attributet skriver vi: onsubmit= calc(this); Först säger vi åt formuläret att något ska hända när det postas med hjälp av eventet onsubmit. Sen definierar vi vad som ska hända när man skickar formuläret. I detta fall säger vi att formuläret, när det skickas, ska köra vår funktion calc. Vi skickar även med en referens till formuläret i vår funktion genom att använda oss av nyckelordet this. This refererar tillbaka till den tagg som vi skriver det i. Eftersom vi i detta fall skriver det i vår form-tag så refererar this tillbaka till just detta elemet. Nu när vi har kallat på vår funktion i html-koden kan vi testa att det fungerar. Men först måste vi ju göra så att vi ser att javascriptet faktiskt får rätt värden. Vi kan testa detta med en alert-ruta. I javascript-koden efter det att vi har definierat variablerna tal1 och tal2 skriver vi in: alert(tal1); Spara dokumentet och testa. Om det fungerar ska du, när du klickar på beräkna-knappen, få en alert-ruta med samma värde som det du har skrivit in i det första input-fältet. Testa även det andra fältet genom att byta ut tal1 i alert-funktionen till tal2. Nu vill vi ha summan av dessa tal som vi har fått in i vår funktion. Vi ska nu alltså göra huvudfunktionaliteten för denna miniräknare. Att faktiskt räkna ihop två tal med varandra. Vi börjar med att deklarera en ny variabel sum med hjälp av nyckelordet var. Denna variabel ska vi ge summan av tal1 och tal2. Det kan vi skriva så här: var sum = tal1 + tal2; För att beräkna summan tar vi tal1 och adderar det med tal2 genom att helt enkelt skriva ett +- tecken mellan dem. På samma sätt kan vi räkna med multiplikation eller subtraktion genom att bara ändra + mot / eller *. För att se om detta fungerade kan vi efter denna kodrad skriva in: alert(sum); Om vi kör funktionen nu så bör en alert-ruta komma upp, men värdet i rutan ser inte ut att stämma helt.

10 Om jag skriver in 1 i ena input-fältet och 2 i den andra så förväntar jag mig svaret 3 i alert-rutan, men jag får 12. Detta beror på att javascript tror att värdet från input fältet är en sträng alltså en bit text och inte alls ett tal. Detta löser vi genom att göra ett litet ingrepp i vår uträkning. Ändra uträkningen till detta: var sum = Number(tal1) + Number(tal2); Genom att använda den inbyggda funktionen Number() så konverterar vi input-texten till ett numeriskt värde. Detta kallas för typecasting, alltså att man konverterar en datatyp till en annan. Spara scriptet och testa igen, nu bör rätt värde dyka upp i alert-rutan. Det sista steget i vår funktion är att skriva ut svaret innanför p-taggen med id-namnet out. För att göra detta behöver vi hämta in det elementet i javascriptet så att vi kan manipulera det. Vi gör detta genom att skriva: var out = document.getelementbyid( out ); Vi skapar alltså en variabel som ska hålla reda på elementet åt oss var out. Sedan hämtar vi in elementet med document.getelementbyid( out ); som egentligen är en enda lång sökväg som leder oss till det element som har id-namnet out. document - pekar på dokumentet på dokumentet kopplar vi en funktion: getelementbyid - en funktion som gör att vi kan hämta in ett element som har ett visst id. Och eftersom vi gav p-taggen som ska redovisa resultatet id-namnet out så är det det namnet vi skriver innanför paranteserna i funktionen. Nu när vi har fått tag i vårt element så vill vi skriva ut resultatet inuti det elementet, det gör vi så här: out.innerhtml = sum; out är den variabel som håller reda på vårt element som vi ska skriva ut resultatet i. innerhtml är en funktion som gör att vi via javascript kan skriva text i html-dokumentet. Denna funktion kopplar vi alltså till vårt element (out) så att vi kan skriva text innanför den p-taggen. Efter lika-med -tecknet så skriver vi det som vi vill ska stå innanför p-taggen, dvs resultatet. Javascript koden så här långt bör se ut så här: function calc(theform) var tal1 = theform.tal1.value; var tal2 = theform.tal2.value; var sum = Number(tal1) + Number(tal2); var out = document.getelementbyid("out"); out.innerhtml = sum; Spara och testa. Gick det inte så bra? Det beror på att sidan uppdateras när vi klickar på Beräkna -knappen och skickar iväg formuläret. Detta är en inbyggd funktionalitet i html som vi vill stoppa för att ersätta den funktionaliteten med den vi just skapat. För att stoppa funktionen så måste vi göra det i javascriptet och i html-koden. I javascriptet skriver vi följande längst ner i funktionen: return false; Det denna kod säger är att: när funktionen har körts så returneras ett falskt värde. Hade det istället stått return true; så hade vi returnerat ett sant värde och html-funktionaliteten hade fortsatt köra. Nu måste vi dock säga i html-dokumentet att vi vill att detta returnerings-värde ska avgöra om sidan ska uppdateras eller inte. Detta gör vi genom att lägga in return innan vi anropar funktionen i

11 form-taggen. Formtaggen ska alltså se ut så här: <form action="#" onsubmit="return calc(this)"> Spara båda dokumenten och testa igen. Nu bör det fungera. Javascriptet i sin helhet ska nu alltså se ut så här: function calc(theform) var tal1 = theform.tal1.value; var tal2 = theform.tal2.value; var sum = Number(tal1) + Number(tal2); var out = document.getelementbyid("out"); out.innerhtml = sum; return false; Som extra övning kan du själv testa att ändra addition till multiplikation eller subtraktion. Testa också att skriva ut hela uträkningen i resultatet. Det vill säga att i resultatet ha med hela uträkningskedjan, exempelvis: = 7.

12 Vilkor Enkel Lägg in en rubrik i html-dokumentet som inte är av första nivån (h1). <h2>sidans titel</h2> Skapa nu en javascript-fil. Döp den till något lämpligt och infoga den i html-koden längst ner i body. Till den här övningen ska vi skapa ett enkelt villkor, vi ska kolla om vår sida innehåller en h1-tagg. Om det inte finns en så kommer vi att skapa en alert-ruta med en varningstext. Skapa en variabel och gör den till en referens till den första ([0]) H1-rubriken i HTMLdokumentet. För detta använder vi metoden getelementsbytagname som returnerar alla HTML-element i form av en array. Däremot, hittas inga rubriker sätts variabeln titel till undefined. var titel = document.getelementsbytagname('h1')[0]; Skapa en if-sats som kollar om variabeln titel inte fyllts med något. för att kolla om något INTE är sant används kan. Om inte (ingen H1-rubrik återfinns på sidan) så skall det inom blocket ( och ) utföras. if(!titel) Inom villkoret skriver du in ett valfri text som meddelar att det saknas en H1-rubrik på sidan (vilket är lite obligatoriskt om du kodar efter moderna standarder). Detta görs med funktionen alert där vi kan skicka med en textsträng att visa för användaren via ett systemmeddelande. Not: Självklart är detta inte speciellt gångbart ute på webben, alert används bästa bara i utvecklingsfasen. Inte skarpt då det kan var mycket störande. if(!titel) alert('ingen sidtitel funnen!'); Så här ser skriptet ut i sin helhet: var titel = document.getelementsbytagname('h1')[0]; if(!titel) alert('ingen sidtitel funnen!');

13 Loopar Enkel Lägg in följande kod i HTML-dokumentet. Ändra id-attributet om det känns motiverat. <div id="loopoutput"> <p>efter det här stycket kommer loopens text att skrivas ut:</p> </div> Skapa en ny javascriptfil, döp den till något lämpligt och länka in den längst ner i body. Skapa en referens till HTML-behållaren som lades in i föregående steg med hjälp av metoden getelementbyid som tar ett argument; ett värde på ett id-attribut att leta efter i HTMLdokumentet. var canvas = document.getelementbyid('loopoutput'); Lägg in följande for-loop och ersätt ANTAL_LOOPAR med en valfri siffra (inte högre än 100 helst...). Loopen kommer nu att börja på 0 (var i = 0), repetera allt inom blocket ( och ) så många gånger du angivit (i < ANTAL_LOOPAR; i++). for(var i = 0; i < ANTAL_LOOPAR; i++) Behållarens kod nås via egenskapen innerhtml. I det här fallet lägger vi till en valfri text/kod, med numret på den aktuella loopen, genom att konkatenera ("slå ihop", 'Loop nr ' + i + ' ') text med siffran. for(var i = 0; i < 10; i++) canvas.innerhtml += 'Loop nr ' + i + '<br />'; Så här ser skriptet ut i sin helhet: var canvas = document.getelementbyid('loopoutput'); for(var i = 0; i < 10; i++) canvas.innerhtml += 'Loop nr ' + i + '<br />'; Spara dokumenten och testkör.

14 Formulärvalidering Medel Den här övningen går ut på att validera ett formulär, det vill säga att se till att olika formulärfält i ett formulär är ifyllda. Vi börjar med att skapa formuläret i ett nytt html-dokument: <form action="#" onsubmit="return check(this)"> <p>mail address:</p> <input type="text" name="mail" id="mail" value=""/> <p>subject:</p> <input type="text" name="subject" id="subject" /> <p>message:</p> <textarea rows="2" cols="40" name="message" id="message"></textarea> <p><input type="submit" value="send" id="sendform" /></p> </form> Håll reda på namnen i varje input-fält. Skapa nu ett nytt javascript-dokument, döp den till något lämpligt och infoga den längst ner i body med hjälp av en script-tagg. Nu ska vi skapa en funktion i javascript-filen som ska kolla vårt formulär och se till att alla fält är ifyllda. Är de inte det så ska inte formuläret skickas och dessutom ska varningstexter visas. Vi börjar med att skapa funktionen: function check(theform) Nu skapar vi ett par villkor (if-satser) som kollar om formulärfälten är ifyllda eller ej. Vi skapar en första if-sats i vår funktion: if(theform.mail.value == "") Här kollar vi om input-fältet med namnet mail är tomt. Om det är tomt så ska vi hindra formuläret från att skickas samtidigt som vi vill generera ett meddelande som säger åt användaren att fältet är tomt. Vi lägger till följande innanför måsvingarna på vår if-sats: alert( Du måste skriva i en epost-adress! ); return false; Om fältet nu är tomt så säger vi med den här koden att ett varningsmeddelande (i form av en alertruta) ska köras med texten Du måste skriva i en epost-adress!. Efter det säger vi att funktionen ska returnera ett falskt värde för att hindra formuläret från att skickas. Koden bör nu se ut så här: function check(theform) if(theform.mail.value == ) alert( Du måste skriva i en epost-adress! );

15 return false; Testa att det fungerar genom att kalla på funktionen i html-koden. Detta kan du göra genom att i form-taggen skriva in följande: onsubmit= check(this); Det vill säga att säga åt formuläret att anropa vår formulär-valideringsfunktion när det postas onsubmit. Vi skickar med formulär-elementet i funktionen genom att skriva nyckelordet this i parantesen för funktionen. Spara båda dokumenten och testa. För att kolla andra fält i formuläret, inte bara mail -fältet så kan vi skapa liknande if-satser för andra fält. Det enda vi behöver byta ut är vilket fält if-satsen ska kolla och vad som ska stå i varningsmeddelandet. För fältet med namnet subject (kolla i html-koden för att se vilket det gäller) skulle det kunna se ut så här (Obs! Detta skrivs i javascript-funktionen efter vår första if-sats): if(theform.subject.value == ) alert( Du måste ha ett subject! ); return false; Märk vad som ändrades för att vi skulle få tag i subject -fältet. När vi ville ha tag i mail -fältet skrev vi theform.mail.value och nu för subject -fältet skrev vi theform.subject.value. Detta fungerar som en sökväg, det vi säger med koden är: kolla i formuläret (theform) om det finns ett input-fält med namnet (mail eller subject) finns det så kolla dess värde (value). Spara dokumenten och testkör. Lämna inputfälten tomma och se om formuläret skickas. Kolla också om formuläret skickas om du faktiskt fyller i alla fält. Om båda scenarierna fungerar så är koden korrekt. Försök skapa ytterligare if-satser för de övriga input-fälten i funktionen så att den kollar allt.

16 Formulärvalidering Medel/svår Obs! Denna övning är en fortsättning på föregående övning. När vi kör föregående övning så ser vi att vi endast kan få ett varningsmeddelande utskrivet varje gång det är fel. Vi kan med andra ord lämna alla input-fält tomma, men kommer bara få meddelande om att vi lämnat det första fältet tomt. Det är för att return false; avbryter vår funktion. I vårt fall innebär det att så fort ett fel påträffas så kastas ett varningsmeddelande och funktionen avbryts. Vi ska nu försöka förhindra detta genom att samla alla fel och i slutet av funktionen se om det har varit något fel någonstans. Har det varit något fel så ska ett varningsmeddelande, som meddelar om alla fel, skickas och funktionen ska därefter avbrytas och returnera ett falskt värde. I javascriptet så börjar vi med att ta bort vissa saker så att det ser ut så här: function check(theform) if(theform.mail.value == "") if(theform.subject.value == "") if(theform.message.value == "") Det enda vi har i vårt javascript är alltså de selektioner (if-satser) som kollar om våra inputfält är tomma eller inte. Nästa steg är att skapa en variabel som håller reda på de olika varningsmeddelandena som vi kan tänkas vilja skicka. Högst upp i funktionen skapar vi alltså en variabel som ska hålla reda på alla varningsmeddeladen: var message = ; Eftersom variabeln inte ska innehålla något från början så räcker det med att vi tilldelar den en tom text-sträng ( ). Nu kan vi använda denna variabel för att fylla den med de olika varningsmeddelandena i varje ifsats. I den första if-satsen kan de se ut så här: message += Du måste skriva i en epost-adress!\n ; Vi tar den variabel vi skapade och lägger in varningstexten som ska gälla för det första inputfältet. I tilldelningen använder vi oss av += för att säga att vi vill ha kvar det som finns i variabeln men fylla den med ytterligare information. Märk också att vi avslutar text-strängen med \n som är ett specialtecken för ett radbyte. Detta innebär att om vi gör samma sak i nästa if-sats så kommer alla varningsmeddelanden att hamna snyggt och prydligt under varandra. Vi tillämpar samma sak i resten av skriptet så att de ser ut så här: function check(theform) var message = ; if(theform.mail.value == "")

17 message += Du måste skriva i en epost-adress!\n ; if(theform.subject.value == "") message += Du måste ha ett subject!\n ; if(theform.message.value == "") message += Du måste skriva något som meddelande!\n ; Nu har vi skapat funktionalitet för att kunna samla fler meddelanden. Om alla inputfält lämnas tomma nu när vi skickar formuläret så kommer alla meddelanden samlas i variabeln message och den kommer då innehålla: Du måste skriva i en epost-adress!\n Du måste ha ett subject!\n Du måste skriva något som meddelande!\n. Nu måste vi se till att i slutet av funktionen kunna avgöra om något av inputfälten är tomma, om en varningstext har skapats. Detta kan vi göra genom att kolla hur lång variabeln message är. Vi vet ju att om inget fel påträffas så kommer message att innehålla 0 tecken (vara mindre än 1 lång). Då kan vi skapa ytterligare en if-sats som just kollar om message innehåller mindre än 1 tecken. I slutet av funktionen skriver vi alltså: if(message.length > 1) Där.length är en inbyggd funktion som kollar hur många tecken en text-sträng är. Nu kollar vi om message innehåller fler än 1 tecken, om det gör det så vet vi att ett tomt fält har påträffats och då ska vi skriva ut varningstexterna samt returnera ett falskt värde. Vi kan därför skriva in följande i den nya if-satsen: alert(message); return false; I den första raden säger vi att en alert-ruta ska köras och visa upp varningstexten och i raden under säger vi att funktionen ska returnera ett falskt värde. Nu bör vi vara klara, spara javascriptet och testa. Javascriptet borde nu se ut så här i sin helhet: function check(theform) var message = ""; if(theform.mail.value == "") message += "Du måste skriva i en epost-adress.\n"; if(theform.subject.value == "") message += "Du måste ha ett subject.\n"; if(theform.message.value == "") message += "Du måste skriva något som meddelande.\n";

18 if(message.length > 1) alert(message); return false; Du bör tänka på att man egentligen borde ha formulärvalidering på serversidan så att funktionaliteten fungerar även utan javascript. Vidare bör man också tänka på inte redovisa varningarna i en alert-ruta då den kan uppfattas som störande och avfärdas väldigt snabbt av användare.

19 Utskriftsfunktion Svår Nu ska vi titta tillbaka på utskriftsfunktionen och göra den korrekt. Då utskriftsfunktionen är byggd på javascript, det vill säga att den inte fungerar i ren html så bör man lägga in utskriftslänken via javascript också. Annars kommer det finnas en utskriftsknapp även om man inte har javascript påslaget, vilket innebär att vi då har en knapp (länk) som det inte händer något om man trycker på. Detta är inte särskilt användarvänligt så vi gör om hela denna funktion så att den är helt separerad från html-koden. Till denna uppgift kan du utgå från en av de sidor du har gjort som övningsuppgift i XHTML och CSS. Lägg till nedanstående kod längst ner i ditt dokument (innan body-taggens slut) för att länka in ett externt javascript dokument. <script type="text/javascript" src="javascript.js"></script> Längst ner i html-filen infogar vi alltså en javascript fil. Har du inte skapat en så gör det. Döp den till något lämpligt och se till att det är den som länkas in i dokumentet. För att detta ska fungera behövs en div med id-namnet content (om du har ett annat id-namn så får du ändra det i javascriptet där det behövs) som ska omsluta allt innehåll på din sida. Detta bör du ha från övningen, men har du inte det så lägg till en sådan tagg. Det första vi ska göra är att skapa en funktion som ska ha som uppgift att lägga in en utskriftslänk på sidan och koppla funktionalitet till den som gör att den skriver ut sidan när man klickar på länken. Funktionen skapar vi så här: function insertprint() Döp om funktionen om du hellre vill att den ska heta något annat, men kom ihåg vad den heter. Nu till funktionaliteten. Det första vi vill göra är att hämta in det element som utskriftslänken ska ligga i. I detta fall så väljer jag att lägga utskriftsknappen i den div-tagg som omsluter innehållet i html-sidan. Detta innebär att jag måste hämta in det elementet i javascriptet: var content = document.getelementbyid("content"); En variabel, content, skapas och i den lägger vi referensen till div-elementet genom att använda oss av getelementbyid() funktionen. Har du ett annat id-namn för div-taggen så är det det namn som du ska ange innanför paranteserna i funktionen. Nu ska vi i javascriptet skapa den utskriftslänk som vi ska infoga i sidan. Vi skriver till följande i javascriptet: var printp = document.createelement("p"); printp.setattribute('id', 'printtrigger'); printp.innerhtml = "Print page"; I den första raden skapar vi en variabel som vi fyller med en ny p-tagg. P-taggen skapar vi genom funktionen document.createelement( p ). Därefter tar vi den nya p-taggen och ger den ett id-namn. Detta gör vi med funktionen setattribute(). I parantesen så anger vi vilket attribut vi vill läga till eller ändra och värdet på det attributet. I vårt fall lägger vi till ett id-attribut som har namnet printtrigger. Detta id-namn är inget vi egentligen behöver i javascriptet, men det kan vara bra att ha om man vill lägga på CSS på detta sedan, då kommer man enkelt åt elementet via dess id-namn.

20 I den sista raden så skriver vi vad vi vill att det ska stå innanför p-taggen, vilken text som ska länkas. Nu ska vi lägga in den nya p-taggen på html-sidan. Det kan vi åstadkomma genom att använda oss av en metod som heter appendchild(). Vi gör det på följande sätt: content.appendchild(printp); Här säger vi alltså åt p-taggen att lägga sig i div-taggen som finns i variabeln content. Eller som det står i koden att div-taggen ska lägga till ytterligare ett barn-element under sig. När detta nu är klart så vill vi koppla ett event/en händelse till den nya utskriftsknappen. Vi vill att utskriftsfunktionaliteten ska köras när någon klickar på texten som finns i p-taggen som vi just har skapat. Vi gör detta med hjälp av händelsehanteraren onclick : printp.onclick = function() Här kopplar vi alltså på ett onclick-event på vår p-tagg (som finns lagrad i variabeln printp ). Därefter skriver vi = function() som betyder att vi kopplar en funktion på händelsen. Innanför måsvingarna kan vi nu skriva den funktion vi vill ska köras när användaren klickar på print page -texten. Den funktionen är enkel och den har vi stött på förut: window.print(); Alltså samma gamla utskriftsfunktion som vi har använt i de tidigare utskriftsövningarna. Vå funktion borde nu se ut så här i sin helhet: function insertprint() var content = document.getelementbyid("content"); var printp = document.createelement("p"); printp.setattribute('id', 'printtrigger'); printp.innerhtml = "Print page"; content.appendchild(printp); printp.onclick = function() window.print(); Det enda som återstår att göra är att säga åt koden att köras. Detta kan vi göra genom att helt enkelt kalla på funktionen i javascriptet med dess namn: insertprint(); Funktionsanropet ska stå utanför funktionen. Det är bara något som säger åt javascriptet att köra funktionen som vi skapade. Spara javascriptet och testkör. Om du vill ha samma funktionalitet på andra html-dokument så behöver du bara se till att det finns

21 en div-tagg med ett id-namn som stämmer överens med det namn som vi använder i koden för att hitta elementet (i mitt fall så använde jag namnet content). Du behöver givetvis också se till javascriptet är inlänkat.