JavaScript Tips

JavaScript

JavaScriptの文法は、Java/C言語と比較してどう違うのかをまとめてみた。


使用方法

簡単なデバッグ方法

  • Firefoxの［ツール］-［エラーコンソール］を使ってデバッグする。
  • ページ読み込み中なら、document.write()を使ってブラウザ上に表示する。
  • alert()を使って、alertウィンドウに表示する。
  • window.statusに値を代入し、ステータスバーに表示する。ただし、Firefoxでは［ツール］-［オプション］-［コンテンツ］-JavaScriptの［詳細設定］-［ステータスバーのテキストを変更する］に設定が必要。
alert("a=" + a);
window.status = x + ", " + y;



script要素を「<!--」「//-->」で囲む必要はない。

<script type="text/javascript">
    ：
</script>

<script type="text/javascript" src="*.js"></script>



イベント属性を使うときはmeta要素を記述する。

<meta http-equiv="Content-Script-Type" content="text/javascript">
    ：
<input type="button" value="クリック" onclick="alert('こんにちは')">



変数と計算

整数と実数は区別されない。


「==」と「===」、「!＝」と「!==」の違い

  • 「==」や「!=」では自動的に型の変換が行われる。
  • 「===」や「!==」では型の変換が行われないので、厳密に比較できる。



ローカル変数が有効なのは関数内だけ。{ }のブロック内ではローカル変数にならない。


関数

argumentsというオブジェクトを使用して、引数の数が不定な関数を作れる。

function sum() {
    var total=;
    for(i=0; i < arguments.length; i++)
        total += arguments[i]
    }
    return tatal;
}
total = sum(1, 2, 3, 4);



関数の参照を変数に代入したり、別の関数の引数として渡せる。

function mul(a, b) { return a * b; }
function div(a, b) { return a / b; }
if(opt == 0) f = mul;
else         f = div;
n = f(2, 3);



オブジェクト

連想配列の添字はプロパティと同義である。

dogs = new Array();
dogs["太郎"] = "柴犬";
dogs["ゴンスケ] = "ダックスフント"];

dogs.太郎 = "柴犬";
dogs.ゴンスケ = "ダックスフント"];



連想配列のすべての要素にfor-in文でアクセスできる。

for(name in docs) { … }



with文で、プロパティのネストを簡略化できる。

<img name="icon" src="icon1.gif">
<script type="text/javascript">
with(document.images["icon"].style) {
    position = "absolute";
    left = "200px";
    top = "30px";
}
</script>



ReqExpオブジェクトで正規表現を扱う。

  • 簡略化した書き方ができる。
  • 複数マッチしたときには、$1,$2というプロパティで一致した部分を取り出せる。
re = /MSIE (\d\.\d)/;
if(navigator.userAgent.match(re))
    document.write("IEのバージョンは、" + RegExp.$1 + "です。");
else
    document.write("IEではありません。");



Objectオブジェクトで、自作のオブジェクトを作れる。

  • プロパティもメソッドも同義なので、同じ簡略化した書き方ができる。
book1 = {
    title: "HTML入門",
    price: 1580,
    withTax: function () { return this.price * 1.05; }
};



自作のオブジェクトで、toStringメソッドやvalueOfメソッドを上書きできる。


クラス変数やクラスメソッドで、静的なプロパティやメソッドを定義できる。

function Fx() { }

// クラス変数
Fx.USD = 123;
// クラスメソッド
Fx.USDtoJPY = function(usd) {
    return usd * Fx.USD;
}



prototypeで、メソッドをライブラリ化できる。

  • prototypeメソッドでは、thisが使える。
Book.prototype.withTax = function() {
    return this.price * 1.05;
};
    ：
total = book1.withTax();



自分が作成していないオブジェクトにもプロパティを追加できる。


プロパティはオブジェクトの外から変更できてしまうので、変更されたくない場合はローカル変数を使う。

  • 関数の中に関数があるとき、内側の関数（クロージャ）は外側の関数のローカル変数を維持している。

以下の例では、コンストラクタ関数Book()を抜けた後でも、クロージャgetTitle()によってローカル変数titleにアクセスが可能である。

function Book(t, p) {
    var title = t;
    this.getTitle = function() {
        return title;
    }
}



in演算子でオブジェクトに該当プロパティがあるかを調べる方法

if("price" in book1)



オブジェクトの判別方法

if(book1 instanceof Book)
  • constructorを使う。
if(book1.constructor == Book)