これは、リンク先のページにパスワードを入力しないと
進めないようにするものです。
そのために今回は、パスワード入力画面へ移動するための
ＨＴＭＬとパスワード入力画面の２つの"ＨＴＭＬ"を利用します。

注意事項
(必ずお読みください)

色で書かれた文字は同色で書かれた同じ名前を使用するということです。
確認をクリックすれば実際の動きを見られます。
確認後はブラウザの "戻る" ボタンで戻ってください。

確認

pass1.html

  1. <HTML>
  3. <HEAD>
  5. <TITLE>Password1</TITLE>
  7. <SCRIPT LANGUAGE="JavaScript">
  8. <!--
  9. 　　function kakunin(){
  10. 　　　　result = confirm("この先へ行くにはパスワードが必要です。
    \n\r入力画面へ移動しますか？");
  11. 　　　　if (result==true){
  12. 　　　　　　document.location.href = "secret/pass2.html"
  13. 　　　　}
  14. 　　}
  15. //-->
  16. </SCRIPT>
  18. </HEAD>
  20. <BODY>
  22. <CENTER>
  23. この先へ行くには下のボタンをクリックしてください。
  24. <BR><BR>
  25. <FORM>
  26. <INPUT TYPE="button" VALUE="Click Me!" onClick="kakunin()">
  27. </FORM>
  28. </CENTER>
  30. </BODY>
  32. </HTML>

pass2.html
  1. <HTML>
  3. <HEAD>
  5. <TITLE>Password2</TITLE>
  7. <SCRIPT LANGUAGE="JavaScript">
  8. <!--
  9. 　　function jmp(f){
  10. 　　　　if (document.MyPW.value==""){
  11. 　　　　　　alert("パスワードが入力されていません");
  12. 　　　　}
  13. 　　　　else{
  14. 　　　　　　w=window.open (f.MyPW.value+".html","wind1","SCROLLBARS=1,RESIZABLE=1,TOOLBAR=1,MENUBAR=1,LOCATION=0,DIRECTORIES=1,STATUS=1");
  15. 　　　　}
  16. 　　}
  17. //-->
  18. </SCRIPT>
  20. </HEAD>
  22. <BODY>
  24. <CENTER>
  25. <FONT SIZE=2><B>下のテキストボックス内にパスワードを入力してください。
  26. <BR>
  27. 入力終了後に ”GO!” をクリックしてください。
  28. ”リセット”を押せば入力したものがクリアされます。
  29. <BR></B></FONT>
  30. <FORM NAME="MyForm">
  31. <INPUT TYPE="password" NAME="MyPW" SIZE=50><BR><BR>
  32. <INPUT TYPE="button" NAME="MyButton" VALUE="　GO!　" onClick="jmp(this.form)">
  33. <INPUT TYPE="reset" VALUE="リセット">
  34. </FORM>
  35. </CENTER>
  37. </BODY>
  39. </HTML>

N038Dv3j.html
  1. <HTML>
  2. <HEAD>
  3. <TITLE>SECRET</TITLE>
  4. </HEAD>
  5. <BODY>
  6. |
  7. |このページがパスワード保護されます。
  8. |
  9. </BODY>
  10. </HTML>

プログラムの説明です。< >で囲まれた部分は、行番号を
表しています。また、クリックすればその行へジャンプします。

pass1.html
<10>
 "この先へ行くにはパスワードが必要です。\n\r入力画面へ移動しますか？"
は適当に変えてください。("\n\r"は改行のためのコードです)
また、2行にわたっていますが必ず1行に書いてください。
行番号が変わっていないのに改行している部分です。
<11-13>
 OKを押したときの処理
<12>
 OKを押したときに移動するURL("secret/pass2.html")は適当に
変えてください。

pass2.html
<10>
 パスワード入力欄が空白だった場合は警告を出し、
文字が入力されていればそれを元にジャンプします。
<14>
 新しい窓を開く処理
".html" の部分は､パスワード保護されたページの拡張子です。
場合によって ".htm,.txt" 等に変えてください。
また、2行にわたっていますが必ず1行に書いてください。
行番号が変わっていないのに改行している部分です。

N038Dv3j.html
<N038Dv3j.html>
 このHTMLのファイル名がパスワードとなります。
また、ファイル名の 大文字、小文字 は区別されます。
パスワードは、 半角英数字のみ８文字 以内にすることを
進めます。これはあらゆるプラットフォームに対応させるためです。
<3>
 タイトルは必ず書いてください。
これを書かないとWindowにURLが表示されてしまいます。



back