###はじめに
会社で使っている言語以外にも、何か身につけたい。
仕事では全く違う言語を使っていることもあって、楽しくないと新しい知識が吸収できなくなっている。
作って楽しい気分になるプログラムを考えてみた。
今回登場のメンバーはステゴディアスとインドミナスレックス。
ボタンを押すと、この二匹のどれかが、任意の数だけ表示されるプログラムを作ってみた。
###１．今回のポイント
- 任意の数だけイメージタグを作りたい。
- 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
と名前を付けて、ソースと同じフォルダにおいてブラウザで実行すると
下記のような画像が表示されます。
