TECHNICAL INFORMATION技術情報
- ホーム
- 技術情報
- 一番簡単な JavaScript
- 第3回「配列（Array）、数学の計算（Math）」
第3回
配列（Array）、数学の計算（Math）
配列（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）という意味です。