DOM Scripting ことはじめ

2,852 views

Published on

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

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

No notes for slide

DOM Scripting ことはじめ

  1. 1. DOM Scripting  ことはじめ 光宗
  2. 2. 自己紹介 <ul><li>photohito メイン開発者(1人) </li></ul><ul><li>最近は JavaScript++ </li></ul><ul><li>Xbox360 大好き </li></ul><ul><ul><li>ゲーマータグは Kiske3 </li></ul></ul><ul><li>ラーメン大好き </li></ul><ul><ul><li>ラーメン部つくりませんか? </li></ul></ul>
  3. 4. <ul><li>では本題 </li></ul>
  4. 5. DOM Scripting <ul><li>The term DOM Scripting refers to </li></ul><ul><li>programmatically accessing the </li></ul><ul><li>Document Object Model (DOM). </li></ul><ul><li>http://en.wikipedia.org/wiki/DOM_scripting </li></ul>
  5. 8. W3C による DOM の定義 <ul><li>プログラムとスクリプトによるドキュメントの </li></ul><ul><li>コンテンツと構造とスタイルへの、動的な </li></ul><ul><li>アクセスと更新を可能にする、プラットフォーム </li></ul><ul><li>および言語的に中立なインターフェース </li></ul>
  6. 9. 昔 <ul><li>IE vs NN </li></ul><ul><li>動的ページが DHTML と呼ばれていた時代 </li></ul><ul><li>HTML+CSS+JS を密に連携 </li></ul><ul><li>ブラウザによる独自拡張のため差異が大きい </li></ul>
  7. 10. 今 <ul><li>W3C (World Wide Web Consortium) による勧告 </li></ul><ul><li>API であるので JS 以外でも実装されてる </li></ul><ul><li>標準化されているのでブラウザ間で同じ実装をすれば動く </li></ul>
  8. 11. Web 標準 <ul><li>標準化の方向 </li></ul><ul><ul><li>ECMAScript </li></ul></ul><ul><ul><li>DOM </li></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><li>Tamarin </li></ul><ul><ul><li>Adobe から Mozilla に提供された AVM2 </li></ul></ul><ul><ul><li>ECMAScript4 準拠 </li></ul></ul><ul><ul><li>Firefox4 に搭載予定 </li></ul></ul>
  9. 12. <ul><li>脱線してきたので話を DOM に戻します </li></ul>
  10. 13. JavaScript (X)HTML XML DOM Scripting
  11. 14. <ul><li>DOM の基本 </li></ul>
  12. 15. ツリーオブジェクト <ul><li>HTML 文書をツリー状オブジェクトにマッピング </li></ul>
  13. 16. ノード <ul><li>ツリーの各要素をノードと呼ぶ。よく使うノードは </li></ul><ul><li>3種類。 </li></ul><ul><li><p title=&quot; お知らせ &quot;> 本日は第7回社内勉強会に集まっていただきあ </li></ul><ul><li>りがとうございます </p> </li></ul>要素ノード p お知らせ 本日は第7回社内勉強会に集まっていただきありがとうございます。 属性ノード テキストノード
  14. 17. メソッド <ul><li>オブジェクト上のノードを編集したり、新規に追 </li></ul><ul><li>加したりする </li></ul><ul><li>getElementById </li></ul><ul><li>getElementsByTagName </li></ul><ul><li>getAttribute / setAttribute </li></ul><ul><li>createElement </li></ul><ul><li>createTextNode </li></ul><ul><li>appendChild </li></ul>
  15. 18. <ul><li>以上、基本終わり </li></ul>
  16. 19. 3 つの原則 <ul><li>Progressive Enhancement </li></ul><ul><li>Graceful Degradation </li></ul><ul><li>Unobtrusive JavaScript </li></ul>
  17. 20. Progressive Enhancement <ul><li>段階的強化 </li></ul><ul><li>JavaScript </li></ul><ul><li>CSS </li></ul><ul><li>(X)HTML </li></ul>Structure に付加的な情報レイヤーを適用
  18. 21. Graceful Degradation <ul><li>表示機能的に劣る(もしくは意図的に JS OFF に </li></ul><ul><li>している)ブラウザでも、できるだけそれに合わ </li></ul><ul><li>せた形でアクセシビリティを保つこと </li></ul><ul><li>例えば </li></ul><ul><ul><li>Wii / PS3 / PSP / DS といったゲーム機付属のブラウザ </li></ul></ul><ul><ul><li>docomo / au / SBM / スマートフォンなどの携帯ブラウザ </li></ul></ul>
  19. 22. Unobtrusive JavaScript <ul><li>HTML(Strucuture) の中に JavaScript </li></ul><ul><li>(Behavior) を記述しないスタイル </li></ul><ul><li>onclick 、 onmouseover とかをマークアップ内 </li></ul><ul><li>に書いていいのは小学生までだよねー </li></ul><ul><li>イベントハンドラは HTML から分離しましょう </li></ul>
  20. 23. 3原則の目的 <ul><li>「 OFF 環境に優しく」 </li></ul>
  21. 24. 例 1 <ul><li>JavaScript 擬似プロトコル </li></ul><ul><li><a href=&quot;javascript:popUp('http://photohito.com');&quot;> </li></ul><ul><li>photohito.com</a> </li></ul>
  22. 25. 例2 <ul><li>インラインイベントハンドラ </li></ul><ul><li><a href=&quot;#&quot; onclick=&quot;popUp('http://photohito.com'); </li></ul><ul><li>return false;&quot;>photohito.com</a> </li></ul>
  23. 26. 例 3 <ul><li>まぁまぁ良い例 </li></ul><ul><li><a href=&quot; http://photohito.com &quot; onclick=&quot;popUp(this.href); </li></ul><ul><li>return false;&quot;>photohito.com</a> </li></ul>
  24. 27. 例 4 <ul><li>良い例 </li></ul><ul><li><a href= http://photohito.com &quot; id=&quot;photohito&quot;> </li></ul><ul><li>photohito.com</a> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>window.onload = function() { </li></ul><ul><li>var anchor = document.getElementById(&quot;photohito&quot;); </li></ul><ul><li>anchor.onclick = function() { </li></ul><ul><li>popUp(&quot; http://photohito.com &quot;); </li></ul><ul><li>return false; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul>
  25. 28. まとめ <ul><li>DOM Scripting について解説 </li></ul><ul><li>3原則 </li></ul><ul><ul><li>Progressive Enhancement </li></ul></ul><ul><ul><li>Graceful Degradation </li></ul></ul><ul><ul><li>Unobtrusive JavaScript </li></ul></ul>
  26. 29. 今後の題材リスト <ul><li>JavaScript </li></ul><ul><li>Adobe AIR </li></ul><ul><li>git </li></ul><ul><li>Objective-C </li></ul><ul><li>SQL </li></ul><ul><li>symfony1.1 </li></ul>

×