11 アクセスするたびに異なる画像を表示

ページにアクセスするたびに違う画像が出るよう設定してください。

ファイル名は js11.html  としてください。

サンプル

 ： 省略

1: <SCRIPT language="JavaScript">
2: <!--
3:
4: img = new Array();
5:
6: img[0] = "img0.jpg";
7: img[1] = "img1.jpg";
8: img[2] = "img2.jpg";
9: img[3] = "img3.jpg";
10: img[4] = "img4.jpg";
11:
12: n = Math.floor(Math.random()*img.length);
13:
14: document.write('<img src="' + img[n] + '">' );
15:
16: //-->
17: </SCRIPT>

  ： 省略

このサンプルでは以下の画像を使用しています。
各自ダウンロードするなどして活用してください。
（別の画像を使っても構いません。）

img0.jpg

img1.jpg

img2.jpg

img3.jpg

img4.jpg

 

解説

4行目：
img = new Array();
new Array() は、配列宣言です。
配列 とは、ひとつの変数の中に、複数の値をまとめて入れておくことができるものです。

6行目：
続いて img[0]= ... で、表示したい画像ファイルの名前を、配列 img に代入しています。

変数右隣の括弧 [ ] は、配列宣言された変数のどの「行」に値を入れておくかを表す記号です。
数を数えていく場合、私たちは通常 １ から始めますが、配列は ０ から数えていきます。
よって配列の最初の行に値を代入したい場合は、  img[0]="img0.jpg"; のようになります。

12行目：
n = Math.floor(Math.random()*img.length);
img.length は 配列の長さを表しています。
このサンプルでは、 img 配列に 5つの画像を代入したので、配列の長さは 5 です。

Math.random() は実行するたびに異なる数値が帰ってくるメソッドです。
Math.random() は 0 以上 1 未満の 小数点で値を返します。
これに配列の長さ img.length を掛け算し、Math.floor() で小数点以下を切り捨てることで、
このサンプルでは 0 〜 4 のランダムな値を手に入れています。

14行目：
12行目で手に入れた 0〜4 のランダムな値を使って、
img[0] 〜 img[4] のどれかを画像として表示しています。

実行例

実行例

参考

もし、画像をさらに追加したい場合は、
img[5], img[6], img[7]... というように、配列の数字を１ずつ増やして画像のファイル名を代入していってください。