情報システム工学科 ラシキアゼミ ３年 H 田中直樹

Presentation on theme: "情報システム工学科 ラシキアゼミ ３年 H 田中直樹"— Presentation transcript:

1 情報システム工学科 ラシキアゼミ ３年 H107072 田中直樹
XML+JavaScript（基礎） 情報システム工学科 ラシキアゼミ　３年 H107072　田中直樹

2 目次 ＸＭＬの概要・技術 (課題１) JavaScriptの概要 JavaScriptの基本的技術 (課題２、課題３)

3 目標 XMLの構造・機能を理解し、それに従ったXMLファイルを作成できる
JavaScript・XMLそれぞれの機能を理解する XMLの構造・機能を理解し、それに従ったXMLファイルを作成できる JavaScriptを用いて、HTMLで書かれた要素を編集・改変できるようになる

4 XMLの概要・技術

5 ＸＭＬとは？ 文書やデータの意味や構造を記述するためのマークアップ言語の一つ(読みやすさが利点) XMLはユーザが独自のタグを指定できる
eXtensible Markup Language の略 文書やデータの意味や構造を記述するためのマークアップ言語の一つ(読みやすさが利点) XMLはユーザが独自のタグを指定できる XMLはソフトウェア間での受け渡しデータの形式に用いられたり、データ保存のためのファイルの保存方法に用いられている 参照：IT用語辞典「ＸＭＬ」 + １１月１２日の岡田君(３年)の発表

6 ＸＭＬの例 ＸＭＬ宣言 ルートノード 任意のタグ 空要素タグ
<?xml version="1.0" encoding="shift_jis"?> <プロ野球> <セリーグ> <team name="読売ジャイアンツ"> <選手> <氏名>坂本　勇人</氏名> <背番号>6</背番号> <打率>.306</打率> <本塁打>18</本塁打> <打点>62</打点> </選手> </team> </セリーグ> <パリーグ /> </プロ野球> ＸＭＬ宣言 ルートノード 任意のタグ 空要素タグ

7 ＸＭＬの作り方 ２：ルートノードを記述する ３：任意のタグで囲む ４：必要ならば、タグのグループをタグで囲んで階層構造にする
１：ＸＭＬ宣言を記述する ２：ルートノードを記述する ３：任意のタグで囲む ４：必要ならば、タグのグループをタグで囲んで階層構造にする

8 タグ付け(XML , XHTML) <パリーグ /> <氏名>坂本 勇人</氏名> 開始タグ 終了タグ
<氏名>坂本　勇人</氏名> 開始タグ 終了タグ <パリーグ /> 空要素タグ (最近WEBページに用いられるXHTMLでも使用される)

9 タグ付け(XML , XHTML) タグ付けのルール １：開始タグと終了タグをセットで書く ２：空要素タグを作成する
<氏名>坂本　勇人</氏名> 開始タグ 終了タグ <パリーグ />

10 ＸＭＬのビュー 作成したXMLをWebブラウザで閲覧すると・・・

11 このXMLファイルの構成 以下のような階層構造になっている
このデータの場合、４段階のタグによる階層構造になっている。そして、末端のタグにそれぞれ詳細なデータが格納されている。

12 課題１ 以下の図の関係を持ったＸＭＬファイルを作成する

13 JavaScriptの概要

14 JavaScriptとは？ それまで静的だったWEBサイトに、動きや対話性を付加することを目的に開発された
Sun Microsystems社とNetscape Communications社が開発 それまで静的だったWEBサイトに、動きや対話性を付加することを目的に開発された Sun社のJava言語に似た記法を用いることが名称の由来だが、直接の互換性は無い。 (インドとインドネシア) 独自の拡張も行われている(Microsoft社の「JScript」、Macromedia社の「ActionScript」) 参照：Wikipedia 「JavaScript」

15 他言語との関連(代表例) HTML + JavaScript (HTML) + XML + JavaScript
・・・Webページの要素に手を加える、新しくHTML内の要素を加える (HTML) + XML + JavaScript ・・・Web上でアプリケーションからのデータの入出力を行う一例。(もちろんデータの保存・保管がメインになるシステムならばデータベースを用いる)

16 他言語との関連(代表例) Ajax (JavaScript + XML)
余談：Ajaxはここ数年で大きく流行った技術だけど、その影響でJavaScriptとAjaxがごっちゃになってる様子がある・・・(私は最初は違う言語だと思ってました) ･･･来週のレクチャーのテーマ 参照：Wikipedia 「JavaScript」

17 JavaScriptの歴史 1995年、サン・マイクロシステムズのJavaが大きな注目を浴びる。
ネットスケープコミュニケーションズのブレンダン・アイク氏が開発し、Netscape Navigator2.0で実装される(ブレンダン・アイク氏は現在Mozilla Corporation最高技術責任者) 1995年、サン・マイクロシステムズのJavaが大きな注目を浴びる。 当時、サン・マイクロシステムズとの技術提携があったので、名前をJavaScriptに変更した

18 JavaScriptの歴史 2000年以降、Webブラウザ間の互換性が発達したことで、GoogleやAmazonがJavaScriptを積極的に採用する。 2005年、JavaScriptの非同期通信技術に、Ajaxと名前がついて以降、「Googleマップ」に代表されるAjaxを用いた技術が増える (それまでは、意図的にJavaScript機能をoffにするユーザもいるほど好まれていなかった) （；′・ω・）

19 HTMLとは？ Hyper Text Markup Language。 HTMLの知識をちょっと確認

20 JavaScriptの技術

21 JavaScriptの宣言方法 scriptタグを書き(JavaScriptの書き始め)、その中で処理を行う。
<script language=“JavaScript”> ・・・処理内容・・・ </script> scriptタグを書き(JavaScriptの書き始め)、その中で処理を行う。 head(ヘッダ部)、body(ボディ部)のいずれでも宣言可能 基本的にヘッダ部で宣言することが多い

22 JavaScriptの宣言方法 JavaScriptはHTMLファイル内で定義するほかに、JavaScript部分だけを独立させたjsファイルとして定義することも可能。 jsファイルは、HTMLファイルの<script>タグにファイル名を属性として定義して読み込む(属性については後半のスライドで) 例：<script language=“JavaScript” src=“script.js”>

23 JavaScriptの基本知識 ここからは、JavaScriptの処理内でのルールについて紹介

24 JavaScriptの基本知識 変数定義 <script language=“JavaScript”> var str1 ;
var num1 = 50 ; var str2 = “ラシキアゼミ” ; var num2 = num ;

25 JavaScriptの基本知識 <script language=“JavaScript”> var str1 ;
var num1 = 50 ; var str2 = “ラシキアゼミ” ; var num2 = num ; var 変数名　で宣言(varキーワードを用いる) 代入したデータに合わせて、変数の型を自動で変更することが可能 大体の場所で変数の定義が可能

26 JavaScriptの基本知識 データ型 変数の型は自動変換されるため、考える機会が少ない。
srtring :文字列のデータ型。”　”(ダブルクォーテー ション)や’　’(シングルクォーテーション)で囲 むと、string型として定義される numeric :数値を扱うデータ型(他言語のint , float) boolean :true か falseを扱う論理データ型

27 JavaScriptの基本知識 基本的には、Arrayコンストラクタを用いる 例： 配列 var Week = new Array() ;
Week[0] = “Sunday” ; Week[1] = “Monday” ;

28 JavaScriptの基本知識 配列 例： var customer = new Array() ;

29 JavaScriptの基本知識 コメント var customer = new Array() ;
customer[1] = “Age 22” ; // 年齢 /* この後、出力関数の処理に移行 */ //：その行の間 /*と*/：その記号で挟まれた範囲

30 JavaScriptの基本知識 データ型(2) falseと扱われるデータ
以下のデータは if文などでfalse(偽)として扱われる。JavaScriptではよく出てくる言葉なので注意。 null(定義されたが、まだ値が代入されていない) NaN(Not a Numberを意味する) undefined(定義はされたが、まだ初期化されていない状態)

31 JavaScriptの基本知識 演算子 + - * / の四則演算 % (余りを求める) , ++ (１増やす) ,
* / の四則演算 %　(余りを求める) , ++　(１増やす) , -b　(変数 b の符号を反転させる)

32 JavaScriptの基本知識 演算子 < > <= >= (比較演算子)
<　>　<=　>=　　(比較演算子) &&(and)　||(or)　　(論理演算子) !boo　(boolean型変数booのtrueとfalseを反転)

33 JavaScriptの基本知識 分岐構造 If ～ else 文は、ＣやJavaと変わらない 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と変わらない

34 JavaScriptの基本操作 for( 初期処理式 ; 条件式 ; 再処理式 ) var a = 0 ;
反復構造 for( 初期処理式 ; 条件式 ; 再処理式 ) var a = 0 ; for(var i = 1 ; i <= 10 ; i++ ){ a += i ; } JavaやC++のように、初期式内で変数を宣言することが可能

35 JavaScriptの基本操作 funcion kannsuu1(str){ document.write(str); // 出力メソッド
関数の定義 関数名 funcion kannsuu1(str){ document.write(str); // 出力メソッド } 引数(型の指定はいらない) function キーワード もちろん、返り値(return)も返せる(ただし、それを受け取る変数を定義しておく事) 型指定は気にしなくてＯＫ

36 JavaScriptの基本操作 関数の呼び出し(JavaScript内から)
<script language=“JavaScript”> var str = “ラシキアゼミ” kannsuu1(str); // 関数の呼び出し </script> ・・・関数内での呼び出しは、Ｃ言語などと大差ない。

37 JavaScriptの基本操作 関数の呼び出し(HTMLから) ※イベントの設定

38 JavaScriptの基本操作 関数の呼び出し(HTMLから) ※イベントの設定
作成したボタンがクリックされたら(onClick) kannsuu1というコールバック関数を呼び出す <input type=“button” onClick=“kannsuu1()”>

39 JavaScriptの基本操作 関数の呼び出し(HTMLから) ※イベントの設定 注意点
<input type=“button” onClick=“kannsuu1()”> 注意点 HTML部には変数が存在しないため、HTMLから呼び出す関数の引数に「変数」を設定することはできない。 ※ただし、単独の値(文字列、数値)やHTMLで作成したオブジェクト(テキストフォームなど)は、引数に設定できる。

40 JavaScriptの基本操作 属性の設定(後述)
<input type=“button” onClick=“kannsuu1()”> 属性の設定(後述) ・・・今回のイベントの登録など、HTMLの要素に属性を設定することはJavaScriptにおいて、非常に重要。 その役割は、もう少し後のスライドで述べる。

41 JavaScriptの基本知識 ローカル変数とグローバル変数 関数内で宣言した変数はローカル変数に(関数内でのみ有効)
<script language=“JavaScript”> var num1 = 0 ; var num2 = 0 ; myfunc() ; num1++; num2++; function myfunc(){ var num1 = 100 ; num1++ ; num2++ ; } </script> 関数内で宣言した変数はローカル変数に(関数内でのみ有効) 関数外で宣言した変数はグローバル変数に(<script>タグ内で有効)

42 JavaScriptの基本知識 ローカル変数とグローバル変数 この段階で、 num1 の値は 1 num2 の値は 2 である。
<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には適応されていない)

43 JavaScriptの基本知識 ローカル変数とグローバル変数 ※注意※
<script language=“JavaScript”> var num1 = 0 ; var num2 = 0 ; myfunc() ; num1++; num2++; function myfunc(){ var num1 = 100 ; num1++ ; num2++ ; } </script> ※注意※ 今回は説明のために用いたが、関数の内外で同じ名前の変数を定義することは、エラーの原因となるので、絶対に避けること。

44 デバッグ方法(Firefox) この処理を行う関数をボタンから呼び出す。 スペルミスに気付かずに、実行したとする。
例えば…(一見出力文に見えるが・・・) doccument.write("Hello World!") ; この処理を行う関数をボタンから呼び出す。 スペルミスに気付かずに、実行したとする。 （正しくは、document.write）

45 デバッグ方法(Firefox) エラーコンソールを上のメニューバーから選択 (「ツール」→「エラーコンソール」)

46 デバッグ方法(Firefox) エラーコンソールウインドウが出現 この表示がエラー内容
(おい、doccumentなんて言葉JavaScriptでは定義されてねぇぞ！　ってメッセージ)

47 デバッグ方法(IE) 「ツール」→「インターネットオプション」を選択すると、「インターネットオプション」ダイアログが出現する。

48 デバッグ方法(IE) その中から、「ブラウズ」の項目にある「スクリプトエラーごとに通知を表示する」のチェックがオンになっていれば、JavaScriptのエラーがあるときにダイアログボックスが表示される ※エラー１つに対してダイアログボックス１つ表示 48

49 HTMLの属性の設定 関数の呼び出しの時に紹介した、HTMLで作成したオブジェクトにイベントに対するコールバック関数を登録するといった、特定のHTML要素に属性を追加する操作がJavaScriptでは重要になってくる 属性 例： <input type=“text” id=“text1” name=“text1” value=“初期データ”> <input type=“button” id=“btn1” name=“btn1” onClick=“calculate()”>

50 HTMLの属性の設定 <input type=“text” id=“text1” name=“text1” value=“初期データ”> テキストボックスを指定 idと要素名を決める デフォルトでテキストボックスに入っているデータ(テキストボックスの場合)。value属性を定義すると、テキストフォームの初期値になる。

51 HTMLの属性の設定 <input type=“button” id=“btn1” name=“btn1” value=“3+5の計算” onClick=“calculate()”> ボタンを指定 idと要素名を決める ボタンのラベルを指定 (value属性は、フォームによって効果が異なる) onClickで、クリックしたときに呼び出される関数を指定

52 HTMLの属性の設定 セレクトボックス <select id=“sel1” name=“sel1” size=“1”>
<option value=“uno”>1</option> <option value=“dos”>2</option> <option value=“tres”>3</option> </select>

53 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タグで定義。

54 属性の設定を行う理由 JavaScriptでは、HTMLのオブジェクトなど、Webページを構成するための要素を取得したい・・・
→　　DOM操作がある。 idやname属性は、要素にアクセスするために用いる。 また、value属性は、各オブジェクト(要素)の値を取得するために必要な属性である。 (※value属性は、DOM操作に必要なオブジェクトと必要でないオブジェクトがある。)

55 DOM ・・・Document Object Model の略。 文書オブジェクトモデルともいう。
Webページの内容(文章、画像、音声など)及びそれらの配置、スタイルをオブジェクトとして扱い、それらをスクリプト言語を使って制御するための取り決め。 また、その制御をおこなうためのAPI(Application programming Interface)。

56 HTMLのDOM構造(図) ボタンにアクセス テキストフォームにアクセス
参照：

57 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>

58 HTML要素にアクセスする(1) 初期データ var dom = document.myForm.text1.value ;
テキストフォームに入っているデータを取得し、変数に代入する。 (ただし、数字が入っていても取得するのは文字列) 初期データ

59 ちなみに、DOM操作で要素にアクセスする場合、一番上の階層のwindowオブジェクトは省略することができる。

60 セレクトボックスにアクセスする場合、value属性の値は１つ下の階層のoptionオブジェクトから取り出す

61 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>

62 HTML要素にアクセスする(2) セレクトボックスで選択されている要素の値を取得するには…
セレクトボックスで現在選択されているoption要素の配列アドレスを取得する 取得した配列アドレスをもとに、セレクトボックス内のoptionオブジェクトのvalue属性にアクセスする。　または、optionタグに格納されている値を取り出す

63 HTML要素にアクセスする(2) ① var dom = document.myForm.sel1.selectedIndex ;
セレクトボックスで選択されている要素の値を取得するには… ① var dom = document.myForm.sel1.selectedIndex ; ・・・現在選択されているセレクトボックスのoption要素の配列アドレスを返す (上から２番目が選択されていたら「１」を返す)

64 HTML要素にアクセスする(2) ② var str1 = document.myForm.sel1.
セレクトボックスで選択されている要素の値(value属性)を取得するには… ② var str1 = document.myForm.sel1. options[dom].value ; // dom・・・選択されている配列アドレス ・・・セレクトボックスで現在選択されている値を返す (この場合は「dos」という文字列)

65 HTML要素にアクセスする(2) var str1 = document.myForm.sel1. options[dom].value ;
dos (２が入ったoption要素のvalue属性)

66 HTML要素にアクセスする(2) ② セレクトボックスで選択されているoptionタグに格納されている値を取得するには･･･ ２
(２が入ったoption要素のvalue属性) optionタグに入っているデータ（この場合２）を取得する場合 var str1 = document.myForm.sel1. options[選択されている配列アドレス].text ②

67 上位オブジェクト 上位オブジェクトの変更 これまでは、Webページ内の要素を扱うdocumentオブジェクトを編集してきたが、documentオブジェクトと同じ階層には、他のオブジェクトも存在する

68 上位オブジェクト ここに、navigatorオブジェクトもある

69 上位オブジェクト locationオブジェクト location.href = ページのＵＲＬ
上位オブジェクトの例 locationオブジェクト ・・・現在表示しているアドレス（URL）に関する情報を持つオブジェクト。 location.href = ページのＵＲＬ ・・・現在表示しているページを、指定のＵＲＬに変える。(ページジャンプの効果)

70 JavaScriptの基本操作 出力関数 document.write(str) 引数：出力したいデータを格納した変数
機能：引数で指定した変数と文字列を、HTMLの要素と し て出力する。タグも書き込み可能。 出力場所は、関数を定義した場所による (※ただし、それまでに書かれているHTML要素は 上書きにより消えてしまいます)

71 ちなみに次回は… Ajaxの技術を扱うために必要な概念のお話 JavaScriptでＸＭＬデータを読み込む・データを取り出す
DOM操作の関数を用いて、より動的なWebを実現する

72 課題１ 以下の図の関係を持ったＸＭＬファイルを作成する

73 課題１ 構造の説明 「中京大学」が最上位の要素。 １つ下の階層に「情報理工学部」
「情報理工学部」の下に「情報システム工学科」、「情報知能学科」。「情報システム工学科」の下に３つ、 「情報知能学科」の下に２つゼミが所属 それぞれのゼミは「教授」、「人数」、「研究分野」を子要素に持ち、その３つの要素は値を格納している

74 課題２ JavaScriptで様々な要素にアクセスし、表示・変更する(様々なオブジェクトにアクセスする)
ブラウザごとに違うメッセージを表示させる (IEとFireFoxに対応させてください) 現在表示中のページのURLを出力させる 背景色を変化させる(目に優しい色にしてね；)

75 課題２（補足） ブラウザごとに違うメッセージを表示させる ・ ブラウザによって違う値を返すオブジェクトのプロパ ティを用いる
・　ブラウザによって違う値を返すオブジェクトのプロパ ティを用いる ・　その値をindexOf関数を用いて、文字列照合する ・　今回はIEとFireFoxでチェックすればＯＫ

76 課題２（補足） 背景色はdocumentオブジェクト、それ以外は、紹介した上位オブジェクトのクラスを用いて実現できます。
location.○○○ = ～～～ などなど…

77 課題３ (1) 四則計算プログラムを作成 値の入力、四則演算のうちどの計算を行うか、はユーザが決める事が出来る
課題３では、２つの値を計算するだけでＯＫ。もちろんこれを改良して、次の自由課題を取り組んでもＯＫ

78 課題３ (1)の流れ 計算する値１、値２を取得(自由だけど、スライドで扱ったフォームがやりやすいかも)
どの四則演算を行うかを判断し、分岐処理 (これに合ったフォームがあったよね) 分岐先でそれぞれ計算を行う 計算結果を出力

79 課題３ 補足 ・・・それらを数値として扱いたい場合、 parseInt()関数で数値に変換する。
オブジェクトから取り出したvalue属性の値やタグに格納されている値をJavaScriptで取り出すと、それらはすべて文字列データ ・・・それらを数値として扱いたい場合、 parseInt()関数で数値に変換する。 parseInt()関数の詳細は調べてみてください。

80 課題３ (2) リンクボックスを作る (ページをジャンプさせる処理は、スライド中にもあるし、それ以外にも方法がある)
ボタンを押したらページがジャンプしますという方法は×。例のようにセレクトボックスを切り換えたときに起動するイベントがある。 どういう形でジャンプするかは自由 (ページが切り替わっても、新しくウインドウが開いてもＯＫ)

81 課題４(２回を通しての共通課題) 評価ポイント JavaScriptで自由にプログラムを作ってね
(中間経過として提出してくれたら加点します) 評価ポイント JavaScriptの機能が充実(HTMLばかり増やしすぎないでね＾＾；) 機能(意味)を持ったプログラム コメントで説明が書いてある(これに関しては他の課題も一緒。その処理が何をしているのかをコメントで書く癖をつける)

82 参考資料 参考サイト JavaScriptプログラミング入門 (大津 真 著 、オーム社 発行)
(代表的なサイト。これ以外にも、状況に応じて検索する必要がある。なにせＨＴＭＬも扱うからね) ・　とほほのJavaScriptリファレンス ・　Web of begginer 　　JavaScript入門