ヒストグラム

次の----から---までをメモ帳で作成し,"\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>

-------------------------------------------------------------------


戻る