JavaScript における DOM 操作 XML 読み込み Ajax( 動的 HTML 編集 ) 情報システム工学科ラシキアゼミ ３年 H １０７０７２ 田中直樹.

Presentation on theme: "JavaScript における DOM 操作 XML 読み込み Ajax( 動的 HTML 編集 ) 情報システム工学科ラシキアゼミ ３年 H １０７０７２ 田中直樹."— Presentation transcript:

1 JavaScript における DOM 操作 XML 読み込み Ajax( 動的 HTML 編集 ) 情報システム工学科ラシキアゼミ ３年 H １０７０７２ 田中直樹

2 目次 XML データの読み込み XML データの読み込み DOM 操作による動的 HTML 編集方法 DOM 操作による動的 HTML 編集方法 要素を生成し、階段構造の要素を作成す る 要素を生成し、階段構造の要素を作成す る 階段構造の要素から、データを取り出す、 HTML 部にデータを組み込む 階段構造の要素から、データを取り出す、 HTML 部にデータを組み込む

3 今回の目標 XML ファイルの読み込み・データの取り 出しが出来るようになる XML ファイルの読み込み・データの取り 出しが出来るようになる DOM 操作の関数を用いて、 XML ・ HTML 要素の取り出しを行えるようになる DOM 操作の関数を用いて、 XML ・ HTML 要素の取り出しを行えるようになる 動的 Web ページの実現 ( ページの自由な書 き換え ) が出来るようになる 動的 Web ページの実現 ( ページの自由な書 き換え ) が出来るようになる 階層構造の要素を作成できるようになる 階層構造の要素を作成できるようになる

4 前回内容の軽い復習 ＸＭＬ・・・まずはタグ構造によるファイ ルを作成 ＸＭＬ・・・まずはタグ構造によるファイ ルを作成 JavaScript ・・・ JavaScript ・・・ 基本的な概念 ( 変数、データ型、基本処理構造 ) 、 基本的な概念 ( 変数、データ型、基本処理構造 ) 、 DOM 操作のために、オブジェクトに属性を付 与DOM 操作のために、オブジェクトに属性を付 与 オブジェクトの属性を辿って、オブジェクトの データを取得 (DOM 操作入門 ) オブジェクトの属性を辿って、オブジェクトの データを取得 (DOM 操作入門 )

5 var dom = document.myForm.text1.value ; var dom = document.myForm.sel1.selectedIndex ; ① var str1 = document.myForm.sel1. options[ 選択されている配列アドレス ].value ② 登場した操作

6 XML ファイルを読み込 む ＸＭＬファイルを読み込む操 作 ＸＭＬファイルを読み込む操 作 ・・・この操作は扱うブラウザ ( エンジン ) に よって操作 ( 呼び出すオブジェクト ) が違う ことが多い。 ライブラリを用いれば、それも解消できる が、いきなりライブラリを使っても仕組み が理解できないので、今回は FireFox に対 応した方法を用いる。

7 XML ファイル読み込み手 順 読み込み用オブジェクトの生成 読み込み用オブジェクトの生成 var xhttp = new XMLHttpRequest() XMLHttpRequest() ・・・ Mozilla 系ブラウザで用いるオブジェクト。 このオブジェクトの機能を使って、 XML ファイル を読み込む。

8 XML ファイル読み込み手 順 通信方法の設定 通信方法の設定 xhttp.open(“GET”,“1st_kadai1.xml”, false); open メソッド 引数は、 http 通信でどの命令を行うか (POST or GET) 、通信を行うファイル名、同期通信か非同期 通信かの指定

9 XML ファイル読み込み手 順 http 送信のリクエストを出し、ファイルを読 み込む http 送信のリクエストを出し、ファイルを読 み込む xhttp.send(null) ; send メソッド サーバに HTTP リクエストを送信する。送信先の URL 、送信方式（ GET や POST など）は、 open メソッドで指定したものになる。 データを送信しない時でも必要で、その場合、 引数が null になる。 ( 今回はこれ )

10 XML ファイル読み込み手 順 ＸＭＬデータを取り出す ＸＭＬデータを取り出す var xmldoc = xhttp.responseXML ; 通信が成功すれば、 通信を行ったオブジェ クトの responseXML プロパティから、取 得した XML データを受け取ることができる。

11 XML ファイル読み込み手 順 ＸＭＬノード ( 要素 ) を取り出す ＸＭＬノード ( 要素 ) を取り出す var node = xmldoc.getElementsByTagName(“ タグ名 ") ; getElementsByTagName メソッドで、取 得したいデータが格納されたタグを指定し、 データを取得する。

12 var dom = objects.getElementsByTagName(node) var dom = objects.getElementsByTagName(node) 引数 (node) ：要素を取得したいオブジェクトのタグ 名 機能：対象のオブジェクト群の中から、引数で指定し たタグ名で定義されたデータをすべて取得する。戻 り値を格納した変数は自動的に配列になる。 基本的に、 XML のデータを格納する際に用いられる。 つまり、親要素 objects は XML のタグを格納した変 数となる。 DOM 操作 要素の取り出し方

13 XML ファイル読み込み手 順 ＸＭＬノード ( 要素 ) を取り出す ＸＭＬノード ( 要素 ) を取り出す var memberNum = nodes[i].childNodes[0].nodeValue nodes[i] ・・・ getElementsByTagName で取 り出したデータ ( 配列 ) nodes[i] 以下は、構造上このようにアクセスす る。 nodeValue は格納されたデータを指す。

14 DOM Document Object Model Document Object Model 文書オブジェクトモデルともいう。 Web ページの内容 ( 文章、画像、音声など ) 及びそれ らの配置、スタイルをオブジェクトとして扱い、そ れらをスクリプト言語を使って制御するための取り 決め。 また、その制御をおこなうための API(Application programming Interface) 。 タグ構造である XML にもこの概念は適用可能

15 参照： http://www.scollabo.com/banban/java/jvp_01.html DOM ボタンにアクセ ス テキストフォー ムにアクセス

16 ＤＯＭ操作 DOM 操作には次のものがある DOM 操作には次のものがある 階層構造の要素を作成し、その要素にアクセス する 階層構造の要素を作成し、その要素にアクセス する もともとある HTML 要素を階段状の構造と捉 え、その要素にアクセスする もともとある HTML 要素を階段状の構造と捉 え、その要素にアクセスする

17 ＤＯＭ操作 関数 ( 要素作成 ) 階層構造の要素を作成し、その要素にア クセスを行う 階層構造の要素を作成し、その要素にア クセスを行う ･･･実現するためには、階段状の要素を生成 する関数を知る必要がある

18 document.createElement(tagName) ＤＯＭ操作 関数 ( 要素作成 ) 引数：作成するタグ名 ( タグ名なので、 td タグなど、タグ名で 作成した要素の役割が決まる ) 機能：要素を新しく作成する。作成する要 素の種類は、引数のタグ名で設定する

19 document.createTextNode(tagName) ＤＯＭ操作 関数 ( 要素作成 ) 引数：作成するテキスト名 ( タグの中身のデータ ) 機能：文字列要素を生成する。生成した要 素を既存のタグ要素に追加すると、タグの 中身の文字列になる ラシキアゼミ

20 引数：追加する要素 ( 要素を格納した変数でもＯ Ｋ ) 親要素：子要素を追加する要素 ＤＯＭ操作 関数 ( 要素作成 ) element.appendChild(element) 機能：要素からアクセスして関数を呼び出す。 対象の要素を呼び出し元の要素の子要素と して追加する。 JavaScript で生成した要素を HTML に書 き込む手段として用いる事が出来る

21 element.setAttribute("src", "xxx.gif"); 引数：１つ目・・・設定する属性名 ２つ目・・・設定する属性値 機能：対象の要素に属性と属性値を設定する 。 ＤＯＭ操作 関数 ( 要素作成 )

22 var node = document.createElement(“img”) ＤＯＭ操作 要素の作り方 画像要素を作成 (+ 変数に格納 ) img( 画像 ) 要素 ↓ 生成されたタ グ 変数の格納したほうが扱いやすいので、癖をつ けて下さい。

23 node.setAttribute(“src”,”owata.jpg”) ; ＤＯＭ操作 要素の作り方 画像要素を作成 img( 画像）要素 owata.jpg ↓ 生成されたタ グ

24 DOM 操作 要素の取り出し方 var dom = objects.getElementById(node) var dom = objects.getElementById(node) 引数 (node) ：要素を取得したいオブジェクトの id 属 性値 機能：対象のオブジェクト群の中から、引数で指定 した id を持つノード ( 要素 ) を取得する。親要素 objects はファイルの種類によって変わる HTML ： document XML ： xml のタグを格納した変数 これにより、階層構造の要素をたどらずに、オ ブジェクトの取得が可能になる

25 var dom = objects.getElementsByTagName(node) var dom = objects.getElementsByTagName(node) 引数 (node) ：要素を取得したいオブジェクトのタグ 名 機能：対象のオブジェクト群の中から、引数で指定し たタグ名で定義されたデータをすべて取得する。戻 り値を格納した変数は自動的に配列になる。 基本的に、 XML のデータを格納する際に用いられる。 つまり、親要素 objects は XML のタグを格納した変 数となる。 DOM 操作 要素の取り出し方

26 HTML 動的書き換えの関数 node.innerHTML(data) node.innerHTML(data) 引数：挿入する要素 ( ノード ) node ：内容を書き換える要素 機能： DOM 操作で取得した要素 node の中身を、引 数の要素に書き換える。簡単にいえば、１つ のタグの中身のデータをそのまま入れ替える関 数である。

27 DOM を用いた HTML の編集 例えば以下のように … テキストフォームを生 成

28 DOM を用いた HTML の編集 データを取り出す var dom1 = document.myForm.txt1.value var dom1 = document.getElementById(“txt1”).value ・・・ DOM 構造の HTML 部を辿ってデータを取得 ・・・ document オブジェクト以下は、 id 名を指定 すれば一括でデータを取得したい要素を指定でき る

29 このように、たどってアクセスしていたもの を・・・ ボタンにアクセ ス テキストフォー ムにアクセス DOM を用いた HTML の編集

30 子オブジェクトに直接アクセスできるようになった。手間が省 ける DOM を用いた HTML の編集

31 動的書き換えに便利なタ グ タグ タグ ・・・ div タグはタグ自体は効果を持たず、タグで 囲んだ範囲のデータをひとまとまりの要素とし て扱うことが出来るタグ。例えば、データがな い範囲を div タグで囲み、属性をつけて・・・ これを innerHTML 関数の親要素に指定するだけ で JavaScript で操作した要素の挿入先を作るこ とが出来る

32 これまでの技術を組み合わせる … ＤＯＭ操作 HTML への組み込み img( 画像）要素 owata.jpg ↓ 格納内容 変数 node ( 画像タグが格納されている )

33 ＤＯＭ操作 HTML への組み込み これまでの技術を組み合わせる … div タグを作成し … ↓ 生成されたタ グ var node2 = document.getElementById(“div1”); ・・・作成した div タグを DOM 操作で変数に格 納

34 node2.appendChild(node) ; // 画像タグを div タグの子要素として追加 ＤＯＭ操作 HTML への組み込み ↓ 生成されたタ グ img( 画像）要素 owata.jpg JavaScript 内で生成した要素を、 HTML 内に 組み込むことが出来る。

35 課題１ 前回のレクチャーの課題１で作成した XML ファイルを読み込み、要素を出力す る 前回のレクチャーの課題１で作成した XML ファイルを読み込み、要素を出力す る ※出力するのは格納したデータのみでＯ Ｋ。ただし、出力時に、どのゼミの データか分かるようにすること。 ( 例えば、格納されたデータの間に JavaScript で文字列を追加するなど …)

36 課題２ タグ、 タグ、を生成して、動的に表 を追加するプログラムを作る タグ、 タグ、を生成して、動的に表 を追加するプログラムを作る サンプル

37 作成手順 課題２ 補足 ２、 タグを作成し、変数に格納 ３、列数分の タグを作成し、それぞ れ変数に格納 １、あらかじめ HTML 部分に タグ のみを定義 (id か name 属性は設定するよ うに )

38 課題２ 補足 ４、列にデータを記載したい ( 文字列、オブ ジェクト ) 場合、その要素を作成する ５、４の要素を作成した場合、それを３ ( タグ ) の子要素として追加する

39 課題２ 補足 ６、５の要素も含め、すべての td タグを２ ( タグ ) の子要素として追加する ７、 タグをあらかじめ定義した table タグの子要素に追加する

40 動的な HTML 要素の編集 課題３ ( 仮 ) 文章キーワード変換プログラム 文章の色々なキーワードを動的に変化さ せるプログラム。 サンプル

41 課題４ これまでの技術 (HTML オブジェクトの取 り出し＆編集、 XML 読み込み、 DOM 操 作、 ) を用いて、動的な HTML プログラム を作成しよう これまでの技術 (HTML オブジェクトの取 り出し＆編集、 XML 読み込み、 DOM 操 作、 ) を用いて、動的な HTML プログラム を作成しよう 評価ポイント HTML オブジェクトの取り出し、 DOM 操作は最低限入れる HTML オブジェクトの取り出し、 DOM 操作は最低限入れる XML ファイルを反映させたらさらに加 点 XML ファイルを反映させたらさらに加 点 機能性のあるプログラム、コメント 機能性のあるプログラム、コメント