通常、JavaScriptはWebブラウザで実行されるロジックとしてWebアプリケーションで使用され、データの検証、動的ユーザー・インタフェースによる動作などの機能を提供します。 Oracle HTML DBでは、JavaScriptライブラリを含めるための様々な方法と、JavaScriptファンクションのコールをユーザー・インタフェースに組み込むための数多くの方法が提供されます。
このチュートリアルでは、JavaScriptの使用例と、アプリケーションにそれらを実装する方法の詳細を説明します。
この章の内容は次のとおりです。
JavaScriptファンクションを組み込む場所は、主に2つあります。
ページの「HTMLヘッダー」属性内。
ページ・テンプレートの.jsファイル内。
JavaScriptをアプリケーションに含める方法の1つとして、JavaScriptをページの「HTMLヘッダー」属性に追加する方法があります。これは、ページに固有のファンクションに有効な方法で、ファンクションを.js
ファイルに組み込む前にテストを行う有効な方法でもあります。
「ページ属性」ページの「HTMLヘッダー」属性にコードを入力するだけで、JavaScriptファンクションをページに追加できます。たとえば、次のコードを追加すると、カレント・ページのすべての場所からアクセス可能なファンクションがテストされます。
<script language="JavaScript1.1" type="text/javascript> function test(){ alert('This is a test.'); } </script>
Oracle HTML DBでは、ページ・テンプレート内の.js
ファイルを参照できます。 この方法を使用すると、このファイル内のすべてのJavaScriptがアプリケーションにアクセスできるようになります。.js
ファイルは、アプリケーションの最初のページ・ビューにロードされた後、ブラウザでキャッシュされるため、これが最も有効な方法となります。
次に、ページ・テンプレートのヘッダー・セクションに.jsファイルを組み込む方法を示します。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>#TITLE#</title> #HEAD# <script src="#APP_IMAGES#custom.js" type="text/javascript"></script> </head> <body #ONLOAD#>#FORM_OPEN#
アイテムを参照する場合、最も有効な方法は、IDで参照する方法です。WebブラウザでOracle HTML DBページのHTMLソースを表示すると、すべてのアイテムにID属性が含まれていることがわかります。このIDは、アイテム・ラベルではなく、アイテム名に対応します。たとえば、P1_FIRST_NAME
という名前で、First Name
というラベルを持つアイテムを作成した場合、IDはP1_FIRST_NAMEになります。
アイテムIDがわかると、JavaScriptファンクションgetElementById
を使用してアイテムの属性および値を取得および設定できます。次に、IDでアイテムを参照する方法およびアラート・ボックスにその値を表示する方法の例を示します。
<script language="JavaScript1.1" type="text/javascript"> function firstName(){ alert('First Name is ' + document.getElementById('P1_FIRST_NAME').value ); } // or a more generic version would be function displayValue(id){ alert('The Value is ' + document.getElementById(id).value ); } </script> // Then add the following to the "Form Element Attributes" Attribute of the item: onChange="javascript:displayValue('P1_FIRST_NAME');"
リクエストを確認する最も有効な方法は、ボタンからJavaScriptをコールする方法です。実際、Oracle HTML DBでは、ほぼすべてのオブジェクトの削除操作にこの方法を使用します。たとえば、ボタンを削除する場合は、リクエストの確認を求めるJavaScriptアラート・ボックスが表示されます。次に例を示します。
<script language="JavaScript1.1" type="text/javascript"> function deleteConfirm(msg) { var confDel = msg; if(confDel ==null) confDel= confirm("Would you like to perform this delete action?"); else confDel= confirm(msg); if (confDel== true) doSubmit('Delete'); } </script>
この例では、削除操作を確認するファンクションを作成した後、ボタンからそのファンクションをコールします。 このファンクションは、オプションでページを送信し、内部変数:REQUEST
の値を「Delete」に設定するため、リクエストの値に基づいて条件付きで実行されるプロセスを使用して削除を実行します。
ボタンの作成時に、「ページを送信せずにURLにリダイレクト」アクションを選択する必要があります。その後、URLターゲットを次のように指定します。
javascript:confirmDelete('Would you like to perform this delete action?');
クライアント側の検証では、フォームを使用するユーザーに即時フィードバックが提供されます。 よく行われるJavaScript検証の1つに、フィールドがNULLではないことを検証するものがあります。 たとえば、ページの「HTMLヘッダー」属性にファンクションを作成して、アイテムからそのファンクションをコールできます。
このタイプのJavaScript検証の作成では、次の手順を実行します。
EMP表で新しいアプリケーションを作成します。
ページ1に、P1_ENAMEという従業員名のラベルを持つアイテムを作成します。
ページ3の「HTMLヘッダー」属性にファンクションを追加します。
ファンクションをコールするようにページ3のP3_ENAMEアイテムを編集します。
このセクションの内容は次のとおりです。
EMP
表で新しいアプリケーションを作成するには、次の手順を実行します。
「作業領域」ホームページにナビゲートします。
「アプリケーションを作成」をクリックします。
「作成方法を選択」で、「既存の表に基づく」を選択して「次へ」をクリックします。
「表/ビューの所有者を指定」で、EMP
表の所有者を選択して「次へ」をクリックします。
「表/ビューの名前を指定」で、「EMP」を選択して「次へ」をクリックします。
「表のユーザー・インタフェースのデフォルト値」で、デフォルトを受け入れて「次へ」をクリックします。
「列ごとのサマリーを表示」で、「JOB」、「MGR」および「DEPTNO 」を選択して「次へ」をクリックします。
「列ごとの集計」で、「SAL」および「COMM」を選択して「次へ」をクリックします。
残りのデフォルトを受け入れて「次へ」をクリックします。
「作成」をクリックします。
アプリケーションを表示するには、「アプリケーションを実行」をクリックします。
ユーザー名とパスワードを要求されたら、次の手順を実行します。
「ユーザー名」で、作業領域の名前を入力します。
「パスワード」で、作業領域のパスワードを入力します。
アプリケーションには、次のページが含まれています。
標準レポート
挿入フォーム
更新フォーム
成功フォーム(レコードが正常に挿入された時期を示す)
分析メニュー・ページ
分析レポート
分析チャート
ログイン・ページ
「開発者」ツールバーから「アプリケーションを編集」を選択します。
ページ2の「HTMLヘッダー」属性にファンクションを追加するには、次の手順を実行します。
ページ2(「フォームを挿入」)のページ定義にナビゲートします。
ページ定義で、「属性を編集」をクリックします。
「ページ属性」が表示されます。
「HTMLヘッダー」で、次のように入力します。
<script language="JavaScript1.1" type="text/javascript"> function notNull(object){ if(object.value=="") alert('This field must contain a value.'); } </script>
「変更を適用」をクリックします。
次の手順では、ファンクションをコールするようにP2_ENAME
アイテムを編集し、「HTMLフォームの要素属性」属性にコードを追加します。
ファンクションをコールするようにP2_ENAME
アイテムを編集するには、次の手順を実行します。
ページ2(「フォームを挿入」)のページ定義にナビゲートします。
「アイテム」で、P2_ENAMEを選択します。
「要素」までスクロールします。
「HTMLフォームの要素属性」で、次のように入力します。
onBlur="javascript:notNull(this);"
「変更を適用」をクリックします。
ページを実行します。 カーソルをEname
フィールドに位置付け、「作成」をクリックすると、次のメッセージが表示されます。
This field must contain a value.
Oracle HTML DBを使用すると、条件に応じてページ・アイテムを表示できますが、ページに対して変更を行った場合は、評価のためにページを送信する必要があります。 次の例では、フォーム要素の無効化を別のフォーム要素の値に基づいて行うJavaScriptの使用方法について説明します。
最初に、ファンクションを記述し、更新フォームが含まれるページの「HTMLヘッダー」属性に配置します。 次に、そのページのアイテムからファンクションをコールします。 次の例では、ユーザーが、販売部門(deptno = 30)に属さない従業員に手数料を追加しないようにするJavaScriptファンクションの追加方法について説明します。
このセクションの内容は次のとおりです。
ページ3の「HTMLヘッダー」属性にファンクションを追加するには、次の手順を実行します。
ページ3(「フォームを更新」)のページ定義にナビゲートします。
ページ定義で、「属性を編集」をクリックします。
「ページ属性」が表示されます。
「HTMLヘッダー」で、次のように入力します。
<script language="JavaScript1.1" type="text/javascript"> // This function takes in: // 1. A string expression to evaluate. For example: // 'document.getElementById(\'P2_DEPTNO\').value==\'0\' // Notice the quotes are escaped using a "\" // 2. One or more arguments which are item ID's as strings. For example: // ...,'P2_ENAME','P2_SAL'...); // Notice the ID's are the item names, NOT item labels function disFormItems(testString,item1,item2,item3,item4,item5,item6,item7,item8,item9,item10){ if(theTest){ for(var i=1;i<12;i++){ if (arguments[i]){ disItem = document.getElementById(arguments[i]); disItem.style.background = '#cccccc'; disItem.disabled = true; } } } else{ for(var i=1;i<12;i++){ if (arguments[i]){ disItem = document.getElementById(arguments[i]); disItem.disabled = false; disItem.style.background = '#ffffff'; } } } } </script>
「変更を適用」をクリックします。
次の手順では、ファンクションをコールするようにP3_DEPTNO
アイテムを編集し、「HTMLフォームの要素属性」属性にコードを追加します。
ファンクションをコールするようにP3_DEPTNO
アイテムを編集するには、次の手順を実行します。
ページ3のページ定義にナビゲートします。
「アイテム」で、P3_DEPTNOを選択します。
「要素」までスクロールします。
「HTMLフォームの要素属性」で、次のように入力します。
onChange="javascript:disFormItems('document.getElementById(\'P3_DEPTNO\').value!=\'30\'','P3_COMM');"
「変更を適用」をクリックします。
P3_DEPTNO
を変更して、選択リストとして表示するには、次の手順を実行します。
ページ3のページ定義にナビゲートします。
「アイテム」で、P3_DEPTNOを選択します。
「表示形式」で、「選択リスト」を選択します。
「LOV」で、次の手順を実行します。
「NULLを表示」で、「いいえ」を選択します。
「LOV定義」で、次のように入力します。
SELECT dname_id, deptno FROM dept
「変更を適用」をクリックします。
最後に、選択された従業員がSALESの担当者でない場合にP3_COMM
を無効にするために、ページのレンダリング後、disFormItems
ファンクションへのコールを作成する必要があります。 このコールは、アイテムを含むリージョンの「リージョン・フッター」から実行することが最適です。
ページが最初にロードされた際にP3_COMM
を無効にするには、次の手順を実行します。
ページ3のページ定義にナビゲートします。
「リージョン」で、「EMP」を選択します。
「ヘッダーおよびフッターのテキスト」までスクロールします。
「リージョンのヘッダーとフッター」で、次のように入力します。
<script language="JavaScript1.1" type="text/javascript"> // This code calls the function when the page loads, thus setting the items state correctly. disFormItems('document.getElementById(\'P3_DEPTNO\').value!=\'30\'','P3_COMM'); </script>
「変更を適用」をクリックします。
ページを実行します。
図9-1に、完成したフォームを示します。
次の例では、リージョンに4つのテキスト・ボックスがあります。 4つ目のテキスト・ボックスには、他の3つの合計が含まれます。 この合計を計算するには、JavaScriptファンクションを「HTMLヘッダー」属性に追加して、最初の3つのアイテムからこのファンクションをコールします。
最初の3つのアイテムからファンクションをコールするには、次の手順を実行します。
該当するページ定義にナビゲートします。
ページ定義で、「属性を編集」をクリックします。
「ページ属性」が表示されます。
「HTMLヘッダー」で、次のように入力します。
<script language="JavaScript1.1" type="text/javascript"> function sumItems(){ function getVal(item){ if(document.getElementById(item).value != "") return parseFloat(document.getElementById(item).value); else return 0; } document.getElementById('P1_TOTAL').value = getVal('P1_ONE') + getVal('P1_TWO') + getVal('P1_THREE'); } </script>
「変更を適用」をクリックします。
3つすべてのアイテムからファンクションをコールするには、次の手順を実行します。
該当するページ定義にナビゲートします。
各アイテムに対して、次の手順を実行します。
アイテム名を選択します。
「要素」までスクロールします。
「HTMLフォームの要素属性」で、次のように入力します。
onChange="javascript:sumItems();"
「変更を適用」をクリックします。