JavaScriptで画像をランダムに表示する方法

JavaScript

あーりーです。

マイペースで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の部分はさくっとシンプルに書いてます。

画像とファイルの準備

上の内容を実行するには、画像とファイルの準備が必要です。

画像の準備

1.画像を3枚用意します

2.画像のファイル名をそれぞれ、img1.jpgimg2.jpgimg3.jpgとして保存します

ファイルの準備

1.上のスクリプトの内容をコピーします

2.内容をメモ帳などのエディタに貼りつけます

3.画像と同じ場所に、HTML形式で保存します

 

さ~て。

これで準備が整いました。

あとは、いま保存したHTMLファイルを開くだけです。

実行結果

HTMLファイルをダブルクリックなどで開くと、画像が表示されます。

3枚の画像のうち、どの画像が表示されるかは、ランダムに決まります。

解説

上のスクリプトでやっていることは、こうです。

 

まず、3枚の画像ファイルの名前をJavaScriptに覚えさせる。

つぎに、ランダムな整数(012)を作る。

最後に、ランダムな整数に応じて、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」までのランダムな整数(つまり012)が作られます。

その仕組みについて、詳しくは「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種類の画像がランダムに表示されることになります。

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

タイトルとURLをコピーしました