読者です 読者をやめる 読者になる 読者になる

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

数学関数

JavaScript

Numberオブジェクト

  • 数値全般を表すNumberオブジェクト
  • 変数に数値を代入したり、数値を扱った計算をおこなうとしたときに自動的に作成される
  • Numberオブジェクト型の変数 n を自動生成して値に 15 を代入する
 n = 15;
  • new演算子を使用して、明示的に作成する
 n = new Number(15);
Numberオブジェクトのメソッドとプロパティ

《Numberオブジェクトのメソッド》

メソッド 説明
toString 数値を文字列に変換した結果を返す
valueOf 数値のプリミティブ値を返す


《Numberオブジェクトのプロパティ(定数)》

  • 読み取り専用の定数で、数値演算に利用するためのみに用意されている

メソッド 説明
MAX_VALUE 最大値
MIN_VALUE 最小値
MaN 数値でないことをあらわす
NEGATIVE_INFINITY マイナスの無限大をあらわす
POSITIVE_INFINITY プラスの無限大をあらわす

Math関数を使った計算(Mathクラス)

  • Mathとは「数学(Mathematics)」の意味
  • 数値演算に便利なメソッドやプロパティが利用できるオブジェクト
  • まえもってインスタンスを生成する必要はありません
  • スタティックメソッド(インスタンスを生成しないで関数のように使用できる)


Math . メソッド名(引数1, 引数2, ・・・)

メソッド
  • メソード (method) とは、方法、方式のこと
  • メソッドとは、オブジェクト指向プログラミングにおいて、各オブジェクトが持っている自身に対する操作のこと


メソッド 説明
abs() 絶対値を戻す
exp() eの引数乗の値を戻す
ceil() 引数を下回らない最小の整数を戻す
floor() 引数の値を超えない最大の整数を戻す
log() 引数の自然対数を戻す
max() 引数の中で最も大きい値を戻す
min() 引数の中で最も小さい値を戻す
pow() 第1引数の第2引数乗の値を戻す
round() 引数の少数部分以下第1位を四捨五入した値を戻す
random() 0から1未満の間の乱数を戻す
sin() サイン(正弦)を戻す
cos() コサイン(余弦)を戻す
tan() タンジェント正接)を戻す
asin() アークサイン(サインの逆関数)を戻す
acos() アークコサイン(コサインの逆関数)を戻す
atan() アークタンジェントタンジェント逆関数)を戻す

f:id:web-design-lesson:20160505174305p:plain

MDN Math

  • MOZILLA DEVELOPER NETWORKで調べてみる

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math


最大値を戻すメソッドmax

var num = Math.max(5, 4, 9, 10);

※numの値は10になる

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='UTF-8'>
<title>Mathオブジェクトのメソッド</title>
</head>
<body>
<script>
var num1 = 10;
var num2 = 15;
var num3 = 16;
document.write('<h1>', Math.max(num1, num2 , num3), '</h1>');
document.write('<h1>', Math.min(num1, num2 , num3), '</h1>'); 
</script>
</body>
</html>
randomメソッド
  • 乱数を戻すメソッド
  • 乱数とは、無造作に選ばれる数のこと
var r1 = Math.random();
trace(r1);
var r2 = Math.random();
trace(r2);
var r3 = Math.random();
trace(r3);
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Mathオブジェクトのメソッド</title>
</head>
<body>
<script>
var random = Math.random();

if (random < 0.33) {
  document.write('<h1>', '大吉', '</h1>');
} else if (random < 0.66) {
  document.write('<h1>', '吉', '</h1>');
} else {
  document.write('<h1>', '凶', '</h1>');
}
</script>
</body>
</html>

※均等に3分割の確率になるよう値を設定しています



乱数を整数で得る

Math.floor(Math.random()*(求めたい値の最大値-求めたい値の最小値+1))+求めたい値の最小値

// 分かりやすく書いた場合
var r = Math.random() * 6;
r = Math.floor(r )+ 1;
trace( r );

// 関数を組み合わせて指定する場合
trace(Math.floor(Math.random() * 6 )+ 1);


乱数を整数表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>乱数の実験</title>
</head>
<body>
<h1>乱数の実験</h1>
<script>
MAX = 10;
var num;
for (var i=0; i < 10; i++) {
	num = Math.floor(Math.random() * MAX + 1);
	document.write(num + '<br>');
}
</script>
</body>
</html>


イメージをランダムに表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イメージをランダムに表示する</title>
<style>
body {;
	text-align: center;
}
</style>
</head>

<body>
<h1>今日のイメージ</h1>
<script>
var numOfImg = 3;
var num;
num = Math.floor(Math.random() * numOfImg + 1)
document.write('<img src="img/ph' + num + '.jpg">');
</script>
</body>
</html>

成果率判定

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>脳トレーニング(足し算)</title>
<script>
function getRandom() {
  return Math.floor(Math.random() * 100);
}
</script>
</head>
<body>
<h1>脳トレーニング(足し算)</h1>
<script>
//質問の数
var numOfQ = 10;
var num1, num2, num3;
var correct = 0;

//出題する
for (var i = 0; i < numOfQ; i++) {
	num1 = getRandom();
	num2 = getRandom();
	msg = num1 + '+' + num2 + '=';
	ans = prompt(msg, '');
	if (ans == (num1 + num2)) {
		correct++;
	}
}

//正解率を表示する
var ans = Math.round(correct/numOfQ *100);
document.write( '<h1>正解率: ' + ans + '%</h1>');
document.write('<p>' + numOfQ + '問中' + correct + '問正解</p>'); 
</script>
</body>
</html>
floorメソッド
  • 小数点以下を切り捨てる


《πの整数を表示》

a = 3.1415;
a = Math.floor( a );
trace( a );
powメソッド
  • 累乗の計算


《2の3乗を表示》

a = Math.pow(2, 3);
trace( a );
Mathオブジェクトのプロパティ
  • Mathオブジェクトには技術計算の定数として使用されるプロパティも用意されています
  • 「PI」は、円周率を表す読み出し専用のプロパティです
  • 半径が5の円の面積の場合は
var area = Math.PI * 5 * 5;

※円周率 x 半径 x 半径


まとめ

  • Mathオブジェクトのメソッドは、インスタンスを生成しないで使用する
  • 最大値を求める maxメソッド、最小値を求める minメソッド
  • 0以上1未満の乱数を発生する、randomメソッド
広告を非表示にする