プログラミングTips for JavaScript

　このページでは、JavaScriptを利用する上で有用なプログラミングTipsをご紹介いたします。
　ディスカバリーシステムのホームページは、Internet Explorer，Netscape Navigator，Opera にて正しく動作するように設計されておりますので、以下にご紹介するプログラミングTipsも同様と考えていただいて結構です。
　まだまだ内容薄ですが、少しずつでも増やしていきたく思いますのでどうぞお役立て下さい。
　サンプルとして記述しているスクリプトは自由に再利用して頂いて結構です。
　ただし、細かい例外チェックなどは省いておりますのでご注意ください！

インデックス

変数について

☆　変数の種類
　JavaScriptで扱う変数には、Number（数値）、String（文字列）、Boolean（真偽）、Object（オブジェクト）、Date（日付）、Function（関数）、Array（配列）などの種類（型）があります。しかし、C言語などとは異なり宣言時に型を決める訳ではないので、見かけ上はその変数が何型なのかは分かりません。また、ある変数が現在String型であっても、後に数値を代入すればNumber型に変化してしまうので注意が必要です。
// 変数の作成・定義例
var num = 10; // 数値
var str = "10"; // 文字列
var bool = true; // 真偽
var img = new Image(); // オブジェクト（画像）
var dt = new Date("2003/1/15"); // 日付
var fun = new Function("alert(arguments[0])"); // 関数
var ar = new Array("abc", "efg", "hij"); // 配列

// 変数の型変化の例
var cnv = 5; // 数値で定義
cnv = new Image(); // 以降、'cnv'はオブジェクト型になってしまう
var result = cnv + 10; // 当然これはエラーになる！
　上記のように、数値や文字列は変数の初期化に明示的に 'new' を使う必要はありませんが、日付や配列は 'new' を使って初期化します。
☆　「var」って
　「変数の種類」に出てきた 'var 〜' 、これはなんでしょう？
　プログラムをされる方はご存知だと思いますが、変数にはグローバル変数とローカル変数があります。'var' を付けて変数を定義するとローカル変数になります。
　ローカル変数の場合、その変数の定義された関数内のみで有効な値をとることができます。逆に、グローバル変数はWebページ内で全体で有効です。ただし、Webページ内の関数でない部分で定義されたローカル変数はグローバル変数扱いになります。
　JavaScriptはどこでも変数が定義できて便利（勝手に？）なのですが、そこに落とし穴がある場合があります！
// グローバル変数とローカル変数の違いの検証
<SCRIPT language="JavaScript">
<!--
var valG = 5; // グローバル用のグローバル変数を定義
var valL = 5; // ローカル用のグローバル変数を定義
function global(){ // 書換え関数（グローバル）
  valG = 10; // var を使わない
}
function local(){ // 書換え関数（ローカル）
  var valL = 10; // var を使う
}
function glOutput(ed, val){ // 出力関数（val = valG or valL）
  ed.value = val;
}
//-->
</SCRIPT>
グローバル：  ⇒   結果：
ローカル：  ⇒   結果：
　上記の結果はどうなりましたか？書換え前の出力は双方とも '5' なのに対して、書換え後の出力はグローバルの方だけ '10' になったと思います。これは、'local()' 関数内の 'valL' がローカル変数として新たに確保されたためです。
　要するに 'var' とは明示的に変数を（再）定義する役割をもっています。意図しない変数の書換えを防ぐためにも、できるだけ 'var' を使用した方が良いと言えるでしょう。
　'var' の厳密な解釈はブラウザによって若干異なりますが、上記例は主なブラウザで動作確認済みです！
☆　オブジェクトに新規プロパティを付加する
　プロパティとは、オブジェクトが固有に持つ変数のことで、element.name の 'name' などがこれに当たります。
　ちなみに、オブジェクトが固有に持つ関数はメソッドと言い、element.focus() の 'focus()' がこれです。
　ほとんどのオブジェクトは規定のプロパティを持ち自動的に値が設定されているので、ユーザーはそれを参照/設定することでWebページを操作します。
　しかし、プロパティも変数であることに変わりないので新たに定義可能なのです！極端に言えば、フレームなどにもプロパティを追加することだってできちゃいます．．．
// メニュー専用フレームに選択インデックスを割り当てる（極端な例です）

// ボディ側（ロード時）
top.MENU_FRAME.selectIndex = 4; // 選択インデックスの書換え（定義）

// メニュー側（タイマー）
var nowIndex = -1; // 現在のインデックス
function checkIndex(){ // タイマー関数
  if (nowIndex != window.selectIndex){ // インデックスが変わっていれば以下を実行
    nowIndex = window.selectIndex;
    changeSelect(); // 画像のすり替えなどの処理をする
  }
}
　上記の例はフレームという公的（みんなが使う？）なものに変更を行っているので、他人に迷惑をかけないためにもあくまで例題だと理解してください！
　実行すると、ボディ内のリンクでページが変わってもメニューに反映させる事ができます。
☆　2次元配列を扱う
　Array（配列）は複数の要素を持つことのできる型で、添字 [x] を使うことで各要素にアクセスできます。
　さらに、各要素にはどんな型の変数でも割り当てる事ができます。
　ということは、あるArrayの構成要素にArrayを割り当てることもできるはずです！
// 日本語・英語の曜日データを作成する。
<SCRIPT language="JavaScript">
<!--
var arWeek = new Array(0); // 曜日データを格納する配列変数を定義（空）
arWeek[0] = new Array("日", "月", "火", "水", "木", "金", "土"); // 0番目の要素に日本語配列を割当て
arWeek[1] = new Array("Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat"); // 1番目の要素には英語を...

function changeLanguage(){ // 書換え関数（言語選択変更後）
  var sel = document.weekForm.languageCB.selectedIndex; // 選択された言語インデックス
  for(var i = 0; i < 7; i++){ // 曜日数でループ
    document.weekForm.weekCB.options[i].text = arWeek[sel][i]; // テキスト変更
  }
}
//-->
</SCRIPT>
言語の選択： 曜日：
　上記の例で2次元配列の作り方は分かると思います。また、2次元配列へのアクセスですが添字を重ねる [x][y] だけでOKです。
　もし2次元配列を使わなければ、ループ内で 'sel' の評価による振分けが必要になりますが、上のようにすればどんなに言語数を増やしても1行で処理する事ができます。
　さらに、これを応用すればｎ次元配列も簡単に作成できます。
☆　連想配列を扱う
　Perlなどをやっておられる方はお馴染みかと思いますが、連想配列とは添字に数値 [x] ではなく文字列 ['abc'] を使った配列のことです。...とはいっても配列には変わりないので定義やアクセスの方法は何ら変わりません！
　連想配列のメリットはターゲットを絞り込んで配列要素にアクセスできることでしょう。普通の配列では、要素の検索にループを用いなければならず処理速度が安定しません。
　ただし、注意しなければならないのは添字に使う文字列に重複がないデータしか扱えません。重複があると意図しないデータの上書が発生するからです。例えば、住所録データを作る際、名前を添字にしたいところですが、実際は電話番号やメールアドレスを使った方が良いということです。
// 住所録を検索する。
<SCRIPT language="JavaScript">
<!--
var arAddr = new Array(0); // 住所データを格納する配列変数を定義
arAddr['0545-64-1234'] = new Array("織田　信長", "おだ　のぶなが", "259-8643", "安土桃山城507号室");
arAddr['06-6873-2236'] = new Array("豊臣　秀吉", "きのした　とうきちろう", "537-0023", "大阪城黄金の間");
arAddr['013-973-2469'] = new Array("徳川　家康", "とくがわ　いえやす", "937-0930", "江戸城大奥桜の間");

function searchAddress(){ // 検索開始
  var tel = document.addrForm.telED.value; // 検索用電話番号を取得
  if (arAddr[tel]){ // 住所データを発見！
    document.addrForm.rubiED.value = arAddr[tel][1]; // ふりがな表示
    document.addrForm.nameED.value = arAddr[tel][0]; // 名前表示
    document.addrForm.postalED.value = arAddr[tel][2]; // 郵便番号表示
    document.addrForm.addrED.value = arAddr[tel][3]; // 住所表示
  } else { // 発見できない！
    document.forms['addrForm'].elements['rubiED'].value = "";
    document.forms['addrForm'].elements['nameED'].value = "";
    document.forms['addrForm'].elements['postalED'].value = "";
    document.forms['addrForm'].elements['addrED'].value = "";
    alert("「 " + tel + " 」の人は登録されていません！"); // エラーメッセージを表示
  }
}
//-->
</SCRIPT>
電話番号検索   ⇒   ふりがな：
なまえ：
郵便番号：
住所：
　ちなみに、エラーの部分のフォームへのアクセス方法が今までと違う書き方になっていることに気付きましたか？
　実は、name属性の付いたオブジェクトは連想配列で定義されているのです．．．

ＯＳ・ブラウザの判別

☆　ブラウザを判別する
　ブラウザによって異なる処理を行いたい場合、事前にページを開いているブラウザを判別する必要があります。
　JavaScriptでは、それを簡単に行うことができる関数（プロパティ）が用意されています。
　まず、'navigator'オブジェクトの'appName'プロパティで、ここにはブラウザ名を表す文字列が格納されています。たとえば、IEの場合は'Microsoft Internet Explorer'です。
　次に、'navigator'オブジェクトの'appVersion'プロパティで、ブラウザのバージョン番号と続けて（その他の付加情報）が格納されています。
　これらの文字列を調べて場合分けすれば、大体うまくいきます。
// ブラウザの判別
<SCRIPT language="JavaScript">
<!--
function distinguishBrowser(){
  var browser = navigator.appName; // ブラウザ名を取得
  if (browser.length > 0){
    checkBrowser.nameED.value = browser;
  } else {
    checkBrowser.nameED.value = "不明";
  }

  var version = navigator.appVersion; // ブラウザバージョンを取得
  if (version.match(/^([0-9\.]+).+/i)){ // バージョン番号のみ抽出
    checkBrowser.versionED.value = RegExp.$1;
  } else {
    checkBrowser.versionED.value = "不明";
  }

  if (version.match(/^[0-9\.]+ (\(.+\))$/i)){ // 付加情報のみ抽出
    checkBrowser.otherED.value = RegExp.$1;
  } else {
    checkBrowser.otherED.value = "";
  }
}
//-->
</SCRIPT>
    ブラウザ名：
  バージョン：
（付加情報）：
　各情報を取得した後の文字列走査と判定にはいろんな方法がありますが、上記例では正規表現を使っています。
　この手法だとIEのバージョンが'6.0'などの場合でも、'4.0'になると思います。この対処については、次の項目を参照してください。
☆　ＯＳ・ブラウザを詳細に判別する
　前の項目の最後で触れたように、ブラウザのバージョンが正しく取得できなかったり（正確にはMozillaのバージョンが返されているようです・・・）、Operaなどのようにブラウザ側で変更できたりして、意図したものが得られない場合があります。このような場合は、'navigator'オブジェクトの'userAgent'プロパティを使用します。このプロパティには、ブラウザごとに独自の文字列が割り当てられており、これを解析することでプログラマー自らOS・ブラウザ判別する'appName'，'appVersion'のカスタム関数を作成しようということです。
　たとえば、'Mozilla/4.0 (compatible; MSIE 6.0; Windows 98)'というような文字列だったとすると、OSは'Windows 98'，ブラウザはMSIEから'Internet Explorer'，バージョンは'6.0'と判断できます。しかし、現実的にはこんなに単純に判断できるわけではなく、また、どんなブラウザがどんな文字列を返すのかを広範囲にわたって知っておかなければなりません。これについては、下記のサイトにて情報が公開されておりますので参照してください。
http://www.futomi.com/ 　
　このサイトではライブラリも公開されているのですが、『Perl』版ですので『JavaScript』版にしてWindows XPなど未対応部分の修正を加えたものをダウンロードできるようにしましたのでご利用ください。
　また、このスクリプトを使った当サイト内のページも参考までにご覧ください。


   トップ ｜ プロフィール ｜ ユーザーサポート ｜ リンクについて ｜ 著作権・免責事項   
Copyright (C) 2002 Discovery System. All Rights Reserved.