xml と javascript 全 2 回
DESCRIPTION
XML と JavaScript 全 2 回. 情報理工学部 情報システム工学科 H106096 肥田 百合恵 監修 h106044 木町 拓矢. 目次. 目標： XML を JavaScript で読み込んで表示する 基本：種類 , 詳細は自分で調べる. XML. XML とは. e X tensible M arkup L anguage (※eXtensible = 広げることができる ) データを表す形式の一つ タグと文章で構成 ツリー構造 拡張子 「 .xml 」. 例）. ルートノード. XML 宣言. 何ができるのか. - PowerPoint PPT PresentationTRANSCRIPT
XML と JavaScript全 2 回
情報理工学部 情報システム工学科
H106096 肥田 百合恵監修 h106044 木町 拓矢
目次
=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: <?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 を設定する
データを扱う人同士で、どのようなタグを使って XML文書でデータを表すのかを取り決める
整形式文書の作り方
宣言を最初に記述 好きな名前のタグを考える 属性を付ける ( 任意 )
→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! Part11. 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">
<!--
// ○秒後に指定ページに自動で移動 ( ジャンプ ) するmnt = 5; // 移動するまでの時間 (秒 )
url = "http://www.st.chukyo-u.ac.jp/h106096/"; //移動先のアドレスfunction jumpPage() {
location.href = url;
}
setTimeout("jumpPage()",mnt*1000)
//-->
</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><!--css 定義 --><meta http-equiv="Content-Style-Type" content="text/css"><link rel="stylesheet" href="webcom.css" type="text/css"> <!--css のリンク先 --><head><title>( 例 )５秒後にジャンプするページ</title>
<SCRIPT language="JavaScript"><!--
// ○秒後に指定ページに自動で移動 ( ジャンプ ) する
mnt = 5; // 移動するまでの時間 (秒 )
url = "http://www.st.chukyo-u.ac.jp/h106096/"; //移動先のアドレス
function jumpPage() {location.href = url;}
setTimeout("jumpPage()",mnt*1000)//--></SCRIPT>
JavaScript の特徴 HTML を操作可能 プログラムの中に HTML を記述することもできる クライアント実行
一度ブラウザに読み込まれた後は、そのクライアントコンピュータ上で処理される。サーバーに負荷をかけることなく、高いレスポンスで実行される
インタープリタ言語 HTML ファイルの中に直接記述する事が出来る 変数の型が柔軟 変数の型が数値と論理型 , 文字列の３つの基本型しか
なく、数値間の型変換は自動的に行われる
構文 <script type="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)