作成・head内
変数の定義
変数というのは、ある記号の中に特定の内容を収めたものです。 名前のつけられた箱、というように考えるといいかもしれません。 Aという変数を用意して、「A=40」と定義した場合、Aの中には「40」が収められており、スクリプトの中で変数Aを呼び出すと、それは「40」として扱われます。 JavaScriptの場合は、事前に特に定義を行わなくても、いきなり変数を指定することが可能です。 また、型(内容を数値として扱うか、文字列として扱うか)についても、柔軟に対応してくれます。 変数には、固有の名前をつける必要があります。 変数名は、大文字小文字まで区別されるので、大文字小文字まで間違いのないように記述しなければいけません。 また、JavaScript自身が用意した予約語は、変数名として利用することができませんので、注意してください。 なお、同じ名前の変数が重複して定義された場合、最も後に呼び出された定義が上書きされ、有効になります。
ちょっと話が逸れましたが、はじめに変数を定義します。 今回のプログラムでは、入力されるパスワード、正しいパスワード、パスワードがあっていたときに飛ばす先のURLの3つが、変数として使われることが予想できますが、スクリプトを作る段階では「正しいパスワード」と「移動先URL」を定義しておけば十分です。 ここでは、正しいパスワードを入れておく変数を「pswd」、移動先URLを入れておく変数を「linkurl」とします。 その他に出てきそうな変数については、パスワードは後で入力されますし、JavaScriptは事前に定義しなくてもいきなり変数を呼び出せるので、特に先に定義しておく必要はありません。
例：
var pswd="open sesami"; // パスワードの定義
var linkurl="http://stillnothing.web.fc2.com/index.html";
// ジャンプ先のURL
varは、変数やオブジェクトなどに値を代入させる命令文です。 なお、変数に文字列を代入するときは、シングルクォート(')かダブルクォート(")で囲んで、それが変数名ではなく文字列であることを明示する必要があります。
関数の定義
関数というのは、ある一連の処理をまとめて定義したものです。 関数が呼び出されると、その関数の中で定義されている処理が実行されます。 関数は、複数の動作を一度に実行させたいときに定義しておきます。 また、同じ処理を繰り返して行う場合などには、関数でその一連の処理を定義しておくと、便利なときもあります(サブルーチンのように利用できますから)。
ここでは、「リンクをクリックしたときにパスワード入力のダイアログを開く」、「パスワードがあっているかどうかを比較する」、「パスワードがあっているときには、ページを移動させる」という動作を一連のものとして定義します。 関数には、変数と同様に、固有の名前を付けておく必要があります。 関数の名前も、大文字・小文字の区別がされるので、気をつけましょう。 ここで作る関数は、「pslock()」という名前で定義することにします。
例:
function pslock(関数に渡される引数){一連の処理内容}
functionは、関数を定義するときに、関数名の前に記述します。
入力ダイアログを出す
入力ダイアログは、「prompt()」メソッドを利用します。 prompt()メソッドは具体的には、「prompt(ダイアログ上に表示させる内容,入力部の初期値)」のように記述します。 入力されたパスワードを収める変数を「ps」として、その内容を入力ダイアログから入力してもらうように、処理を記述しましょう。
例：
ps=prompt("合言葉を入れてね","");
なお、IEとNetscapeでは入力プロンプトが問題なく表示されると思いますが、Operaの場合、入力プロンプトに日本語が入ると、その文字が文字化けするようです。 入力欄に入れた文字列も日本語だと文字化けする不具合があります。 これは、ブラウザの仕様と思われます。
パスワードと比較する
入力されたパスワードと、設定してあるパスワードとを比較します。 この場合は、条件に応じて処理内容を振り分ける命令が必要になります。 条件に応じた処理の分岐は、「if」文によって行います。 if文は、具体的には「if (条件){条件が真であったときの処理内容}」のように記述します。
条件の設定には、比較演算子を使用します。 比較演算子は、左辺と右辺の値を比較して、その定義の真偽を返します。 比較演算子としては、「==」(両辺が等しい)、「!=」(両辺が等しくない)、「>」(左辺が右辺より大きい)、「<」(左辺が右辺より小さい)、「>=」(左辺が右辺以上)、「<=」(左辺が右辺以下)などがあり、それぞれ条件に適合するときは真を、そうでないときは偽を返します。
ここでは、入力されたパスワード「ps」と設定されている正しいパスワード「pswd」とが等しいかどうかを比較して、それが正しかった場合にはページを移動させる処理を行わせるように記述します。
例：
if (ps==pswd){ページ移動させる処理}
また、このままでも機能はしますが、間違ったパスワードを入れたときには何の表示もなくスクリプトが終了してしまうので、パスワードが違ったことを明示するような処理を挟む方がユーザー側に親切でしょう。 もし条件に合わなかったときに別の処理を行わせたいというときは、「else」文をif文とあわせて使用します。
例：
if (ps==pswd){ページ移動させる処理}
else {パスワードが違ったことを表示させる処理}
もし、いくつかの条件を設定して、条件AのときはAの処理、条件Aには当てはまらないが条件Bには当てはまるときにはBの処理、どちらにも当てはまらないときはCの処理、というように振り分けたいときは、
if (条件A){処理A}
else if (条件B){処理B}
else {処理C}
というように、else文にif文を追加して条件を設定することもできます。 今回はとりあえず必要ありませんね。
ページ移動させる処理
ページを移動させる処理は、「location」オブジェクトを利用します。 locationオブジェクトには、ブラウザが今参照しているページのURLなどについての情報が入っています。 このlocationオブジェクトの中の、「location.href」のプロパティが持っている、今表示しているページのURLを書き換えてやると、ページの移動が行われるようになっています。 その処理を先のif文の中に記述しましょう。
例：
if (ps==pswd) {location.href=linkurl;}
パスワードが違うことの警告ダイアログを開く
警告のダイアログは、「alert()」メソッドによって行います。 このメソッドは、警告のダイアログを前面に開きます。 ダイアログ中に表示したい内容は、括弧内に記述しておきます。 これを、先ほどのelse文の処理の中に入れます。
例：
else {alert("パスワードが違います");}
関数まとめ
一連の関数内の処理は、以上のものですべてです。 まとめておきます。
function pslock(){
ps=prompt("合言葉を入れてね","");
if (ps==pswd) {location.href=linkurl;}
else {alert("パスワードが違います");}
}
まとめると短いものですね(^_^;)。 なお、関数に限らず、JavaScriptの記述は、先に書かれている(上にある)処理ほど先に処理されていきます。 記述する順番を間違えると、意図通りに処理が行われない場合もありますので、注意しましょう。
記入
以上のスクリプトは、ページが読み込まれたとき、すぐに参照されるように、<head>タグ内で定義してしまいましょう。 JavaScriptの定義は、<script>タグで行います。 具体的には以下のように書きます。
<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>
script要素の開始タグ内にある「type="text/javascript"」は、HTML 4.01の規格に則した書き方でスクリプトの内容がJavaScriptであることを明示するものです。 他に「language="Javascript"」と記述しても良いでしょう。 後者の場合は、JavaScriptのバージョンまで指定できるので、ブラウザに実装されているJavaScriptのバージョンが、記述内容のスクリプトのバージョンと違って実行できない(原因不明のエラーが出る)、というような事態を避けるにはそちらの方が良いかもしれません(JavaScriptのバージョンの変遷が理解できていれば…私には無理)。
また、スクリプト全体を「<!-- -->」で囲ってHTMLのコメントアウトをしているのは、スクリプト要素に対応していないブラウザで、スクリプトのソースが表示されてしまうことを避けるためです。 加えて、HTMLのコメントアウト部分の終了部を「// -->」としてあるのは、「//」がJavaScriptのコメントアウトで、「-->」がスクリプトとして解釈されてエラーを起こすことを防ぐためです。 これは一応セオリーとして覚えておくといいと思います。 しかし、うまいこと考える人もいたもんですねえ(感心)。