Image Click

Java Script を使って、クリックで石を取り除きます。

プログラムの説明

  1. Java Script で 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() で確認してみましょう。
    ここまでは Java Script のプログラムで Perl は使っていません。
    <script type="text/javascript">
    function MouseClick(num)
    {
        document.write("クリックされました=", num);
    }
    </script>
    
  3. 次に num をパラメータにして img.cgi を呼び出します。
    MouseClick() 関数を修正して下さい。
    <script type="text/javascript">
    function MouseClick(num)
    {
        str = "img.cgi?val=" + String(num);
        location.href = str;
    }
    </script>
    
  4. img.cgi は Form にボタンを並べる と同じです。
    shift-jis でタイプして、実行権を設定して下さい。
    #!/usr/local/bin/perl
    print "Content-type: text/html\n\n";
    
    $str = $ENV{QUERY_STRING};
    @s = split('&',$str);
    foreach $i(0 .. $#s)
    {
        ($key, $val) = split('=',@s[$i]);
        $para {$key} = $val;
    }
    $n= $para{'val'};
    for($i=0; $i<$n; $i++)
    {   print "<img src=\"img/jewel.gif\">\r\n";
    }
    
  5. Java Script はクライアントサイドで動作して、マウスやキーボードなどの操作を検出します。
    今回はマウスのクリックを検出して石を取り除きます。
    img.cgi が動くか否かは WWW サーバーの問題ですが、Java Script が動くか否かは IE や Netscape など使用する WWW ブラウザに依存します。
    Java Script のプログラムは Java Script を参照して下さい。
    PHP でも同様のプログラム Image Click を作成しています。

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(Perl)