###はじめに
会社で使っている言語以外にも、何か身につけたい。

仕事では全く違う言語を使っていることもあって、楽しくないと新しい知識が吸収できなくなっている。
作って楽しい気分になるプログラムを考えてみた。

今回登場のメンバーはステゴディアスとインドミナスレックス。
ボタンを押すと、この二匹のどれかが、任意の数だけ表示されるプログラムを作ってみた。

###１．今回のポイント

任意の数だけイメージタグを作りたい。
idはわかりやすいように数字を入れたい。
乱数(ここで表示する画像数を決定する)
インドミナスの画像が沢山表示されたら、攻めの姿勢で、ステゴディアスが表示されたならソースの実行確認などを念入りに行って守りを固めるとよいでしょう

###２．実際のソース

dino_print_random.html

<!DOCTYPE html>
任意の数だけ恐竜を表示<br>
<form name="test">
<input type="button" value="dinosor_print!!" onClick="OnClickmake()"/>
</form>
<div id = "dino"></div>
<body>
<script type="text/javascript">

function OnClickmake(){
	var min=2;
	var max=6;
	//表示する画像の個数
	var num_dino=Math.floor( Math.random() * (max + 1 - min) ) + min;
	//表示する画像の種類
	var type0=Math.floor( Math.random() * (max + 1 - min) ) + min;
	appendImage(num_dino,type0);
}


function appendImage(num1,d_type) {
	if (!document.createElement || !document.getElementById) return;

	alert(num1);
    var str_dino="";
    //１つのイメージタグに設定する内容
    var c_dino="";
    //イメージのid
    var str_id="";
    //４以下ならばステゴディアス
    if(d_type<4){
		img_src="./stedia.jpg";
	//4以上ならインドミナスレックス	
    }else{
    	img_src="./indominas.jpg";
    }
    for(var i=0;i<num1;i++){
    	//イメージのid ダブルコーテーションはエスケープ(\)が必要
    	str_id="\""+"img"+i+"\"";
    	c_dino="<img id="+str_id+ " src = "+img_src+" width=\"360\" height=\"240\"><br><br>";
		str_dino=str_dino+c_dino;
	}
	document.getElementById("dino").innerHTML = str_dino;
	
}
</script>
</body>
</html>

###実行結果

上記の2つの画像にそれぞれstedia.jpg,indominas.jpg
と名前を付けて、ソースと同じフォルダにおいてブラウザで実行すると
下記のような画像が表示されます。