JavaScriptで文字をランダムに表示する方法

シェアする

  • このエントリーをはてなブックマークに追加
  • 0

あーりーです。

趣味でのんびりと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入門」にまとめてあります。よろしければご覧ください。

A8 JavaScript

おまけ

JavaScriptを一人で勉強していてわからないことがあれば、teratailで質問することをおすすめします。

プログラミングに特化したYahoo!知恵袋のようなサイトです。

超・初心者のぼくにも優しく教えてくれました。

とても感謝しています。

関連記事コンテンツ



シェアする

  • このエントリーをはてなブックマークに追加

フォローする

自己紹介

あーりーと申します。アクセスありがとうございます。布団でぬくぬくしながら本を読んだりスマホでテレビを見たり、のんびり過ごすのが好きです。

ブログ村

ブログランキング・にほんブログ村へ