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>セミナー演習４(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>セミナー演習４(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>セミナー演習４(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は非標準である）