キャンパス見学会 模擬講義(2)

Webプログラミング入門

‐動的なWebページの仕組み‐

高度情報化社会に主体的に参加することができるように、コンピュータやネットワークの基本的な仕組みを知りたい。 その最も効果的な方法は、プログラミングを勉強することである。
Webページにおいて、HTMLとJavaScriptがどのような役割を果たしているのかを理解するために、熊たたきゲームを作成してみよう。
  1. HTMLとは

  2. JavaScriptで、熊をたたくと、Ouch!と言うようにする

    JavaScriptはwebページを動的にする簡単な方法を提供してくれます。 熊の画像をクリックすると、"Ouch!"というダイアログボックスが表示されるようにして見ましょう。
    
    <h2><font color="pink">熊たたきゲーム</font></h2>
    
    <img src="sbuc.gif" onClick="alert('Ouch!')">
    
    
  3. JavaScriptで、熊をたたくと、倒れるようにする

    熊の画像をクリックすると、更に、倒れるようにしてみましょう。 クリックした時の動作が複雑になるので、hit()という名前の関数にまとめることにします。
    
    <h2><font color="pink">熊たたきゲーム</font></h2>
    
    <img src="sbuc.gif" id="bear" onClick="hit()">
    
    
    <script type="text/javascript">
    <!--
    
    var IMG = document.getElementById('bear');
    
    function hit()
    {
        IMG.src = 'SB_down.gif';    
        alert('Ouch!');
    }
    
    //-->
    </script>
    
    
    
  4. JavaScriptで、熊を動くようにする

    熊を動くようにするために、Animate()という関数を定義して、run()という関数で開始するようにします。
    <h2><font color="pink">熊たたきゲーム</font></h2>
    
    <img src="sbuc.gif" id="bear" onClick="hit()">
    
    
    <script type="text/javascript">
    <!--
    var t = 0;
    var IMG = document.getElementById('bear');
    var myTimer = run();
    
    
    function Animate(){
        IMG.style.position = 'absolute';
        IMG.style.left = Math.sin( t * 0.1 ) * 350 + 350 + "px";
        IMG.style.top = Math.cos( t * 0.5 ) * 20 + 150 + "px";
        t++;
    }
    
    function run()
    {
        var myTimer = setInterval('Animate()', 80 );
        return myTimer;
    }
    
    
    function hit()
    {
        IMG.src = 'SB_down.gif';    
        alert('Ouch!');
    }
    
    //-->
    </script>
    
    
  5. JavaScriptで、倒れた熊を止める

    このままでは、熊がクリックされても、動き続けて変です。アニメーションを止めるには、JavaScriptのclearIntervalという関数を使います。
    <h2><font color="pink">熊たたきゲーム</font></h2>
    
    <img src="sbuc.gif" id="bear" onClick="hit()">
    
    
    <script type="text/javascript">
    <!--
    var t = 0;
    var IMG = document.getElementById('bear');
    var myTimer = run();
    
    
    function Animate(){
        IMG.style.position = 'absolute';
        IMG.style.left = Math.sin( t * 0.1 ) * 350 + 350 + "px";
        IMG.style.top = Math.cos( t * 0.5 ) * 20 + 150 + "px";
        t++;
    }
    
    
    function run()
    {
        var myTimer = setInterval('Animate()', 80 );
        return myTimer;
    }
    
    
    function hit()
    {
        IMG.src = 'SB_down.gif';    
        clearInterval(myTimer);
        alert('Ouch!');
    }
    
    //-->
    </script>
    
    
  6. 問題:熊の動く速さを変えるにはどうすれば良いでしょうか?

    
    


Last update: 2008-06-28