Step.15 - 入力ウィンドウを表示する

家族や友達など、特定の人しか見ても話が伝わらないプライベートなページをパスワードを入力しないと入れないようにしてみます。リンクボタンを押すとパスワードを入力するウィンドウを表示します。

Step テーマ
● prompt 入力ダイアログ

実行例

※ ちなみにパスワードは pass1です。

サンプルだけの HTMLはこちらへ

使い方

if ( myPassWord == "PASSWORD" ) location.href="URL";

・PASSWORD の部分を自分のパスワードに変更します。大文字/小文字は区別されますので注意してください。

・URL の部分をパスワードが一致した時にリンクする URL に変更します。

▲TOP

説明

このサンプルは入力ダイアログからパスワードを入力して、キーが一致していればどこかへリンクするといったものです。

パスワードの入力はフォームで十分ですが、今回は prompt() を使ってみます。
prompt() は、入力ウィンドウを表示します。

書式は、
myStr = prompt( "ウィンドウに表示するメッセージ" , "入力フィールドの初期文字" );
です。

myStr に入力された文字がセットされます。
また、 [キャンセル] ボタンを押した場合は、myStr には null がセットされます。

（例1）　myStr = prompt ( "パスワードを入力してください" , "" );
（例2）　myStr = prompt ( "名前を入力してください" , "匿名" );

確かにホームページ上ではパスワードが一致しないとリンクできません。
しかし、ソースを見られてしまったら、このザマです。

if ( myPassWord == "pass1" ) location.href = "secret.htm";

パスワードはもちろん、リンク先までしっかりと分かってしまいます。

しかも、検索エンジンが秘密ページへの URL を拾って行ってしまいます ^^;

次のステップで簡単な暗号化をしてみましょう。

● 参考ステップ

Step.16 パスワードを暗号化!? してみましょう　※ パスワード関連
Step.35 秘密の裏口をつくってみましょう　※ パスワード関連
Step.79 パスワードを入力してリンクしてみましょうその３　※ パスワード関連
Step.86 英単語のお勉強をいたしましょう　※ prompt

● リファレンス

Q&A 1

[Q]　ウィンドウ内に「スクリプト　プロンプト：」という見出しが付きますが、これは消すことができますか？
[A]　できません。

▲TOP

Q&A 2

[Q]　入力するパスワードによってリンク先を分岐したいのですが
[A]　if 文で対応させてください。

if ( myPassWord == "pass1" ) location.href = "secret1.htm";
else if ( myPassWord == "pass2" ) location.href = "secret2.htm";
else if ( myPassWord == "pass3" ) location.href = "secret3.htm";
else alert( "パスワードが違います!" );

▲TOP

Q&A 3

[Q]　パスワードを間違うと、違うページへジャンプさせたいのですが」
[A]　else 文を変更してください。

if ( myPassWord == "pass1" ){
location.href = "secret.htm";
}else{
location.href = "error.htm";
}

▲TOP

Q&A 4

[Q]　プロンプトではなく、フォームにパスワードを入力して使いたいのですが
[A]　次のようなリストになります。

<script type="text/javascript"></script>

<form name="myFormText">
パスワードを入れてください
<input type="password" size="30" name="myFormTextPass">
<input type="button" value="ＯＫ" onclick="myButton()">
</form>

▲TOP