数値計算(その４) - Webプログラミングをしてみよう!!

前回の続きです。

続きとは言いましたが、今回はちょっと趣きを変えて関数についての説明と便利な使い方について説明します。テーマは関数の使い方と引数(ひきすう)についてです。今までの話よりもちょっと抽象的な話になるので、わからなければどんどん突っ込んでください。

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

<html>
  <head>
    <title>引数のテスト</title>
  </head>
  <script type="text/javascript">
  function Add()
  {
    frm1.txt3.value = (parseInt(frm1.txt1.value) + parseInt(frm1.txt2.value));
  }
  </script>
  <body>
    <form name="frm1">
      <input type="text" name="txt1" size="15" value=0>＋
      <input type="text" name="txt2" size="15" value=0>＝
      <input type="text" name="txt3" size="15" value=0>
      <INPUT type="button" name="buttoncalc" onClick="Add()" value="計算実行">
    </form>
  </body>
</html>

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

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

(4) ためしに計算してみてください

1+2を実行してみた様子です

さて。
ここでこの画面にもう一箇所、同じように足し算を行う事が出来るように修正をしなくてはいけなくなりました。やる事は全く同じである値とある値を足し合わせるという処理です。

じゃあ、追加してみましょう。

(5) Add.htmlを修正してください

<html>
  <head>
    <title>引数のテスト</title>
  </head>
  <script type="text/javascript">
  function Add()
  {
    frm1.txt3.value = (parseInt(frm1.txt1.value) + parseInt(frm1.txt2.value));
  }

  // 関数名をAdd2としました //
  function Add2()
  {
     // Addの内容をコピーしてfrm1をfrm2に変えただけです //
     frm2.txt3.value = (parseInt(frm2.txt1.value) + parseInt(frm2.txt2.value));
  }
  </script>
  <body>
    <form name="frm1">
      <input type="text" name="txt1" size="15" value=0>＋
      <input type="text" name="txt2" size="15" value=0>＝
      <input type="text" name="txt3" size="15" value=0>
      <INPUT type="button" name="buttoncalc" onClick="Add()" value="計算実行">
    </form>


    <!-- フォームの名前をfrm1をコピーして、frm1をfrm2にしただけです -->
    <form name="frm2">
      <input type="text" name="txt1" size="15" value=0>＋
      <input type="text" name="txt2" size="15" value=0>＝
      <input type="text" name="txt3" size="15" value=0>

      <!-- Add()をAdd2()に変更しただけです -->
      <INPUT type="button" name="buttoncalc" onClick="Add2()" value="計算実行">
    </form>
  </body>
</html>