再入門JavaScript: 式と文

制御構造、ループ

if文、do - while文、for文がある。中身の文が一つだけのときは、C/C++と同様、{ } を省略できる。 { } を省略せずに書いているサイト・サンプルが非常に多い。

if文

JavaScript
[POPUP]
  1. x = 1;
  2. // 条件式には () が必要。Cと同じ。
  3. if (x == 1)
  4. document.write('111'); // 1文だけなら{}省略可。Cと同じ。
  5. else
  6. document.write('xxx');

while文

JavaScript
[POPUP]
  1. x = 1;
  2. while (x < 10)
  3. x++; // 文がひとつなら{}省略できる。後置++も大丈夫。
  4. document.write(x);

do - whileもC/C++と同じ。

JavaScript
[POPUP]
  1. var x = 1;
  2. do {
  3. document.write(x, ' ');
  4. } while (++x <= 10);

continue, break文もある。

for文

for文は、次の3つの書き方がある。C/C++風の書き方と、in演算子を使った書き方。2番目の書き方ではvar宣言で関数スコープ(forブロックではない)の変数を宣言できる。

  1. for (式1; 式2; 式3) ...
  2. for (var宣言; 式2; 式3) ...
  3. for (要素 in コンテナ) ...
JavaScript
[POPUP]
  1. function f() {
  2. for (i = 0; i < 3; i++)
  3. document.write(i, ' '); // 0 1 2
  4. }
  5. f();
  6. document.write(i, '<br>'); // 3
JavaScript
[POPUP]
  1. j = 2;
  2. function g() {
  3. for (var j = 10; j < 15; j += 2)
  4. document.write(j, ' '); // 10 12 14
  5. document.write(j, ' '); // 16
  6. }
  7. g();
  8. document.write(j, '<br>'); // 2

for-in文は、オブジェクトのプロパティ名を順に変数に代入し、それで文を実行する。JavaScriptのオブジェクトはただのハッシュなので、keyを得るといえる。

JavaScript
[POPUP]
  1. ary = [1, 3, 5];
  2. for (v in ary)
  3. document.write(ary[v], ' ');

関数定義

関数を定義するには,functionにて次のように書く。

関数宣言
function 関数名 ( 仮引数リスト ) { 本体 }
関数式
function ( 仮引数リスト ) { 本体 }

関数式は関数オブジェクトを生成し、そのオブジェクトを返す。このオブジェクトを変数に代入することもできる (first-class object; 第一級のオブジェクト)。

文法では、関数式にも関数名を指定できるが、単に無視される。

JavaScript
[POPUP]
  1. var g = function foo() { alert('hoge'); }
  2. // foo(); // Error: foo is not defined
  3. g();

後述するが、JavaScriptのメソッドはただの関数。

演算子

演算子の優先順位と結合は次のとおり。

演算子結合
(前置単項) delete void typeof ++ -- + - ‾ !
* / %
+ -
<< >> >>>
< > <= >= instanceof in
== != === !==
&
^
|
&&
||
(3項演算子) ? :
= *= /= %= += -= <<= >>= >>>= &= ^= |=
,

変わっているのは、厳密な比較演算子「===」、「!==」。内容で比較するのは==と同じだが、暗黙の型変換などを行わない。

JavaScript
[POPUP]
  1. function is_eq(x, y) {
  2. document.write(x == y, " ", x === y, '<br>'); }
  3. is_eq('0', false); // true false
  4. is_eq('1', true); // true false
  5. is_eq('a', 'a'); // true true
  6. is_eq(new String('a'), 'a'); // true false

また、>>>は符号なし右シフト。

変数

スコープ、シャドーイング

変数のスコープは、大域スコープと関数スコープしかない。ループのブロックでは新しいスコープは導入されない。

関数定義のなかでのvar宣言で、関数スコープの変数を宣言できる。var宣言は、関数ブロックの先頭で実行されたかのように扱われる。

関数スコープ: var宣言でシャドーイング (shadowing) される。また、varは関数の最初で宣言したとみなされる。

JavaScript
[POPUP]
  1. x = 10;
  2. function f() { var x; document.write("f: ", x); }
  3. function g() { x=15; document.write("g: ", x); var x; }
  4. x = 20;
  5. f(); // undefined
  6. g(); // 15
  7. document.write("global: ", x); // 20

変数への代入

代入「=」は、変数が指すオブジェクトのコピーではなく、変数が指すオブジェクトの切り替えになる。複数の変数からひとつのオブジェクトを参照できる。いまどきのプログラミング言語と同じ。

JavaScript
[POPUP]
  1. x = {f:1};
  2. y = x;
  3. x.f = 2;
  4. document.write(y.f); // 2

変数の束縛の時期

変数の値への束縛は、関数の実行時に行われる。次の例は、関数g()の定義のときに変数xが束縛されるわけではないことを示す。だから、クロージャではない。

JavaScript
[POPUP]
  1. var x = {f:1}
  2. function g() { document.write(x.f); }
  3. x = {f:"hoge"}
  4. g(); // hoge

Coreライブラリ・リファレンス

Internet ExplorerとFirefox / SeaMonkeyでは、実装しているオブジェクト、メソッドにだいぶ違いがある。portableなプログラムを書こうと思うなら、これらの差異を吸収してくれるライブラリを使うのがいい。以下では、共通するオブジェクト、メソッドについて解説する。

Objectオブジェクト

http://www.tohoho-web.com/js/object.htm http://msdn.microsoft.com/library/default.asp?url=/library/en-us/script56/html/d24ef8fc-217b-4828-94e1-19f72780bae0.asp http://developer.mozilla.org/ja/docs/Core_JavaScript_1.5_Reference ○IEでのプロパティ、メソッド

プロパティ

prototype
constructor Property [M]
propertyIsEnumerable Property [Mではメソッド]

メソッド

isPrototypeOf Method [M]
hasOwnProperty Method [M]
toString Method [M]
valueOf Method [M]

Functionオブジェクト

プロパティ arguments [M] callee caller [M] constructor [M] length [M] 引数の数 prototype [M] メソッド apply [M] call [M] toString [M] valueOf [M] ○Mozillaのみ name toSource

windowオブジェクト

navigatorオブジェクト

documentオブジェクト

リンク

prototype.js v1.5.0 の使い方
JavaScriptのライブラリprototype.js の解説(日本語)。