作成するときに、サーバサイドJavaScriptとクライアントJavaScriptを
利用します。
クライアントJavaScriptを、FireFoxのアドオン機能であるFireBugを
利用してデバッグする方法を以下にまとめています。
まずはサンプルプログラムを準備します。
1. sample.xsp を作成します。
1) 「パネル」コントロールを配置します
2) 「ボタン」コントロールを配置します
「プロパティ」タブで、以下の値を設定します
名前：getNameBtn
ラベル：名前取得
イベント：onClick()
「イベント」タブをクリックします
クライアントスクリプトに以下のコードを設定します
var uName1 = window.document.getElementById("#{id:label1}").textContent;
var uName2 = window.document.getElementById("#{id:label2}").textContent;
var uName3 = window.document.getElementById("#{id:label3}").textContent;
var txt = "1: " + uName1 + " 2: " + uName2 + " 3: " + uName3;
alert(txt);
3) 「ラベル」コントロールを配置します
名前：label1
ラベル：山田 太郎
4) 「ラベル」コントロールを配置します
名前：label2
ラベル：山田 次郎
5) 「ラベル」コントロールを配置します
名前：label3
ラベル：山田 三郎
2.Webブラウザで確認します。
1) 以下の画面が表示されます
2) 「名前取得」ボタンをクリックすると、メッセージボックスが表示されます
ここまでで、サンプルプログラムの準備は完了です。
次に、Firebugの利用方法を確認していきます。
1. Firebugを準備します。
1) アドオンとして「Firebug」が導入されていることを確認します
2) Firebugを起動します。
2. 動作を確認します。
1) ブレークポイントを設定します。
① JavaScriptを表示するために「スクリプト」タブをクリックします。
② スクリプトが記載されている「sample.xsp」を選択します。
③ 「１．１． 2)」で入力したコードが表示されていることを確認します。
④ ブレークポイントを設定したい行の左側をクリックし、「●」が表示されることを確認します。
2) 「名前取得」ボタンをクリックしてスクリプトを実行します。
①「名前取得」ボタンをクリックします。
②ブレークポイントで処理が停止し、マークが表示されることを確認します。
3) ステップ実行し、変数に値が代入されることを確認します。
①ステップインをクリックします。
②次の一行に処理が移動することを確認します。
③「uName1」変数に値が設定されることを確認します。