XML+JavaScript

XML+JavaScript(基礎)
情報システム工学科
ラシキアゼミ 3年
H107072 田中直樹
目次



XMLの概要・技術
(課題1)
JavaScriptの概要
JavaScriptの基本的技術
(課題2、課題3)
目標



JavaScript・XMLそれぞれの機能を理解する
XMLの構造・機能を理解し、それに従った
XMLファイルを作成できる
JavaScriptを用いて、HTMLで書かれた要素
を編集・改変できるようになる
XMLの概要・技術
XMLとは?




eXtensible Markup Language の略
文書やデータの意味や構造を記述するための
マークアップ言語の一つ(読みやすさが利点)
XMLはユーザが独自のタグを指定できる
XMLはソフトウェア間での受け渡しデータの
形式に用いられたり、データ保存のための
ファイルの保存方法に用いられている
参照:IT用語辞典「XML」 + 11月12日の岡田君(3年)の発表
XMLの例
<?xml version="1.0" encoding="shift_jis"?>
<プロ野球>
<セリーグ>
<team name="読売ジャイアンツ">
<選手>
<氏名>坂本 勇人</氏名>
<背番号>6</背番号>
ルートノード
<打率>.306</打率>
<本塁打>18</本塁打>
<打点>62</打点>
</選手>
</team>
</セリーグ>
<パリーグ />
空要素タグ
</プロ野球>
XML宣言
任意のタグ
XMLの作り方
1:XML宣言を記述する
2:ルートノードを記述する
3:任意のタグで囲む
4:必要ならば、タグのグループをタグで囲んで
階層構造にする
タグ付け(XML , XHTML)
<氏名>坂本 勇人</氏名>
開始タグ
終了タグ
<パリーグ />
空要素タグ
(最近WEBページに用いられるXHTML
でも使用される)
タグ付け(XML , XHTML)

タグ付けのルール
1:開始タグと終了タグをセットで書く
2:空要素タグを作成する
<氏名>坂本 勇人</氏名>
開始タグ
<パリーグ />
終了タグ
XMLのビュー
作成したXMLをWebブラウザで閲覧すると・・・
このXMLファイルの構成
以下のような階層構造になっている
このデータの場合、4段階のタグによる階層構造になっ
ている。そして、末端のタグにそれぞれ詳細なデータが
格納されている。
課題1

以下の図の関係を持ったXMLファイルを作成する
JavaScriptの概要
JavaScriptとは?




Sun Microsystems社とNetscape Communications社
が開発
それまで静的だったWEBサイトに、動きや対話性を
付加することを目的に開発された
Sun社のJava言語に似た記法を用いることが名称の
由来だが、直接の互換性は無い。 (インドとインドネシア)
独自の拡張も行われている(Microsoft社の
「JScript」、Macromedia社の「ActionScript」)
参照:Wikipedia 「JavaScript」
他言語との関連(代表例)

HTML + JavaScript
・・・Webページの要素に手を加える、新しくHTML内
の要素を加える

(HTML) + XML + JavaScript
・・・Web上でアプリケーションからのデータの入出力
を行う一例。(もちろんデータの保存・保管がメイン
になるシステムならばデータベースを用いる)
他言語との関連(代表例)

Ajax (JavaScript + XML)
・・・ XMLHttpRequest(HTTP通信を行うための
JavaScript組み込みクラス)による非同期通信を
利用し、通信結果に応じてダイナミックHTMLで動的
にページの一部を書き換える
余談:Ajaxはここ数年で大きく流行った技術だけど、その影響
でJavaScriptとAjaxがごっちゃになってる様子がある・・・
(私は最初は違う言語だと思ってました)
・・・来週のレクチャーのテーマ
参照:Wikipedia 「JavaScript」
JavaScriptの歴史
ネットスケープコミュニケーションズのブレンダン・アイク氏が
開発し、Netscape Navigator2.0で実装される(ブレンダン・ア
イク氏は現在Mozilla Corporation最高技術責任者)
1995年、サン・マイクロシステムズのJavaが大きな注
目を浴びる。
当時、サン・マイクロシステムズとの技術提携があった
ので、名前をJavaScriptに変更した
JavaScriptの歴史
2000年以降、Webブラウザ間の互換性が発達したこ
とで、GoogleやAmazonがJavaScriptを積極的に採
用する。
2005年、JavaScriptの非同期通信技術に、Ajaxと
名前がついて以降、「Googleマップ」に代表される
Ajaxを用いた技術が増える
(それまでは、意図的にJavaScript機能をoffにする
ユーザもいるほど好まれていなかった)
(;′・ω・)
HTMLとは?
Hyper Text Markup Language。
HTMLは文書の論理構造や見栄えなどを記述するため
に使用される。また、文書の中に画像や音声、動画、他
の文書へのハイパーリンクなどを埋め込むことも可能。
HTMLの知識をちょっと確認
JavaScriptの技術
JavaScriptの宣言方法
<script language=“JavaScript”>
・・・処理内容・・・
</script>
scriptタグを書き(JavaScriptの書き始め)、その中
で処理を行う。


head(ヘッダ部)、body(ボディ部)のいずれでも宣言可能
基本的にヘッダ部で宣言することが多い
JavaScriptの宣言方法
JavaScriptはHTMLファイル内で定義するほかに、
JavaScript部分だけを独立させたjsファイルとして定
義することも可能。
jsファイルは、HTMLファイルの<script>タグにフ
ァイル名を属性として定義して読み込む(属性に
ついては後半のスライドで)
例:<script language=“JavaScript”
src=“script.js”>
JavaScriptの基本知識
ここからは、JavaScriptの処理内でのルール
について紹介
JavaScriptの基本知識

変数定義
<script language=“JavaScript”>
var str1 ;
var num1 = 50 ;
var str2 = “ラシキアゼミ” ;
var num2 = num1 + 100 ;
JavaScriptの基本知識
<script language=“JavaScript”>
var str1 ;
var num1 = 50 ;
var str2 = “ラシキアゼミ” ;
var num2 = num1 + 100 ;
• var 変数名 で宣言(varキーワードを用いる)
• 代入したデータに合わせて、変数の型を自動で変
更することが可能
• 大体の場所で変数の定義が可能
JavaScriptの基本知識

データ型
変数の型は自動変換されるため、考える機会が少ない。
srtring
:文字列のデータ型。” ”(ダブルクォーテー
ション)や’ ’(シングルクォーテーション)で囲
むと、string型として定義される
numeric
:数値を扱うデータ型(他言語のint , float)
boolean
:true か falseを扱う論理データ型
JavaScriptの基本知識

配列
基本的には、Arrayコンストラクタを用いる
例:
var Week = new Array() ;
Week[0] = “Sunday” ;
Week[1] = “Monday” ;
JavaScriptの基本知識

配列
また、JavaScriptの配列には、1つの配列に違う型の
データを入力することも可能。
例:
var customer = new Array() ;
customer[0] = “田中” ;
// 氏名
customer[1] = 22 ; // 年齢
customer[2] = “遠藤” ;
customer[3] = 31 ;
JavaScriptの基本知識

コメント
var customer = new Array() ;
customer[0] = “田中” ;
// 氏名
customer[1] = “Age 22” ;
// 年齢
/*
この後、出力関数の処理に移行
*/
/*と*/:その記号で挟まれた範囲
//:その行の間
JavaScriptの基本知識

データ型(2) falseと扱われるデータ
以下のデータは if文などでfalse(偽)として扱われる。
JavaScriptではよく出てくる言葉なので注意。
•
•
•
•
0
null(定義されたが、まだ値が代入されていない)
NaN(Not a Numberを意味する)
undefined(定義はされたが、まだ初期化されていな
い状態)
JavaScriptの基本知識

演算子
+
-
*
/ の四則演算
% (余りを求める) , ++ (1増やす) ,
-b (変数 b の符号を反転させる)
JavaScriptの基本知識

演算子
< > <= >=
&&(and) ||(or)
(比較演算子)
(論理演算子)
!boo (boolean型変数booのtrueとfalseを反転)
JavaScriptの基本知識

分岐構造
if( 条件式 ){
処理
}else if( 条件式 ){
処理
}else{
処理
}
var a = 3 , b = 5 , str ;
if(a > b){
str = “aが大きい” ;
}else if(a < b){
str = “bが大きい” ;
}else{
str = “イーブン?” ;
}
If ~ else 文は、CやJavaと変わらない
JavaScriptの基本操作

反復構造
for( 初期処理式 ; 条件式 ; 再処理式 )
var a = 0 ;
for(var i = 1 ; i <= 10 ; i++ ){
a += i ;
}
JavaやC++のように、初期式内で変数
を宣言することが可能
JavaScriptの基本操作

関数の定義
関数名
funcion kannsuu1(str){
document.write(str); // 出力メソッド
}
function キーワード
引数(型の指定はいらない)
もちろん、返り値(return)も返せる(ただし、それを受け取
る変数を定義しておく事)
型指定は気にしなくてOK
JavaScriptの基本操作

関数の呼び出し(JavaScript内から)
<script language=“JavaScript”>
var str = “ラシキアゼミ”
kannsuu1(str);
// 関数の呼び出し
</script>
・・・関数内での呼び出しは、C言語などと大差ない。
JavaScriptの基本操作

関数の呼び出し(HTMLから) ※イベントの設定
JavaScriptでは、HTMLのオブジェクト(ボタンや、セレ
クトボックスなどの要素)に、イベント発生時のコールバッ
ク関数を登録することが出来る(属性の登録)
JavaScriptの基本操作

関数の呼び出し(HTMLから) ※イベントの設定
作成したボタンがクリックされたら(onClick)
kannsuu1というコールバック関数を呼び出す
<input type=“button” onClick=“kannsuu1()”>
JavaScriptの基本操作

関数の呼び出し(HTMLから) ※イベントの設定
<input type=“button” onClick=“kannsuu1()”>
注意点
HTML部には変数が存在しないため、HTMLから呼
び出す関数の引数に「変数」を設定することはでき
ない。
※ただし、単独の値(文字列、数値)やHTMLで作成
したオブジェクト(テキストフォームなど)は、引数に設
定できる。
JavaScriptの基本操作
<input type=“button” onClick=“kannsuu1()”>
属性の設定(後述)
・・・今回のイベントの登録など、HTMLの要素
に属性を設定することはJavaScriptにおい
て、非常に重要。
その役割は、もう少し後のスライドで述べる。
JavaScriptの基本知識

ローカル変数とグローバル変数
<script language=“JavaScript”>
var num1 = 0 ;
var num2 = 0 ;
myfunc() ;
num1++;
num2++;
function myfunc(){
var num1 = 100 ;
num1++ ;
num2++ ;
}
</script>
関数内で宣言した変数は
ローカル変数に(関数内で
のみ有効)
関数外で宣言した変数は
グローバル変数に
(<script>タグ内で有効)
JavaScriptの基本知識

ローカル変数とグローバル変数
<script language=“JavaScript”>
var num1 = 0 ;
var num2 = 0 ;
myfunc() ;
num1++;
num2++;
function myfunc(){
var num1 = 100 ;
num1++ ;
num2++ ;
}
</script>
この段階で、
num1 の値は 1
num2 の値は 2
である。
(関数内のnum1++は、
関数内のローカル変数
num1に適応され、グロー
バル変数num1には適応さ
れていない)
JavaScriptの基本知識

ローカル変数とグローバル変数
<script language=“JavaScript”>
var num1 = 0 ;
var num2 = 0 ;
myfunc() ;
num1++;
num2++;
function myfunc(){
var num1 = 100 ;
num1++ ;
num2++ ;
}
</script>
※注意※
今回は説明のために用い
たが、関数の内外で同じ名
前の変数を定義することは、
エラーの原因となるので、
絶対に避けること。
デバッグ方法(Firefox)

例えば…(一見出力文に見えるが・・・)
doccument.write("Hello World!") ;
この処理を行う関数をボタンから呼び出す。
スペルミスに気付かずに、実行したとする。
(正しくは、document.write)
デバッグ方法(Firefox)

エラーコンソールを上のメニューバーから選択
(「ツール」→「エラーコンソール」)
デバッグ方法(Firefox)

エラーコンソールウインドウが出現
この表示がエラー内容
(おい、doccumentなんて言葉JavaScriptで
は定義されてねぇぞ! ってメッセージ)
デバッグ方法(IE)
「ツール」→「インターネットオプション」を選択すると、「イン
ターネットオプション」ダイアログが出現する。
デバッグ方法(IE)
その中から、「ブラウズ」
の項目にある「スクリプト
エラーごとに通知を表示
する」のチェックがオンに
なっていれば、
JavaScriptのエラーがあ
るときにダイアログボック
スが表示される
※エラー1つに対してダ
イアログボックス1つ表
示
HTMLの属性の設定
関数の呼び出しの時に紹介した、HTMLで作成したオ
ブジェクトにイベントに対するコールバック関数を登録
するといった、特定のHTML要素に属性を追加する操
作がJavaScriptでは重要になってくる
属性
例:
<input type=“text” id=“text1” name=“text1”
value=“初期データ”>
<input type=“button” id=“btn1” name=“btn1”
onClick=“calculate()”>
HTMLの属性の設定
<input type=“text” id=“text1” name=“text1”
value=“初期データ”>
テキストボックスを指定
idと要素名を決める
デフォルトでテキストボックスに入っているデータ(テキストボック
スの場合)。value属性を定義すると、テキストフォームの初期値
になる。
HTMLの属性の設定
<input type=“button” id=“btn1” name=“btn1”
value=“3+5の計算” onClick=“calculate()”>
ボタンを指定
ボタンのラベルを指定
(value属性は、フォームによっ
て効果が異なる)
idと要素名を決める
onClickで、クリックしたときに呼び出
される関数を指定
HTMLの属性の設定

セレクトボックス
<select id=“sel1” name=“sel1” size=“1”>
<option value=“uno”>1</option>
<option value=“dos”>2</option>
<option value=“tres”>3</option>
</select>
HTMLの属性の設定

セレクトボックス
<select id=“sel1” name=“sel1” size=“1”>
<option value=“uno”>1</option>
<option value=“dos”>2</option>
<option value=“tres”>3</option>
</select>
セレクトボックスは、selectタグと、セレクトボックスの要素を指す
optionタグの階層構造になる。この場合、idや名前を設定する
のは<select>タグ、value属性はoptionタグで定義。
属性の設定を行う理由
JavaScriptでは、HTMLのオブジェクトなど、Web
ページを構成するための要素を取得したい・・・
→
DOM操作がある。
idやname属性は、要素にアクセスするために用いる。
また、value属性は、各オブジェクト(要素)の値を取得
するために必要な属性である。
(※value属性は、DOM操作に必要なオブジェクトと必
要でないオブジェクトがある。)
DOM
・・・Document Object Model の略。
文書オブジェクトモデルともいう。
Webページの内容(文章、画像、音声など)及びそれら
の配置、スタイルをオブジェクトとして扱い、それらをス
クリプト言語を使って制御するための取り決め。
また、その制御をおこなうためのAPI(Application
programming Interface)。
HTMLのDOM構造(図)
ボタンにアクセス
テキストフォーム
にアクセス
参照:http://www.scollabo.com/banban/java/jvp_01.html
formオブジェクトの設定

一般的に、DOM操作を行うためには、テキスト
フォームやボタンをまとめるフォーム(form)を定
義する必要がある
<form id=“myForm” name=“myForm”>
<input type=“text” id=“text1”
name=“text1” value=“初期データ”>
< input type=“button” id=“btn1”
name=“btn1” onClick=“kannsuu1()”>
</form>
HTML要素にアクセスする(1)
var dom = document.myForm.text1.value ;
テキストフォームに入っているデータを取得し、変数
に代入する。
(ただし、数字が入っていても取得するのは文字列)
初期データ
ちなみに、DOM操作で要素にアクセスする場合、一番上の
階層のwindowオブジェクトは省略することができる。
セレクトボックスにアクセスする場合、value属性の値は1つ
下の階層のoptionオブジェクトから取り出す
HTML要素にアクセスする(2)

セレクトボックスで選択されている要素の値を
取得するには…
<form id=“myForm” name=“myForm”>
<select id=“sel1” name=“sel1” size=“1”>
<option value=“uno”>1</option>
<option value=“dos”>2</option>
<option value=“tres”>3</option>
</select>
</form>
HTML要素にアクセスする(2)

セレクトボックスで選択されている要素の値を取
得するには…
①セレクトボックスで現在選択されているoption要素
の配列アドレスを取得する
②取得した配列アドレスをもとに、セレクトボックス内の
optionオブジェクトのvalue属性にアクセスする。
または、optionタグに格納されている値を取り出す
HTML要素にアクセスする(2)

セレクトボックスで選択されている要素の値を取
得するには…
①
var dom =
document.myForm.sel1.selectedIndex ;
・・・現在選択されているセレクトボックスのoption要素の
配列アドレスを返す
(上から2番目が選択されていたら「1」を返す)
HTML要素にアクセスする(2)

セレクトボックスで選択されている要素の値
(value属性)を取得するには…
②
var str1 = document.myForm.sel1.
options[dom].value ;
// dom・・・選択されている配列アドレス
・・・セレクトボックスで現在選択されている値を返す
(この場合は「dos」という文字列)
HTML要素にアクセスする(2)
var str1 = document.myForm.sel1.
options[dom].value ;
// dom・・・選択されている配列アドレス
dos
(2が入ったoption要素の
value属性)
HTML要素にアクセスする(2)

セレクトボックスで選択されているoptionタグ
に格納されている値を取得するには・・・
2
(2が入ったoption要素の
value属性)
optionタグに入っているデータ(この場合2)を取得する場合
②
var str1 = document.myForm.sel1.
options[選択されている配列アドレス].text
上位オブジェクト
上位オブジェクトの変更
これまでは、Webページ内の要素を扱うdocument
オブジェクトを編集してきたが、documentオブジェク
トと同じ階層には、他のオブジェクトも存在する
上位オブジェクト
ここに、navigatorオブジェクトもある
上位オブジェクト

上位オブジェクトの例
locationオブジェクト
・・・現在表示しているアドレス(URL)に関する情報を
持つオブジェクト。
location.href = ページのURL
・・・現在表示しているページを、指定のURLに
変える。(ページジャンプの効果)
JavaScriptの基本操作

出力関数
document.write(str)
引数:出力したいデータを格納した変数
機能:引数で指定した変数と文字列を、HTMLの要素と し
て出力する。タグも書き込み可能。
出力場所は、関数を定義した場所による
(※ただし、それまでに書かれているHTML要素は
上書きにより消えてしまいます)
ちなみに次回は…

Ajaxの技術を扱うために必要な概念のお話

JavaScriptでXMLデータを読み込む・データを
取り出す

DOM操作の関数を用いて、より動的なWebを実
現する
課題1

以下の図の関係を持ったXMLファイルを作成する
課題1

構造の説明
• 「中京大学」が最上位の要素。 1つ下の階層に「情
報理工学部」
• 「情報理工学部」の下に「情報システム工学科」、「情
報知能学科」。「情報システム工学科」の下に3つ、
「情報知能学科」の下に2つゼミが所属
• それぞれのゼミは「教授」、「人数」、「研究分野」を子
要素に持ち、その3つの要素は値を格納している
課題2

JavaScriptで様々な要素にアクセスし、表示・変
更する(様々なオブジェクトにアクセスする)
• ブラウザごとに違うメッセージを表示させる
(IEとFireFoxに対応させてください)
• 現在表示中のページのURLを出力させる
• 背景色を変化させる(目に優しい色にしてね;)
課題2(補足)
• ブラウザごとに違うメッセージを表示させる
・ ブラウザによって違う値を返すオブジェクトのプロパ
ティを用いる
・ その値をindexOf関数を用いて、文字列照合する
・ 今回はIEとFireFoxでチェックすればOK
課題2(補足)
背景色はdocumentオブジェクト、それ以外は、
紹介した上位オブジェクトのクラスを用いて実現
できます。
document.○○○ = ~~~
location.○○○ = ~~~
などなど…
課題3 (1)

四則計算プログラムを作成
• 値の入力、四則演算のうちどの計算を行うか、
はユーザが決める事が出来る
• 課題3では、2つの値を計算するだけでOK。
もちろんこれを改良して、次の自由課題を取り
組んでもOK
課題3 (1)の流れ
1. 計算する値1、値2を取得(自由だけど、スラ
イドで扱ったフォームがやりやすいかも)
2. どの四則演算を行うかを判断し、分岐処理
(これに合ったフォームがあったよね)
3. 分岐先でそれぞれ計算を行う
4. 計算結果を出力
課題3 補足

オブジェクトから取り出したvalue属性の値やタ
グに格納されている値をJavaScriptで取り出す
と、それらはすべて文字列データ
・・・それらを数値として扱いたい場合、
parseInt()関数で数値に変換する。
parseInt()関数の詳細は調べてみてください。
課題3 (2)

リンクボックスを作る
(ページをジャンプさせる処理は、スライド中にもあるし、それ
以外にも方法がある)


ボタンを押したらページがジャンプしますという方法は
×。例のようにセレクトボックスを切り換えたときに起
動するイベントがある。
どういう形でジャンプするかは自由
(ページが切り替わっても、新しくウインドウが開
いてもOK)
課題4(2回を通しての共通課題)


JavaScriptで自由にプログラムを作ってね
(中間経過として提出してくれたら加点します)
評価ポイント
• JavaScriptの機能が充実(HTMLばかり増やし
すぎないでね^^;)
• 機能(意味)を持ったプログラム
• コメントで説明が書いてある(これに関しては他の
課題も一緒。その処理が何をしているのかをコメ
ントで書く癖をつける)
参考資料
JavaScriptプログラミング入門
(大津 真 著 、オーム社
発行)
参考サイト
(代表的なサイト。これ以外にも、状況に応じて検索する必要があ
る。なにせHTMLも扱うからね)
・ とほほのJavaScriptリファレンス
http://www.tohoho-web.com/js/index.htm
・ Web of begginer
JavaScript入門
http://www.scollabo.com/banban/java/index.html