www.brix.de - Hauptseite,   Computer Stand: 2006-05-08

Taschenrechner mit JavaScript

(aus: Münz, Stefan: SelfHTML 8.0)


So sieht der Quelltext zu diesem Taschenrechner aus


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>Javascript: Taschenrechner</title>
<link rev="made" href="mailto:sx@brix.de">
<link rev="owns" title="Stefan Brix, Wolfenbuettel, Deutschland" href="mailto:sx@brix.de">
<meta http-equiv="AUTHOR" content="Stefan Brix">
<meta http-equiv="KEYWORDS" content="Design, Webdesign, Web-Design, HTML, Javascript, Taschenrechner">
<meta http-equiv="DESCRIPTION" content="Ansichten und Maxime zum Web-Design der Seiten www.brix.de. - Grundsätze im Spagat von Benutzbarkeit und Gestaltung.">
<link rel="stylesheet" type="text/css" href="../../_brix_form1.css">

<script type="text/javascript">
<!--
 function Check(Eingabe)
 {
  var nur_das ="0123456789[]()-+*%/";
  for (var i = 0; i < Eingabe.length; i++)
   if (nur_das.indexOf(Eingabe.charAt(i))<0 ) return false;
  return true;
 }

 function Ergebnis() {
   var x = 0;
   if (Check(window.document.Rechner.Display.value))
   x = eval(window.document.Rechner.Display.value);
   window.document.Rechner.Display.value = x;
 }

 function Hinzufuegen(Zeichen) {
   window.document.Rechner.Display.value =
   window.document.Rechner.Display.value + Zeichen;
 }

 function Sonderfunktion(Funktion) {
 if (Check(window.document.Rechner.Display.value)) {
   if(Funktion == "sqrt") {
     var x = 0;
     x = eval(window.document.Rechner.Display.value);
     window.document.Rechner.Display.value = Math.sqrt(x);
   }
   if(Funktion == "pow") {
     var x = 0;
     x = eval(window.document.Rechner.Display.value);
     window.document.Rechner.Display.value = x * x;
   }
   if(Funktion == "log") {
     var x = 0;
     x = eval(window.document.Rechner.Display.value);
     window.document.Rechner.Display.value = Math.log(x);
   }
  } else window.document.Rechner.Display.value = 0
}
//-->
</script>
<style type="text/css">
<!--
.button {  width:60px; text-align:center;
           font-family:System,sans-serif;
           font-size:100%; }
.display { width:100%; text-align:right;
           font-family:System,sans-serif;
           font-size:100%; }
-->
</style>

</head>


<body bgcolor="white" text="black">

<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="left" valign="top"><em>
<a href="http://www.brix.de/">www.brix.de - Hauptseite</a>,  
<a href="../index.html">Computer</a> 
</em></td>
<td align="right" valign="top"><em>
Stand: 2006-05-08
</em></td>
</tr>
</table>

<hr>

<h1>Taschenrechner mit JavaScript</h1>

<h2>(aus: <a href="http://www.teamone.de/selfhtml/" target="_blank">Münz, Stefan: SelfHTML 8.0</a>)</h2>


<form name="Rechner" action="" onsubmit="Ergebnis();return false;">
<table border="5" cellpadding="10" cellspacing="0">
<tr>
<td bgcolor="#C0C0C0">
<input type="text" name="Display" align="right" class="display"></td>
</tr><tr>
<td  bgcolor="#E0E0E0">
<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td><input type="button" width="60" class="button" value="  7   " onclick="Hinzufuegen('7')"></td>
<td><input type="button" width="60" class="button" value="  8   " onclick="Hinzufuegen('8')"></td>
<td><input type="button" width="60" class="button" value="  9   " onclick="Hinzufuegen('9')"></td>
<td><input type="button" width="60" class="button" value="  +   " onclick="Hinzufuegen('+')"></td>
</tr>
<tr>
<td><input type="button" width="60" class="button" value="  4   " onclick="Hinzufuegen('4')"></td>
<td><input type="button" width="60" class="button" value="  5   " onclick="Hinzufuegen('5')"></td>
<td><input type="button" width="60" class="button" value="  6   " onclick="Hinzufuegen('6')"></td>
<td><input type="button" width="60" class="button" value="  -   " onclick="Hinzufuegen('-')"></td>
</tr>
<tr>
<td><input type="button" width="60" class="button" value="  1   " onclick="Hinzufuegen('1')"></td>
<td><input type="button" width="60" class="button" value="  2   " onclick="Hinzufuegen('2')"></td>
<td><input type="button" width="60" class="button" value="  3   " onclick="Hinzufuegen('3')"></td>
<td><input type="button" width="60" class="button" value="  *   " onclick="Hinzufuegen('*')"></td>
</tr>
<tr>
<td><input type="button" width="60" class="button" value="  =   " onclick="Ergebnis()"></td>
<td><input type="button" width="60" class="button" value="  0   " onclick="Hinzufuegen('0')"></td>
<td><input type="button" width="60" class="button" value="  .   " onclick="Hinzufuegen('.')"></td>
<td><input type="button" width="60" class="button" value="  /   " onclick="Hinzufuegen('/')"></td>
</tr>
<tr>
<td><input type="button" width="60" class="button" value="sqrt " onclick="Sonderfunktion('sqrt')"></td>
<td><input type="button" width="60" class="button" value=" pow " onclick="Sonderfunktion('pow')"></td>
<td><input type="button" width="60" class="button" value=" log " onclick="Sonderfunktion('log')"></td>
<td><input type="reset"  width="60" class="button" value="  C  "></td>
</tr>
</table>
</td></tr></table>
</form>

</body>
</html>