TECHNICAL INFORMATION技術情報

第3回
  配列(Array)、数学の計算(Math)

配列(Array)

 配列というのは、配列名と添字(参照番号)によって、その値を参照できるようにしたものです。配列を使用するためには、新しいオブジェクトを作成する new を使用して、配列オブジェクト Array を作成します。ここをクリックしてください。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> function calc() { var inp; dat = new array("春","夏","秋","冬"); inp = prompt("0~3の数字を入力してください:",""); alert("選択された季節は「"+ dat[inp] +"」です。"); } </script> </head> <body> <form> <input type="button" value="ここをクリック" onclick="calc()"> </form> </body> </html>

 この例のように、配列の要素を指定する形式で作成できます。参照番号は 0 からはじまり、dat[0] の要素は "春" です。次のように、要素の数を3つしか指定していない配列に、4つ目の要素を代入すると、配列要素は自動的に拡張されます。

dat = new Array("春","夏","秋"); dat[3] = "冬";

 要素を指定しないで配列を作成することもできます。このとき、Array() の ( ) 内には要素数を指定します。

dat = new Array(4); dat[0] = "春"; dat[1] = "夏"; dat[2] = "秋"; dat[3] = "冬";

数学の計算(Math)

 色々な数学関数を使用するには、Math というオブジェクトを使用します。ここでは、関数だけでなく、円周率などの値も定義されています。

Math.PI 円周率πの値(3.14159...)を返す
Math.E 自然対数 e の値を返す
Math.LN10 10 の自然対数の値を返す
Math.LN2 2 の自然対数の値を返す
Math.LOG10E 自然対数 e の常用対数の値を返す
Math.LOG2E 自然対数 e の2を底とする対数の値を返す  
Math.SQRT2 2の平方根の値(1.1421...)を返す
Math.SQRT1_2   2の平方根の半分の値を返す

 これらの例は、ここをクリックしてください。説明と、定義されている値をつなげて出力しています。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> document.write("円周率π(Math.PI)は: "+ Math.PI +"<br>"); document.write("自然対数 e Math.E)は: "+ Math.E +"<br>"); document.write("10 の自然対数(Math.LN10)は: "+ Math.LN10 +"<br>"); document.write("2 の自然対数(Math.LN2)は: "+ Math.LN2 +"<br>"); document.write("自然対数 e の常用対数(Math.LOG10E)は: "+ Math.LOG10E +"<br>"); document.write("自然対数 e の2を底とする対数(Math.LOG2E)は: "+ Math.LOG2E +"<br>"); document.write("2の平方根(Math.SQRT2)は: "+ Math.SQRT2 +"<br>"); document.write("2の平方根の半分(Math.SQRT1_2)は: "+ Math.SQRT1_2); </script> </head> <body> </body> </html>

乱数の発生(random)

 0から1の範囲(0より大きく1未満)の乱数を発生させます。ここをクリックしてください。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> var i; for(i=1 ; i <=30 ;i++) { document.write(Math.random() +"<br>"); if(i%5 == 0) document.write("<hr>"); } </script> </head> <body> </body> </html>

 この例では、乱数を30個出力し、5行ごとに水平線 <hr> を挿入しています。

切り捨て(floor)、切り上げ(ceil)、四捨五入(round)

 小数点以下を処理して整数にします。ここをクリックしてください。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> function calc() { with(document.form01) { var data; data = txt01.value; txt02.value = Math.floor(data); txt03.value = Math.ceil(data); txt04.value = Math.round(data); } } </script> </head> <body> <form name="form01"> 数値を入力してください:<input type="text" name="txt01" size="10"> <input type="button" value="計算" onclick="calc()"><p> 切り捨て:<input type="text" name="txt02" size="10"><br> 切り上げ:<input type="text" name="txt03" size="10"><br> 四捨五入:<input type="text" name="txt04" size="10"> </form> </body> </html>

 次の例は、ここまでに出てきた、配列・乱数・切り捨て を使用した、じゃんけんの例です。ここをクリックしてください。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> var pyou=0,pme=0; //これはグローバル変数 function dclr() { pyou = pme = 0; //得点を初期化 } function calc(_you) { var _me; disp = new array("グー","チョキ","パー"); _me = Math.floor(Math.random() * 3); //0から2までのランダムな整数 with(document.form01) { txt01.value = disp[_you]; txt02.value = disp[_me]; if(_you-_me==0) txt03.value ="引き分け"; else if(_you-_me==-1 || _you-_me==2) { txt03.value ="あなたの勝ち"; pyou++; } else { txt03.value ="あなたの負け"; pme++; } txt04.value = pyou; txt05.value = pme; } } </script> </head> <body> <form name="form01"> <input type="button" value="グー" onclick=calc(0)>  <input type="button" value="チョキ" onclick=calc(1)>  <input type="button" value="パー" onclick=calc(2)><br> <hr>あなた:<input type="text" name="txt01" size="10">  わたし:<input type="text" name="txt02" size="10">  判定:<input type="text" name="txt03" size="30"><br> <hr>あなたの得点:<input type="text" name="txt04" size="6">  わたしの得点:<input type="text" name="txt05" size="6">  <input type="reset" value="リセット" onclick=dclr()><br> </form> </body> </html>

 関数の外で宣言された変数を、グローバル変数といい、どの関数からも使用できます。これに対して、関数内で宣言された変数は、ローカル変数といいます。

 [グー]、[チョキ]、[パー] のボタンをクリックすると、これがあなたの手になり、わたしの手は random を使用して出します。これを比較して勝ち負けを判定し、得点を加算しています。

三角関数(sin, cos, tan, asin, acos, atan, atan2)

Math.sin(数値) 正弦(サイン)を算出
Math.cos(数値) 余弦(コサイン)を算出
Math.tan(数値) 正接(タンジェント)を算出
Math.asin(数値) 逆正弦(アークサイン)を算出
Math.acos(数値) 逆余弦(アークコサイン)を算出
Math.atan(数値) 逆正接(アークタンジェント)を算出
Math.atan2(y, x)   座標の逆正接(アークタンジェント)を算出  

 sin, cos, tan の引数は、ラジアン単位で指定します。同様に、逆三角関数(asin, acos, atan, atan2)の結果もラジアン単位です。例はここをクリックしてください。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> with(Math) { document.write("sin(π/3) = "+ sin(PI/3) +"<br>"); document.write("cos(π/3) = "+ cos(PI/3) +"<br>"); document.write("tan(π/3) = "+ tan(PI/3) +"<br>"); document.write("asin(1) = "+ asin(1) +"<br>"); document.write("acos(0.5) = "+ acos(0.5) +"<br>"); document.write("atan(2) = "+ atan(2) +"<br>"); document.write("atan2(1,2) = "+ atan2(1,2) +"<br>"); } </script> </head> <body> </body> </html>

 Math も、with(Math) でかこむと省略できます。

絶対値(abs)、べき乗(pow)、平方根(sqrt)、比較(max, min)

Math.abs(数値) 絶対値を算出
Math.pow(x, y) x の y 乗を算出
Math.sqrt(数値)   平方根を算出
Math.max(a, b) 2つの値のうち、大きい方を返す  
Math.min(a, b) 2つの値のうち、小さい方を返す

 これらの例は、ここをクリックしてください。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> function calc() { var a,b; with(document.form01) { a = txt01.value; b = txt02.value; txt03.value = Math.abs(a); txt04.value = Math.abs(b); txt05.value = Math.pow(a,b); txt06.value = Math.sqrt(a); txt07.value = Math.sqrt(b); txt08.value = Math.max(a,b); txt09.value = Math.min(a,b); } } </script> </head> <body> <form name="form01"> 2つの数値を入力してください。 a:<input type="text" name="txt01" size="10">  b:<input type="text" name="txt02" size="10">  <input type="button" value="計算" onclick="calc()"><br> <hr>aの絶対値:<input type="text" name="txt03" size="10">  bの絶対値:<input type="text" name="txt04" size="10"><br> aのb乗:<input type="text" name="txt05" size="30"><br> √a:<input type="text" name="txt06" size="30">  √b:<input type="text" name="txt07" size="30"><br> 大きい方の数値:<input type="text" name="txt08" size="10">  小さい方の数値:<input type="text" name="txt09" size="10"> </form> </body> </html>

 マイナスの数値を入力すると、平方根のところに NaN と出力されますが、これは、数値ではない(Not a Number)という意味です。