• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
DOM Scripting ことはじめ
 

DOM Scripting ことはじめ

on

  • 3,697 views

 

Statistics

Views

Total Views
3,697
Views on SlideShare
3,660
Embed Views
37

Actions

Likes
5
Downloads
11
Comments
0

5 Embeds 37

http://mononofu.hatenablog.com 20
http://d.hatena.ne.jp 10
http://www.slideshare.net 3
http://us-w1.rockmelt.com 3
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    DOM Scripting ことはじめ DOM Scripting ことはじめ Presentation Transcript

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