Javascript – övningar
Download
Report
Transcript Javascript – övningar
Javascript – övningar
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
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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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.
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>
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å.
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.
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.
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.
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.
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
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: 2 + 5 = 7.
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!');
}
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.
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!”);
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.
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 == "")
{
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";
}
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.
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.
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
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.