チュートリアルの目的本チュートリアルの目的は課題を解く ( 実装する ) ことで WGP の利用方法を習得することです 1. 課題内容 1 成績管理システムクライアント (JavaScript) とサーバ (SpringMVC) とを Ajax で連携させる 2 リバーシリッチな 2D 描

Size: px

Start display at page:

Download "チュートリアルの目的本チュートリアルの目的は課題を解く ( 実装する ) ことで WGP の利用方法を習得することです 1. 課題内容 1 成績管理システムクライアント (JavaScript) とサーバ (SpringMVC) とを Ajax で連携させる 2 リバーシリッチな 2D 描"

るるみさかいざわ
5 years ago
Views:

1 WGP チュートリアル Acroquest Technology 株式会社

2 チュートリアルの目的本チュートリアルの目的は課題を解く ( 実装する ) ことで WGP の利用方法を習得することです 1. 課題内容 1 成績管理システムクライアント (JavaScript) とサーバ (SpringMVC) とを Ajax で連携させる 2 リバーシリッチな 2D 描画やアニメーションを実装する 2

3 チュートリアル 1: 成績管理システム 3

4 1. 概要概要 1 WGP を使った Web アプリケーションを作成する 2 JavaScript クライアントと SpringMVC を用いて実装したサーバ (WebFW) を Ajax 通信で連携させる 4

5 2. 課題内容課題内容 1 成績管理システムを作成する課題毎に設定された複数の問題について受講者の点数を表 / グラフで表示するデータはサーバで保持する値は固定値としリロードするたびに初期値に戻って良い画面に表示するツリーテーブルグラフはオブジェクトとして作成すること JavaScript のオブジェクト指向を利用する方法は ( 参考 )JavaScript 導入を参照すること 2 作成には WGP と以下のライブラリを用いること利用するライブラリ説明 jquery jquery UI Jstree jqgrid dygraphs jeegoocontext JavaScript 汎用ライブラリ jquery 上に構築された UIライブラリツリーコンポーネントを提供するjQuery プラグインテーブルコンポーネントを提供するjQuery プラグイングラフコンポーネントを提供する JavaScriptライブラリコンテキストメニューを提供するjQuery プラグイン 5

6 3. 画面イメージテーブルテーブル表示時の画面イメージ技術課題テーブルグラフ課題 1 課題 1-1 課題削除 1-2 課題 1-3 課題 1-4 課題 1-5 課題 2 課題 2-1 課題 2-2 課題 2-3 課題 1-1 受講者問題 1 問題 2 問題 3 合計受講者 A 受講者 B 受講者 C 削除 6

7 4. 画面イメージグラフグラフ表示時の画面イメージ技術課題テーブルグラフ課題 1 課題 1-1 課題削除 1-2 課題 1-3 課題 1-4 課題 1-5 課題 2 課題 2-1 課題 2-2 課題 2-3 課題 1-1 点数受講者 A 受講者 B 60 受講者 C 問題番号 7

8 5. コンポーネントの説明テーブルテーブル表示時の各コンポーネントの説明初期表示時はツリーのみ表示するツリーで選択したノードの名前と同じ値を表示する技術課題課題 1 課題 1-1 課題削除 1-2 課題 1-3 課題 1-4 右クリックで表示されるメニュー課題 1-5 削除をクリックすると課題 2 ツリーから該当の項目が削除される課題 2-1 課題 2-2 課題 2-3 最下層のノードを選択した際にテーブルの表示およびグラフの表示が切り替わるテーブル課題 1-1 タブをクリックすることでグラフ表示とテーブル表示を切り替えられるグラフ各問題と合計は数値によるソートができる (jqgrid の機能を使う ) 受講者問題 1 問題 2 問題 3 合計受講者 A 受講者 B ラジオボタンで行選択後削除ボタン押下で行削除できる ( ラジオボタン非選択時は Disabledにする ) ツリーのノードを選択した時に受講者 C グリッドの値が切り替わるサーバ側のアプリがメモリ上にデータを持つソースコードにデータを直接書いてもよいラジオボタン選択時には行の背景色が変わる削除 8

9 6. グラフ表示時のコンポーネントの説明グラフ表示時の各コンポーネントの説明技術課題テーブルグラフツリーで選択したノードの名前と同じ値を表示する課題 1 課題 1-1 課題削除 1-2 課題 1-3 課題 1-4 課題 1-5 課題 2 課題 2-1 課題 2-2 課題 2-3 課題 1-1 点数 Y 軸を点数とする 30 最小値 0 最大値目盛間隔と設定し表示する 0 受講者 A 受講者 B 受講者 C dygraphs を用いたグラフ描画を行う凡例を表示すること場所や背景色は任意でよい X 軸は問題番号の値をとる最小値 1 最大値 4 目盛間隔 1 に設定して表示する問題番号 9

10 7. 作成手順以下の手順で開発する 1 各ライブラリの調査目安時間:8h 2 タブ画面の作成目安時間:4h 3 ツリーの作成目安時間:8h 4 テーブルの作成目安時間:8h 5 テーブルの行削除目安時間:4h 6 グラフの作成目安時間:8h 7 コンテキストメニューの作成目安時間:4h 8 Server 通信実装 ( 初期描画時 ) 目安時間:16h 9 Server 通信実装 (Ajax 通信 : データ取得 ) 目安時間:8h 10 Server 通信実装 (Ajax 通信 : データ削除 ) 目安時間:8h 10

11 8.WGP の起動方法 WGP の起動方法 1 WGP のサイトに移動しブランクプロジェクトをダウンロードするで取得した WGP.zip を展開する 3 展開して作成したブランクプロジェクトをインポートする 4 Tomcat でインポートしたプロジェクトが起動できてれば完了です注意点 Tomcat のバージョンは 7.0.x( 最新版 ) を使用してください 11

12 9. 各ライブラリの調査各ライブラリの調査以下の機能を実現するために使う各ライブラリのメソッド名と引数をそれぞれ調査する引数に option を渡すメソッドの場合 option の中身の調査は不要です 1 jquery UI を用いたタブの実現機能 2 jstree によるツリーの作成 3 jqgrid を用いたテーブルの作成 4 dygraphs を用いたグラフの作成 5 jeegoocontext を用いたコンテキストメニューの作成 6 jquery を用いた Ajax 通信 12

13 10. チュートリアル 1 実装 ( クライアント ) チュートリアル 1 実装 ( クライアント ) の流れ 1 タブ画面の作成 2 ツリーの作成 3 テーブルの作成 4 グラフの作成 5 コンテキストメニューの追加 13

14 10-1. タブ画面の作成タブ画面作成の作業内容 1 画面をツリー領域とテーブル / グラフ領域に分ける 2 テーブル / グラフ領域をタブ化するテーブルグラフ 14

15 10-1.( 手順 1) レイアウトの設定以下のレイアウトを作成する 800px 300px 900px 1 画面全体 ( ツリー領域とグラフ / テーブル領域 ) を表す div タグを生成する <div id="persarea"></div> 15

16 10-1.( 手順 2) ビューの追加 2 ビューを追加する var viewarea1 = {width : 300, height : 800, rowspan : 1, colspan : 1 }; var viewarea2 = {width : 900, height : 800, rowspan : 1, colspan : 1 }; var table = [ [ new wgp.perspactivemodel(viewarea1), new wgp.perspactivemodel(viewarea2) ] ]; var perspactiveview = new wgp.perspactiveview({ id : "persarea", collection : table }); var perspactiveview = new wgp.perspactiveview({ id : "persarea", collection : table }); perspactiveview.dropview("persarea_drop_0_0", "tree_area"); perspactiveview.dropview("persarea_drop_0_1", "contents_area"); レイアウト情報 viewarea1: ツリー領域 viewarea2: グラフ領域ビュー情報を配列にする Div タグの ID を指定 16

17 10-1.( 手順 3) 表示確認以下の構成の画面が表示されることを確認するテーブルグラフウィンドウサイズを変更しても各領域のサイズが固定されていることを確認する 17

18 10-2. ツリーの作成 WGP のツリービューを用いてツリーを表示するツリービュー表示時の各種設定値及び表示値は JavaScript ファイルに直接書き込んでよいこのとき表示値に ID を振り HTML の id 要素に設定しておくこと可能であれば選択した要素を青く反転すること技術課題課題 1 テーブルグラフ課題 1-1 課題 1-2 課題 1-3 課題 1-4 課題 1-5 HTML タグの id 要素に ID を振っておくこと課題 2 課題 2-1 課題 2-2 課題

19 10-2.( 補足説明 )Backbone.js について 1. ツリーの作成には Backbone.js を用いる 2. Backbone.js とは? 1 JavaScript 上で MVC モデル構造 ( ) を持ったアプリケーションを開発するための JavaScript フレームワーク 2 モデルビューイベントを定義する 3. 参考 URL MVC モデルについては 9-2. MVC モデルを参照すること 19

20 10-2.( 手順 1) ビューの追加 1 ツリーのデータを表す Model を Backbone.js の構成に基づいて作成する user.treemodel = Backbone.Model.extend({ defaults:{ text : "", styleclass : [], style : {} }, idattribute: treeid" }); デフォルト定義 user.treelist = Backbone.Collection.extend({ }); model : user.treemodel 20

21 10-2.( 手順 2) モデルの追加 1 2 ツリーの View を Backbone.js の構成に基づいて作成する user.treeview = wgp.abstractview.extend({ initialize : function(arguments){ this.divid = this.$el.attr("id"); this.ulid = this.divid + "_ul"; this.maxid = 0; this.registercollectionevent(); this.render() },render : function(){ $("#" + this.divid).append("<ul id='" + this.ulid + "'></ul>"); }); 初期化時描画時 21

22 10-2.( 手順 3) モデルの追加 2 3 View 及び Model を作成する // idはパースペクティブ領域初期化時のidと同値を指定する var treeview = new user.treeview({ id : "tree_area", model : new user.treemodel(), collection : new user.treelist() }); 22

23 10-3. テーブルの作成 jqgrid を用いて成績をテーブル表示する jqgrid 表示時の各種設定値及び jqgrid の表示値はここでは JavaScript ファイルに直接書き込んでよいこのとき受講者それぞれに ID 列を設け ID を振ることそのうえで ID 列は非表示列に設定すること radio ボタン表示は列の設定で行うことができる技術課題テーブルグラフ課題 1 課題 1-1 課題削除 1-2 課題 1-3 課題 1-4 課題 1-5 課題 2 課題 2-1 課題 2-2 課題 2-3 ID 列を設定するが表示しない課題 1-1 受講者問題 1 問題 2 問題 3 合計受講者 A 受講者 B 受講者 C 削除 23

24 10-3.( 注意点 )jqgrid の利用方法 jqgrid 利用時には以下の注意が必要である 1 2 つの js ファイルを読み込む必要がある 1. ロケール定義ファイル 2. ライブラリ本体 2 (1) ロケール定義ファイル (2) ライブラリ本体の順で読み込む必要があるライブラリ本体がロケール定義ファイルを参照するため読み込む順番を逆にするとエラー (b.jgrid.jqid is not a function) が発生するエラーメッセージから原因を特定することが難しい 24

25 10-3. テーブルの行削除削除ボタン押下時に行を削除する削除を行うメソッドが jqgrid に用意されているので使用すること技術課題テーブルグラフ課題 1 課題 1-1 課題削除 1-2 課題 1-3 課題 1-4 課題 1-5 課題 2 課題 2-1 課題 2-2 課題 2-3 課題 1-1 受講者問題 1 問題 2 問題 3 合計受講者 A 受講者 B 受講者 C 削除 25

26 10-3.( 手順 )jqgrid の行削除メソッド 1. 行を削除するメソッドには delrowdata と delgridrow が存在するそれぞれのメソッドについて調べること jqgrid wiki: ( メソッド名で検索をかけると良い ) 2. delrowdata メソッドを利用する例 : $(selector).delrowdata( rowid ); 行の id を設定する方法を調べること delgridrow はサーバ通信を伴うため今回は不適 26

27 10-4. グラフの作成 dygraphs を用いて成績をグラフ表示する dygraphs 表示時の各種設定値及び dygraphs の表示値は JavaScript ファイルに直接書き込んでよい技術課題課題 1 テーブルグラフ課題 1-1 課題 1-1 課題 1-2 課題 1-3 課題 1-4 課題 1-5 課題 2 課題 2-1 課題 2-2 点数凡例部分課題問題番号 27

28 10-4.( 注意点 ) グラフの生成タイミングタブを生成してからグラフの生成を行う必要がある 1 タブを生成する際にタブ内の width, height 値が変更されるためグラフを先に描画しておくとグラフが壊れて表示されないグラフ表示領域の width, height が 0 となってしまう 28

29 10-5. コンテキストメニューの作成 1 WGP のコンテキストメニュー作成機能を用いてツリーにコンテキストメニューを表示するコンテキストメニュー表示時の各種設定値及び表示値は HTML ファイル及び JavaScript ファイルに直接書き込んでよい技術課題課題 1 テーブルグラフ課題 1-1 削除課題 1-2 課題 1-3 課題 1-4 課題 1-5 課題 2 課題 2-1 課題 2-2 課題

30 10-5. コンテキストメニューの作成 2 親のノードをクリックした際にコンテキストメニューが表示されないよう制御する表示時のコールバックメソッドの戻り値に何を返すかがポイント技術課題課題 1 テーブルグラフ課題 1-1 課題 1-2 課題 1-3 課題 1-4 課題 1-5 クリックしても表示されない課題 2 課題 2-1 課題 2-2 課題

31 10-5.( 手順 ) コンテキストメニューの表示方法 WGP では以下のようにコンテキストメニューを表示する 1 div タグを生成する <div id= targetcontext"></div> 2 メニューを生成する <ul id="contextmenu"> </ul> <li id="delete"> 削除 </li> 3 1 で生成したタグにコンテキストメニューを設定する contextmenucreator.createcontextmenu( targetcontext, contextmenu, option); option については jeegoocontext のマニュアルを参照 31

32 10-5.( 注意点 ) メニューの作成タイミングコンテキストメニュー構築後にツリーを構築するとコンテキストメニューが表示されない 1 間違った解決策 : プログラムの実行順序を変更するツリーメニューやコンテキストメニューの作成は別スレッドで行われるためこの方法でもメニューは表示されない 2 解決策 :jstree 構築完了時の処理に入れる jstreeは構築が完了すると loaded.jstree が呼び出されるここにメニュー構築処理を入れる jquery の bind メソッドを利用する例 : $(selector).bind( loaded.jstree, function(){ // コンテキストメニュー構築処理 }); loaded.jstree に対してコールバック関数を追加 32

33 11. チュートリアル 1 実装 ( サーバ ) チュートリアル 1 実装 ( クライアント ) の流れ 1 概要説明 2 SpringMVC 導入実装 3 Ajax 通信導入実装 33

34 11-1.Server 通信実装 ( 初期描画時 ) これまでクライアント側で設定していたデータをサーバから読み込むように変更する 1 初期描画用のデータはサーバ側からクライアントに渡しデータをもとにクライアント側のコンポーネントを構築すること Model クラスにデータを書き込みクライアントで読み込むデータ形式は JSON 形式とする初期値の構築は自由に実装してよい 2 サーバとのデータの受け渡しは SpringMVC を用いること 3 HTML ではなく JSP を用いること 34

35 11-2.MVC モデル 1. MVC モデルとは? 表示操作を伴うアプリケーションを作成するときに用いられる標準設計方法である 2. アプリケーションを Model, View, Controller に分割して整理する 1 Model 2 View 3 Controller ロジックとデータを示す 3. なぜ MVC に分割するのか? 画面等のユーザインタフェースを示す入力処理ページ遷移などを示す 1 モジュール分割が容易になり保守性再利用性が高まる 2 ユーザインタフェース (View) の取り換えが容易である 35

36 11-3.SpringMVC 1. SpringMVC とは? Java で作成された Web フレームワーク画面遷移やブラウザ - サーバー間の入出力パラメータの受け渡しといった Web アプリケーションを簡単に作るための機能を提供する 2. 参考 URL SpringMVC を用いれば MVC モデルを用いて効率よく Web システムを開発できます 36

37 11-4. 本課題での MVC モデルグラフデータの削除を例に MVC の役割を示す 1 削除ボタンを押す View 6 jsp を用いてブラウザに画面表示 ( 削除が反映 ) 2 データ削除を要求する 5 JSP ファイルを返す Controller W GP 4 データを返す 3 データを削除する受講者問題 1 問題 2 問題 3 合計受講者 A 受講者 B 受講者 C Model 削除 37

38 11-5.( 手順 1)SpringMVC の導入 1. 空の Spring MVC プロジェクトを Eclipse で開く 2. M,V,C は以下のファイルに結びつく 1 Controller : サーバサイドプログラム src/main/java/jp.co.acroquest.example.controller 2 Model : サーバサイドプログラム src/main/java/jp.co.acroquest.example.service 3 View : クライアントサイドプログラム WebContent/WEB-INF/views/xxxx.jsp css,js,image などの参照ファイル上記ファイルは /WebContent/resources 配下に入れないと読み込めないので注意各自 Spring MVC について調べること Spring Framework 参考 URL: 成果物を Spring MVC に移行させるためには主にこの 2 つを編集する 38

39 11-5.( 手順 2)SpringMVC への移行 (1/4) 1. クライアントとサーバの通信を定義するある URL に対する振る舞いを 1 対 1 で定義する Controller クラスを用いて定義するブラウザ表示 View 1 リクエストを送る 2 jspを返す 2. コントローラの定義方法 1 controllerクラスを新たに定義する 2 controllerクラス内に URLとメソッドの対応を定義 3 メソッド内の処理を記述する 4 表示するjspを指定する Controller 39

40 11-5.( 手順 3)SpringMVC への移行 (2/4) 3. Controller クラスを定義する 1 Controllerパッケージ内に定義する 2 これにより controller クラスと認識される 4. URL とメソッドの対応を定義する value= /mapping/, method=requestmethod.get ) public String methodname(locale locale, Model model){} メソッドに対応する URL を記述するこの例の場合よく使われるリクエストメソッドに GET と POST があるそれぞれの違いについて調べるでリクエストされると methodname メソッドが呼ばれる 40

41 11-5.( 手順 4)SpringMVC への移行 (3/4) 5. メソッド内の処理を追加する 1 クライアントから渡された値を取得する 2 クライアントに値を渡す public String methodname(@requestparam(value= keyname") String studentid } 6. 表示する jsp を指定する 1 return 値に jsp のファイル名を記述する public String methodname(locale locale, Model model){ } // 処理 return jspname ; Locale locale, Model model){ model.addattribute( keyname, value); 2Key と value を設定し値を渡すどちらも String 型で定義するにアクセスした場合 WebContent/WEB-INF/views/jspName.jsp が呼び出される 1Key を設定し値を取得する 41

42 11-5.( 手順 5)SpringMVC への移行 (4/4) 7. HTML ファイルを JSP ファイルに移行する 1 HTML の内容を JSP にそのままコピー 2 css,js,image のパスを jsp 用に変更する <%=request.getcontextpath()%> を使う../ のような参照方法が使用できなくなるため例 ) jquery のディレクトリパスが以下の場合の例 /WebContent/resources/lib/jQuery/js/jquery min.js <%=request.getcontextpath()%>/resources/lib/jquery/js/jq uery min.js ここまでで Spring MVC を用いて View を表示する部分が完了! 42

43 11-6.( 補足説明 )JSON データの作り方クライアントにデータを渡すためには Java オブジェクトを JSON 形式に変換する必要がある 1 JSON 形式を簡単に作成できる JSONIC を用いる Java オブジェクトを簡単に JSON 形式に変換可能 Java オブジェクトのフィールド名を key に値を value とした連想配列型データとして JSON 型に変換する List 型の Java オブジェクトであれば Array 型の JSON 形式に変換する 2 以下のように変換される private String id; private String name; { id : 123, name : daniel } //getter と setter を必ず作ること 43

44 11-7.Server 通信実装 (Ajax 通信 : データ取得 ) 1. ツリーの最下層のノードをクリックした際にサーバからデータを取得する 1 jquery の Ajax 通信を用いてサーバにリクエストを送信することリクエストは POST 形式としデータに課題番号を設定することサンプルプログラムを参考にすること 2. 取得したデータを用いて画面を表示し直す 1 jqgrid の再描画の際に一度表示値をすべて削除して入れ直す必要がある Callback 処理内で再描画をおこなうこと 44

45 11-7.( 手順 1)Ajax 通信のやり方 (1/2) ページのリロードをせずにサーバと通信を行う手法が Ajax 通信である 1 Ajax 通信の利点サーバからデータのみ取得しページの一部のみ書き換えられる Ajax 通信 View 3 画面の一部を描画しなおす 1 P OST 形式のリクエストを送る 2 JSON 形式のデータを返す Controller 45

46 11-7.( 手順 2)Ajax 通信のやり方 (2/2) 2 設定方法クライアント jqueryのajaxメソッドを使用するメソッドの引数には以下を設定する url : 呼び出したいメソッドの URL type : POST data : 送信したいデータ Success : 通信成功時の処理サンプルプログラム参照の method 属性に RequestMethod.POST を設定する戻り値に Java オブジェクトを設定することで自動で JSON 形式に変換しにクライアントから送信されるデータの key を設定する 46

47 11-8.Server 通信実装 (Ajax 通信 : データ削除 ) 1. 以下の場合にサーバに削除処理を送信する 1 コンテキストメニューで削除が選択されたとき 2 削除ボタンをクリックしたときクリックイベントを設定することリクエストは POST 形式とする 2. サーバ側のデータを削除する 1 画面更新を行った際に削除されたデータが表示されないこと 47

48 チュートリアル 2 チュートリアル 2: リバーシ 48

49 1. 目的チュートリアル 2 以下のスキルを身に付ける 1 Raphael を用いてリッチな画面描画やアニメーションを実現できるようになる 2 WGP を用いて画面を構築できるようになる 49

50 2-1. 仕様 : 画面イメージチュートリアル 2 以下のような構成で画面を作成する 1 リバーシ Window オセロの盤面などを表示する 1 2 メッセージ Window ゲームについての情報を文字で表示する 2 50

51 2-2. リバーシ Window 以下を実現する 1 盤面の表示 2 クリックで石を配置 3 スコア表示 4 プレイヤー表示現在のプレイヤーをハイライトで表示する 1. 盤面の表示チュートリアル 2 4. プレイヤー表示 2. クリックで石を配置 3. スコア表示 51

52 2-3. メッセージ Window チュートリアル 2 ゲームについてのメッセージを表示する 1 各メッセージには表示時刻を付けること 2 表示する内容については自分で考えること表示時刻 52

53 3-1. 実装ワンポイントアドバイス 1 チュートリアル 2 1. WGP で生成した window 内に Raphael を用いて描画する手順 1 Raphael のインスタンスを作成する persmanager.dropview("persarea_drop_0_0", DIV_ID); paper = new Raphael( document.getelementbyid( DIV_ID ), WIDTH, HEIGHT ) WGP の dropview で登録した DIV の ID 作成する Raphael の描画領域の大きさ 2 作成したインスタンスを用いて描画を行う Raphael: 53

54 3-2. 実装ワンポイントアドバイス 2 チュートリアル 2 2. Raphael を用いたアニメーションの書き方 circle.animation( params, ms, [easing], [callback] ) 1 params: 変化後の属性値を連想配列形式で記述する利用可能な属性についてはリファレンス参照 2 ms: アニメーション開始から終了までの時間 ( ミリ秒 ) 3 easing: 変化の仕方利用可能な値はリファレンス参照 4 callback 関数例 : circle を (100, 100) まで 1000ms で移動させ完了したらアラートを出現する circle.animate( { cx: 100, cy: 100 }, 1000, <>, function(){ alert() } ); 54

55 3-3. 実装ワンポイントアドバイス 3 チュートリアル 2 3. マウスカーソル位置の取得には注意が必要 1 event オブジェクトからはページ左上からの座標 (px, py) しか得られない余白を考慮する必要あり! 2 Raphael の描画領域の左上座標 (rx, ry) を取得し Raphael 描画領域上の座標を計算する ( px rx, py ry ) (rx, ry) Raphael 描画領域 (px, py) 55

56 ( 参考 )JavaScript 導入 ( 参考 )JavaScript 導入 56

57 1.JavaScript におけるオブジェクト 1. JavaScript のオブジェクトの記述形式のことを JSON(JavaScript Object Notation) と言う 1 キーと値のペアの集合である 2 Java における Map と似ている ( 参考 )JavaScript 導入 JavaScript var obj = { key1 : Acro, key2 : Quest } Java Map<String, String> obj = new HashMap<String, String>(); obj.put( key1, Acro ); obj.put( key2, Quest ); 57

58 2. 関数オブジェクト ( 参考 )JavaScript 導入 1. JavaScript において関数はオブジェクトの 1つである 2. 一般的なオブジェクトと同様の扱いが可能である Java では関数 ( メソッド ) とオブジェクトは完全に別物 JavaScript 特有の関数オブジェクト利用例 var func1 = function(){ alert( test ) }; func1( ); // カッコをつけて実行 var func1 = function(){ alert( test ) }; var func2 = function( arg ){ arg(); // 引数にセットした関数オブジェクトを実行 } func2( func1 ); // 関数オブジェクトを引数にセット 58

59 3. 無名関数 ( 参考 )JavaScript 導入 1. 無名関数とは匿名の関数オブジェクトでありイベントリスナなどに用いることが多いイベントリスナ : イベントが発生した時に実行される関数 1 無名関数の利用例 : $(selector).addeventlistener( click, function(event){ // 処理 }, false ); 関数オブジェクトに置き換えた例 : 無名関数 var clicklistener = function(event){ // 処理 }; $(selector).addeventlistener( click, clicklistener, false); 参考 URL : 59

60 4. 無名関数利用時の注意 ( 参考 )JavaScript 導入 1. 無名関数内部では this を使わないこと悪い例 var ClassName = function(){ } this.val = String ; ClassName.prototype = { } method: function(){ } $( #id_name ).bind( loaded.jstree, function(){ }); alert( this.val ); this が無名関数を指すため undefined error になる良い例 var ClassName = function(){ } this.val = String ; ClassName.prototype = { } method: function(){ } var instance = this; $( #id_name ).bind( loaded.jstree, function(){ }); alert( instance.val ); スコープ内での変数に格納しておくめでたく String が表示される 60

61 5. コールバック関数 ( 参考 )JavaScript 導入 1. コールバック関数とは呼び出し先の関数の実行中に呼び出されるよう指定した関数 JavaScript ではマウス移動などのイベントにコールバック関数を設定することが多い 1 マウスクリックに設定する例 $( #button ).addeventlistener( click, function(event){ alert( #button がクリックされました ); }, false ); (2) コールバックの実行上記プログラムは以下の順序で実行される (1) コールバック関数の登録 ( 関数の中身は実行されない ) ( ユーザがマウスをクリックする ) (2) コールバック関数の実行 (1) コールバックの登録 61

62 6. オブジェクト指向プログラミング (1/4) ( 参考 )JavaScript 導入 1. Java Script 1 クラスの定義 var ClassName = function( args ){ } this.val1; // 属性の定義 this.val2; // 属性の定義 ClassName.prototype={ } method1: function(args){ }, // method1 の処理 method2: function(args){ } インスタンス作成時に呼ばれる // method2 の処理メソッドの戻り値は任意 prototype については次頁参照 2. Java 1 クラスの定義 class ClassName{ public int val1; // 属性の定義 public int val2; // 属性の定義 ClassName(args){ // コンストラクタ } public void method1(args){ // method1 の処理 } public void method2(args){ // method2 の処理 } } 62

63 7. オブジェクト指向プログラミング (2/4) ( 参考 )JavaScript 導入 1. Java Script 2 インスタンスの作成メソッド呼び出し var classname = new ClassName(); classname.method1(args); 3 継承 var SubClass = function(){ // 属性の定義 } // SuperClassのメソッドを継承 SubClass.prototype = new SuperClass(); 2. Java 2 インスタンスの作成メソッド呼び出し ClassName classname = new ClassName() classname.method1(args); 3 継承 class SubClass extends SuperClass{ // 省略 } // メソッドの定義 SubClass.prototype.m2=function(){.}; SubClass.prototype.m3=function(){.}; 新規メソッドを追加するときに前頁のようにカンマ区切りでのオブジェクト的記法が利用できない理由は調べること 63

64 8. オブジェクト指向プログラミング (3/4) 1. prototype を用いるとオブジェクト指向プログラミングが可能となる // クラスの作成 var SampleClass = function( mes ){ } this.message = mes; SampleClass.prototype ={ } showmessage: function(){ } alert( this.val ); インスタンスを複数作成し異なる属性値を持たせることができる // クラスの利用 // インスタンスの作成 var instance1 = new SampleClass( Hello ); var instance2 = new SampleClass( Bye ); // メソッドの呼び出し instance1.showmessage(); Instance2.showMessage(); ドット演算子を用いてメソッドを呼び出す // 属性値の利用 instance1.message = Welcome to WGP ドット演算子で属性を読み書きできる ( 参考 )JavaScript 導入 64

65 9. オブジェクト指向プログラミング (4/4) 2. prototype を使わない場合オブジェクト指向プログラムにならないので注意すること! 間違った例 // クラスの定義 var obj = function(){ this.message = "Message"; }; ( 参考 )JavaScript 導入 this を用いた変数の参照ができないので undefined となる //prototype を使わずにメソッドを宣言 obj.method = function(){ alert( this.message ); }; // インスタンスの作成 var instance = new obj(); instance.method(); // エラー発生 obj.method(); ドット演算子でメソッドを参照できないためエラーが発生するメソッドを呼び出すことができるがアラートの表示は undefined 65

66 10.Selector ( 参考 )JavaScript 導入 1. HTML タグを特定するための記法であり課題では各パーツを表示する場所の指定に用いる 1 ID 例 : <div id= id_name > #id_name と記述ページ内に同じ ID が複数あってはならない 2 Class 例 : <table class= class_name >.class_name と記述同じクラス名をページ内で複数用いることができる 3 Name 例 :<input type= radio name= group_name > [name=group_name] と記述ラジオボタンのグループ化などに用いる CSS の書き方と同じ 66

67 11.jQuery を利用した Selector 記法 ( 参考 )JavaScript 導入 1. jquery メソッドの利用方法は以下の通りである 1 jquery(selector) 意味は同じ 2 $(selector) $ を用いることが多い 2. Selector を実際に記述した例 1 $( #id_name ).method( ); 2 $(.class_name ).method( ); 3 $( [name=group_name] ).method( ); jqueryのメソッドはリファレンスを参照 jquery 日本語リファレンス : 67

68 これであなたも WGP 開発者だ! InfrastructuresEvolution 68

プレポスト【問題】

プレポスト【問題】コース名 : サーブレット /JSP/JDBC プログラミング ~Eclipse による開発 ~ 受講日氏名 1 JDBC の説明として間違っているものを 1 つ選びなさい 1. JDBC を使用してデータベースへアクセスするときには JDBC API が必要である 2. JDBC API は java.lang パッケージとして提供されている 3. JDBC には JDBC API JDBC