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
© Copyright 2024 ExpyDoc