はてなブログで始める！JavaScript超入門！第三回
どうも！LSSです！！
適当に間をあけながらの「はてなブログで始める！JavaScript超入門！」、今回は第三回となります。
このシリーズは「はてなブログの記事編集画面を使って、プログラムを全くやった事がない人でもプログラミングに触れてみよう」というニッチな趣旨でお送りしておりますｗ
なお、前回までは、
第一章 Hello World
第二章 変数を使ってみよう！
第三章 計算ぐらいしておこうか
第四章 ifによる分岐
第五章 ifのもうひとつのしきたり
という内容でお送りしました。
第六章 乱数で遊んでみよう！
この流れでいくと、次はループか配列変数か、と迷いましたが、
面白さ優先で「乱数」を先にいってみましょう^^
コード
<div id="hello"></div>
<script>
hello.innerHTML=Math.random();
</script>
↑前回まで同様に、はてなブログの記事編集画面に、このように打ち込んでみてください。
↑こんな感じですね。
そして「プレビュー」をみてみましょう。
↑わけのわからない小数が表示されました。
小数の内容は↑の画面写真とは違うものが出てくると思います。
更に、一度「HTML編集画面」に戻って、再度「プレビュー」を表示すると、また違う数字が出てきます。
Math.random() という関数について
上記コードでhello.innerHTMLにぶち込んだMath.random()という謎多きモノ。
これは、JavaScriptでの「乱数」を生成する関数です。
この関数を呼び出すと「0以上１未満」のでたらめな小数が取り出せて、呼び出すたびに違うモノが出てくる、という面白い性質を持っています。
例えていうと、すごろくで使う「サイコロ」や、カジノの「ルーレット」のようなもので、「運を天に任せる」時に使います。
ゲームを作る時なんかにはほぼ必須となるこのMath.random()、前回のifと組み合わせて、こんなコードを書いてみます。
コード
<div id="hello"></div>
<script>
if(Math.random()<0.5){
hello.innerHTML="小さめ";
}else{
hello.innerHTML="大きめ";
}
</script>
画面でいうと、
こんな感じですね。
そして「プレビュー」で見てみると…
↑こんな風になります。
２分の１の確率で「小さめ」か「大きめ」かのどちらかが出てくるので、この記事を見て試していただいた方の半分は「小さめ」、もう半分の方は「大きめ」という文字を見る事になります。
サイコロを作ってみよう！
まず「サイコロってなんだっけ？」というところから考えます。
「１，２，３，４，５，６」の６種類の目があり、そのうちのどれかが均等な確率で出るもの
ですね。
Math.random()は「0以上1未満」の数なので、 このままでは少々扱いづらいため、ちょっと工夫を加えます。
コード
<div id="hello"></div>
<script>
hello.innerHTML=1+Math.floor(Math.random()*6);
</script>
↑のコードを入力して、また「プレビュー」で確認してみます。
↑こんな感じに数字が１つ、出てきます。
この数字は「１~６のうちどれか」で、どれが出てくるかは「プレビュー」を開くたびに変わります（同じものが続く事もあります）。
ちと解説します。
1+Math.floor(Math.random()*6)
というモノを、innerHTMLで書き出しています。
Math.floor…とかいうまたよくわからんモノが出てきていますが、これは「小数点以下を切り捨て」する関数です。
※厳密にいうと「正の数の場合は小数点以下切り捨て」です。
例えば、
Math.floor(1.5)
とか書いた場合には「1」になります。
その( )の内容、
Math.random()*6
ですが、Math.random()＝0以上1未満のランダムな小数、なので、それに6を掛ける事で、
0.00…001 ~ 5.99…99
の範囲の数値、という事になります。
それをMath.floorの ( ) の中に入れる事で、「0,1,2,3,4,5」のどれか、が取り出せるんですね。
ポイント：Math.random()は1になる事はないので、*6して6になる事は有り得ません。
取り出したい数は「1,2,3,4,5,6のどれか」なので、1+をつけてやる事で、サイコロと同じく「1,2,3,4,5,6のどれか」がランダムで出てくるプログラムの完成です^^
乱数を変数にぶち込んでみよう！
コード
<div id="hello"></div>
<script>
a=1+Math.floor(Math.random()*6);
b=1+Math.floor(Math.random()*6);
hello.innerHTML=a+" "+b;
</script>
乱数は変数にぶち込む事もできます。
…というより、大抵の場合は変数に入れて使用する事になると思います。
さて、上記コードをHTML編集画面に入力し、
そして「プレビュー」を開きます。
サイコロが２つになりましたね^^
これで、いつでも丁半賭博ができます！！
※この記事は賭博を推奨するものではありません←一応、書いとくｗ
てなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
