undefinedin.net2015/5/28 wrote by ironiqu

undefined in

本日、勉強したいのはDOMについてです

軽く解説し、演習します

今日のアジェンダ

1.前回の復習2. DOMとはなんですか3. DOMの操作方法4.皆さんにとっての DOMの有用性5. DOMってみる6.皆さんにお願い

90分ほどおつきあいください

前回の復習

前回について何か覚えてる方！

前回の復習

勉強会についての説明JavaScriptについて軽く解説をしました

前回の復習

しかし、座学ばかりでは理解は進まないより深く理解するためには？

前回の復習

実際に動くものを作った方が楽しいし、理解しやすいはず！

前回の復習

もっともな理由は体で覚えて実務で

シナプスがつながりやすくなること

DOMとはなんですか

DOMの言葉の意味は前回のスライドを確認してね！

DOMとはなんですか

前回は言葉の意味今回は使い道について解説

DOMとはなんですか

HTMLを作った団体が作った仕組み

DOMとはなんですか

HTMLと他のシステムがおててをつなぐそんなステキなシステム(実装はベンダーによる )

DOMとはなんですか

おててをつなぐ仲良くなるために言葉を理解しよう

DOMの操作方法

TagName : HTMLタグのタグ名ID : HTMLタグの idClassName : HTMLタグの classStyle : HTMLタグの見た目 (css)Attribute : 属性 (href, src...)

DOMの操作方法

Element : HTMLタグそのもの (単なるタグ )Node : HTML …タグなど (節々 )Child : こどもParent : おや

DOMの操作方法

最低限、これらの言葉さえ知っておけばDOMの操作に困ることはありません

DOMの操作方法

とは、言っても理解するには実行あるのみ

http://www.w3schools.com/jsref/dom_obj_all.asp

DOMの操作方法

実行文をみた通り、組み合わせですchildNodes, lastChild, children,

parentNode, cloneNode, getAttribute

DOMの操作方法

これで、少しは DOMとおててつなぎやすくなったのではないでしょうか

皆さんにとっての DOMの有用性

先の実行でそれぞれの Elementを

参照できることが分かりました

皆さんにとっての DOMの有用性

参照が出来ることで皆さんは Elementを操作することが出来ます

おめでとうございます

皆さんにとっての DOMの有用性

例えば途中で Elementの値を変更Elementの見た目を変えるElementに付加価値つける

皆さんにとっての DOMの有用性

Element.innerText = “ ”文字 ;

Element.style.background = “#ff0000”;

皆さんにとっての DOMの有用性

では、これらの操作が出来ることによってどのようなことに有効活用できるでしょう

か？

皆さんにとっての DOMの有用性

送信ボタンを連打出来ないようにしたい

皆さんにとっての DOMの有用性

リンクの説明を表示させたい

皆さんにとっての DOMの有用性

動きを付けて注目させたい

皆さんにとっての DOMの有用性

他に有効活用できる場面は？

DOMってみる

では、実際に操作してみたいと思います

DOMってみる

必要なのはFirefoxか Chrome！

ファイル : DOM_demo.html

DOMってみる

Windowsは F12キーMacintoshは Opt+Cmd+Iキーで開発ツールを起動する

DOMってみる

送信ボタンの連打を禁止する ファイル : DOM_click_once.html

DOMってみる

文字の表示を切り替える ファイル : DOM_change_text.html

DOMってみる

A地点から B地点へ Elementの移動する ファイル : DOM_move_box.html

DOMってみる

覚えるよりなれましょうすべては定型文です

DOMってみる

なれてしまえば、ドラマを見ながらこんな操作の実装も出来ます

ファイル : DOM_ROTATE_BOX.html

皆さんにお願い

この勉強会 :”undefined in”は参加者全員で作っていく会です

you / i

皆さんにお願い

これから出来ることが増えていきます片手間でいいので

何かを作って発表してほしいです

皆さんにお願い

本当に些細なもので構いません意味なく仕組みを使っただけなど

…例えば

ファイル : JT

皆さんにお願い

何をしてみたかった何に注力して作った

など、を解説してもらえればと思います

undefined in DOM

参加いただきありがとうございました