ハイパーイベントと DOM の例
次の例では、ハイパーイベントと DOM を使用して、ハイパーイベント SignIn ページを作成しています。JavaScript のイベント・ハンドラ・コードは、ObjectScript のイベント・ハンドラを呼び出します。これは HTML DOM を使用して、ユーザがフォームから入力したログイン情報を取得します。また、HTML DOM は、ユーザ・ブラウザで適切な CSP ページを表示するときにも使用します。
ハイパーイベント SignIn ページを作成してテストするには、以下の手順を実行します。
-
スタジオを使用して、csp/user に HyperSignIn.CSP と Welcome.CSP という名前の 2 つの新規 CSP ページを作成します。
-
Welcome.CSP の <body> と </body> のタグの間に、ようこそメッセージを追加します。
<body> <h1>Welcome!</h1> </body>
-
以下のスクリプトを HyperSignIn.CSP に追加します。これは、ObjectScript の検証関数を定義します。ユーザがフォームのパスワード・フィールドに “CSP” と入力した場合、この関数はユーザ・ブラウザに Welcome.CSP をロードするように指示します。ユーザの入力が “CSP” ではない場合は、ユーザ・ブラウザに Error.CSP をロードするように指示します。
<script language="cache" method="Validate" arguments="Pwd:%String" returntype="%Boolean"> if (Pwd = "CSP"){ &js<self.document.location='Welcome.CSP'> } else{ &js<self.document.location='Error.CSP'> } quit 1 </script>
-
以下のフォームを追加します。ボタンの onClick 属性の値は、ハイパーイベントを使用して Validate メソッドを呼び出す JavaScript のイベント・ハンドラです。
<form name="form1" method="post" action=""> User: <input type="text" name="txtUsr" size="5"> Password: <input type="password" name="txtPwd" size="5"> <input type="button" value="Sign In" onClick="#server(..Validate(self.document.form1.txtPwd.value))#"> </form>
-
Web ブラウザで HyperSignIn.CSP を開きます。パスワード・フィールドに、“CSP” と入力します。
-
[Sign In] をクリックします。