prog*sig

はてな社で行われているインターン講義のUstを見てのメモ。
インターン講義4日目「JavaScript で学ぶ イベントドリブン」 - Hatena::Engineering
Togetter - 「はてなインターン講義「JavaScript で学ぶ イベントドリブン」」
JavaScriptについて

■undefined と null

var foo = null
typeof foo; //=> object
typeof null === 'object'//=> true

nullはobjectな事に注意。

■変数のスコープ：ハマりポイント

var はスコープの先頭に持ってこられるので、ハマってしまう。
変数宣言の位置は規則を持った方がいい。

■JS におけるプロトタイプ (プロトタイプチェーン)

分かりやすい図。
真ん中の上にあるFooが始まり。
prototypeは参照である(コピーでない)。.prototype.を上書きすると迷子になる。

■this について

foo.bar() の foo のことをレシーバという。
thisはレシーバだ。

DOMについて

■空白もノードです

該当コード実行すると分かるが、spanの前に改行のテキストノードが存在するので、TextNodeが返る。
しかしIEはホワイトスペースノードを無視するのでspanが返る。

■続きはリファレンスで

chmなどになったローカル版

• localmdc
• HTMLヘルプ形式のJavaScriptリファレンス「jsref.chm」を公開した。 - こせきの技術日記

仕様書の読み方。仕様書を読み込むとバグの原因が分かる。
http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/

■addEventListener

イベントの一覧
http://esw.w3.org/List_of_events
イベントオブジェクトに渡されるオブジェクトの内容
https://developer.mozilla.org/en/DOM/event

同じ要素に複数イベントを付けた場合は順番を期待しない。

■XMLHttpRequest での POST

params.hasOwnProperty(name) でプロトタイプ汚染の回避。

■JSON をリモートから読みこむ

JSONをevalするのは微妙。
Firefox前提で話してるならJSON.parseとか説明した方がいい気がする。
eval的な感じに

var json = (new Function("return " +  xhr.responseText))();
// via http://twitter.com/cherenkov/statuses/20398938823

■最後

JavaScriptのテストは(今回は)やらなくていい

という偉大な言葉存在する。

課題の1は他の講義と連携してるので
課題2をやってみた

function Timer() {
    this.initialize.apply(this, arguments);
}
Timer.prototype = {
    initialize: function(timems) {
        this.timems = timems;
        this.callstack = [];// 実行イベントをため込む
    },
    addEventListener : function(name ,callback){
        if(name === 'timer'){
            this.callstack.push(callback);
        }
    },
    start : function(){
        var date = new Date();
        var that = this;
        this.timeID = setTimeout(function(){
            for (var i=0,l= that.callstack.length;i < l; i++) {
                var e = {
                    realElapsed : new Date()-date, // 時間の差分
                };
                that.callstack[i].call(that, e)
            }
        } , this.timems);
    },
    stop : function(){
        clearTimeout(this.timeID);
    },
}
var timer = new Timer(1000);
timer.addEventListener('timer', function (e) {
  console.log("timerで呼び出されるイベント複数あり");
});
timer.addEventListener('timer', function (e) {
  console.log(e.realElapsed); //=> 実際に経過した時間
  timer.start(); //=> 再度スタートできる
});
timer.start();

removeEventListenerも加えてみたバージョン。
正直設計が良くない。