次の----から---までをメモ帳で作成し,"\rensyu\ex02.html"として保存する。
点数を入力するごとに[点数入力]ボタンをクリックする。最後まで点数を入れたら,[ヒストグラム表示]ボタンをクリックするとグラフが表示される。やり直すときは,ブラウザの[更新]ボタンをクリックした後,[ヒストグラム表示]ボタンをクリックするとグラフがクリアされる。
-------------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;CHARSET=shift_jis">
<title>ヒストグラム</title>
<script language="JavaScript">
function input(){
h=Math.floor(document.HistForm.data.value/10);
if (h==10)
hist[9]++;
else
hist[h]++;
document.HistForm.data.value="";
}
function disp(){
for (i=0; i<10; i++){
document.HistForm.txt[i].value="";
for (j=1; j<=hist[i]; j++){
document.HistForm.txt[i].value=document.HistForm.txt[i].value+"*";
}
}
}
</script>
</head>
<body>
<h1>ヒストグラム</h1>
<script language="JavaScript">
var i;
var range=new Array("00- 09\t", "10- 19\t", "20- 29\t", "30- 39\t", "40- 49\t",
"50- 59\t", "60- 69\t", "70- 79\t", "80- 89\t", "90-100");
var hist=new Array(0,0,0,0,0,0,0,0,0,0);
document.write("<form name='HistForm'>");
document.write("<input type='text' name='data' size=6>");
document.write("<input type='button' value='点数入力' onClick='input()'><br>");
for (i=0; i<10; i++){
document.write(range[i], ": <input type='text' name='txt' size=80><br>");
}
document.write("<input type='button' value='ヒストグラム表示' onClick='disp()'><br>");
document.write("</form>");
</script>
<hr>
<A HREF="javascript:history.go(-1)">直前のページへ戻る</A>
</body>
</html>
-------------------------------------------------------------------