JavaScript勉強会:"undefined in" 2回目、DOM

1. undefinedin.net
2015/5/28 wrote by ironiqu

2. undefined in
本日、勉強したいのは
DOMについてです
軽く解説し、演習します

3. 今日のアジェンダ
1. 前回の復習
2. DOMとはなんですか
3. DOMの操作方法
4. 皆さんにとってのDOMの有用性
5. DOMってみる
6. 皆さんにお願い
90分ほどおつきあいください

4. 前回の復習
前回について何か覚えてる方！

5. 前回の復習
勉強会についての説明
JavaScriptについて軽く解説をしました

6. 前回の復習
しかし、座学ばかりでは理解は進まない
より深く理解するためには？

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

8. 前回の復習
もっともな理由は
体で覚えて実務で
シナプスがつながりやすくなること

9. DOMとはなんですか
DOMの言葉の意味は
前回のスライドを確認してね！

10. DOMとはなんですか
前回は言葉の意味
今回は使い道について解説

11. DOMとはなんですか
HTMLを作った団体が作った仕組み

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

13. DOMとはなんですか
おててをつなぐ
仲良くなるために言葉を理解しよう

14. DOMの操作方法
TagName : HTMLタグのタグ名
ID : HTMLタグのid
ClassName : HTMLタグのclass
Style : HTMLタグの見た目(css)
Attribute : 属性(href, src...)

15. DOMの操作方法
Element : HTMLタグそのもの(単なるタグ)
Node : HTMLタグなど…(節々)
Child : こども
Parent : おや

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

17. DOMの操作方法
とは、言っても
理解するには実行あるのみ
http://www.w3schools.com/jsref/dom_obj_all.asp

18. DOMの操作方法
実行文をみた通り、組み合わせです
childNodes, lastChild, children,
parentNode, cloneNode, getAttribute

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

20. 皆さんにとってのDOMの有用性
先の実行で
それぞれのElementを
参照できることが分かりました

21. 皆さんにとってのDOMの有用性
参照が出来ることで
皆さんはElementを操作することが出来ます
おめでとうございます

22. 皆さんにとってのDOMの有用性
例えば
途中でElementの値を変更
Elementの見た目を変える
Elementに付加価値つける

23. 皆さんにとってのDOMの有用性
Element.innerText = “文字”;
Element.style.background = “#ff0000”;

24. 皆さんにとってのDOMの有用性
では、これらの操作が出来ることによって
どのようなことに有効活用できるでしょうか？

25. 皆さんにとってのDOMの有用性
送信ボタンを連打出来ないようにしたい

26. 皆さんにとってのDOMの有用性
リンクの説明を表示させたい

27. 皆さんにとってのDOMの有用性
動きを付けて注目させたい

28. 皆さんにとってのDOMの有用性
他に有効活用できる場面は？

29. DOMってみる
では、実際に操作してみたいと思います

30. DOMってみる
必要なのは
FirefoxかChrome！
ファイル : DOM_demo.html

31. DOMってみる
WindowsはF12キー
MacintoshはOpt+Cmd+Iキー
で開発ツールを起動する

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

33. DOMってみる
文字の表示を切り替える
ファイル : DOM_change_text.html

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

35. DOMってみる
覚えるよりなれましょう
すべては定型文です

36. DOMってみる
なれてしまえば、ドラマを見ながら
こんな操作の実装も出来ます
ファイル : DOM_ROTATE_BOX.html

37. 皆さんにお願い
この勉強会:”undefined in”は
参加者全員で作っていく会です
you / i

38. 皆さんにお願い
これから出来ることが増えていきます
片手間でいいので
何かを作って発表してほしいです

39. 皆さんにお願い
本当に些細なもので構いません
意味なく仕組みを使っただけなど
例えば…
ファイル : JT

40. 皆さんにお願い
何をしてみたかった
何に注力して作った
など、を解説してもらえればと思います

41. undefined in DOM
参加いただきありがとうございました