勉強部屋‎ > ‎HTML5‎ > ‎

Javascript(2)

演習4-1 (DOM)

  • ブラウザに”こんにちは.”と表示するスクリプトを作成せよ.ただし,htmlにはbody要素はないものとする.

解答例

ソース

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1" />
  6.     <title>セミナー演習4(1)</title>
  7.     <script type="text/javascript">
  8. "use strict";
  9. var div, bdy, txt;
  10. div = document.createElement("div");
  11. bdy = document.createElement("body");
  12. txt = document.createTextNode("こんにちは.");
  13. div.appendChild(txt);
  14. document.body = bdy;
  15. document.body.appendChild(div);
  16.     </script>
  17. </head>
  18. </html>

解説

  • 10行目 document.createElement("div")
    • 「こんにちは」と表示するdiv要素を生成する.
    • 要素の生成はdocumentオブジェクトのcreateElementメソッドを用いる.
    • documentは組込みのオブジェクト(あらかじめ定義されているオブジェクト).createElementはdocumentオブジェクトの組込みのメソッド(あらかじめ定義されているメソッド).
  • 11行目 document.createElement("body")
    • body要素がないので,document.createElementで生成する.
  • 12行目 document.createTextNode("こんにちは.")
    • 「こんにちは」というテキストノードを生成する.
    • テキストノードの生成はdocumentオブジェクトのcreateTextNodeメソッドを用いる.
  • 13行目 div.appendChild(txt);
    • テキストノードをdiv要素に追加する
    • 追加には追加される要素オブジェクトのappendChildメソッドを用いる.
    • appendChildは全ての要素オブジェクトの組み込みのメソッド.
  • 14行目 document.body = bdy;
    • document.body に生成したbody要素を代入する(生成したbody要素をドキュメントのbodyとする).
    • document.bodyはdocumentの組み込みの属性
  • 15行目 document.body.appendChild(div)
    • appendChildを用いて,生成したdiv要素をbody要素に追加する

演習4-2 (ロードイベント)

  • window.addEventListenerを使って,ページが読み込まれたらブラウザに”こんにちは”と表示するスクリプトを作成せよ.ただし,htmlのbody部は次のようになっているものとする.
    1. <body>
    2.      <div id="hello"></div>
    3. </body>

解答例

ソース

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1" />
  6.     <title>セミナー演習4(2)</title>
  7.     <script type="text/javascript">
  8. "use strict";
  9. window.addEventListener("load", function () {
  10. var div, txt;
  11. div = document.getElementById("hello");
  12. txt = document.createTextNode("こんにちは.");
  13. div.appendChild(txt);
  14. }, false);
  15. /*
  16. function hello() {
  17. var div, txt;
  18. div = document.getElementById("hello");
  19. txt = document.createTextNode("こんにちは.");
  20. div.appendChild(txt);
  21. }
  22. window.addEventListener("load", hello, false);
  23. */
  24.     </script>
  25. </head>
  26. <body>
  27.     <div id="hello"></div>
  28. </body>
  29. </html>

解説

  • 9行目から14行目
    • window.addEventListener("load", <関数>, false) でドキュメントがロードされたときのイベントリスナー(ロードされたときに実行される関数)を追加する.
    • 関数は匿名でもよい.解答例でも匿名関数(関数リテラル)としている.
    • 同じことを関数リテラルを使わないで,16行目から22行目のようにも書ける.
  • 14行目
    • addEventListenerの第3引数はuse captureである.
      • trueにするとキャプチャーフェーズで実行される.
      • falseにするとバブリングフェーズで実行される.
    • イベントは,キャプチャーフェーズ → ターゲットフェーズ → バブリングフェーズの順に伝播する.
    • キャプチャーフェーズでは親から子孫へ,バブリングフェーズでは子から先祖へイベントが伝播する.
      • キャプチャーフェーズ:親 → その子 → ・・・ → その子 (→ ターゲット)
      • ターゲットフェーズ:ターゲット
      • バブリングフェーズ: (ターゲット →) その親 → ・・・ → その親 → Window Proxyオブジェクト(その時点でのグローバルオブジェクトを指すオブジェクト)
        • 参考:http://d.hatena.ne.jp/cou929_la/20110310/1299767973
      • http://www.w3.org/TR/DOM-Level-3-Events/#addEventListener_useCapture
    • 要は,trueにすると,trueにしていないイベントリスナーより先に実行される
  • 11行目
    • テキストを追加するdiv要素を取得する.
    • document.getElementById("hello") でhelloというidを持つ要素(解答例では27行目のdiv要素)を得る.
  • 12行目,13行目
    • createTextNodeでテキストノードを生成し,appendChildでdiv要素に追加する.

演習4-3 (マウスイベント)

  • addEventListenerを使って,数字をクリックすると,そのたびにカウントアップするスクリプトを作成せよ.ただし,htmlのbody部は次のようになっているものとする.
    1. <body>
    2.      <span id="count">0</span>
    3. </body>

解答例

ソース

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1" />
  6.     <title>セミナー演習4(3)</title>
  7.     <style>
  8. span {
  9.             font-size: 200%;
  10.             color: #FFF;
  11.             background-color: #334d55;
  12.             text-align: center;
  13.             padding: 15px;
  14. }
  15.     </style>
  16.     <script type="text/javascript">
  17. "use strict";
  18. var count, counter, ctext;
  19. window.addEventListener("load", function () {
  20. count = 0;
  21. counter = document.getElementById("count");
  22. counter.addEventListener("click", function () {
  23. count += 1;
  24. ctext = document.createTextNode(count);
  25. counter.removeChild(counter.firstChild);
  26. counter.appendChild(ctext);
  27. }, false);
  28. }, false);
  29.     </script>
  30. </head>
  31. <body>
  32. <p>クリックするとカウントアップします.</p>
  33.     <span id="count">0</span>
  34. </body>
  35. </html>

解説

  • 7行目から15行目
    • 表示する数字のスタイル(フォントサイズ,文字の色,背景の色,中央寄せ,パディング)を指定する.
  • 21行目
    • HTMLドキュメントがブラウザに読み込まれた後でないと,countというidを持つspan要素を取得できないので,window.addEventListener("load", <関数>, false)で指定する関数の中で(ロードされたときに実行される関数の中で),document.getElementById("count") によりcountというidを持つspan要素を取得する.
  • 22行目から27行目
    • マウスクリックの度にテキストノードを0 → 1 → 2 → … と書き換えるイベントリスナーをspan要素に追加する.
    • 22行目から27行目の代わりに,31行目で<span onclick="<関数名>">0</span>とすることもできる.この場合は匿名関数ではなく,名前を持った関数を定義する.
    • 24行目から26行目の代わりに,counter.textContent = String(count); とすることもできる.textContentはcounterのテキストを表す属性である.String(count)で,countの値を文字列に変換している.(innerTextという属性でも動作するブラウザもあるがinnerTextは非標準である)