「ランダム」な数字を使う場面にはrandom()
たとえば、コインを投げて「裏か表か」を決めたり、サイコロをふってその目を出したいときや「偶然」な結果を求める場合には、ランダム関数Math.random() をつかって、0から1の乱数を作って、その小数点以下を切り捨て処理して整数にする方法が一般的です。
その基本的なやり方を見るために、1つのサイコロをふる方法を見てみますが、ここで紹介しているのも、一つのやり方として見ていってください。
サイコロを振って目を出しましょう
ボタンを押すとふったサイコロの目が表示されます
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
Javascript部分
＊＊＊＊ここからHTMLの部分
<p>ボタンを押すとふったサイコロの目が表示されます</p><p><button id="myKoro">サイコロを振る！</button></p>
<!-- 最初にサイコロの画像「1」を表示しておきます -->
<p><img id="myHajime" src="img/sai1.gif"></p>
<div id="myKekka">ここにサイコロの目の数が表示されます<br> </div>
<br>
<br>
＊＊＊＊＊＊＊ ここから Javascript の部分
<script>let mySai;
document.getElementById('myKoro').addEventListener('click', myHuru);
function myHuru() {
mySai = Math.floor(Math.random() * 6 + 1); //floorで切り捨て処理
let myMe = mySai;
document.getElementById('myHajime').setAttribute('src', 'img/sai' + mySai + '.gif');
document.getElementById('myKekka').textContent ='サイコロの目は 「 ' + myMe +' 」です。';
}
</script>
考え方と注意点
ボタンをクリックすると何かの動作をさせるイベントハンドラは、これまでもよく使っていますから、ここでは、ちょっと違った、HTML部分とJavascript部分を分けて記述するための「イベントリスナー」を使っています。
一般的には、少し大きなサイトになるとJavascriptを別のファイルにして呼び出す方法が多いので、イベントリスナーで関数などを呼び出すときに便利です。
先に、イベントハンドラで「onclick」「onmouseover」などを使いましたが、「on」を取った「click」「mouseover」がイベントリスナーで、（ ）内の書き方を間違わないように注意しましょう。
.addEventListener('イベント', 関数)で、「’ ’」のあるなしに注意します。関数には’’をつけないように。
HTML部分
まずHTMLで「ボタン」を作り、「ID」を設定します。……①
つぎに、サイコロの目が「1」の画像を用意して、そこにも「ID」設定します。……②
さらに、目を表示するための文章を書き、そこにも別の「ID」を設定します。……③
これら①②③はHTMLとして書いており、そのIDをJavascriptで処理するという形です。
Javascript部分
Javascriptのメソッドでは、まず、ボタンを押す動作のために.addEventListener()を使います。
先にも書いていますが、通常はイベントハンドラで「onclick」などをHTML部分に書けばいいのですが、ここではイベントハンドラを使って、HTML部分とJavascript部分を完全に分けるということをやっています。
そこでJavascriptでは、.getElementById（）でHTMLの「ID」要素を取得して、それらをメソッドを使って書き換える…… ということをしています。
Javascript部分のメソッドでは、関数を呼び出すためのイベントリスナーの.addEventListener()、ID部分の内容を取得する.getElementById（）、属性と値を追加する.setAttribute()、文字を表示する.textContent を使っています。
サイコロの目
ここでは一般的な Math.random() と Math.floor() を使って、1から6の目を決めています。
手順は、Math.random()で得た0～1の小数を含む乱数に6をかけて、0以上6未満の数字にして、それに1を加えて1以上7未満の数字にして、さらに小数部分を切り捨てて1から6にする方法です。
小数点の処理は、切り上げMath.ceil、切り捨てMath.floor、四捨五入Math.round がありますが、こちらのページ（→こちら）にあるように、切り上げや四捨五入で小数以下の処理をすると、1～6ではなく、切り上げられて7の目がでてしまうので、このHPでは Math.floor をつかって、小数以下を切り捨てるようにしています。
