第07回Web講座2018

Transcript

1. ネットワークチーム 第７回 北海道科学大学 電子計算機研究部
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. 第一回 演習２（再掲） document.getElementsByTagName(‘h1’)[0].innerHTML = (“NetTeam”); ↲Enter 12 JavaScript で HTML の内容を 操作（書き換え） している
13. DOMツリー 13 <html> <body> <h1> <p> 見出し netteam <head> <title> DOMツリー Document ノード
14. HTMLの操作 getElementsBy
15. getElementsBy – メソッド document（HTMLファイル）から 指定した条件を満たす要素を取得するメソッド 15 構文 用途 .getElementsByClassName(クラス名); 指定したクラスの要素を 配列で取得 .getElementsByName(name属性値); 指定したname属性値を持つ 要素を配列で取得 .getElementsByTagName(要素名); 指定したタグの要素を 配列で取得 .getElementById(ID名); 指定したID名を持つ要素を 取得（配列ではない）
16. 書いてみよう 16
17. 要素へのアクセス 取得した要素にアクセスするには 以下の方法がある 17 構文 用途 .innerHTML 要素にアクセス タグを含む .innerText 要素にアクセス タグを含まない .textContent .innerTextとほぼ同じ
18. 書いてみよう 18 P16の続きから 文字が書き換えられた！
19. 書いてみよう 19 添字を忘れずに
20. 書いてみよう 20
21. 要素の追加１ 21
22. 要素の追加２ 22
23. 関数・メソッドの呼び出し
24. ボタンによる呼び出し ボタンに関数を設定することで ボタンが押下されたときに関数を呼び出すことができる 24
25. 書いてみよう 25
26. 本日はここまで お疲れ様でした