第2回

  数値の表現、制御構造(if, while, for)、関数  


数値の表現

 数値の表現には、10進数、8進数、16進数、指数表現があります。

種類 表現方法 表現例
10進数(整数、実数) 0以外の数字で始める(整数の場合) 125、1.25、0.125、.125
8進数(整数) 0で始める 014(10進数の12)
16進数(整数) 0xまたは0Xで始める 0x5E(10進数の94)
指数表現 eまたはEをつけた指数表現 5e4(5×104と同じ)
5e-4(5×10-4と同じ)

 0.005、.005、5e-3、5E-3、5e-03、50e-04 これらは、表現が違いますが同じ値になります。

 8進数、16進数では実数(浮動小数点数)を使用することができません。16進数での e(E) は指数の指定にはなりませんので、注意してください。ここをクリックして、色々な数値の表現での計算を試してみてください。

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
    function calc()
    {
        var datA;
        with(document.form01)
        {
            datA = txt01.value + " = " + eval(txt01.value) + "\n";  
            txt02.value += datA;
            txt01.value = "";
        }
    }
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form01">
計算式:<INPUT TYPE="TEXT" NAME="txt01" SIZE="30">
<INPUT TYPE="button" VALUE="計算" onClick="calc()">
 <INPUT TYPE="RESET" NAME="Reset" VALUE="リセット"><BR>
<TEXTAREA NAME="txt02" ROWS=20 COLS=60></TEXTAREA>
</FORM>
</BODY>
</HTML>

 これは、datA という変数を宣言して、ここに、計算式(txt01.value)と記号(=)、計算結果(eval(txt01.value))をつなげて代入しています。なお、最後の \n は改行です。これを、テキストエリア(txt02)に表示していますが、次の計算を行なうと、前の計算結果を残して、下の行に書き加えています。txt02.value += datA という部分です。計算を繰り返すと、計算式と計算結果が、テキストエリアにたまっていきます。

 [リセット]というボタンは、このフォーム(form01)全体の値をリセットします。

if(条件分岐)

 前の項目の、たった10行の簡単な JavaScript でも、実用的な計算をすることができました。でも、ただ計算するだけでなく、入力した値などを評価して、制御したいことがあります。

 if (式) {式が真のときの処理} else {式が為のときの処理}

 次の例では、数値を入力して[判定]をクリックすると、100以上なら「大きい」、100より小さく50以上なら「中ぐらい」、50より小さければ「小さい」と表示し、負の数値の場合は、警告を出しています。ここをクリックしてください。

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
    function calc()
    {
        with(document.form01)
        {
            if(txt01.value >= 100)
                txt02.value = "大きい";
            else if(txt01.value >= 50)
                txt02.value = "中ぐらい";
            else if(txt01.value > 0)
                txt02.value = "小さい";
            else
            {
                txt02.value = "判定不可能";
                alert("正しい数値を入力してください。");
            }
        }
    }
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form01">
正の数値を入力してください:<INPUT TYPE="TEXT" NAME="txt01" SIZE="10">  
<INPUT TYPE="button" VALUE="判定" onClick="calc()"><BR>
判定結果:<INPUT TYPE="TEXT" NAME="txt02" SIZE="20">
</FORM>
</BODY>
</HTML>

 まず、if(txt01.value >= 100) は、数値が100以上かどうかを判定し、else if(txt01.value >= 50) は、そうでなく、50以上かどうかを判定します。次の else if(txt01.value > 0) は、そうでなく、0より大きいかどうかを判定し、最後の else の次は、そこまでの式にあてはまらないときの処理です。条件分岐によって、複数の処理を行なう場合は、この else の次のように、{ } でかこんでブロックにする必要があります。

 alert は、[OK]ボタンがある警告メッセージを表示します。
 else
以下がない場合は、if (式) が真の場合だけ処理を行ないます。

 if(式) の中で、複数の評価をするときは、&& (かつ)、||(または)を使用します。
 a = 5、b = 0、C = 10 とすると

 if( a>b && b<c )、if( a>b || b>c ) の ( ) 内の式は真になります。
 if( a>b && b==c ) 、if( a<b || b==c ) の ( ) 内の式は為になります。

while(繰り返し処理)

 while (式) {処理}

 式が真の間、処理を繰り返します。

 次の例では、数値を入力して[計算]をクリックすると、その数値を 2 で除して、結果が1より小さくなるまで、メッセージを出して繰り返します。ここをクリックしてください。

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
    function calc()
    {
        with(document.form01)
        {
            var datA;
            datA = txt01.value;
            while(datA > 1)
            {
                datA /= 2;
                alert(datA * 2 +" / 2 " + "は " + datA + "です");
            }
            txt02.value = datA;
        }
    }
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form01">
数値を入力してください:<INPUT TYPE="TEXT" NAME="txt01" SIZE="10">  
<INPUT TYPE="button" VALUE="計算" onClick="calc()"><BR>
結果:<INPUT TYPE="TEXT" NAME="txt02" SIZE="10">
</FORM>
</BODY>
</HTML>

 while (式) の式が常に真になる場合は、無限に繰り返すことになりますが、break でここから抜けることができます。関数 calc を、次のように書き換えても、同じように動作します。ここをクリックしてください。

  function calc()
  {
      with(document.form01)
      {
          var datA;
          datA = txt01.value;
          while(1)
          {
              datA /= 2;
              alert(datA * 2 +" / 2 " + "は " + datA + "です");  
              if(datA < 1)
                  break;
          }
          txt02.value = datA;
      }
  }

 抜け出す条件を間違えると、本当に無限ループになってしまうので、注意してください。

for(指定回数繰り返し処理)

 for (初期値 ; 繰り返す条件 ; 増減) {処理}

 簡単な例は、ここをクリックしてください。

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
    function calc()
    {
        var i;
        for(i=1 ; i<=10 ; i++)
            alert(i +"回目のメッセージ");
    }
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="ここをクリック" onClick="calc()">  
</FORM>
</BODY>
</HTML>

 初期値:変数 i に1を代入  繰り返す条件:変数 i が10以下のとき  増減:変数 i を1ずつ加算

 として、10回メッセージを表示しています。

関数

function 関数名(引数) {内容...}

 関数名に、JavaScript で予約されている名前(var, if など)は使用することができません。引数は省略できます。

 これまでも、関数を定義して使ってきましたが、それらの値の出し入れは、フォームのテキストボックスなどを経由したものでした。関数は、引数として値を受け取って、処理した結果を返すこともできます。

 次の例は、ボタンをクリックすると、1番目の数値、2番目の数値の入力を求められた後に、計算結果を表示します。

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
    function calc01(a,b)
    {
        var datA;
        datA = a + b + 10;
        datA *= 10;
        return datA;
    }

    function calc()
    {
        var datA,datB,datC;
        datA = prompt("1番目の数値","");
        datB = prompt("2番目の数値","");
        datC = calc01(datA,datB);
        alert("計算結果は " + datC + " です。");
    }
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="ここをクリック" onClick="calc()">  
</FORM>
</BODY>
</HTML>

 calc では、prompt で、文字入力ボックスを表示し、入力された文字を、変数 datA, datB に代入しています。次に、datA, datB を引数として、calc01 を実行して、返った値を datC に代入して、結果を表示しています。calc01 は、a, b 2つの値を引数として受け取り、変数 datAa + b +10 を代入し、次に、これを10倍してから、return で返しています。

 ここをクリックしてください。計算の結果はどうでしょう? 正しい値になっていませんね。どこで間違っているのか、この例では発見も簡単でしょうが、もっと複雑な処理の場合は、なななかみつけられません。そこで、alert を処理の途中に挿入してみます。calc01 を次のようにします。

  function calc01(a,b)
  {
      var datA;
      alert("aは: "+ a);
      alert("bは: "+ b);
      datA = a + b + 10;
      alert("datAは: "+ datA);  
      datA *= 10;
      alert("datAは: "+ datA);
      return datA;
  }

 ここをクリックしてください。3回目のメッセージで、a + b +10 が "a"+"b"+"10" という文字の連結になってしまっていることがわかります。そこで、datA = a + b + 10datA = a*1 + b*1 + 10 に変更して、ab を数値にしてみます。ここをクリックしてください。こんどは正しく計算できました。計算結果が間違っていたり、エラーが出たりする場合は、alert を挿入して、エラーが発生する場所や、変数の値を知ると良いでしょう。

 calc から calc01 は、eval のような、あらかじめ定義されている関数と同じように使うことができます。この簡単な例では、わざわざ calc01 を分ける必要はないかもしれませんが、複雑な処理を行なったり、同じような処理を何度も行なう場合には、処理を関数に分けることで、わかりやすいプログラムにすることができます。

 同じ関数を複数の HTML 文書で使用する場合などは、JavaScript を記述したファイル(拡張子は js )を読み込むことができます。

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" SRC="calc001.js">
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="ここをクリック" onClick="calc()">  
</FORM>
</BODY>
</HTML>

 と記述して、calc001.js には次のように記述して同じフォルダーに置けば、HTML 文書内に記述したときと同じように動作します。ここをクリックしてください。

  function calc01(a,b)
  {
      var datA;
      datA = a*1 + b*1 + 10;
      datA *= 10;
      return datA;
  }

  function calc()
  {
      var datA,datB,datC;
      datA = eval(prompt("1番目の数値",""));
      datB = eval(prompt("2番目の数値",""));
      datC = calc01(datA,datB);
      alert("計算結果は " + datC + " です。");  
  }