JavaScript&Firebug入門

2,654 views
2,578 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,654
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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. 終わり

    ×