Erstellung eines HTML-Dokuments Einführung von M&U Holzbaur

Event und Javascript. zur Übersicht

Parameterübergabe und Vergleich

Die folgende Tabelle enthält eine Prozedur, die zwei eingegebene Werte vergleicht.
Die folgenden Vergleiche enthalten drei voneinander unabhängige Problemlösungen, die als auch belieig anders hätten kombiniert werden können.

Vergleichskriterium: String-Werte direkt oder numerische Werte als Ergebnisse der Funktion eval bzw. parseFloat

Aufruf: über Eingabe-Button, Hyperlink oder OnChange für ein Feld

Parameterübergabe: über die Prozedur Vergleich(a,b) oder über den Zugriff auf Felder

Aufruf

Der sichtbare Unterschied in den folgenden Beispielen zum Aufruf einer Prozedur Test ist, daß Test 1 und 2 einen button bzw. Hyperlink zum Aufrufen des test haben, während bei Test 3 und 4 dies onchange bei jedem Wechseln eines Wertes geschieht, Da damit der zuerst eingegeben Wert mit null verglichen wird, könnte man diesen Fall abgefangen, so daß keine Meldung erscheint, wenn einer der beiden Werte leer ist. Dies wurde unterlassen, um zu demonstrieren daß im Test 3 ein leerer string, im Test 4 aber undefined genommen wird.

Parameterübergabe

Bei Test 1 und 2 greift die javascript-Function auf die Werte des Formulars zu.
Bei Test 3 und 4 werden die Werte a und b als Parameter übergeben

Vergleichskriterium:

Dieser Unterschied ist relevant für das Ergebnis.
Test 1 und 3 vergleichen die Werte direkt (und damit als String), Test 2 vergleichet die Ergebnisse der function eval (und damit die numerischen Werte).
Damit werden 2 und 2.0 als gleich erkannt, allerdings auch 2 und 1 + 1. Test 4 vergleichet die Ergebnisse der function parseFloat (und damit die numerischen Werte nach Umwandlung). Damit werden 2 und 2.0 als gleich erkannt, auch 2 und 2DM oder 2.- nicht aber 2 und 1 + 1 (interpretiert als 1).

test 1: string	test 2: numerischer wert (eval)	test 3: string	test 4: numerischer wert (parse)
geben Sie a ein geben Sie b ein	geben Sie a ein geben Sie b ein Testen	geben Sie a ein geben Sie b ein	geben Sie a ein geben Sie b ein
if (a==b)	if (eval(a)==eval(b))	if (a==b)	if (parseFloat(a)==parseFloat(b))
function vergleich1() a=document.test1.feld_a.value;	function vergleich2() a=document.test2.feld_a.value;	function vergleich3(a,b)	function vergleich4(a,b)
name=feld_a onclick="vergleich1()"	name=feld_a href="javascript: vergleich2()"	name=feld_a onChange = "vergleich3(feld_a.value,feld_b.value)"	name=feld_a onChange = "vergleich4(feld_a.value,feld_b.value)"
function vergleich1() { a=document.test1.feld_a.value; b=document.test1.feld_b.value; if (a==b) alert("die Werte " +a+" und " +b+ " sind gleich"); else alert("die Werte " +a+" und " +b+ " sind ungleich"); }	function vergleich2() { a=document.test2.feld_a.value; b=document.test2.feld_b.value; if (eval(a)==eval(b)) alert ("die Werte " +eval(a)+" und " +eval(b)+ " sind gleich"); else alert ("die Werte " +eval(a)+" und " +eval(b)+ " sind ungleich"); }	function vergleich3(a,b) { if (a==b) alert ("die Werte " + a +" und " + b + " sind gleich"); else alert ("die Werte " + a +" und " +b + " sind ungleich"); }	function vergleich4(a,b) { if ((parseFloat(a)==parseFloat(b)) alert("die Werte " +parseFloat(a)+" und " +parseFloat(b)+ " sind gleich"); else alert("die Werte " +parseFloat(a)+" und " +parseFloat(b)+ " sind ungleich"); }
<form name=test1> <input type=reset value=normieren> geben Sie a ein <input size=3 name=feld_a> geben Sie b ein <input size=3 name=feld_b> <input type=button value="zum Vergleich drücken" onclick="vergleich1()"> </form>	<form name=test2> geben Sie a ein <input size=3 name=feld_a> geben Sie b ein <input size=3 name=feld_b> <a href="javascript: vergleich2()">Testen</a> </form>	<form name=test3> geben Sie a ein <input size=3 name=feld_a onChange = "vergleich3(feld_a.value,feld_b.value)"> geben Sie b ein <input size=3 name=feld_b onChange = "vergleich3(feld_a.value,feld_b.value)"> </form>	<form name=test4> geben Sie a ein <input size=3 name=feld_a onChange = "vergleich4(feld_a.value,feld_b.value)"> geben Sie b ein <input size=3 name=feld_b onChange = "vergleich4(feld_a.value,feld_b.value)"> </form>