あーりーです。
マイペースでJavaScriptの勉強をしています。
今回は、画像をランダムに表示してみたいと思います。
ページにアクセスするたびに、どの画像が表示されるかわからない（ランダムに決まる）というものです。
こちらです。
↓
<html> <head> </head> <body> <script> var a=[]; a[0]="img1.jpg"; a[1]="img2.jpg"; a[2]="img3.jpg"; var x; x=Math.floor(Math.random()*3); document.write ("<img src='"+a[x]+"'>"); </script> </body> </html>
緑色の部分がJavaScriptです。
※HTMLの部分はさくっとシンプルに書いてます。
画像とファイルの準備
上の内容を実行するには、画像とファイルの準備が必要です。
画像の準備
１．画像を3枚用意します
２．画像のファイル名をそれぞれ、img1.jpg、img2.jpg、img3.jpgとして保存します
ファイルの準備
１．上のスクリプトの内容をコピーします
２．内容をメモ帳などのエディタに貼りつけます
３．画像と同じ場所に、HTML形式で保存します
さ～て。
これで準備が整いました。
あとは、いま保存したHTMLファイルを開くだけです。
実行結果
HTMLファイルをダブルクリックなどで開くと、画像が表示されます。
3枚の画像のうち、どの画像が表示されるかは、ランダムに決まります。
解説
上のスクリプトでやっていることは、こうです。
まず、3枚の画像ファイルの名前をJavaScriptに覚えさせる。
つぎに、ランダムな整数（0か1か2）を作る。
最後に、ランダムな整数に応じて、3枚の画像のうちどれかを表示する。
では…
どんな仕組みなのか、詳しく見てみましょう～。
画像ファイルの名前をJavaScriptに覚えさせる
画像ファイルの名前をJavaScriptに覚えさせているのが、この部分です。
var a=[]; a[0]="img1.jpg"; a[1]="img2.jpg"; a[2]="img3.jpg";
ここでは…
「img1.jpg」という画像ファイルの名前が、a[0]という変数に代入されています。
「img2.jpg」という画像ファイルの名前が、a[1]という変数に代入されています。
「img3.jpg」という画像ファイルの名前が、a[2]という変数に代入されています。
これは配列と呼ばれるものです。
配列について詳しくは、以下の関連記事をご覧ください。
配列の関連記事
ランダムな整数を作る
ランダムな整数を作っているのは、この部分です。
var x; x=Math.floor(Math.random()*3);
もっと詳しく書くと…
この赤い部分でランダムな整数が作られています。
var x; x=Math.floor(Math.random()*3);
この赤い部分によって…
「0」から「2」までのランダムな整数（つまり0か1か2）が作られます。
その仕組みについて、詳しくは「JavaScriptでランダムな数字をつくる」をご覧ください。
作られた整数は、「x」という変数に代入されています。
var x; x=Math.floor(Math.random()*3);
こうして、「x」には「0」か「1」か「2」のいずれかの整数が入ることになります。
作られた整数に応じて画像を表示
「x」に代入された整数に応じて、画像が表示されます。
つまり、こうです。
「x」が「0」だと、「img1.jpg」が表示される。
「x」が「1」だと、「img2.jpg」が表示される。
「x」が「2」だと、「img3.jpg」が表示される。
↑
なぜこうなるのかは、このあと書いていきます。
それが、この部分です。
document.write ("<img src='"+a[x]+"'>");
では、ここをもっと詳しく見てみましょう。
文字を表示する命令
まず…
この赤い部分が、「文字を表示するぞ！」という命令です。
document.write ("<img src='"+a[x]+"'>");
そして、緑色の部分が、表示される文字（この場合、正確には画像を表示するHTMLタグ）を表わしています。
この部分、ちょっとゴチャゴチャしています。
整理してみますね。
画像を表示するHTMLタグ
画像を表示するHTMLタグの基本形は、こうです。
<img src="画像ファイル名">
※HTMLファイルと画像ファイルが同じ場所（フォルダやディレクトリ）にある場合
画像ファイル名は a[x]
今回は、画像ファイル名が a[x] という形で表現されます。
だから、こうなります。
<img src="a[x]">
では、どうしてこれで3種類の画像がランダムに表示されることになるのか。
そもそも a[x] って何？
っていう話ですよね。
a[x] の意味を確認しておきますね。
a[x]の意味
まず「x」に注目します。
「x」とは何だったかというと…
さっき作ったランダムな整数のことでした。
「0」か「1」か「2」のいずれかの整数が、「x」に代入されています。
だから、a[x] とは…
a[0]
a[1]
a[2]
のいずれかになります。
この a[0]、a[1]、a[2]って、すでにこのページの前半で登場しています。
このページの上のほうを見直していただくと…
a[0]には「img1.jpg」という画像ファイル名が代入されています。
a[1]には「img2.jpg」という画像ファイル名が代入されています。
a[2]には「img3.jpg」という画像ファイル名が代入されています。
だから…
<img src="a[x]">
↑
これで、3種類の画像がランダムに表示されることになります。
３つのパートに分けられる
以上のことをふまえて、もう一度この部分を見直してみます。
document.write ("<img src='"+a[x]+"'>");
よく見ると…
カッコ内は、3つのパートが「+」（プラス）によって合体しているのが分かります。
document.write ("<img src='"+a[x]+"'>");
一つ目のパートが、この赤い部分。画像を表示するタグの前半です。
document.write ("<img src='"+a[x]+"'>");
文字として扱うため、ダブルクォートで挟んでいます（前後にダブルクォートがあります）。
2つ目のパートが、この赤い部分。画像ファイルの名前です。
document.write ("<img src='"+a[x]+"'>");
これは変数として扱います。文字としては扱いません。
だから、ダブルクォートで挟んでいません。
ダブルクォートで挟んでしまうと、a[x] という文字そのものが、そのまま表示されてしまって、変数として機能しなくなるので。
3つ目のパートが、この赤い部分。画像を表示するタグの後半（締めの部分）です。
document.write ("<img src='"+a[x]+"'>");
これも文字として扱います。
だから、ダブルクォートで挟んであります（前後にダブルクォートがあります）。
合体
この3つのパートを「+」記号で合体させることで、画像を表示するHTMLタグが完成します。
合体させると、こうなります。
<img src='a[x]'>
こうして、 a[x] というランダムな画像が、画面に表示されることになります。
以上が、JavaScriptで画像をランダムに表示する方法です。
おしまい。
JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。
