XML と JavaScript 全 2 回

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

目次目標：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 データを扱う人同士で、どのようなタグを使ってXML文書でデータを表すのかを取り決める 1: <?xml version="1.0" encoding="Shift_JIS" ?> 2: <!DOCTYPE fruit-list[ 3: <!ELEMENT fruit-list (fruit)> 4: <!ELEMENT fruit (name, price)>5: <!ATTLIST fruit place CDATA #REQUIRED> 6: <!ELEMENT name (#PCDATA)> 7: <!ELEMENT price (#PCDATA)> 8: ]> 9: 10: <fruit-list>11: <fruit place="青森">12: <name>りんご</name>13: <price>100</price>14: </fruit>15: </fruit-list> 属性の指定を必須にする fruitの属性に placeを設定する

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

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

ＸSLTでソート • 昇順，降順で要素をソートして表示 • <xsl:sort>要素を使用 • 通常<xsl:apply-templates>や<xsl:for-each>要素と組み合わせて利用 • 例 <メモ>F:\ゼミまとめ\XML_lecture\sort\sort.xml • 参考URLhttp://www.stackasterisk.jp/tech/java/xml03_06.jsp#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 <1book>... </1book> * The small and capital letter is distinguished * There are instructions else! (Next) 3. Let's display 2. data in XSLT.

注意事項 • 普通に書くとエラーになる文字がある →実体参照を使う →CDATAセクションを使う <タグ><![CDATA[ 　文章　 ]]></タグ>

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

JavaScript

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

例） • <SCRIPT language="JavaScript"> •  • </SCRIPT> <SCRIPT language="JavaScript">  </SCRIPT> </head> <body class="mar"> <center><h1>(例)５秒後にジャンプするページ</h1></center> <pre> <table align="center"><font size="11"> このサイトは移転しました。新URLは <a href="http://www.st.chukyo-u.ac.jp/h106096/"><font color="red">http://www.st.chukyo-u.ac.jp/h106096/</font></a> です。５秒後に自動的にジャンプします。 (もしも移動しないときは、お手数ですが上のURLからお進み下さい。) </font></table> </body> </html> <html>  <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="webcom.css" type="text/css">  <head> <title> (例)５秒後にジャンプするページ </title>

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

構文 • <scripttype="text/javascript">..</script> scriptタグで囲む。 <head></head>内に記述　通常その中を、でコメントアウトする • 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; } <INPUT TYPE="button" VALUE="緑ボタン" CLASS="fs1" onClick="test(this)"><br> 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 http://www6.airnet.ne.jp/manyo/xml/ 　　＝このサイトで紹介されている例＝＜メモ＞F:\ゼミまとめ\XML_lecture\poem

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

参考サイトとURL • オブジェクトなJavaScriptの基礎講座(http://chaichan.web.infoseek.co.jp/src/2ndthema.htm) • TAG<index> (http://www.tagindex.com/index.html) • WEB for biginner　作成支援(http://www.scollabo.com/banban/) • JavaScriptでオブジェクト指向プログラミング(http://www.atmarkit.co.jp/fdotnet/ajaxjs/ajaxjs04/ajaxjs04_01.html) • はじめてのプログラミング (http://www.rfs.jp/sb/javascript/01/01.html) • JavaScript例文時点(http://www.openspc2.org/reibun/javascript/) • はじめてのXML(http://www.stackasterisk.jp/tech/java/xml03_06.jsp#6_5)

XML と JavaScript 全 2 回