Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript&Firebug入門

2,788 views

Published on

一六社で行われた第6回の勉強会の資料です

Published in: Technology
  • Be the first to comment

JavaScript&Firebug入門

  1. 1. 第 6 回 SE 勉強会  2008/5/11 (日)
  2. 2. JavaScript & Firebug 入門
  3. 3. DOM って聞いたことあるよね?
  4. 4. DOM って何?
  5. 5. DOM = Document Object Model
  6. 6. 意味は?
  7. 7. Web ページの内容 ( 文章、画像、音声など ) およびそれらの配置、スタイルを オブジェクトとして扱い、 スクリプト言語を使って制御するための 取り決め。 引用 :  IT 用語辞典 
  8. 8. もう少し簡単に言うと、
  9. 9. HTML を JavaScript から 操作する為の取り決め。
  10. 10. 徐々に掘り下げていきます
  11. 11. sample.html <html> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;> <title> サンプルページ </title> </head> <body> <h1> はじめまして </h1> <p id=“profile”> 私の名前は○○です。 </p> </body> </html>
  12. 12. HTML はそのままだとタグの列挙に 見えるけど、
  13. 13. 目を凝らすと・・・・
  14. 14. sample.html html head meta title サンプルページ body h1 はじめまして p 私の名前は○○です。
  15. 15. ツリー状になってますね
  16. 16. このツリーは『ノード』というもので 構成されています
  17. 17. 『ノード』は幾つか種類があって、
  18. 18.     ・要素ノード     ・テキストノード     ・属性ノード                 など
  19. 19. 先ほどの例だと、
  20. 20. ・『 <p> 』が要素ノード ・『私の~です。』がテキストノード ・『 id=“profile” 』が属性ノード <p id=“profile”> 私の名前は○○です。 </p>
  21. 21. 続いて、 HTML の取得方法
  22. 22. getElementById というメソッドで取得できる
  23. 23. getElementById の 使い方 <p id=&quot;profile&quot;> 私の名前は○○です。 </p> <script type=&quot;text/javascript&quot;> var profile = document.getElementById('profile'); </script> 「 profile 」という id を指定した要素を 取得できる
  24. 24. これを Firebug で見てみると・・・ (ブラウザ上で確認します)
  25. 25. getElementsByTagName というメソッドでも取得できる
  26. 26. メソッド名からなんとなく推測すると、
  27. 27. タグ名で指定して要素を取得できそう
  28. 28. getElementsByTagName の 使い方 <p> 私の名前は○○です。 </p> <p> 出身は○○です。 </p> <script type=&quot;text/javascript&quot;> var profile = document.getElementsByTagName('p'); </script> 「 p 」タグの要素を取得できる
  29. 29. 「 P 」タグが 2 つあるけど、どうなるの?
  30. 30. 2 つとも取得できます
  31. 31. 複数取得できるから、 Element s なんだね
  32. 32. これを Firebug で見てみると・・・ (ブラウザ上で確認します)
  33. 33. 終わり

×