Image Click

JavaScript でマウスのクリックを検出して、石を取り除きます。

プログラムの説明

  1. JavaScript で onClick=MouseClick(i) を設定して石の画像を並べます。
    石をクリックすると MouseClick() 関数が呼び出されます。
    このページ(img_click.html)は utf-8 でタイプしていますが、shift-jis でも動くはずです。
    <script type="text/javascript">
    for(i=0; i<10; i++)
    {
        document.write("<img src='img/jewel.gif'", "onClick=\"MouseClick(", i, ")\">");
    }
    </script>
    
  2. 石のクリックで呼び出される MouseClick() 関数を <head> の中で定義しています。
    最初のステップとして、パラメータとして渡される num の値を document.write() で確認してみましょう。
    ここまでは JavaScript のプログラムで PHP は使っていません。
    <script type="text/javascript">
    function MouseClick(num)
    {
        document.write("クリックされました=", num);
    }
    </script>
    
  3. 次に num をパラメータにして img.php を呼び出します。
    MouseClick() 関数を修正して下さい。
    "img.php" はこのページと同じディレクトリ上から起動されます。
    従ってサーバーにアップロードされた HTML からテストして下さい。
    <script type="text/javascript">
    function MouseClick(num)
    {
        str = "img.php?val=" + String(num);
        location.href = str;
    }
    </script>
    
  4. img.php は Form にボタンを並べる と同じです。
    shift-jis でタイプして、サーバーにアップロードして下さい。
    <?php
    $n= $_GET['val'];
    for($i=0; $i<$n; $i++)
    {   print "<img src=\"img/jewel.gif\">\r\n";
    }
    ?>
    
  5. JavaScript はクライアントサイドで動作して、マウスやキーボードなどの操作を検出します。
    今回はマウスのクリックを検出して石を取り除きます。
    img.php が動くか否かは WWW サーバーの問題ですが、JavaScript が動くか否かは IE や Netscape など使用する WWW ブラウザに依存します。
    JavaScript のプログラムは JavaScript を参照して下さい。
    Perl でも同様のプログラム Image Click を作成しています。

前田稔の超初心者のプログラム入門
PHP Program