数値の表現には、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) は指数の指定にはなりませんので、注意してください。ここをクリックして、色々な数値の表現での計算を試してみてください。
これは、data という変数を宣言して、ここに、計算式(txt01.value)と記号(=)、計算結果(eval(txt01.value))をつなげて代入しています。なお、最後の \n は改行です。これを、テキストエリア(txt02)に表示していますが、次の計算を行なうと、前の計算結果を残して、下の行に書き加えています。txt02.value += data という部分です。計算を繰り返すと、計算式と計算結果が、テキストエリアにたまっていきます。
[リセット]というボタンは、このフォーム(form01)全体の値をリセットします。
前の項目の、たった10行の簡単な JavaScript でも、実用的な計算をすることができました。でも、ただ計算するだけでなく、入力した値などを評価して、制御したいことがあります。
if (式) {式が真のときの処理} else {式が為のときの処理}
次の例では、数値を入力して[判定]をクリックすると、100以上なら「大きい」、100より小さく50以上なら「中ぐらい」、50より小さければ「小さい」と表示し、負の数値の場合は、警告を出しています。ここをクリックしてください。
まず、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 (式) {処理}
式が真の間、処理を繰り返します。
次の例では、数値を入力して[計算]をクリックすると、その数値を 2 で除して、結果が1より小さくなるまで、メッセージを出して繰り返します。ここをクリックしてください。
while (式) の式が常に真になる場合は、無限に繰り返すことになりますが、break でここから抜けることができます。関数 calc を、次のように書き換えても、同じように動作します。ここをクリックしてください。
抜け出す条件を間違えると、本当に無限ループになってしまうので、注意してください。
for (初期値 ; 繰り返す条件 ; 増減) {処理}
簡単な例は、ここをクリックしてください。
初期値:変数 i に1を代入 繰り返す条件:変数 i が10以下のとき 増減:変数 i を1ずつ加算
として、10回メッセージを表示しています。
function 関数名(引数) {内容...}
関数名に、JavaScript で予約されている名前(var, if など)は使用することができません。引数は省略できます。
これまでも、関数を定義して使ってきましたが、それらの値の出し入れは、フォームのテキストボックスなどを経由したものでした。関数は、引数として値を受け取って、処理した結果を返すこともできます。
次の例は、ボタンをクリックすると、1番目の数値、2番目の数値の入力を求められた後に、計算結果を表示します。
calc では、prompt で、文字入力ボックスを表示し、入力された文字を、変数 data, datb に代入しています。次に、data, datb を引数として、calc01 を実行して、返った値を datc に代入して、結果を表示しています。calc01 は、a, b 2つの値を引数として受け取り、変数 data に a + b +10 を代入し、次に、これを10倍してから、return で返しています。
ここをクリックしてください。計算の結果はどうでしょう? 正しい値になっていませんね。どこで間違っているのか、この例では発見も簡単でしょうが、もっと複雑な処理の場合は、なななかみつけられません。そこで、alert を処理の途中に挿入してみます。calc01 を次のようにします。
ここをクリックしてください。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 )を読み込むことができます。
と記述して、calc001.js には次のように記述して同じフォルダーに置けば、HTML 文書内に記述したときと同じように動作します。ここをクリックしてください。