遊べるJavaScript入門ロゴ

「ランダム」な数字を使う場面にはrandom()

たとえば、コインを投げて「裏か表か」を決めたり、サイコロをふってその目を出したいときや「偶然」な結果を求める場合には、ランダム関数Math.random() をつかって、0から1の乱数を作って、その小数点以下を切り捨て処理して整数にする方法が一般的です。

その基本的なやり方を見るために、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.randomがありますが、こちらのページ(→こちら)にあるように、切り上げや四捨五入で小数以下の処理をすると、1~6ではなく、切り上げられて7の目がでてしまうので、このHPでは Math.floor をつかって、小数以下を切り捨てるようにしています。


記事の目次へ



(来歴)R6.4作成  
PR

AmazonのJavascript本 送料無料


楽天ブックスは品揃え200万点以上!



記事の目次へ

電子工作の記事の目次へ