JavaScript基本的な記述　その3

JavaScript

引き続き、JavaScriptの基本的な記述です。
以下、ソース。

parameter

<html>
<head>
<meta charset="UTF-8">
<title>オンマウスイベント | parameter</title>
<script>
  function showMsg(str){
	  msg = "あなたは「"+ str +"」をクリックしました。";
	  confirm(msg);
  }
</script>
</head>

<body>
<p>「はい」か「いいえ」をクリックしてください。</p>
<p><input type="button" value="はい" onClick="showMsg('はい');"></p>
<p><input type="button" value="いいえ" onClick="showMsg('いいえ');"></p>
</body>
</html>

password認証　その1

htmlファイルを2つ作ります。

まず、パスワード入力を求めるページ。

<html>
<head>
<meta charset="UTF-8">
<title>パスワード認証</title>
<script>
  function password() {
	  var PASS = prompt('半角英数字で入力してください。');
	  location.href = PASS+'.html';
  }
</script>
</head>

<body>
  <form>
    <input type="button" value="メンバーページへ" onClick="password()">
  </form>
</body>
</html>

続いて、パスワードを入力した結果表示されるページ。
こちらは普通のhtmlページです。

<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptによるメンバーページの入り口</title>
<style>
ul {
  list-style: none;
  margin: 50px;
  padding: 0;
}
li {
  margin: 0;
  padding: 0;
  float: left;
}
</style>
</head>

<body>
  <p>ようこそ。メンバーページへ</p>
</body>
</html>

location.href = PASS+'.html'
なので、結果ページのページ名＝パスワードです。

password認証　その2

先程のとほとんど同じなのですが、
今度はパスワードを求めるリンクが付いているページから
作っていきます。

まずはパスワードを求める画面を出すページ。
ここにJavaScriptを記述します。

<head>
<meta charset="UTF-8">
<title>パスワード認証</title>
<!-- <script>
  function password() {
	  var PASS; //verは無くても良い。
  }
</script> -->
<script>
  PASS = prompt('半角英数字で入力してください。');
  location.href = PASS + '.html';
</script>
</head>

<body>
</body>

bodyは空っぽで構いません。

続いて、パスワードを求めるポップアップを出す為のページ。

<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptによるメンバーページの入り口</title>
<style>
ul {
  list-style: none;
  margin: 50px;
  padding: 0;
}
li {
  margin: 0;
  padding: 0;
  float: left;
}
</style>
</head>

<body>
  <p><a href="pass.html">メンバーページへ移動</a></p>
</body>
</html>

まぁ、普通にアンカーでリンクを貼るだけなのですが、
この時のリンク先は先程作ったJavaScriptを記述したページです。
今回はpass.htmlという名前にしています。

続いて、パスワードを入力した結果表示されるページ。

<html>
<head>
<meta charset="utf-8">
<title>JavaScriptによるメンバーページの入り口</title>
<style>
ul {
  list-style: none;
  margin: 50px;
  padding: 0;
}
li {
  margin: 0;
  padding: 0;
  float: left;
}
</style>
</head>

<body>
  <p>ようこそ。メンバーページへ</p>
</body>
</html>

普通のページですね。

今回もこのページの名前＝パスワードです。
その1もそうですが、パスワードに.htmlはいらないですからそこは注意。

ではでは、今回はここまで。