数値計算(その８)

課題 HTML JavaScript

前回の続きです。


さて。長く続いたこのシリーズも今回が最終回です。
全ての四則演算を一つの式で計算出来るようなHTMLを紹介＋解説して最後にします。


(1) まずはメモ帳を開いて以下のテキストを入力してください(コピペ可)

<html>
  <head>
    <title>演算方法を選ぶ</title>
  </head>
  <script type="text/javascript">
  function Calculate(a,b,c,d)
  {
      if ( d == "add" )
      {
          Add(a,b,c);
      }
      else if  ( d == "minus" )
      {
          Minus(a,b,c);
      }
      else if  ( d == "multiply" )
      {
          Multiply(a,b,c);
      }
      else if  ( d == "divide" )
      {
          Divide(a,b,c);
      }
      else
      {
          alert("演算子が不正です");
      }
  }

  function Multiply(a,b,c)
  {
     c.value = (a * b);
  }

  function Add(a,b,c)
  {
     c.value = (parseInt(a) + parseInt(b));
  }

  function Minus(a,b,c)
  {
     c.value = (a - b);
  }

  function Devide(a,b,c)
  {
     c.value = (a / b);
  }
  </script>
  <body>
    ★四則演算
    <form name="frm">
      <input type="text" name="firstValue" size="15" value=50>
      <select name="enzan" size="1">
        <option value="add" selected="selected">＋</option>
        <option value="minus">−</option>
        <option value="multiply">×</option>
        <option value="divide">÷</option>
      </select>
      <input type="text" name="secondValue" size="15" value=3>＝
      <input type="text" name="result" size="15" value=0>
      <INPUT type="button" name="buttondevide" onClick="Calculate(firstValue.value,secondValue.value,result,enzan.value)" value="計算実行">
    </form>
    <br>
  </body>
</html>


(2) デスクトップにAllCalc.htmlという名前で保存します


(3) デスクトップに作成されたAllCalc.htmlを実行してください


(4) いろいろと値を変えて計算してみてください

50x3を実行してみた様子です

ではここの部分については解説していきます。まずはHTMLの部分から。

      <select name="enzan" size="1">
        <option value="add" selected="selected">＋</option>
        <option value="minus">−</option>
        <option value="multiply">×</option>
        <option value="divide">÷</option>
      </select>
    </form>

この部分はコンボボックスと呼ばれる部分です。<select>と</select>に囲まれた部分の<option>タグで指定されたデータがコンボボックスに表示される値とそれを選んでいる場合に取得できる値です。
ちなみに<select>タグのnameに指定されているのがコンボボックスの名前で、sizeが1だとコンボボックスになります。
# 3だとリストボックスになるらしいです(未確認)


例えば、＋を指定している場合にenzan.valueを調べるとaddが返却されます。−が選択されている場合にはminusが返ってくるわけです。
# 同一フレーム以外から指定する場合にはフレームの名前から指定する必要があるので注意してください


次に処理を実行するボタンについて。

      <INPUT type="button" name="buttondevide" onClick="Calculate(firstValue.value,secondValue.value,result,enzan.value)" value="計算実行">


今回はボタンが押された時の処理(onClick)にはCalculateという引数が4つ渡される関数が指定されています。
ちなみに関数に渡されているのは

渡す値の名前 値についての説明
firstValue.value 左側のテキストボックスの入力値
secondValue.value 真ん中のテキストボックスの入力値
result 結果を表示するテキストボックス(入力値ではない事に注意)
enzan.value コンボボックスの値


です。ではそのCalculate()の本体はどうなっているのかというと、こんな感じです。

<html>
  function Calculate(a,b,c,d)
  {
      if ( d == "add" )
      {
          Add(a,b,c);
      }
      else if  ( d == "minus" )
      {
          Minus(a,b,c);
      }
      else if  ( d == "multiply" )
      {
          Multiply(a,b,c);
      }
      else if  ( d == "divide" )
      {
          Divide(a,b,c);
      }
      else
      {
          alert("演算子が不正です");
      }
  }


まず引数の値とボタンを押された時に渡される値の対応関係を調べてみます。

関数の引数名 ボタン押下時に渡される値
a firstValue.value
b secondValue.value
c result
d enzan.value


処理を見てみると引数dの値で呼び出す関数を切り替えている事が分かります。これを上の表に照らし合わせてみるとコンボボックスの値を見て、どの処理を行うのか決めている事がわかります。
つまり、掛け算(×)が選ばれていれば掛け算用の関数(Multiply())を呼び出し、足し算(＋)が選ばれていれば足し算用の関数(Add())を呼び出すといった振り分けを行うのがこのCalculate()という関数なのです。


あとは今までと同じ処理ばかりなので過去の記事を参考にしてください。


★参考サイト

[HTML/JavaScript]
(1) 初心者向きのｊａｖａScript＆HTMLタグ・CSS集
(2) ホームページ作成の第一歩