全社向けプログラミング講座

3回目

Webページを動的に動かす

Webページを動的に動かす

→DOMの操作について学びます

アジェンダ

  • DOM
  • イベント
  • タイマー

DOM

Document Object Modelといいます。

HTML文書は、タグ（要素）でツリー状（階層構造）になっています。この各要素を指定して、javascriptから操作することができます。

DOM操作サンプル

id属性がtargetの要素を取得して内容を書き換える

<html>
    <body>
        <div id="target">目標の文字列</div>

        <script type="text/javascript">
             var ele = document.getElementById("target");    

             // div要素の中身（ここでは『目標の文字列』）に文字追加
             ele.innerHTML += "の後ろに追加";
        </script>
    </body>
</html>

DOM操作サンプル

id属性がない要素はタグ名で取得すればよい。

<html>
    <body>
        <div>１つめのdiv要素</div>
        <div>２つめのdiv要素</div>
        <script>
            // div要素すべてを取得
            var ele = document.getElementsByTagName("div");
            // div要素の中身に文字追加
            for (var i = 0; i < ele.length; i++) {
                ele[i].innerHTML += "こんにちは";
            }
        </script>
    </body>
</html>

イベント

イベントを利用してインタラクティブにWebページを

操作します。

イベントの例

　・Webページが読み込まれた直後(onLoad)

　・ボタンがクリックされた時(onClick)

　・リンクや画像の上にマウスが乗った時

      (onMouseOver)

<html>
    <body>
        <div id="target" onClick="countStart();">
	    ここをクリック
	</div>
        <script type="text/javascript">
            var count = 1;
            function countStart() {
                // 『<div id="target">』がクリックされた時に実行
                var ele = document.getElementById("target");
                ele.innerHTML = count + "回クリック";
                count++;
            }
        </script>
    </body>
</html>

イベント

タイマー

タイマーイベントを利用して、一定時間後、または数秒間隔で繰り返し処理を実行することができます。

// タイマー設定
// msec後に１回処理を実行する
var timerId = setTimeout(処理, <msec>);
// タイマー解除
clearTimeout(timerId);
 
// タイマー設定
// msec間隔で処理を実行する
var timerId = setInterval(処理, <msec>);
// タイマー解除
clearInterval(timerId);

タイマー

ボタンを押してから３秒後に「こんにちは」と

表示します。

<html>
    <body>
        <input type="button" value="押して" onclick="exec_timeout();">
        <script type="text/javascript">
            function execute() {
                alert("こんにちは");
            }
            function exec_timeout() {
                setTimeout("execute();", 3000);
            }
        </script>
    </body>
</html>

課題

①htmlのdiv要素に、自分の名前を10個表示してください。

　1秒ごとに表示し、最後に「complete!!」のメッセージを

　表示して終了してください。

<html>
    <head>
    </head>
    <body>
        <div id="output"></div>
    </body>
</html>

<html>
<head>
    <script>
    var timerId;
    function disp{
	var id = document.getElementById("output");
        id.innerHTML += "名前<br>";
	10回を超えたら
	    clearTimeout(timerId);	
	    id.innerHTML += "complete!!";
	それ以外
            timerId = setTimeout("disp()",1000);
    }
    </script>
</head>
<body onload="disp()">
    <div id="output"></div>
</body>
</html>

①htmlのdiv要素に、自分の名前を10個表示してください。

　1秒ごとに表示し、最後に「complete!!」のメッセージを

　表示して終了してください。

<html>
<head>
    <script>
    var name = "名前<br>";
    var message = "complete!!";
    var count = 1;
    var timerId;
    function disp(){
	var id = document.getElementById("output");
        id.innerHTML += name;
	count++;
	if(count > 10){
	    clearTimeout(timerId);	
	    id.innerHTML += message;
	} else {
            timerId = setTimeout("disp()",1000)
        }
    }
    </script>
</head>
<body onload="disp()">
    <div id="output"></div>
</body>
</html>

回答例

まとめ

  • DOM
  • イベント
  • タイマー

１回目

  • Webページ(html)
  • ヘッダ部分に書いて動かす
  • jsファイルを呼び出して動かす
  • 変数
  • 演算子

２回目

  • if文
  • while文
  • for文
  • 関数
  • スコープ(グローバルとローカル)

研修全体まとめ

３回目

  • DOM
  • イベント
  • タイマー
Made with Slides.com