あーりーです。
趣味でのんびりとJavaScriptの勉強をしています。
今回は、JavaScriptを使って文字をランダムに表示してみようと思います。
それがコチラです。
↓
<html> <head> </head> <body> <script> var a=["朝","昼","夜"]; var x; x=Math.floor(Math.random()*3); document.write(a[x]); </script> </body> </html>
※JavaScriptがメインなので、HTMLの部分はいつものようにあっさり書いています。
緑色の部分がJavaScriptです。
実行すると文字がランダムに表示される
上の内容をメモ帳などのエディタにコピペしてHTML形式で保存します。
保存したファイルを開くと…
「朝」「昼」「夜」のうち、どれか一文字が表示されます。
どれが表示されるかは、わかりません。
ランダムです。
画面をリロード（F5キーなどで更新）すると、またランダムに表示されます。
さっきと同じ文字が表示されるかも知れないし、違う文字が表示されるかも知れません。
解説
では、どんな仕組みでそうなるのか、1行ずつ見ていきますね。
表示したい文字を設定する
まず…
表示したい文字の候補（朝、昼、夜）を設定します。
この行です。
var a=["朝","昼","夜"];
これは配列ですね。
表示したい文字の候補（朝、昼、夜）を、配列「a」に代入しています。
配列について詳しくは、過去記事の「よくわかる「配列」の基本」や「配列を使って数字や文字を表示する」をご覧ください。
ランダムな整数を作る
つぎに…
ランダムな整数を作ります。
この行です。
x=Math.floor(Math.random()*3);
この行では、ランダムな整数を作って「x」に代入しています。
メモ
ランダムな数字を作る方法について、詳しくは過去記事の「JavaScriptでランダムな数字をつくる」をご覧ください。
最小値
ランダムな整数の最小値は「0」になります。
では、最大値は？
最大値
この行をよく見ると、「3」をかけています。
赤い部分です。
↓
x=Math.floor(Math.random()*3);
3をかけた場合、最大値は2になります。
かけた数字より、一つ小さい数字が最大値になります。
だから、この行では「0」から「2」までのランダムな整数が作られることになります。
つまり「0」か「1」か「2」のどれかです。
メモ
最大値が決まる仕組みについて、詳しくは過去記事の「JavaScriptでランダムな数字の最大値を決める仕組み」をご覧ください。
ブラウザに文字を表示させる
最後に…
ブラウザに文字を表示させます。
その役割を果たしているのが、この行です。
document.write(a[x]);
この行の、赤い部分が、文字を表示させる命令です。
document.write(a[x]);
そして、この赤い部分が、表示される文字です。
document.write(a[x]);
a[x]とは…
配列「a」に代入された文字（朝、昼、夜）のうち、左から「x」番目の文字
という意味です。
0番目から数える
ふつう数を数えるときは、1番目、2番目、3番目…と数えますよね。
でも、配列の中身を数えるときは違います。
0番目から始まります。
つまり…
配列に代入された文字（朝、昼、夜）は、
0番目が「朝」
1番目が「昼」
2番目が「夜」
となります。
ランダムな整数に応じて文字が表示される
さっき作ったランダムな整数は、「0」か「1」か「2」でした。
ランダムな整数が「0」であれば、ブラウザには「朝」と表示されます。
ランダムな整数が「1」であれば、ブラウザには「昼」と表示されます。
ランダムな整数が「2」であれば、ブラウザには「夜」と表示されます。
以上が、JavaScriptを使ってランダムに文字を表示する方法でした～。
今回はこれでおしまい。
最後まで読んでくださってありがとうございました。
JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。
