ハイパーイベントと 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] をクリックします。