スポンサードリンク

構文withを使って簡潔に書く

今回は with を使ってJavaScriptのプログラムを簡潔に書くことを学びましょう。ついでに「クリア」ボタンも追加します。


【1】テキストエディタで以下のように入力し、ファイル名は「sample006.html」で適当な場所に保存してください。コピーして貼り付けてもかまいません。


<html>
  <head>
    <title>sample006</title>
    <script type="text/javascript">
      function Calc() {
        //変数の宣言
        var a;
        var b;
        var c;
        var ope;

        //withを使って簡潔に書く

        with (document.form1) {
          a = parseInt(txtA.value);
          b = parseInt(txtB.value);
          ope = parseInt(selOpe.value);
        }

        //セレクトボックスによって処理を変える
        switch (ope) {
          case 1:
            c = a + b;
            break;
          case 2:
            c = a - b;
            break;
          case 3:
            c = a * b;
            break;
          case 4:
            c = a / b;
            break;
          case 5:
            c = a % b;
            break;
          default:
            break;
        }

        //計算結果を表示
        document.form1.txtC.value = c;
      }
    </script>
  </head>
  <body>
    <form name="form1">
      <INPUT TYPE="text" NAME="txtA">
      <select name="selOpe" size=1>
        <option value="1">+</option>
        <option value="2">−</option>
        <option value="3">×</option>
        <option value="4">÷</option>
        <option value="5">%</option>
      </select>
      <INPUT TYPE="text" NAME="txtB"> =
      <INPUT TYPE="text" NAME="txtC">
      <br>
      <input type="button" name="cmdCalc" value="計算" onclick="Calc()">
      <input type="reset" value="クリア">
    </form>

  </body>
</html>



【2】保存したら sample006.html をダブルクリックしてWebブラウザで開きます。


【3】「クリア」ボタンが表示されます。

javascript-10.gif


【4】前回までと同じ動きをすることを確認してください。また、「クリア」ボタンを押すとテキストボックスがクリアされることも試してください。


【解説】
JavaScript の構文 with を使うと似たようなプログラムを簡潔に短くかけます。例えば前回までのプログラムでは、以下のように document.form1. の部分を繰り返し書いていました。

a = parseInt(document.form1.txtA.value);
b = parseInt(document.form1.txtB.value);
ope = parseInt(document.form1.selOpe.value);


そこで、with の後の()に繰り返し書いていた document.form1 を書くと、構文withの中では省略できるようになります。最後の 「.」 ドットは不要です。

with (document.form1) {
a = parseInt(txtA.value);
b = parseInt(txtB.value);
ope = parseInt(selOpe.value);
}


使うときは、
with () {
}
のようにwith内だけで有効なことに注意してください。また、1行しかプログラムが無い時はそのまま書いたほうが早いです。同じような行数が増えるほど効果的な構文です。


最後に「クリア」ボタンの部分ですが、以下のようにhtmlを1行追加するだけで、特にプログラムを書くことなく動きます。

<input type="reset" value="クリア">

スポンサードリンク






JavaScript初心者入門講座TOPへ