スライド

Web/JS part.5
ポイント
•DOM の調べ方
•リファレンスの利用
•DOM Interface Tree
課題、おつかれさま
フィードバックは openlab に記載
→同じコードを書いてもらって解説
（講習会が二度おいしい）
この先、どんどん階段が上がって行きます
前回分まで理解してないと
ステータス異常に
（涙目、睡眠、混乱）
キャッチアップするには
•課題を上手に使う（分からない箇所の発見）
•資料を使う（PDF、ムービー、openlab）
•「分からない」と言う
•楽しむ ;-)
今日のお題
「猫スライド」
動作をみてみよう
どう書く？
•addOnLoad 定義
•写真表示用の要素を追加 (canvas)
•対象の要素を集めて
•クリックしたら↓↓↓が発動するようにする
•クリックされた A 要素から IMG 要素を作成 (img)
•表示する（img 要素を canvas の子要素にする）
•以後のクリックイベントをキャンセルする
addOnLoad
:-)
initCanvas
写真表示要素の追加
prepareSlide
写真表示させる関数を
イベントハンドラにセット
display(img)
写真(img)を表示する
preventDefault(evt)
イベントキャンセル
コードで見ていこう
写真表示用の要素を追加
写真表示用の要素を追加
•document.body
写真表示用の要素を追加
•document.body
•Element.setAttribute
document.body
= document.getElementsByTagName( body )[0]
ん∼？ と思ったら確かめる
動いたけど、、
どのブラウザでも動くの？
標準？ベンダ依存？
リファレンス重要
（知識の Authorize、裏付け）
調べ方
•「こんな事したいな∼」
•オブジェクトを調べる
•リファレンスで引く
•それっぽいプロパティを探す
docuemnt.body
↓
CR-DOM-Level-2の
HTMLDocument に載ってる
「面倒」「難しい！」という人は
aptana 大勝利！！
リファレンス組込み済み IDE も
お手軽＆便利
ググるのは早い！
けど、、
信頼出来るの？
どのブラウザでも動くの？
標準？ベンダ依存？
利用、応用
土台、基礎知識
以上。
document.body の話
リファレンスを使おうの話
Element.setAttribute
覚えてる？
要素（Element）
属性（Attribute）
Element
Attribute
Element.setAttribute
= Element の Attribute に値をセット
(getAttribute もある)
ところで、、
Element
Node
HTMLDocument
おまいら、何者？
「DOM Object」です
「どの DOM オブジェクトか」で
プロパティが決まる
継承関係があります
DOM Intreface Tree
JavaScript The Definitive Guide P.310 より
Node
Attr
CharacterData
Text
Element
Comment
Document
HTMLDocument
HTMLElement
HTMLBodyElement
HTMLParagraphElement
HTMLHeadElement
HTMLTitleElement
... etc.
Node ->
•firstChild
•appendChild()
•removeChild()
Element ->
•getAttribute()
•setAttribute()
DOM Object の Type を調べる
リファレンスで調べてみる
http://www.w3.org/TR/DOM-Level-2-Core/core.html
nodeType
nodeName
これでDOM オブジェクトを
操作出来る
（あとは引き出し増やすだけ
書く＆読む）
以上。
setAttribute の話、
DOM Object を調べる話、
リファレンス参照の話、
DOM Interface Tree、
any Question ？
ここまでのまとめ
•DOM を使いこなせるようになろう
•その為に、「調べ方」を覚えよう
•DOM Object の調べ方
•DOM Object のリファレンス
•DOM Interface Tree
今までのまとめ
•DOM Scripting
•Progressive Enhancement
•Graceful Degradation
•Unobtrusive JavaScript
•W3C Core DOM
•DOM Interface Tree
•DOM Object を調べる
•プロパティを調べる（リファレンスを参照する）
•ECMA Script
•変数宣言
•関数オブジェクト
•無名関数
•function call 演算子
•その他
•typeof 演算子、
分からない事は解決しておこう
ありがとうございました。