第07回Web講座2018

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

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

オブジェクト

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

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

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

書いてみよう 7

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

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

第一回演習２（再掲） document.getElementsByTagName(‘h1’)[0].innerHTML = (“NetTeam”); ↲Enter 12 JavaScript で HTML
の内容を操作（書き換え）している

DOMツリー 13 <html> <body> <h1> <p> 見出し netteam <head> <title>
DOMツリー Document ノード

HTMLの操作 getElementsBy

getElementsBy – メソッド document（HTMLファイル）から指定した条件を満たす要素を取得するメソッド 15 構文用途 .getElementsByClassName(クラス名); 指定したクラスの要素を
配列で取得 .getElementsByName(name属性値); 指定したname属性値を持つ要素を配列で取得 .getElementsByTagName(要素名); 指定したタグの要素を配列で取得 .getElementById(ID名); 指定したID名を持つ要素を取得（配列ではない）

要素へのアクセス取得した要素にアクセスするには以下の方法がある 17 構文用途 .innerHTML 要素にアクセスタグを含む .innerText
要素にアクセスタグを含まない .textContent .innerTextとほぼ同じ

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

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

要素の追加１ 21

要素の追加２ 22

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

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

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

第07回Web講座2018

第07回Web講座2018

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

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

Other Decks in Education

Featured

Transcript

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

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

オブジェクト

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

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

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

書いてみよう 7

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

書いてみよう 9

DOM

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

第一回演習２（再掲） document.getElementsByTagName(‘h1’)[0].innerHTML = (“NetTeam”); ↲Enter 12 JavaScript で HTML

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

HTMLの操作 getElementsBy

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

書いてみよう 16

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

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

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

書いてみよう 20

要素の追加１ 21

要素の追加２ 22

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

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

書いてみよう 25

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

第07回Web講座2018

第07回Web講座2018

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

Other Decks in Education

Featured

Transcript

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