XML+JavaScript - メインページ
Download
Report
Transcript XML+JavaScript - メインページ
XML+JavaScript（基礎）
情報システム工学科
ラシキアゼミ ３年
H107072 田中直樹
目次
ＸＭＬの概要・技術
(課題１)
JavaScriptの概要
JavaScriptの基本的技術
(課題２、課題３)
目標
JavaScript・XMLそれぞれの機能を理解する
XMLの構造・機能を理解し、それに従った
XMLファイルを作成できる
JavaScriptを用いて、HTMLで書かれた要素
を編集・改変できるようになる
XMLの概要・技術
ＸＭＬとは？
eXtensible Markup Language の略
文書やデータの意味や構造を記述するための
マークアップ言語の一つ(読みやすさが利点)
XMLはユーザが独自のタグを指定できる
XMLはソフトウェア間での受け渡しデータの
形式に用いられたり、データ保存のための
ファイルの保存方法に用いられている
参照：IT用語辞典「ＸＭＬ」 + １１月１２日の岡田君(３年)の発表
ＸＭＬの例
<?xml version="1.0" encoding="shift_jis"?>
<プロ野球>
<セリーグ>
<team name="読売ジャイアンツ">
<選手>
<氏名>坂本 勇人</氏名>
<背番号>6</背番号>
ルートノード
<打率>.306</打率>
<本塁打>18</本塁打>
<打点>62</打点>
</選手>
</team>
</セリーグ>
<パリーグ />
空要素タグ
</プロ野球>
ＸＭＬ宣言
任意のタグ
ＸＭＬの作り方
１：ＸＭＬ宣言を記述する
２：ルートノードを記述する
３：任意のタグで囲む
４：必要ならば、タグのグループをタグで囲んで
階層構造にする
タグ付け(XML , XHTML)
<氏名>坂本 勇人</氏名>
開始タグ
終了タグ
<パリーグ />
空要素タグ
(最近WEBページに用いられるXHTML
でも使用される)
タグ付け(XML , XHTML)
タグ付けのルール
１：開始タグと終了タグをセットで書く
２：空要素タグを作成する
<氏名>坂本 勇人</氏名>
開始タグ
<パリーグ />
終了タグ
ＸＭＬのビュー
作成したXMLをWebブラウザで閲覧すると・・・
この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の配列には、１つの配列に違う型の
データを入力することも可能。
例：
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の基本知識
演算子
+
-
*
/ の四則演算
% (余りを求める) , ++ (１増やす) ,
-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 文は、Ｃや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)も返せる(ただし、それを受け取
る変数を定義しておく事)
型指定は気にしなくてＯＫ
JavaScriptの基本操作
関数の呼び出し(JavaScript内から)
<script language=“JavaScript”>
var str = “ラシキアゼミ”
kannsuu1(str);
// 関数の呼び出し
</script>
・・・関数内での呼び出しは、Ｃ言語などと大差ない。
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のエラーがあ
るときにダイアログボック
スが表示される
※エラー１つに対してダ
イアログボックス１つ表
示
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属性の値は１つ
下の階層の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要素の
配列アドレスを返す
(上から２番目が選択されていたら「１」を返す)
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
(２が入ったoption要素の
value属性)
HTML要素にアクセスする(2)
セレクトボックスで選択されているoptionタグ
に格納されている値を取得するには･･･
２
(２が入ったoption要素の
value属性)
optionタグに入っているデータ（この場合２）を取得する場合
②
var str1 = document.myForm.sel1.
options[選択されている配列アドレス].text
上位オブジェクト
上位オブジェクトの変更
これまでは、Webページ内の要素を扱うdocument
オブジェクトを編集してきたが、documentオブジェク
トと同じ階層には、他のオブジェクトも存在する
上位オブジェクト
ここに、navigatorオブジェクトもある
上位オブジェクト
上位オブジェクトの例
locationオブジェクト
・・・現在表示しているアドレス（URL）に関する情報を
持つオブジェクト。
location.href = ページのＵＲＬ
・・・現在表示しているページを、指定のＵＲＬに
変える。(ページジャンプの効果)
JavaScriptの基本操作
出力関数
document.write(str)
引数：出力したいデータを格納した変数
機能：引数で指定した変数と文字列を、HTMLの要素と し
て出力する。タグも書き込み可能。
出力場所は、関数を定義した場所による
(※ただし、それまでに書かれているHTML要素は
上書きにより消えてしまいます)
ちなみに次回は…
Ajaxの技術を扱うために必要な概念のお話
JavaScriptでＸＭＬデータを読み込む・データを
取り出す
DOM操作の関数を用いて、より動的なWebを実
現する
課題１
以下の図の関係を持ったＸＭＬファイルを作成する
課題１
構造の説明
• 「中京大学」が最上位の要素。 １つ下の階層に「情
報理工学部」
• 「情報理工学部」の下に「情報システム工学科」、「情
報知能学科」。「情報システム工学科」の下に３つ、
「情報知能学科」の下に２つゼミが所属
• それぞれのゼミは「教授」、「人数」、「研究分野」を子
要素に持ち、その３つの要素は値を格納している
課題２
JavaScriptで様々な要素にアクセスし、表示・変
更する(様々なオブジェクトにアクセスする)
• ブラウザごとに違うメッセージを表示させる
(IEとFireFoxに対応させてください)
• 現在表示中のページのURLを出力させる
• 背景色を変化させる(目に優しい色にしてね；)
課題２（補足）
• ブラウザごとに違うメッセージを表示させる
・ ブラウザによって違う値を返すオブジェクトのプロパ
ティを用いる
・ その値をindexOf関数を用いて、文字列照合する
・ 今回はIEとFireFoxでチェックすればＯＫ
課題２（補足）
背景色はdocumentオブジェクト、それ以外は、
紹介した上位オブジェクトのクラスを用いて実現
できます。
document.○○○ = ～～～
location.○○○ = ～～～
などなど…
課題３ (1)
四則計算プログラムを作成
• 値の入力、四則演算のうちどの計算を行うか、
はユーザが決める事が出来る
• 課題３では、２つの値を計算するだけでＯＫ。
もちろんこれを改良して、次の自由課題を取り
組んでもＯＫ
課題３ (1)の流れ
1. 計算する値１、値２を取得(自由だけど、スラ
イドで扱ったフォームがやりやすいかも)
2. どの四則演算を行うかを判断し、分岐処理
(これに合ったフォームがあったよね)
3. 分岐先でそれぞれ計算を行う
4. 計算結果を出力
課題３ 補足
オブジェクトから取り出したvalue属性の値やタ
グに格納されている値をJavaScriptで取り出す
と、それらはすべて文字列データ
・・・それらを数値として扱いたい場合、
parseInt()関数で数値に変換する。
parseInt()関数の詳細は調べてみてください。
課題３ (2)
リンクボックスを作る
(ページをジャンプさせる処理は、スライド中にもあるし、それ
以外にも方法がある)
ボタンを押したらページがジャンプしますという方法は
×。例のようにセレクトボックスを切り換えたときに起
動するイベントがある。
どういう形でジャンプするかは自由
(ページが切り替わっても、新しくウインドウが開
いてもＯＫ)
課題４(２回を通しての共通課題)
JavaScriptで自由にプログラムを作ってね
(中間経過として提出してくれたら加点します)
評価ポイント
• JavaScriptの機能が充実(HTMLばかり増やし
すぎないでね＾＾；)
• 機能(意味)を持ったプログラム
• コメントで説明が書いてある(これに関しては他の
課題も一緒。その処理が何をしているのかをコメ
ントで書く癖をつける)
参考資料
JavaScriptプログラミング入門
(大津 真 著 、オーム社
発行)
参考サイト
(代表的なサイト。これ以外にも、状況に応じて検索する必要があ
る。なにせＨＴＭＬも扱うからね)
・ とほほのJavaScriptリファレンス
http://www.tohoho-web.com/js/index.htm
・ Web of begginer
JavaScript入門
http://www.scollabo.com/banban/java/index.html