第07回Network講座2019

F4228368799b83159013b995604baa2f?s=47 北海道科学大学　電子計算機研究部
July 16, 2019
Education
0
34

 第07回Network講座2019

F4228368799b83159013b995604baa2f?s=128

北海道科学大学　電子計算機研究部

July 16, 2019
Tweet

More Decks by 北海道科学大学　電子計算機研究部

See All by 北海道科学大学　電子計算機研究部
F4228368799b83159013b995604baa2f?s=48 densan
1
17
F4228368799b83159013b995604baa2f?s=48 densan
0
25
F4228368799b83159013b995604baa2f?s=48 densan
0
10
F4228368799b83159013b995604baa2f?s=48 densan
1
86
F4228368799b83159013b995604baa2f?s=48 densan
0
33
F4228368799b83159013b995604baa2f?s=48 densan
0
34
F4228368799b83159013b995604baa2f?s=48 densan
0
29
F4228368799b83159013b995604baa2f?s=48 densan
0
41
F4228368799b83159013b995604baa2f?s=48 densan
0
20

Other Decks in Education

See All in Education
F5f758ca2ec0de2da9781ce9391d9c6c?s=48 yasushihara
1
240
7bf2baf0d8d5d7d96e6b67c5d567e3f9?s=48 calren
0
420
Bd30ad75c64b891815453df4b060b8e4?s=48 naokikato
0
150
F5662a003a723b5c986607d0b33ef6a6?s=48 chodges
0
110
Fc104451852faeb0a42499180f53a1ff?s=48 tkimura12
0
920
6f28e7e353184f96aa04cfccbf55da0f?s=48 pnuslide
0
130
62fa6ba3263de6f0f49019635e143039?s=48 yoshizaki_kkgk
0
550
696e66ab859446f91081e37e56444730?s=48 event2020
0
120
Fc104451852faeb0a42499180f53a1ff?s=48 tkimura12
0
170
1b16821fb12e372c96ecaa2dac898fec?s=48 ivy_waffle
0
1k
47468cf7d97716c39193ec32506e16ff?s=48 kenwbauer
0
170
90dbb09b0b4f8813b450189422c67a0e?s=48 ravicot
1
130

Featured

See All Featured
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
256
10k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
497
36k
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
51
2.6k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
681
180k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
51
5.9k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
49
3.2k
B47b288784fda77a94aeb234ca743c24?s=48 keavy
101
14k
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
7
550
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1348
190k
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
296
30k
Ecdea9b9714877b86cee08458f085481?s=48 trallard
6
230

Transcript

  1. ネットワークチーム 第７回 2019 北海道科学大学 電子計算機研究部

  2. INDEX ⚫ オブジェクト ⚫ DOM ⚫ HTMLの操作 ⚫ 関数・メソッドの呼び出し 2

  3. オブジェクト

  4. オブジェクトとは JavaScriptのオブジェクトとは 名前（キー）と値のペア の集まり このペアをプロパティという 4 user1 name : ”Gouda”

    age : 19 num : 2173056 user2 name : ”Kanda” age : 19 num : 2173068

  5. オブジェクトの生成 JavaScriptでは オブジェクトを変数に入れることができる。 5 let name = { key1:value1, key2:value2

    }; 構文 let name = new Object(); name.key1 = value1; name.key2 = value2;

  6. オブジェクトへのアクセス オブジェクトの要素へアクセスするためには . （ピリオド）又は [“ ”] を使用する。 6 name.key1 =

    value; 構文 name key1 : *** key2 : *** name key1 : value key2 : *** name[“key1”] = value;

  7. 書いてみよう 7

  8. メソッド オブジェクトは関数を持つことができる。 このとき、オブジェクトの中の関数を メソッドという 8 let name = { method:function()

    { 処理; } }; 構文

  9. 書いてみよう 9

  10. DOM

  11. DOMとは Document Object Model HTMLの要素を、JavaScriptなどのプログラムから 操作するための仕組み HTML文書をツリー状の集合として扱う これをDOMツリーという DOMツリーでは HTMLの各タグや要素をノードと呼ぶ

    11

  12. DOMツリー 12 <html> <body> <h1> <p> 見出し netteam <head> <title>

    DOMツリー Document ノード

  13. HTMLの操作 getElementsBy

  14. getElementsBy – メソッド document（HTMLファイル）から 指定した条件を満たす要素を取得するメソッド 14 構文 用途 .getElementsByClassName(クラス名); 指定したクラスの要素を

    配列で取得 .getElementsByName(name属性値); 指定したname属性値を持つ 要素を配列で取得 .getElementsByTagName(要素名); 指定したタグの要素を 配列で取得 .getElementById(ID名); 指定したID名を持つ要素を 取得（配列ではない）

  15. 書いてみよう 15

  16. 要素へのアクセス 取得した要素にアクセスするには 以下の方法がある 16 構文 用途 .innerHTML 要素にアクセス タグを含む .innerText

    要素にアクセス タグを含まない .textContent .innerTextとほぼ同じ

  17. 書いてみよう 17 P16の続きから 文字が書き換えられた！

  18. 書いてみよう 18 添字を忘れずに

  19. 書いてみよう 19

  20. 要素の追加１ 20

  21. 要素の追加２ 21

  22. 関数・メソッドの呼び出し

  23. ボタンによる呼び出し ボタンに関数を設定することで ボタンが押下されたときに関数を呼び出すことができる 23

  24. 書いてみよう 24

  25. 本日はここまで お疲れ様でした