JavaScript プログラミング
前へ 目次へ 次へ 

　７．変数の有効範囲

　ここまで、値(データ)を一時的に記憶しておく変数を当然のように使ってきた。ここで、あらためて変数について説明する。また、値を記憶できる隠しフィールドについても説明する。

(1) 変数と配列
　まずは、変数名（変数の名前）について、次にまとめておく。

変数名 ・半角英数字とアンダーバー(＿)を使うことができる。
・変数名の先頭は半角英字でなければならない。
・大文字と小文字は区別される。
・ifやforなどの予約語は使えない。

　変数は初めて使ったとき、すなわち変数に値が格納されたときに用意される。

abc = 123;    //変数abcが用意される。値は123。

　値を格納する前に変数を用意するには、varで変数宣言をする。

var abc;    //変数abcが用意される。値はなし。

　変数を初めて使うときに次のように書いてもよい。

var abc = 123;    //変数abcが用意される。値は123。

　配列はArrayオブジェクトで用意する。

xy = new Array(5);    //配列xy[0]〜xy[4]の5個が用意される。
aa = new Array("A","B","C","D","E");    //配列aa[0]〜aa[4]の5個が用意される。
bb = new Array(1,2,3);    //配列bb[0]〜bb[2]の3個が用意される。
cc = new Array();    //配列ccは使っただけ用意される。

　二次元配列は次のようにして用意する。

xx = new Array(3);
for(n = 0; n < xx.length; ++n)
    xx[n] = new Array(5);

　配列xx[0][0]〜xx[2][4]の15個(3×5)が用意される。


(2) ローカル変数とグローバル変数
　本題の変数の有効範囲について見てみる。

　ローカル変数
　関数の中でvarを使って宣言された変数は、関数が呼び出されて変数が初めて使われたときに用意され、関数の処理が終了したときに破棄される。このように関数が処理中の間だけ存在する変数をローカル変数という。
　関数の中でvarを使わないで宣言した変数は次に説明するグローバル変数となる。

!!これはエラーになる  HTMLリスト　[[jsrei10.html]]!!
<HTML>
<HEAD>
<TITLE>ローカル変数</TITLE>
</HEAD>
<BODY><SCRIPT language="JavaScript">
<!--
function rei(){
    var xx;      //変数xxが用意される。
    ++xx;        //※1
    return(xx);
}              //変数xxは破棄される。
//-->
</SCRIPT>
<P>ローカル変数</P>
<SCRIPT language="JavaScript">
<!--
document.write(rei() + "<BR>");
document.write(rei() + "<BR>");
//-->
</SCRIPT></BODY>
</HTML>

　上のリストでは変数xxが用意されるタイミングと破棄されるタイミングを示している。ただし、これをWebブラウザで表示しても※1の部分でエラーになる。直前の行で変数xxを宣言しているが値は記憶されていない。すなわち、変数xxの値は未定のままである。この状態で1加算する演算を行おうとするためエラーになる。

　グローバル変数
　関数の外で宣言された変数は、ページまたはファイルが読み込まれたあとに用意され、別のページに移動したときに破棄される。このようにページが表示されている間だけ存在する変数をグローバル変数という。

HTMLリスト　[[jsrei10b.html]]

<HTML>
<HEAD>
<TITLE>グローバル変数</TITLE>
</HEAD>
<BODY><SCRIPT language="JavaScript">
<!--
var xx = 0;    //変数xxが用意される。初期値は0。　xx=0; でもよい。
function rei(){
    ++xx;
    return(xx);
}
//-->
</SCRIPT>
<P>グローバル変数</P>
<SCRIPT language="JavaScript">
<!--
document.write(rei() + "<BR>");  //*1 関数rei呼び出し
document.write(rei() + "<BR>");  //*2 関数rei呼び出し
//-->
</SCRIPT></BODY>
</HTML>

　ページが読み込まれた後、変数xxが用意され値0が格納される。このページが有効な間、変数xxは存在する。
　*1の関数呼び出しで変数xxに1加算された値が得られる。ここで、document.writeによって1と表示される。*2の関数呼び出しで現在1の値を持つ変数xxに1加算された値2が得られ、2と表示される。

　変数は基本的にグローバル変数である。ローカル変数にする場合だけ特別に宣言が必要になる。
ローカル変数 　関数が処理中の間だけ存在する変数。
　関数の中でvarを使って宣言する。
グローバル変数 　ページが表示されている間だけ存在する変数。
　関数の外で宣言する。
　関数の中でvarを使わないで宣言する。


(3) 隠しフィールド
　グローバル変数以外で、ページが表示されている間、値を記憶しておけるものにページに配置した1行テキストなどのオブジェクトがある。しかし、処理の途中で一時的に保存したい値がページに表示されては都合が悪い。また、ページのレイアウトもくずれてしまう。
　このようなときに、利用できるのが隠しフィールドである。次のように、1行テキストなどと同じように<INPUT>タグで用意する。1行テキストのtype属性が"text"であったのに対して、隠しフィールドのtype属性は"hidden"とする。

<INPUT type="hidden" name="kakusu" value="789">

　ホームページビルダーでは、フォーム(点線の四角)内の部品のないところへカーソルを移動してフォームの属性を変更するダイアログ（下図）を開く。

　隠しフィールドタブをクリックし、名前(name属性)と値(value属性)を設定し、［登録］ボタンをクリックする。値を変更する場合は変更したい名前をリストから選び、変更後に［置換］ボタンをクリックする。

　隠しフィールド設定後は、1行テキストなどのオブジェクトと同じようにプログラム内で参照することができる。例えば、クイズの答えやパスワード(ちょっとヤバイ)のように見られたくない値を設定しておくことができる。ただし、HTMLソースを見られるとすぐにわかってしまう。

問題　1行テキストに入力したパスワード（文字列）が一致しているかどうかを表示する。

　パスワードの文字列は"password"とし、パスワードは隠しフィールドに設定する。
　隠しフィールドの名前はpasswdとする。1行テキストの名前はindataとする。
　パスワードのチェックは関数chkpwで行い、結果の表示にはalertを使う。

サンプル
パスワード


前へ 目次へ 次へ 
 JavaScript プログラミング Copyright © 2003 Hiroshi Masuda 

 

 

inserted by FC2 system