【JavaScript ~Mathオブジェクト~】勉強メモ12

JavaScriptちゃんと学習中。
今回は<b>Mathオブジェクト</b>についてです。
ほぼ自分の勉強メモです。
過度な期待はしないでください。


Mathオブジェクト
-
- Mathオブジェクトとは？

　Mathオブジェクトは、数学的な定数と関数を提供するプロパティとメソッドを持つ、組み込みのオブジェクト。
　Mathオブジェクトのメソッドとプロパティの一覧はこちらを参照
　⇨　[MDN web docs – Math](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math)

- Math.PI

　Mathオブジェクトのプロパティには数学の定数が８つ定義されている。　
　Math.PIは、そうしたプロパティのひとつで、<b>円周率</b>を表す。
　下記にコード例を記載

```.html:HTML
<p>円周率は <span id="pi"></span> です。</p>
```

```.js:JavaScript 
'use strict';
document.getElementById('pi').textContent = Math.PI;
```

```.text:出力結果
円周率は 3.141592653589793 です。
```
<br>

- Math.floor(x)

　Mathオブジェクトのfloorメソッドは、<b>(　)内の数値の少数点以下を切り捨てる。</b>
　下記にコード例を記載

```.html:HTML
<p>少数点以下を切り捨てると <span id="floor"></span> です。</p>
```

```.js:JavaScript 
'use strict';
document.getElementById('floor').textContent = Math.floor(Math.PI);
```

```.text:出力結果
少数点以下を切り捨てると 3 です。
```
<br>

- Math.floor(x)（少数点◯位で切り捨て）

　-Mathオブジェクトのfloorメソッドを使って、少数点◯位で切り捨てた数字を表示させる。
　その為の手順が、
　１、１０を「少数第◯位」迄で切り捨てたい数掛ける。
　　つまり、「少数第３位」迄にしたいなら、１０×１０×１０、<b>１０の３乗をする</b>。
　２、数字に、１０の◯乗をした計算結果を掛ける事で少数点が移動する。
　３、少数点が移動した数字の小数点以下を切り捨てる（<b>Math.floorメソッド</b>を使用する）
　４、小数点以下を切り捨てた数字を、１０の◯乗をした計算結果で割る。
　　これで、小数点が元の位置に戻る。

　下記にサンプルコードを記載していく

```.html:HTML
<p>小数第３位で切り捨てると <span id="output"></span> です。</p>
```

```.js:JavaScript 
'use strict';

function position(integer, decimal) {
    const mover = 10 ** decimal;
    return Math.floor(integer * mover) / mover;
}

//無名関数を使用した場合
const point = function (integer, decimal) {
    const mover = 10 ** decimal;
    return Math.floor(integer * mover) / mover;
}

//アロー関数を使用した場合
const point = (integer, decimal) => {
    const mover = 10 ** decimal;
    return Math.floor(integer * mover) / mover;
}


document.getElementById('output').textContent = position(Math.PI, 3);
```

```.text:出力結果
小数第3位で切り捨てると 3.141 です。
```
<br>
　-引数を使って、関数を呼び出すときに一緒に値を渡す

```.text
function position(integer, decimal) {
・・・省略

document.getElementById('output').textContent = position(Math.PI, 3);
```
　引数とは、関数に与える追加情報のようなもの
　今回のコードでは、この部分　`(integer, decimal)`
　第1引数は、切り捨てたい数字を、
　第２引数は、「少数第◯位」の◯を指定する数字

　関数の呼び出し方 → 「関数名( )」・「定数名( )」とする事で関数を呼び出す事が出来る
　今回のコードでは、この部分　`position(Math.PI, 3)`
<br>

　-手順の１を行う、つまり、１０の◯乗をする

```.text
const mover = 10 ** decimal;
```
　`**`は、「a `**` b」のとき、「aのb乗」を計算する演算子。
<br>

　-残りの手順（２〜４）を行う

```.text
return Math.floor(integer * mover) / mover;
```
　手順２、数字に１０の◯乗をした計算結果を掛ける
　コードでは、この部分　`integer * mover`
　⇨　3.141592653589793　×　１０００　=　3141.592653589793

　手順３、少数点が移動した数字の小数点以下を切り捨てる
　コードでは、この部分　`Math.floor(integer * mover)`
　⇨　3141.592653589793 =　3141

　手順４、小数点以下を切り捨てた数字を、１０の◯乗をした計算結果で割る
　コードでは、この部分　`Math.floor(integer * mover) / mover;`
　⇨　3141　/　１０００　=　3.141

　最後にreturnを使って戻り値として返す
<br>

- Math.random()

　-Mathオブジェクトのrandomメソッドは、<b>0 以上 1 未満の疑似乱数を返す（1は入らない）</b>
　
　下記にサンプルコードを記載していく

```.html:HTML
<p>生成した乱数は <span id="random"></span> です。</p>
```

```.js:JavaScript 
'use strict';
document.getElementById('random').textContent = Math.random();
```

```.text:出力結果
// 0以上1未満の乱数
生成した乱数は 0.14116811964840115 です。
```
<br>

- Math.random()【乱数の「範囲」を指定】

　今度は「0〜10」の範囲における乱数の作成。
　ここで注意が必要なのは「Math.random()」は0〜1未満（0〜0.9999････）の少数を返すという点。
　つまり、「0〜10」の範囲を作りたい場合、最大値の10をそのまま掛けてしまうと「0〜9」の範囲に
　なってしまう。その為、最大値に1を足して「11」を掛けることで、「0〜10」の範囲を設定出来る。

　また、「floor( )」メソッドを使って小数点を切り捨てて整数にする。

```.html:HTML
<p>生成した乱数は <span id="random"></span> です。</p>
```

```.js:JavaScript 
'use strict';
document.getElementById('random').textContent = Math.floor( Math.random() * 11 );
```

```.text:出力結果
// １以上1０以下の乱数
生成した乱数は ５ です。
```
<br>

- Math.random()【最小値・最大値を設定】

　書き方：`Math.random() * ( 最大値 - 最小値 ) + 最小値;`
　ここでの注意点は、「最大値」についてですが、今回最小値を5、最大値10とするのであれば、
　先程説明した通り、10に1を足した「11」が「最大値」であるので注意。

```.html:HTML
<p>生成した乱数は <span id="random"></span> です。</p>
```

```.js:JavaScript 
'use strict';
document.getElementById('random').textContent = Math.floor(Math.random() * (11 - 5)) + 5;
```

```.text:出力結果
// 5以上1０以下の乱数
生成した乱数は 7 です。
```
<br>

　※Mathオブジェクトは、全て読み取り専用で書き換える事が出来ないようになっていて、　
　オブジェクトごとに独自のプロパティ値を持つ必要がない。その為、Mathオブジェクトは、
　元のオブジェクトからコピー出来ない、つまりインスタンスの生成が出来ない。

<br>
過去投稿記事
-
[【JavaScript ~変数・定数、if文・switch文~】勉強メモ](https://qiita.com/k-yasuhiro/items/1fb63f0881faf67bcb29)
[【JavaScript ~for文、配列、オブジェクトについて~】勉強メモ②](https://qiita.com/k-yasuhiro/items/6625942cc901feb6bfdf)
[【JavaScript ~関数について~】勉強メモ③](https://qiita.com/k-yasuhiro/items/52e3ebb79bb0248a7c5e)
[【JavaScript ~クラスやインスタンス、メソッドについて~】勉強メモ④](https://qiita.com/k-yasuhiro/items/52e3ebb79bb0248a7c5e)
[【JavaScript ~ファイルの分割について~】勉強メモ⑤](https://qiita.com/k-yasuhiro/items/209eda27bbc61ae961a1)
[【JavaScript 読み込み】勉強メモ⑥](https://qiita.com/k-yasuhiro/items/fe3fc2bd7b14fe4f3968)
[【JavaScript ~配列のメソッド~】勉強メモ⑦](https://qiita.com/k-yasuhiro/items/279b7bb59f112f917c51)
[【JavaScript ~コールバック関数~】勉強メモ⑧](https://qiita.com/k-yasuhiro/private/ded7e2cad732774d059e)
[【JavaScript ~HTMLを置き換え、ダイアログボックス~】勉強メモ⑨](https://qiita.com/k-yasuhiro/items/7a72bf38d78b141d6fac)
[【JavaScript ~イベント~】勉強メモ⑩](https://qiita.com/k-yasuhiro/items/b0d4037d0edaae38a495)
[【JavaScript ~イベント(入力内容を取得)とDateオブジェクト~】勉強メモ11](https://qiita.com/k-yasuhiro/items/fa586154cf7064eb7058)