<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <script type="text/javascript"> <!-- function secret() { if (confirm("よろしいですか?")) { var id = document.form1.id.value; var passwd = document.form1.passwd.value; var pass = unescape("%68%69%6D%69%74%75"); if (id.length > 3 && pass == passwd) { location.replace("./test/" + id +".html"); } else { alert("ID パスワードを確認してください。"); } } } // --> </script> </head> <body onload="document.form1.id.focus();"> <form action="#" name="form1"> <table> <tr> <td align="right">ID (<u>U</u>)</td> <td><input type="text" name="id" value="" maxlength="12" accesskey="u"></td> </tr> <tr> <td>パスワード (<u>P</u>)</td> <td><input type="password" name="passwd" maxlength="8" accesskey="p" onkeydown="if (event.keyCode == 13) secret();"></td> </tr> <tr> <td colspan="2" align="right"> <input type="button" value="認証" onclick="secret();"> <input type="reset" value="取り消し"> </td> </tr> </table> </form> </body> </html>
変数 id は入力されたフォームの ID 入力部です。これが移動先のファイル名(拡張子は除く)になります。たとえば、secret.html というファイルをパスワードが一致したときのみ表示させたい場合、ID は「secret」となります。
変数 passwd はフォームのパスワード入力部です。ここで入力された文字列が unescape() でデコードされる文字列と同じで、なおかつ ID(移動先のファイル名)が4文字以上入力されたときに目的の URL に移動します。
この unescape() 内にはエンコードされた文字列を指定します。たとえば、「himitu」をパスワードとして指定します。「himitu」を16進数にすると h: 68, i: 69, m: 6D, i: 69, t: 74, u: 75 なので、これを % 付きの16進数として unescape("%68%69%6D%69%74%75") とします。
「%68%69%6D%69%74%75」は unescape() でデコードされると「himitu」という文字になりますので、入力されたパスワードの判別になります。なお、パスワードの生成にはブラウザによって escape() でエスケープされる文字列が違いますので、ASCII コードの一覧を参考にエンコードされた文字を指定してください。
location.replace() にはリンク先の URL が入りますので、他のディレクトリにある場合はディレクトリ名やパスをクォーテーションで囲み、拡張子も同じく囲みます。入力されたパスワードが一致していたら ID に入力したページを現在のページに表示してこのページに戻れなくします。ただし、パスワードが一致していてもデタラメな文字(存在しないファイル名)を入力してファイルがなければページエラーになります。
フォーム内にある onkeydown は password 部がアクティブの時、キーボードの Enter(キーコードの13)が押されたら関数 secret が呼ばれます。このフォームは内容を送信するのではないので、これによりエンターキーによる「認証」をクリックしたのと同じ働きをします。
なお、このスクリプトのセキュリティは全然ありませんので、安全性を重視するようなファイルでしたら Basic 認証や CGI 等を用いた方が良いと思います。