Læsning, beregning og skivning i felter med JavaScript

En af de ting man ofte kan få brug for på sin hjemmeside er noget hvor man i et eller flere felter udfylder nogle værdier, hvorefter der regnes på disse og der returneres en eller flere værdier. Det kan være valutaomregninger eller konvertering fra f.eks. fod og tommer til centimeter, eller noget helt tredje. Her går jeg det igennem med pH-beregninger for svage og middelstærke syrer, da det indeholder de elementer man skal bruge til en generel løsning. Herfra blot er et spørgsmål om at konvertere og opskalere til andre løsninger.

Lad nu være med at gå i sort over ikke at kunne forstå matematikken og kemien i opgaven og fokusér på metodikken i løsningen!

Sådan lige kort hvad udfordringen op opgaven går ud på: Når man skal finde pH for middelstærke og svage syrer, skal man løse ligningen

Ka =	[H+] · [B-]
	[HB]

Dette er reelt en andengradsligning, der kommer til at se således ud:

x² + K_a·x - K_a·c = 0

Syrestyrkekonstanten K_a og den nominelle koncentration c er de to værdier man kender, og dem man skal beregne ud fra. x er den aktuelle koncentration af H⁺, den man skriver som [H⁺], og er den som man beregner pH ud fra, som pH = -log[H⁺].

Finten i det er, at andengradsligninger kan have 2 løsninger. Hvis der er 2 løsninger, må en af dem være forkert, så først skal vi løse andengradsligningen og derefter skal vi afgøre hvilken værdi der er rigtig, hvis der er flere muligheder. Den rigtige værdi skal der så regnes videre på, så vi finder den ønskede pH-værdi.

Hvis vi nu starter fra en ende, så skal man til pH-beregningerne bruge to felter, et til den nominelle koncentration (c(syre)) og et til syrestyrkekonstanten (K_a), et script til at lave pH-beregningen og en knap til at eksekvere beregningen. Det der skal bruges i HTML-filen ser således ud:


Brugerfladen kommer så til at se således ud:


Så har vi brugerfladen på plads for indtastning. Vi skal også bruge et skrivefelt til siden, så vi har et sted til resultatet. Her bruger vi en DIV, men det skal blot være en tag til tekst. Den skal have en ID, i dette tilfælde pH_value, så vi har noget at genfinde feltet med (Bemærk: bindestreger i ID-navne er forbudt ved JavaScript, fordi de bliver behandlet som et matematisk minus, og derfor gør, at koden ikke fungerer). Så ser koden således ud:


Vi skal nu have lavet et script der laver beregningerne. Vi laver scriptet som et eksternt script, dvs. vi laver en .js-fil. Filen kalder vi pH-Calculations.js og lægger i directoriet JavaScripts. Vi skal derfor i HTML-sidens HEAD-tag have linjen


så JavaScriptet bliver indlæst og klar til brug.


I .js-filen skal vi starte med at oprette den rutine der hedder Calculate_pH, som bliver startet når vi trykker på knappen. Det ser således ud:


Det første scriptet skal kunne er at læse fra de to felter med ID Concentration og AcidityConstant. Dette gøres ved at definere et par variabler på denne måde:



Det er sådan, at for at scriptet kan regne rigtigt, skal begge felter være udfyldte og de to værdier i dette tilfælde SKAL være tal. Tomme felter tester man ved at spørge om feltværdien er "". Om en feltværdi er et tal, kan man spørge på med kommandoen isNaN(). Hvis et eller begge felter er tomme eller indeholder andet end tal, skriver man en fejlbesked i feltet pH_value. Bemærk: Vi spørger ikke direkte på feltværdien, men indirekte ved at se på de to variabler der er dannet ud fra feltværdierne. Den del ser således ud:


Ingen af de indtastede værdier må være nul eller negative, så det skal der også testes for, før vi begynder at udregne pH-værdien. Vi spørger derfor på, om de to feltværdier er større end nul. Hvis ikke, skriver man en fejlmeddelelse i feltet pH_value.


Vi har nu fået fat i indholdet af de to felter, og sikret os at indholdet er OK, så nu kan vi gå i gang med udregningerne.

Løsningen af andengradsligningen gør vi ved det der hedder diskriminantmetoden. Den nærmere omstændigheder for matematikken er underordnet, men hvis diskriminanten, D, er negativ er der ingen løsninger på andengradsligningen, er diskriminanten nul er der én løsning og er den større end nul, er der to løsninger. Lige i dette eksempel behøver vi ikke at tage højde for en negativ diskriminant. Når der er en syre i vandet vil der også være en pH at beregne.

Vi fortsætter fra de to foregående test for om de indsatte tal er OK, så rutinen starter med et else, og herfra beregner vi diskriminanteten som en variabel. Hvis diskriminanten er 0 laves der en beregning, og ellers laves der 2 beregninger.


Bemærk, at når diskriminanten er 0, beregnes variablen AcidConcentration, som er den værdi vi skal bruge til den videre beregning af pH, men der ved den anden mulighed bereges variablerne AcidConcentration1 og AcidConcentration2. Det er fordi vi ikke ved hvilken af løsningerne der er den korrekte, dvs. hvilken der er variablen AcidConcentration. Det er det næste der skal regnes på.

Det vi regner på er koncentrationer, så den korrekte værdi må nødvendigvis være større end nul. Den kan til gengæld ikke være større end c(syre), da dette vil være en fysisk umulighed. Så, det vi gør er at spørge på om variablen AcidConcentration1 er mindre end eller lig med 0 eller større end FieldValueConcentration (dvs. den c(syre) vi har indtastet). Hvis dette er tilfældet, er AcidConcentration1 ikke det rigtige resultat, og variablen AcidConcentration er da lig med AcidConcentration2. I modsat fald er variablen AcidConcentration lig med AcidConcentration1. Så ser koden således ud (tilføjelser til det foregående er med fed skrift):


Vi har nu fået beregnet koncentrationen af syre og er klar til at beregne pH-værdien. Vi kalder denne variabel for Result, så vi får tilføjelsen (fremhævet med fed skrift)


Fordi der ikke er brug for noget speciel tekstformatering på det der skal skrives, er der her brugt document.createTextNode(). Har man brug for noget tekstformatering vil man i stedet bruge en løsning med innerHTML (bliver gennemgået i et andet sted). MEN, vi er nu klar til at skrive resultatet på siden i det felt vi har oprettet til formålet.

Vi har nu resultatet og skal have det skrevet til feltet pH_value, og så er vi i mål. Dette gøres med en appendChild som ved fejlmeddelelserne, blot skal vi denne gang have skrevet noget tekst + variabel i stedet for ren tekst. Det færdige JavaScript, med de sidste linjer til løsningen med fed skrift, ser så således ud:


pH-beregneren er nu klar til brug:


Har man brug for det, kan man få rutinen til at skrive flere mellemregninger til flere felter. For denne type beregninger vil man f.eks. have en interesse i at få den beregnede koncentration af H⁺, da denne er relevant for kemikere, og for studerende vil man også gerne have de to løsninger på andengradspolynomiet, da det er noget af det de typisk skal skrive i deres opgave/rapport. Dette gøres ved at lave flere felter og lave en appendChild til disse.