XML と JavaScript 全 2 回 情報理工学部 情報システム工学 科 H 肥田 百合恵 監修 h 木町 拓矢

目次 =XML= ・ XML とは ・何ができるのか ・種類 ・ DTD 他 =JavaScript= ・ JavaScript とは ・ JavaScript の特徴 ・構文 他 目標： XML を JavaScript で読み込んで表示す る 基本：種類, 詳細は自分で調べる

XML

XML とは eXtensible Markup Language ( ※ eXtensible = 広げることができる ) データを表す形式の一つ タグと文章で構成 ツリー構造 拡張子 「.xml 」

例） XML 宣言 ルートノード

何ができるのか XML ファイルを表示 「 DTD 」, 「 XML Schema 」を使用して データを交換  作成者, タグの名前が違っても平気 XSL で整形して表示 ( 後述 ) JavaScript でデータを読み込み、 HTML 上 で表示  DOM を利用  詳細は次回 !

種類 整形式文書 (well-formed XML document)  最も簡単  XML の文法を守っている 妥当な文書 (valid XML document)  「検証済み XML 文書」とも言う  整形式文書に従っている  DTD( 文書型定義。 Document Type Definition) が記述されている

DTD 1: 2: 4: 5: 6: 7: 8: ]> 9: 10: 11: 12: りんご 13: : 15: 属性の指定を 必須にする fruit の属性に place を設定する データを扱う人同士で、どのようなタグを使って XML 文 書で データを表すのかを取り決める

整形式文書の作り方 宣言を最初に記述 好きな名前のタグを考える 属性を付ける ( 任意 ) →DOM で取得

XSL スタイルシート XSL = Extensible Stylesheet Language － XSLT （ XSL Transformation ） ← 例はこ ちら － XSLF （ XSL Formatting Objects ） XML をどのように変換するかという情報を記述 したもの XML 文書を XSL 用のファイル (HTML 用の XSL な ど ) に従って XSL プロセッサが構造変換すること により、まったく別の構造を持ったデータに変 換 拡張子 「.xsl 」 XPath で細かく設定・特定の値を取得したりでき る 詳細は次のスライドで説明

Ｘ SLT でソート 昇順，降順で要素をソートして表示 要素を使用 通常 や 要素 と組み合わせて利用 例 F:\ ゼミまとめ \XML_lecture\sort\sort.xml 参考 URL sp#6_5

Let’s really make it! Part1 1. Let‘s make a figure to show for the next slide data with XML and DTD. 2. In a cosmetic surgery-type document, let's make an original XML document subject example ： car, music, space, book, game( ※ Please think about a subject becoming is-a and the has-a relations) * The number can’t be used in the beginning of the tag ex) X... * The small and capital letter is distinguished * There are instructions else! (Next) 3. Let's display 2. data in XSLT.

注意事項 普通に書くとエラーになる文字がある → 実体参照を使う →CDATA セクションを使う 表示したい文 字 書き方 && << >>

実際に作ってみよう！ Part1 1. 次のスライドに示す図を、 XML と DTD を 用いてデータ化しましょう。 2. 整形式文書で、オリジナルの XML 文書を作成し てみましょう。 題材例：車，音楽，宇宙, 本，ゲーム ( ※ is-a や has-a 関係になっているものを考える ) ・タグの最初に数字は使えない 例 )×... ・大文字と小文字は区別される ・他にも注意事項あり！ ( 次のページ ) 3.2. のデータを XSLT で表示しましょう。

JavaScript

JavaScript とは 以前木町君が紹介 できること  XML データの読み込み  時計の表示  アンケートフォームの作成  ボタンクリック時のアクション付加  オリジナルのプログラムを動作させる... 等、サイトを充実したものに

例） <!-- // ○ 秒後に指定ページに自動で移動 ( ジャンプ ) する mnt = 5; // 移動するまでの時間 ( 秒 ) url = " // 移動先のアド レス function jumpPage() { location.href = url; } setTimeout("jumpPage()",mnt*1000) //--> ( 例 ) ５秒後にジャンプするページ このサイトは移転しました。 新 URL は u.ac.jp/h106096/ です。 ５秒後に自動的にジャンプします。 ( もしも移動しないときは、お手数ですが上の URL からお進み下さ い。 ) ( 例 ) ５秒後にジャンプするページ <!-- // ○ 秒後に指定ページに自動で移動 ( ジャンプ ) する mnt = 5; // 移動するまでの時間 ( 秒 ) url = " u.ac.jp/h106096/"; // 移動先のアドレス function jumpPage() { location.href = url; } setTimeout("jumpPage()",mnt*1000) //-->

JavaScript の特徴 HTML を操作可能 プログラムの中に HTML を記述することもできる クライアント実行 一度ブラウザに読み込まれた後は、そのクライアントコ ンピュータ上で処理される。サーバーに負荷をかけるこ となく、高いレスポンスで実行される インタープリタ言語 HTML ファイルの中に直接記述する事が出来る 変数の型が柔軟 変数の型が数値と論理型, 文字列の３つの基本型しかな く、数値間の型変換は自動的に行われる

構文.. script タグで囲む。 内に記述 通常その中を、 でコメントアウトする document.write( ) 括弧でくくられた中身を、 HTML として出力 for( 初期設定 ; 条件式 ; 処理後の式 ){ 繰り返す 処理 ; } if( 条件式 ){}else{} switch( 整数, 文字列 ){case } do { 繰り返す処理 ; } while ( 条件式 ) continue, break, label

型 数値を表す Number 型 文字列を表す String 型 真偽を表す Boolean 型 （ true と false のみの値） 変数の宣言は var で行う 例） var x = 1; // Number 型 var y = “Hello!”; // String 型 var z = true; // Boolean 型

関数 関数の定義 function 関数名 () {.... } ・引数を配列で受け取り、 arguments.length 回分回したりできる ・外部から読み込むこともできる 通常 class を作るために使う 例は後述

オブジェクト それぞれプロパティ ( 変数 ) とメソッド ( 関数 ) を持つ 。 （※例外あり） ナビゲータオブジェクト  ブラウザの各部品や情報  例） document.lastModified で更新時間を取得 ビルドインオブジェクト  言語仕様レベルでの文字列や時間等  例 1 ） getDate で日付を取得  例 2 ） sort(sort 関数 ) でソート (Array オブジェクト内 ) ユーザ独自のオブジェクト  オブジェクト指向に従って作成

イベント ボタンクリックなどに応じた動きをする。 適用方法は以下の 2 種類 ↓ a. イベント属性にイベントハンドラを指定する b. イベントメソッドにイベントハンドラをオーバーライドす る a. の例 ) onClick イベント function test(parts){ document.TestForm.Msg.value = parts.value; } button, checkbox, link, radio, reset, submit に対して反応 。

var Person = function(name,age) { this.name = name; this.age = age; this.toString = function() { window.alert(" 名前 :" + this.name + ", 年齢 :" + this.age); }; } var person = new Person(" ヒダ ", "21"); person.toString(); // 「名前 : ヒダ, 年齢 :21 」 ＝例＝ F:\ ゼミまとめ \XML_lecture\JStest.html

Let’s really make it! Part2 1. Make simple HTML 2. A JavaScript describes a program there 3. Confirm movement ＜ A problem example program ＞ Try to make a questionnaire form Let’s make it with an original, and try it in various ways

実際に作ってみよう！ Part2 1. 簡単な HTML を作成 2. そこに JavaScript でプログラムを記述 3. 動作を確認 ＜課題プログラム＞ ・アンケートフォームを作成してみる ・オリジナルで作って色々と試してみる

DOM

XML を JavaScript で読みこむ XML を読み込んで HTML で表示 DOM…Document Object Model( ドキュメ ント・オブジェクト・モデル ) を利用 Java でもできるが、今回は JavaScript で

DOM Document Object Model  HTML,XML の文書へのアクセス方法を標準化 … 要素の選択, 置換, 追加, 削除などができる  W3C による標準化が行われている …Level1(0)~3 が存在。主力は Level2  ツリー状の構造（ドキュメントツリー）で管 理  参考 URL ＝このサイトで紹介されている例＝ ＜メモ＞ F:\ ゼミまとめ \XML_lecture\poem

課題 前回作った XML のルートノード, 属性値な どを取得するプログラムを作成し、 HTML で表示してみましょう。 ラシキアゼミのホームページに載せる、 自分を紹介するページを作成して下さい 。 ⇒集めて実際に載せるので、そのつも りで。

参考サイトと URL オブジェクトな JavaScript の基礎講座 ( TAG ( WEB for biginner 作成支援 ( JavaScript でオブジェクト指向プログラミング ( 4_01.html) はじめてのプログラミング ( JavaScript 例文時点 ( はじめての XML (