JavaScript

4 章 変数

4.2 変数の宣言

• 変数は必ず var で宣言する。宣言せずに値を代入した場合、その変数はグローバル変数になる。
• var で変数の初期値を設定しなかった場合は値が代入されるまで undefined になる。
• var で宣言された変数は永続され、delete 演算子で削除できない。

4.3 変数のスコープ

• グローバル変数のスコープはプログラム全体。
• ローカル変数のスコープはその変数が宣言された関数の中。
• 関数の中にグローバル変数と同じ名前のローカル変数があった場合はローカル変数が優先され、グローバル変数は隠される。

var scope = "global";  // グローバル変数
function checkScope() {
  var scope = "local";  // ローカル変数
  alert(scope);
}
checkScope();  // "local"
alert(scope);  // "global"

scope = "global";  // グローバル変数
function checkScope() {
	scope = "local";  // グローバル変数の値を変更
}
checkScope();
alert(scope);  // "local"

var scope = "global";
function checkScope() {
  alert(scope);  // "global" ではなく undefined
  var scope = "local";
  alert(scope);  // "local"
}

4.3.1 ブロックレベルのスコープはない

• ある関数で宣言された変数は、どのブロックで宣言されたのにかかわらず関数全体で有効である。

// i, j, k は scope 関数内で有効である
function scope() {
  var i = 0;
  for(var j = 0; j < 5; j++) {
    document.write(j);
    for(var k = 0; k < 5; k++) {
      document.write(k);
    }
  }
}

4.5 ガーベジコレクション

• JavaScript インタプリタは、オブジェクトが不要になったと判定したら、オブジェクトが使用していたメモリを解放する。

4.6 プロパティと変数は違うのか

• オブジェクトのプロパティと変数は基本的に同じである。

4.6.1 グローバルオブジェクト

• JavaScript インタプリタは、コードの実行前にグローバルオブジェクトを生成する。
• グローバル変数とはグローバルオブジェクトのプロパティである。
• トップレベルコードでは、this はグローバルオブジェクトを参照する。
• クライアントサイド JavaScript でのグローバルオブジェクトは Window オブジェクトである。

4.6.2 ローカル変数は Call オブジェクトのプロパティ

• ローカル変数とは Call オブジェクトのプロパティである。

4.6.3 JavaScript の実行コンテキスト

• JavaScript インタプリタは個々の関数を実行するたびに、新しい実行コンテキストを生成する。
• 関数外部のコードの実行コンテキストでは、グローバルオブジェクトが変数定義に使用される。
• 関数内部のコードの実行コンテキストでは、Call オブジェクトが変数定義に使用される。
• 実装によっては、複数のグローバル実行コンテキストが認められている場合がある（クライアントサイド JavaScript で、ウィンドウがフレームで分割されている場合など）。
• 複数のグローバル実行コンテキスト間で相互に参照できるが、これはセキュリティ上の脅威になりうる。

4.7 変数のスコープの再検討

• 実行コンテキストには、それぞれのコンテキスト毎にスコープチェーンがある。
• スコープチェーンとは、グローバルオブジェクトや Call オブジェクトを並べたもの。
• 変数 x の値を探す時は、スコープチェーンの先頭のオブジェクトから x という名前のプロパティがあるかどうかを確かめる。
• 無ければ次のオブジェクトで探索を続け、見つかるまで探索する。
• 全てのオブジェクトでそのプロパティが存在しない場合は undefined になる。
• 下記のコードで g() 関数内で変数 x の値を探す場合、まず g() の Call オブジェクトのプロパティを探し、無ければ f() の Call オブジェクト、グローバルオブジェクトの順に探索し、グローバルオブジェクトのプロパティ x の値を返す。

var x = 1;
function f() {
  var y = 2;
  function g() {
    var z = 3;
    alert(x);
  }
  g();
}
f();

3 章 データ型と値

JavaScript のデータ型には以下のものがある。

• 基本データ型（数値、文字列、論理値）
• null、undefined
• 複合データ型（オブジェクト、配列）
• 関数

3.2.4 数値から文字列への変換

• 数値は必要に応じて、自動的に文字列に変換される。

var n = 10;
var s = n + "";  // "10"
var t = String(n);  // "10"
var u = n.toString();  // "10"

3.2.5 文字列から数値への変換

• 数値が必要とされる場面で文字列を使用すると、自動的に数値に変換される。

var n = "10" * "5";  // 50
var o = "10" - 0;  // 10
var p = "10" + 0;  // "100"（文字列連結演算子として解釈されるため）

3.3.1 論理値の型変換

• 数値コンテキストでは true は 1 に、false は 0 に変換される。
• 文字列コンテキストでは true は “true” に、false は “false” という文字列に変換される。
• 論理値コンテキストでは 0 または NaN でない数値は true に、0 または NaN は false に変換される。
• 論理値コンテキストでは空文字でない文字列は true に、空文字は false に変換される。
• null や undefined は false に、null ではないオブジェクトや配列、関数は true に変換される。
• 明示的に型変換したい場合は Boolean() 関数を使う。

3.4 関数

• 関数はデータ型の 1 つである。
• あるオブジェクトのプロパティに関数を代入した場合、その関数はそのオブジェクトのメソッドになる。

3.4.1 関数リテラル

function square(x) { return x * x; }  // 関数定義
var square = function(x) { return x * x; }  // 関数リテラル

3.5 オブジェクト

• オブジェクトは連想配列として使用できる。よって image.width と image["width"] は同じ意味となる。

3-7. null 値

• null はオブジェクト型で「オブジェクトがない」という意味を表す特別な値。

3-8. 未定義 (undefined) 値

• 宣言されているが値が設定されていない変数、存在しないオブジェクトプロパティを使おうとすると、undefined 値が返る。
• null 値と undefined 値は異なる値だが、等値演算子で比較した場合は同じ値と見なされる。

(null == undefined)  // true
(null === undefined)  // false

• undefined は予約語ではない。

undefined = 1;
alert(undefined)  // 1

3.10 正規表現

• Perl の構文が使える。

3.14 基本データ型のラッパーオブジェクト

• 基本データ型の数値、文字列、論理値にはそれぞれ Number、String、Boolean というラッパークラスが用意されている。
• オブジェクトコンテキストで文字列を使用する場合、内部的に String オブジェクトが一時的に作成され、アクセスが終わった段階で回収される。

var s = "string";
alert(typeof(s));  // string
var l = s.length;  // length プロパティにアクセスするため、一時的に String オブジェクトが生成されて結果が返る
var S = new String("string");
alert(typeof(S));  // object（オブジェクトは削除されない）

3.14 オブジェクトから基本データ型への変換

• オブジェクトを数値に変換する場合は、まずオブジェクトの valueOf() メソッドが呼び出され、基本データ型の値を返さなかった場合は toString() メソッドが呼び出され、toString() メソッドが返した文字列を数値に変換する。
• コンテキストが曖昧な場合（+ 演算子や比較演算子など）は通常、以下の順序で変換される。
1. オブジェクトの valueOf() メソッドを呼び出す。
2. 基本データ型の値が返った場合はその値を使う。そうでなければ toString() メソッドを呼び出し文字列に変換する。
• 例外として、Date オブジェクトを + 演算子で使うと、toString() メソッドを使って変換される。

3.15 「値による」データ型操作と「参照による」データ型操作

• 原則として、基本型は値により操作し、参照型は参照で操作する。
• 基本型の場合（値によるコピー）

var n = 1;
var m = n;
m = 2;
alert(n);  // 1
alert(m);  // 2

• 参照型の場合（参照によるコピー）

var d1 = new Date(2008, 9, 13);  // 2008/10/13
var d2 = d1;  // d1 オブジェクトへの参照
d2.setDate(1);  // 1 日を設定
alert(d1.getDate());  // 1
alert(d2.getDate());  // 1

• 文字列は不変であり、値によるのか参照によるのかは分からない。
• 文字列は値により比較される。

1 章 JavaScript の概要

特徴

• オブジェクト指向機能を備えたインタプリタ型言語。
• 型付けが弱い。オブジェクトのプロパティに任意の型の値を指定できる。
• オブジェクト指向の継承機能はプロトタイプベース。

2 章 字句構造

2.1 文字コード

• プログラムは 16 ビットの Unicode を使う。

2.2 大文字と小文字

• キーワード、変数、関数名、識別子で大文字と小文字は区別される。

2.6 リテラル

• プログラムに直接記述するデータ値をリテラルという。
• 配列リテラルやオブジェクトリテラルもある。

2.7 識別子

• 変数や関数、ループのラベル等で使用する名前を識別子という。
• 先頭の文字は Unicode 文字、アンダースコア、ドル記号のいずれか。
• その後は Unicode 文字、数字、アンダースコア、ドル記号のいずれか。

通称「サイ本」と呼ばれる、JavaScript 第 5 版を買いました。

JavaScript は理解しているようでなかなか奥が深く、プロトタイプベースのところとか理解できてないのでちゃんと理解して実践に活かしたいと思います。

読み進めながら、このブログにまとめを書いて行こうと思ってます。
なにせ分厚い（671 ページもある）ので、内容に応じてメリハリをつけていこうかと。
1部の JavaScript のコアな部分を重点的に進める予定です。

あと、クイックリファレンスも合わせて購入しました。

JavaScript 第5版
村上 列

JavaScriptクイックリファレンス 第5版―JavaScript1.5対応
木下 哲也 福龍興業

これはなに？

Google Reader でスターを付けた記事をまとめて開くことができる Greasemonkey です。
スター付きアイテムなどを開いた状態で、「o」キーを押すとスター付きの記事を最大 5 件開きます。
開いた記事のスターは消えます。

最近 Google Reader を使うようになったんですが、スターを付けた記事をまとめて開くのがめんどくさかったので作りました。
既に下記リンク先に Greasemonkey はあるのですが、getElementsByTagName などが使われていて Safari では使えなかったので動くようにしました。もちろん Firefox でも動きます。

Google Reader のスターを Livedoor Reader のピンみたいにまとめて開く Greasemonkey - もうゴールしていいブログ

インストール

こちらからインストールしてください。

Google Reader Star Opener – Userscripts.org

ソース

// ==UserScript==
// @name           Google Reader Star Opener
// @namespace      http://www.sukechan.net/
// @description    Starred item open in a lump for Google Reader.
// @include        http://www.google.co.jp/reader/view/*
// @include        http://www.google.com/reader/view/*
// @version        1.0.1
// ==/UserScript==

(function() {
  var MAX_WINDOW_OPEN = 5;

  var onKeyDown = function(event) {
    if(event.keyCode == 79 && !event.shiftKey) {
      var entries = document.evaluate('//div[@id="entries"]//div[@class="entry-container"] | //div[@id="entries"]//div[@class="collapsed"]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
      for(var i = 0, m = MAX_WINDOW_OPEN; i < entries.snapshotLength && m > 0; i++) {
        var entry = entries.snapshotItem(i);
        var stars = document.evaluate('.//div[contains(@class, "item-star-active")]', entry, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
        if(stars.snapshotLength > 0) {
          var star = stars.snapshotItem(0);
          var links = document.evaluate('.//h2[@class="entry-title"]/a | .//div[@class="entry-main"]/a', entry, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
          if(links.snapshotLength > 0) {
            var link = links.snapshotItem(0);
            var win = window.open(link.href);
            if(win && !win.closed) {
              m--;
              var event = document.createEvent('MouseEvents');
              event.initEvent('click', true, true);
              star.dispatchEvent(event);
            }
          }
        }
      }
    }
  }

  document.addEventListener('keydown', onKeyDown, false);
})();

（追記@2008-09-14）
ポップアップブロック等でウィンドウが開かなかった場合にスターを解除しないようにしました。

ポイント

• Google Reader 側の HTML が変更される可能性があるので、メンテしやすくしておく。今回は全て XPath を使用。
• document.evaluate の第 2 引数に document 以外のノードを指定した場合は、// を使うとルートノードから走査されることに注意。第 2 引数は単純に初期位置の指定です。ずっとそのノード以下だけが検索されると思ってました。

参考リンク

• JavaScript: document.evaluateの第2引数に特定のノードを指定したときは頭に/を使ってはいけない - mayokara note