JavaScriptで計算機を作った（改）

昨日のコードは名前の付け方とかダメダメだったので書き直した。
ついでに連続計算もできるようになった。
今回はコードの説明も書いた。
ちなみに見た目はこんな感じ。

<html>
<head>
<title>電卓</title>
<script language="JavaScript">
  var val = "";
  var stock = "";
  operator="";

function setValue(n){
  val += n;
  document.forms[0].elements[0].value=val;
}

function setOperator(n){
  stock=val;
  operator=n;
  val="";
}

function clear(){
  val="";
  stock="";
  document.forms[0].elements[0].value="";
}

function calc(){
  a = eval(val);
  b = eval(stock);
  val = eval('b'+operator+'a');
  document.forms[0].elements[0].value=val;
}
</script>
</head>

まずheadの中で関数を定義する。
- setValue()関数で、最初の数字を入力する。

val += n は、val = val + n　という意味。
valはとりあえず文字列にしておく。数値ではない。
なぜかというと、数字を連続でたたいた時、うしろに値が続いていく必要があるため、
文字列を足し続けてフォームに表示するようにしている。
文字列の足し算は例えば、"あか"+"おに" = "あかおに"となる。
同様に"1"+"2"="12"となる。
数値だと1+2=3となってしまう。

- 次に、setOperator()で演算子（+,-,*,/)を押したときの動作を定義。

演算子が押されると、フォームに入っていた値は、stockに保存され、フォームの値は空になる。
operatorには、押した演算子が入る。

- 次に再度、setValueで値を入力する。

calc()を押すと、stockに保存されていた値と最後に入れた値がoperatorで計算される。
evalとは文字列を数値に変換する関数。
従って、calc()での計算は、数値同士の計算になるので、
例えば、1+2=3という計算が行われる。

以下で、body内に計算機を表示させる。

<body>
<p>
<center>
<b><h2>電　卓</b></h2>
</center>
<p>
<center>
<table border="1" align="middle" cellspacing="2" bgColor="black">
  <tr>
    <td colspan="4" align="middle"><form><input size="27"></form></td>
  </tr>
  <tr>
    <td><A HREF="JavaScript:setValue('7')"><IMG SRC="calc/7.gif" border="0"></A></td>
    <td><A HREF="JavaScript:setValue('8')"><IMG SRC="calc/8.gif" border="0"></A></td>
    <td><A HREF="JavaScript:setValue('9')"><IMG SRC="calc/9.gif" border="0"></A></td>
    <td><A HREF="JavaScript:setOperator('*')"><IMG SRC="calc/mult.gif" border="0"></A></td>
  </tr>
  <tr>
    <td><A HREF="JavaScript:setValue('4')"><IMG SRC="calc/4.gif" border="0"></A></td>
    <td><A HREF="JavaScript:setValue('5')"><IMG SRC="calc/5.gif" border="0"></A></td>
    <td><A HREF="JavaScript:setValue('6')"><IMG SRC="calc/6.gif" border="0"></A></td>
    <td><A HREF="JavaScript:setOperator('/')"><IMG SRC="calc/div.gif" border="0"></A></td>
  </tr>
  <tr>
    <td><A HREF="JavaScript:setValue('1')"><IMG SRC="calc/1.gif" border="0"></A></td>
    <td><A HREF="JavaScript:setValue('2')"><IMG SRC="calc/2.gif" border="0"></A></td>
    <td><A HREF="JavaScript:setValue('3')"><IMG SRC="calc/3.gif" border="0"></A></td>
    <td><A HREF="JavaScript:setOperator('+')"><IMG SRC="calc/plus.gif" border="0"></A></td>
  </tr>
  <tr>
    <td><A HREF="JavaScript:setValue('0')"><IMG SRC="calc/0.gif" border="0"></A></td>
    <td><A HREF="JavaScript:setValue('.')"><IMG SRC="calc/dot.gif" border="0"></A></td>
    <td><A HREF="JavaScript:calc()"><IMG SRC="calc/equal.gif" border="0"></A></td>
    <td><A HREF="JavaScript:setOperator('-')"><IMG SRC="calc/minus.gif" border="0"></A></td>
  </tr>
  <tr>
    <td colspan="4" align="middle"><A HREF="JavaScript:clear()"><img src="calc/reset.jpg" border="0"></A></td>
  </tr>
</table>
</body>
</html>