JavascriptのMath.random/floorを使っておみくじアプリを作ります！
ドットインストールのおみくじを作ろうを教科書に最終的には少し変化を加えながら作ってみようと思います。
ドットインストールでは大吉、中吉などの運勢ですが、私はちょっと色や形、内容を変更して
こんな感じで星座占いにしてみました。（配色とっても変w）
「今日のラッキーな星座は？」のボタンをクリックすると
ランダムに選ばれた星座が表示されるというものを作ってみました。
やることの流れとしては
- それぞれのボタンを作る
- 星座の配列を作る
- 乱数を作る
- ボタンを押したらランダムに星座が選ばれるように作る
という感じです。配色はまた変更します！
形や色は今置いておいて、bodyの今日は1~４の流れを解明していきます！
- それぞれのボタンを作る
まずピンクの結果を表示するものを<div id="result">?</div>でdivタグで囲みます
これが
この箱を生成します（中身は後ほど）
そしてボタンを作ります。<div id="btn">今日のラッキーな星座は？</div>
これは
これ（中身は後ほど）
このbtnをポチッと押したらピンクの？マークが星座を表示させるようにscriptタグの中にコードを書いていきます！
2.星座の配列を作る
変数resultsに配列を入れます。↓今回は星座なのですが全部だと多くなるということで１２個ないですw
var results=['牡羊座','牡牛座','双子座','山羊座','乙女座','水瓶','天秤座','蟹座'];
で、resultsに８種類の星座が入りました。
3.乱数を作る
変数resultに乱数をresultsの数のうちからランダムに取り出すメソッドを書きます。
var result= Math.floor(Math.random() * results.length);
＊乱数を作るランダムメソッド＊
■Math.random()
Math.random()は、0〜0.9999...(1未満)の間から、1つの数値をランダムで返すメソッドです。0を含んで、1は含みません。
■Math.floor()
Math.floor()は、小数点以下を切り捨てるメソッドです。結果を整数で求めたい場合に利用しましょう。引数が0.999なら0、3.21なら3という数値を返します。
・例えば0から１０の乱数を発生させるとしたら
var results=Math.floor(Math.random()*11);←最大値より1つだけ多い数を指定
配列からランダムで要素を選ぶのは、「最大値だけ指定する方法」の最大値の部分に配列の要素数（results.length)をあてはめれば実現できます。
4.ボタンを押したらランダムに星座が選ばれるように作る
(function(){
"use strict";
document.getElementById('btn').addEventListener('click',function(){
//変数btnをクリックすると
var results=['牡羊座','牡牛座','双子座','山羊座','乙女座','水瓶','天秤座','蟹座'];
var result= Math.floor(Math.random() * results.length);
document.getElementById('result').innerHTML= results[result];
//配列results内の選ばれたresult(星座）が表示される
ちなみに’use strict'はstrictモード（厳格モード）といって宣言するとエラーチェックを行ってくれます。コード内に存在する潜在的な問題を発見しやすくなります。また、JavaScriptエンジンによる最適化処理を困難にする誤りを修正するため、strictモードのコードは非strictモードのコードよりも高速に実行することができる場合があるなどのメリットがあります。
以上でボタンをクリックした時に結果が表示されるようになります。
色やマウスオーバーなどについては長くなりますのでまた次回♪
