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

Mathオブジェクト

Mathオブジェクトとは？

　Mathオブジェクトは、数学的な定数と関数を提供するプロパティとメソッドを持つ、組み込みのオブジェクト。
　Mathオブジェクトのメソッドとプロパティの一覧はこちらを参照
　⇨　MDN web docs – Math

Math.PI

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

HTML

<p>円周率は <span id="pi"></span> です。</p>

JavaScript

'use strict';
document.getElementById('pi').textContent = Math.PI;

出力結果

円周率は 3.141592653589793 です。

Math.floor(x)

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

HTML

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

JavaScript

'use strict';
document.getElementById('floor').textContent = Math.floor(Math.PI);

出力結果

少数点以下を切り捨てると 3 です。

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

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

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

HTML

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

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);

出力結果

小数第3位で切り捨てると 3.141 です。

　-引数を使って、関数を呼び出すときに一緒に値を渡す

.text

function position(integer, decimal) {
・・・省略

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

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

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

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

.text

const mover = 10 ** decimal;

　**は、「a ** b」のとき、「aのb乗」を計算する演算子。

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

.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を使って戻り値として返す

Math.random()

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

HTML

<p>生成した乱数は <span id="random"></span> です。</p>

JavaScript

'use strict';
document.getElementById('random').textContent = Math.random();

出力結果

// 0以上1未満の乱数
生成した乱数は 0.14116811964840115 です。

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

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

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

HTML

<p>生成した乱数は <span id="random"></span> です。</p>

JavaScript

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

出力結果

// １以上1０以下の乱数
生成した乱数は ５ です。

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

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

HTML

<p>生成した乱数は <span id="random"></span> です。</p>

JavaScript

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

出力結果

// 5以上1０以下の乱数
生成した乱数は 7 です。

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

過去投稿記事 - [【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)