TECHNICAL INFORMATION技術情報

第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) は指数の指定にはなりませんので、注意してください。ここをクリックして、色々な数値の表現での計算を試してみてください。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> 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より小さければ「小さい」と表示し、負の数値の場合は、警告を出しています。ここをクリックしてください。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> 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より小さくなるまで、メッセージを出して繰り返します。ここをクリックしてください。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> 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 (初期値 ; 繰り返す条件 ; 増減) {処理}

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

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> 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番目の数値の入力を求められた後に、計算結果を表示します。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> 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 )を読み込むことができます。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script 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 + " です。"); }