Hehe ... det bliver en del omskrivning, forklaring og kode. I det efterfølgende vil
JavaScript være forkortet med
JS. Hold fast ... here we go! =)
Her er funktionen
format, som jeg ville skrive den:
function format(num, decplaces) {
// num afrundes til decplaces antal decimaler - og returneres
return num.toFixed(decplaces);
}
Funktionen modtager et tal,
num, som skal afrundes til
decplaces (også et tal) decimaler. Funktionen returnerer resultatet af JS's indbyggede funktion
toFixed (mere om funktioner og metoder i et indlæg efter dette).
Læg i øvrigt mærke til, at '
//' skjuler resten af linjen for JS-motoren. Her kan jeg altså skrive kommentarer, som ikke indgår i den egentlige kode - tekst, som ikke forsøges afviklet som scriptkode.
En variabel er en slags placeholder - eller en kasse, om du vil - hvori, du blandt mange andre ting kan gemme et tal eller en stump tekst (kaldet 'en streng'). En variabel oprettes med JS's nøgleord
var, og typisk sættes dens værdi samtidigt:
var mitTal = 123.456;
var minStreng = "olebole";
Nu kan du bruge disse to variabler til andre ting, og du kunne f.eks. gange tallet i
mitTal med 3 og lægge det i en anden variabel:
var mitAndetTal = mitTal * 3;
- hvorefter
mitAndetTal nu indeholder 370.368.
Det, brugeren har skrevet i et felt, kan aflæses på feltets
value egenskab (dets value property på engelsk). Det gøres typisk sådan:
var tal = FORM.ELEMENT_NAME.value;
- hvor
FORM er en reference til formen, og
ELEMENT_NAME er
name attributten på feltet.
Selvom der står et tal i et felt, vil dets
value altid være en streng - altså en stump tekst. Prøver jeg derfor dette:
var tal = FORM.pris.value;
var resultat = tal + 10;
- og der står 100 i feltet, vil variablen
resultat indeholde en tekst, bestående af ciffrene "10010".
JS-motoren tror, den skal tage teksten "100" og lægge 10 til, da den såkaldte operator
+ nemlig både kan bruges til at samle tekststrenge med - og til at lægge tal sammen med. Lidt noget roderi! =)
Heldigvis kan JS konvertere en streng, bestående af ciffre, til et rigtigt tal. Til det bruges
parseInt eller
parseFloat. Den sidste medtager evt. decimaler og returnerer derfor et tal af datatypen, kaldet
float (derfor parse
Float) - den første returnerer kun det hele tal, der står før kommaet (datatypen, kaldet
integer - derfor parse
Int).
var tal = parseFloat(FORM.pris.value);
var resultat = tal + 10;
Nu indeholder
resultat tallet 110.
I JS kan man opstille en kontrolstruktur med en såkaldt
if/else 'sætning':
if (BETINGELSE) {
// Gør noget, hvis BETINGELSE er opfyldt
} else {
// - ellers gør noget andet
}
Et
checkbox eller
radio element kan være
checked, hvilket betyder, at det pågældende felt er valgt - f.eks. ved at brugeren har klikket på det.
BETINGELSE i eksemplet ovenfor kunne altså være "Hvis checkbox'en
minBox er valgt", og så kunne jeg altså skrive:
if (FORM.minBox.checked) {
// minBox er valgt
var num = 123;
} else {
// minBox er ikke valgt
var num = 456;
}
Værdien af variablen
num har vi altså nu gjort afhængig af, om
minBox er valgt eller ej.
Nu vil jeg mene, du burde kunne stave dig igennem koden med mine kommentarer. Ellers må du bare spørge videre =)
<script type="text/javascript">
function num, decplaces) {
// num afrundes til decplaces antal decimaler - og returneres
return num.toFixed(decplaces);
}
function Totalise() {
// Opret en variabel, indeholdende en reference
// til dokumentets første form
var frm = document.forms[0];
if (frm.Værelse1.checked) {
frm.Værelse1_Pris.value = 250.00;
} else {
frm.Værelse1_Pris.value = 0.00;
}
if (frm.Værelse2.checked) {
frm.Værelse2_Pris.value = 500.00;
} else {
frm.Værelse2_Pris.value = 0.00;
}
if (frm.Overnatning1.checked) {
frm.Overnatning1.value = 1.00;
} else {
frm.Overnatning1.value = 1.00;
}
if (frm.Overnatning2.checked) {
frm.Overnatning2.value = 2.00;
} else {
frm.Overnatning2.value = 1.00;
}
if (frm.Morgenmad.checked) {
frm.Morgenmadspris.value = 50.00;
} else {
frm.Morgenmadspris.value = 0.00;
}
if (frm.Person1.checked) {
frm.Person1.value = 1.00;
} else {
frm.Person1.value = 1.00;
}
if (frm.Person2.checked) {
frm.Person2.value = 0.50;
} else {
frm.Person2.value = 1.00;
}
if (frm.Person3.checked) {
frm.Person3.value = 0.33;
} else {
frm.Person3.value = 1.00;
}
if (frm.Person4.checked) {
frm.Person4.value = 0.25;
} else {
frm.Person4.value = 1.00;
}
// Læg værdierne for felterne Værelse1_Pris, frm.Værelse2_Pris og Morgenmadspris sammen
// og gang resultatet med værdierne for Overnatning1 og Overnatning2.
// Opret en variabel, Sum - og læg det endelige resultat i denne variabel
var Sum = (parseFloat(frm.Værelse1_Pris.value) + parseFloat(frm.Værelse2_Pris.value) + parseFloat(frm.Morgenmadspris.value)) * parseFloat(frm.Overnatning1.value) * parseFloat(frm.Overnatning2.value);
// Sæt feltet Total's værdi til resultatet Sum - afrundet til to decimaler
frm.Total.value = format(Sum, 2);
// Gang tallet Sum med værdierne af felterne Person1, Person2, Person3 og Person4
// - og læg resultatet i en ny variabel Sum2
var Sum2 = Sum * parseFloat(frm.Person1.value) * parseFloat(frm.Person2.value) * parseFloat(frm.Person3.value) * parseFloat(frm.Person4.value);
// Sæt feltet PrisPrPerson's værdi til resultatet Sum2 - afrundet til to decimaler
frm.PrisPrPerson.value = format(Sum2, 2);
}
</script>
Læg i øvrigt mærke til, at
language attributten på JavaScript tagget ikke længere bruges, men er erstattet af
type="text/javascript". Og ja, det er et HTML-tag *o)
Jeg håber også, du kan se, min kode er langt mere overskuelig, end den oprindelige. 'Tuborg' parenteserne står over hindanden, og det der skal afvikles - blokken imellem - er rykket pænt ind. Al indhold i de to funktioner er ligeledes rykket ind for at gøre overskueligt, hvad der hører til i den enkelte funktion.