XMLとJavaScript

XMLとJavaScript
全2回
情報理工学部情報システム工学科
H106096 肥田百合恵
監修 h106044木町拓矢
目次
目標：XMLをJavaScriptで読み込んで表示する
基本：種類,詳細は自分で調べる
=XML=
=JavaScript=
・XMLとは
・何ができるのか
・種類
・DTD
・JavaScriptとは
・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:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
<?xml version="1.0" encoding="Shift_JIS" ?>
<!DOCTYPE fruit-list[
<!ELEMENT fruit-list (fruit)>
<!ELEMENT fruit (name, price)>
<!ATTLIST fruit place CDATA #REQUIRED>
<!ELEMENT name (#PCDATA)>
<!ELEMENT price (#PCDATA)>
]>
<fruit-list>
<fruit place="青森">
<name>りんご</name>
<price>100</price>
</fruit>
</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
参考URL
http://www.stackasterisk.jp/tech/java/xml03_06.j
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 <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>
<SCRIPT language="JavaScript">
<!-// ○秒後に指定ページに自動で移動
(ジャンプ)する
<body class="mar">
mnt = 5; // 移動するまでの時間(秒)
<center><h1>(例)５秒後にジャンプするページ</h1></center>
url = "http://www.st.chukyo<pre>
u.ac.jp/h106096/"; //移動先のアドレス
<table align="center"><font size="11">
function jumpPage()
{
このサイトは移転しました。
新URLは <a href="http://www.st.chukyo-u.ac.jp/h106096/"><font
<html>
location.href
= url;
color="red">http://www.st.chukyo
u.ac.jp/h106096/</font></a> です。
<meta http-equiv="Content-Style-Type" content="text/css">
}
<link rel="stylesheet" href="webcom.css" type="text/css"> <!-５秒後に自動的にジャンプします。
setTimeout("jumpPage()",mnt*1000)
cssのリンク先-->
(もしも移動しないときは、お手数ですが上のURLからお進み下さい。)
<head>
</font></table>
//-->
<title>
</body>
(例)５秒後にジャンプするページ
</SCRIPT>
</html>
</title>
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/ajaxjs0
4_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)

Download Report