Die Benutzung dieser Musterprogramme für Lehrveranstaltungen ist ohne Gewähr erlaubt. Copyright: Prof. Dr. Ulrich Holzbaur

Rechner mit Javascript

einfacher Rechner

Auf Knopfdruck wird auf der linken Seite addiert oder subtrahiert, Ergebnis ist c
=  c 

 
<form name="form1">
a  <input type=text size=4 value=12 name="a" >
+  <input type="radio" type=radio name="r1" 
       value="+" onClick="a_plus_b(form1)">
-  <input type="radio" type=radio name="r1"  
     value="-" onClick="a_minus_b(form1)">
b   <input type="number" size=4 value=3 name="b">
=
c <input type "number" value=0 name="c" size=9 >
</form>
var rart=1;
function a_plus_b(f) {
   var a=f.a.value; var b=f.b.value; var c=eval(a)+eval(b)
   f.c.value = c      /*a+b liefert eine string-concatenation*/
}

function a_minus_b(f) {
    var a=f.a.value; var b=f.b.value ; 
    var c=a-b;
    f.c.value=c
}

Rechner mit eventhandler

Beim Verlassen eines Eingabefeldes wird c oder b berechnet.

=  c 

 
<form name="form2">
a  <input type=text size=4 value=12 name="a" 
    onBlur="rechnen(1)">
+  <input type="radio" type=radio name="r" 
     value="+" onClick="rart=1;a_plus_b(form2)">
-  <input type="radio" type=radio name="r" 
     value="-" onClick="rart=-1;a_minus_b(form2)">
b  <input type="number" size=4 value=3 name="b" 
       onBlur="rechnen(2)">

c  <input type "number" value=0 name="c" size=9 
       onBlur="rechnen(3)">
</form>
function rechnen(n){
switch(n)  {
case 1:
    document.form2.c.value
    = eval(document.form2.a.value)+rart*eval(document.form2.b.value)
    break;
case 2:
    document.form2.c.value
    = eval(document.form2.a.value)+rart*eval(document.form2.b.value)
    break;
case 3:
    document.form2.b.value = 
    rart*(eval(document.form2.c.value)-eval(document.form2.a.value))
    break;
}}

 
einfache und komplexere Übungsaufgaben JavaScript HTML Holzbaur, Aalen,E-Mail