作成・body内
処理を呼び出す
特定のイベント(ウィンドウ内をクリックする等)を起点として、JavaScriptの関数を呼び出す方法はいくつかあります。 ここでは、リンクをクリックして関数を呼び出すという動作を目的にしているので、a要素の中からJavaScriptの関数を呼び出す方法に絞って考えます。
a要素からJavaScriptの関数を呼び出す方法には、イベントハンドラを利用する方法と、hrefで関数を指定する方法があります。 両方のやり方について書いていきます。
まず、イベントハンドラを使用する方法について。 イベントハンドラというのは、特定の要素に対して、特定のイベントが生じたときに、JavaScriptを呼び出すものです。 イベントハンドラの記述は、要素の中に、HTMLの属性と同じように記述できます。 今回はクリックしたときに関数を呼び出したいので、「onClick」を使います。
例： <a href="#" onClick="pslock(); return false;"> アクセス制限ページ</a>
onClickの中にはJavaScriptの命令などをそのまま記述することもできます。 今回は関数を呼び出したいので、関数名を記述しています。 なお、このリンクのhref属性ではページの遷移を行いたくないので、ダミーの"#"という値を指定しています。 また、このスクリプトの場合は、ページを移動させることを目的としているため、本来のa要素としての動作をされてしまうと、JavaScriptが有効に動作できない可能性もあります。 それを防ぐため、イベントハンドラにはa要素の動作を停止させる「return false;」を追加しています(一種のおまじないです)。
イベントハンドラを使わない場合は、href属性でJavaScriptを呼び出します。 この書き方をすると、HTML-lintなどにかけるとHTMLの仕様としては望ましいものではないという警告が出るようになりますが、利用できるものは利用してしまっても構わないでしょう。
例： <a href="javascript: pslock();">アクセス制限ページ</a>
この方法でも、問題なくJavaScriptを利用できます。
以上を<body>要素内に記述すれば、パスワードで特定のURLへのアクセスを制限するスクリプトはひとまず完成です。 以下に、すべてのHTMLソースの記述をまとめておきますね。
<html>
<head>
<title>さんぷる</title>
<script type="text/javascript">
<!--
var pswd="open sesami";
var linkurl="http://stillnothing.web.fc2.com/index.html";
function pslock(){
ps=prompt("合言葉を入れてね","");
if (ps==pswd) {location.href=linkurl;}
else {alert("パスワードが違います");}
}
// -->
</script>
</head>
<body>
<a href="#" onClick="pslock(); return false;">
アクセス制限ページ(onClick)</a>
<a href="javascript: pslock();">アクセス制限ページ(href)</a>
</body>
</html>
ソースをテキストにコピー&ペーストして、HTMLとして保存し、ブラウザで開いてみてください。 リンクをクリックすると入力ダイアログが出てきて、「open sesami」と入力すると、このサイトのインデックスページに遷移すると思います。
一応、動作はこれで完成しました。 しかし、この状態では、ブラウザで表示すればわかると思いますが、ソースの表示ですべてのスクリプトが露見してしまいます。 当然、わかる人にはパスワードも発見できるでしょうし、何より移動先URLも表示されているので、このままではザルのようなブロッキングしかできないと言うことになります。 この後は、これをさらに秘匿するための方策を考えていきます。