MENU

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つの値を引数として受け取り、変数 data に a + 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 + 10 を data = a*1 + b*1 + 10 に変更して、a と b　を数値にしてみます。ここをクリックしてください。こんどは正しく計算できました。計算結果が間違っていたり、エラーが出たりする場合は、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 + " です。"); }