ここでは実用的な JavaScript の関数をいくつかいくつか紹介します。
関数なんてマニアックな、と思うかも知れませんが、これまでも度々述べてきたように JavaScript はHTMLの拡張機能だと考えるのが私の基本的なスタンスであり、 関数は JavaScript の基本機能を更に拡張するものです。JavaScript にはあらかじめ定義されたメソッドと呼ばれる機能がありますが、その多くは基本的なものであり、 関数を定義しておくことによっていくつかのルーチンをまとめて処理したり、定義済みメソッドの不備を補うことが出来ます。 (注:JavaScript では戻り値があってもなくても関数という (^ ^ ;)
1.複数選択リストの値を返す
アンケートなどのフォームではリストボックスがよく使用されます。アンケートを送信すると、リストボックスの選択項目がデータとして送信されますが、 <SELECT MULTIPLE>、つまり複数項目を選択可能にしたリストボックスの場合、なぜか一番最初の選択項目だけが送信されてしまい、選択した複数項目を送信してくれません(バグ?)。
以下の MultiSelect 関数は、選択した複数項目をテキストボックスに渡して送信できるようにしたものです。
- function MultiSelect(L, T) {
- T.value="";
- for(i = 0; i < L.options.length; i++)
- {
- if (L.options[i].selected) T.value += (i + 1) + ":" + L.options[i].text + " ";
- }
- }
<SELECT multiple> の onChange イベントでこれを呼び出します。
- <SELECT multiple name="selector" onChange="MultiSelect(this, fruit)">
- <OPTION value="リンゴ">リンゴ
- ・
- ・
- ・
- </SELECT>
引数のうち this は呼び出し元を表しているので不変です。fruit のところには、選択データを渡すテキストボックスの NAME を入れて下さい。 (Netscape Navigator 3.0x の場合は document.forms[0].fruit のように完全な名前を入れないとエラーになります。)
2.半角英数字記号かどうかを判定
指定の文字が半角英数字記号、つまり日本語IMEを起動せずに入力される文字かどうかを判定します。
- function IsSingleByteChar(Char) {
- var S = escape(Char);
- if (S == Char) return true;
- else if (S.length == 3)
- {
- code = S.charAt(1) + S.charAt(2);
- nm = parseInt(code, 16);
- if (nm > 0 && nm < 127) return true;
- }
- }
下の Check() は、この IsSingleByteChar を応用して、テキストボックス内に半角英数字記号(半角スペースなども含まれる)がいくつあるかを判定しています。 (ボタンをクリックすると Check() を呼び出します。)
- function Check() {
- count = 0;
- str = "";
- for (i = 0; i < document.Hantei.Box.value.length; i++)
- {
}
- str = document.Hantei.Box.value.charAt(i);
- if (IsSingleByteChar(str) == true) count++;
- alert (count+"個見つかりました。");
- }
長くなりましたので、この先は「関数集(その2)」に譲ります。チャオ!