Felter til input og output i HTML

En af de vigtigste funktioner ved mange hjemmesider er at kunne være interaktive, f.eks. lave beregninger eller opslag i databaser. Til dette skal man bruge flg. elementer:

1. Et eller flere felter til at skrive i (inputfelter)
2. En rutine der foretager beregninger/opslag/etc, baseret på felternes indhold, f.eks. et JavaScript
3. Et eller flere felter til at skrive resultaterne af databehandlingen i (outputfelter)

Som vi laver løsingerne her, er felterne på selve siden. Man kan lave det som pop-up menuer i stedet. Det kommer som en del af afsnittene om JavaScript.

I det følgende eksempel vil vi lave et felt der beregner kvadrater på tal.

Når man skal lave et felt til input, skal man først bruge en FORM-tag, dvs.


Til denne skal man bruge INPUT, og man skal faktisk bruge den to gange, en til tekst og en til en knap der starter det script der anvender teksten. I dette tilfælde et JavaScript, men det kunne lige så godt være noget andet. Så ser det således ud:


For at scriptet kan finde det rigtige felt at tage værdien fra, skal feltet udstyres med et ID. Dette kalder vi her for InputValue:


Vær lige opmærksom på, at ID skal være unikt. Hvis der er flere felter med samme ID (f.eks. en copy/paste man ikke lige har fået rettet til), tager JavaScriptet kun værdien fra det første af felterne med det ID.

JavaScriptet, der henter input og laver beregningen, kalder vi CalculateSquare. Hvordan det er bygget op, bliver gennemgået i næste afsnit. Den færdige kode for at få det til at fungere, ser nu således ud:


return false; er en event handler, der sikrer at hvis der opstår en fejl under udførelsen af scriptet, bliver scriptet afsluttet. Der er ikke helt enighed om nødvendigheden af "return false" men generelt er det meget godt at have den slags sikkerheder bygget ind i systemet. VALUE="Udregn" er teksten på knappen man trykker på. Hvis man ikke specificerer en VALUE ligger der i HTML en rutine, der ser på hvilken sproglig version at browseren som siden vises på og skriver "Submit Query", "Send forespørgsel", etc. afhængig af sproget. På siden kommer det færdige resultat til at se således ud:

Felter til output er blot et felt til tekst, dvs. det kan være <DIV>, <P>, <TD> osv. Det eneste der er vigtigt er, at det har et feltnavn, dvs. attributten ID, så JavaScriptet kan finde feltet hvor det skal skrive resultatet. Til dette eksempel anvender vi en DIV med ID OutputValue. Koden ser således ud:


Der findes andre måder at vise resultatet, f.eks. det der hedder en Alert, som er en tekstbox der popper op på skærmen. En kombination er ofte brugt, hvor resultatet vises på siden, mens beskeder om fejl, f.eks. hvis man har glemt at skrive et tal, laves som en Alert der popper op. Det er smagssag, og et spørgsmål om hvad der fungerer på siden, om man gør det ene eller det andet.

JavaScriptet laves som et eksternt script, dvs. det ligger som en .js-fil. I dette tilfælde en fil der hedder Calculations.js, som ligger i directoriet JavaScripts. Dette erklærer man i HEAD-tag'en:


JavaScriptets indhold starter med at erklære funktionens navn. Ved at gøre det på denne måde, kan man samle flere rutiner i den samme fil, f.eks. en der hed CalculateSquareroot til at beregne kvadratrødder. Erklæringen af CalculateSquare ser således ud:


Vi har nu loadet scriptet, når siden læses, og der er nu en funktion ved navn CalculateSquare, som kan kaldes. Det første vi skal gøre er at have fat i indholdet af feltet InputValue. Dette gør vi ved at definere en variabel, den kalder vi FieldValue, og vi henter den med kommandoen document.getElementById(). Så ser det således ud:


Vi har nu fat i feltværdien. Nu kunne man jo forestille sig, at nogen trykkede på Udregn inden der var indtastet en talværdi, eller det der var indtastet indeholdt noget andet end tal, som det ikke giver mening at kvadrere. Dette gør man med if/else. Kommandoen isNaN() er kun sand ved feltværdier der ikke er tal (engelsk: is not numeric). Tomme felter falder mellem to stole, for det er hverken tal eller ikke tal, så det håndteres ved at lave et "eller" (lodret streg) FieldValue == "" (bemærk at man bruger 2 lighedstegn til sammenligninger, hvor søgekriteriet skal være lig med et eller andet). Så kommer koden til at se således ud:


Hvis vores skrivefelt er tomt eller indeholder noget der ikke er et tal, skal vi skrive en besked om dette. I dette tilfælde gør vi det i resultatfeltet OutputValue. Det er en lidt kringlet konstruktion, men det fungerer. Det første man gør er at lave en variabel der hedder det samme som resultatfeltet og som henter indeholdet af resultatfeltet. Lige her er det at hente værdien overflødigt, da vi ikke behøver det tidligere indhold til noget, men vi kunne let være i en situation, hvor vi skulle tilføje til en liste. Det næste man gør er at slette indholdet og erstatte det med den besked vi skal til at skrive. Det ser således ud:


Vi er nu klar til at skrive vores besked. Det gør vi ved først at definere en variabel med document.createTextNode(). Vi kalder den ErrorMessage:


Beskeden skal nu ind i feltet, hvilket gøres ved at sætte variablen med beskeden på variablen InputValue med en appendChild(). Så ser det således ud:


Vi har nu håndteret de forkerte/manglende indtastninger, og kan gå i gang med beregningen. Vi skal igen have fat i feltet OutputValue som før:


Kvadrering af et tal i JavaScript hedder Math.pow(x,y), og måden man får det lavet om til noget der kan skrives i et felt er ved igen at bruge document.createTextNode(). Så ser det sådan ud:


Variablen, dvs. resultatet, kan vi nu overføre til feltet OutputValue med en appendChild() ligesom før:


På skærmen kommer det til at se således ud:


Feltet og knappens størrelse, udseende, fonte osv. kan selvfølgelig styles efter behov. Man skal lige være opmærksom på, at resultatet i OutputValue skal styles i JavaScriptet, ikke i DIV'en.