JavaScript　ユーザー定義オブジェクト　画像をランダム（Math.random）に表示する。（画像の名前が数字の場合）

本日は、JavaScript　ユーザー定義オブジェクト　を使って、画像をランダム（Math.random）に表示させてみたいと思います。※画像の名前が数字の場合

【準備】

ランダムに表示させたい画像を6個用意。
画像の名前を1　2　3　４　５　６　の数字にして保存します。
この時、フォルダ名はimgとします

【考え方】

画像の名前（数字 i ）を、ランダムに抽出し、document.writeでランダムに画像を表示する。

【ポイント】

先に、document.writeから記載し、何を表示させたのかを明確にするとやりやすい。

【例１】更新ボタンをクリックすると、毎回ランダムに画像が表示されます。

f:id:kaoru01-05:20140410052244j:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScript整数化された数値を画像名と一致させて表示する</title>
</head>
<body>
<script>
var i = Math.floor(Math.random()*6 + 1);

document.write('<p><img src="img/' + i + '.jpg"></p>');

</script>
</body>
</html>

※Math.floor：小数以下を切り捨てにして整数にします。

※Math.random：小数点以下の数字も含まれた乱数を計算し、返します。

※<p></p>は無くても今回は大丈夫でした。

※img/ i .jpg 　→　img/＝「フォルダ名/」 .jpg＝「拡張子」です。

※(Math.random()*6 + 1);　→　+1は必要です。+1が無い場合、画像の名前が0からカウントされる為、0画像が見当たらないとエラーが出ます。

【例2】サイコロを振ってみる　というボタンがクリックされると、毎回ランダムに画像が表示されます。

f:id:kaoru01-05:20140410060003p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ボタンをクリックしたときサイコロの目が更新されるように記述しなさい</title><script>
1◆function dice() {
var i = Math.floor(Math.random()*6 + 1);

document.write('<p><img src="img/' + i + '.jpg"></p>');
2◆}
</script>
</head>
<body>
3◆<p><img src="img/1.jpg"></p>
4◆<p><button onclick="dice()">サイコロを振ってみる</button></p>
</body>
</html>

※<script>～</script>が<head><\head>内に移動しています。

※1～4◆の部分が今回新たに追記されました。

※3◆は初期値として表示される画像となり、img/1.jpgでなくともOKです。

上記【例2】のボタンをクリックすると、ボタンが消えてしまうのを消えないようにしたい！document.write（windowオブジェクト）によって画面の上書きが行われ、ボタンが画面から消えてしまう。

f:id:kaoru01-05:20140411043438j:plain

【改善方法】　→　例3へ

【例3】サイコロを振ってみる　というボタンがクリックされると、毎回ランダムに画像が表示される。クリック後も、ボタンは画面から消えない。

f:id:kaoru01-05:20140411045638j:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ボタンをクリックしたときサイコロの目が更新されるように記述しなさい</title>
<script>
function dice() {

var i = Math.floor(Math.random()*6 + 1);

5◆document.dimg.src= 'img/' + i + '.jpg';
}
</script>
</head>
<body>
6◆<p><img src="img/1.jpg" name="dimg"></p>
<p><button onclick="dice()">サイコロを振ってみる</button></p>
</body>
</html>