Hatena::ブログ(Diary)

Higé au lait Twitter

 | 

2007年11月30日

innerHTML

HTMLタグ が

Firefox -> 小文字で。

Opera, Konqueror -> 大文字で。


Konqueror って document.evaluate ないのか…。

誰が使うんだろうかこれ?

function $$(sel) {
    var self = this;

    var type = /^#(\w+)$|^\/\/(.*?)$|^\.(\w+)$|^(\w+)$/;
    sel.replace(type, function($0, $1, $2, $3, $4) {
        if($1) {
            self.elm = [];
            self.elm.push(document.getElementById(sel.replace('#', '')))
        } else if($2) {
            self.elm = [];
            var x = document.evaluate(sel, document, null, XPath.ORDERED_NODE_SNAPSHOT_TYPE, null);
            for(var i = 0; i < x.snapshotLength; i++) {
                self.elm.push(x.snapshotItem(i));
            }
        } else if($3) {
            self.elm = [];
            var tmp = document.getElementsByTagName('*');
            var class = sel.replace(/^\./, "")
            for(var i = 0; i < tmp.length; i++) {
                if(tmp[i].className == class) {
                    self.elm.push(tmp[i]);
                }
            }
        } else if($4) {
            self.elm = document.getElementsByTagName(sel)
        }
    });

    this.e2a();
    return this;
}

$$.prototype.e2a = function() {
    this.length = this.elm.length;
    for(var i = 0, len = this.length; i < len; i++) {
        this[i] = this.elm[i];
    }

    this.first = this[0]
    this.end = this[this.length - 1]
}

$$.prototype.each = function(func) {
    for(var i = 0; i < this.length; i++) {
        func(this[i]);
    }
    return this;
}

$$.prototype.filter = function(func) {
    this.elm = [];
    for(var i = 0; i < this.length; i++) {
        if(func(this[i])) {
            this.elm.push(this[i]);
        }
    }
    this.e2a();
    return this;
}

var $ = function(x) {
    return $[x] || ($[x] = new $$(x));
}

使いかた

$('p').each(function(i) {
    i.style.background = '#000'
} // p要素全ての背景を黒に

$('#hoge')[0] // id が hoge の要素を。 

$('.fuga').filter(function(i) {
   return i.tagName == 'P';
}).each(function(i) {
   i.style.color = 'blue';
} // class が fuga で P 要素であれば 文字色を青に。

$('//p') // xpath も使える。

気が向いたら拡張する。 なんか for ループばっかで気持ち悪い。

おまけ: デバッグ用

function log() {
    var res = Array.apply(null, arguments).join(", ")
    if(window.opera) {
        opera.postError(res);
    } else if (window.console) {
        console.log(res);
    } else {
        alert(res);
    }
}

2007年11月22日

JavaScript第5版読書会#1

http://cotocoto.jp/event/2880


に参加してきた。


気になったコード

js> "hoge".charAt(1)
o
js> "hoge"[1]
o // 実装によってはうごかないらしい。
new String() vs. String()
js> typeof("hoge")
string
js> typeof(String("hoge"))
string
js> typeof(new String("hoge"))
object
js> typeof(3)
number
js> typeof(Number(3))
number
js> typeof(new Number(3))
object
文字列 -> 数値
js> "10" - 0
10
js> "10" + 0
100
Array.fill
js> new Array(10 + 1).join("*").split("")
[*,*,*,*,*,*,*,*,*,*]

new Array(n) n:数値 で作った配列は各要素が "undefined" となる。

で undefined にも代入できるからこれをうまくつくって Array.fill 的なことができないだろうか。結果だめっぽい。

js> undefined = "*"
*
js> undefined
*
//
js> typeof (new Array(10))[1]
undefined
基本型と参照型

文字列は immutable.


3.1.5.4 の表重要。

window.window.window
>>> window == window.window
true
>>> window == this.window
true
>>> window == window.self
true

window オブジェクトに自己参照として self & window プロパティがある。

delete 演算子の挙動がキモい

この辺もっと。

//FireBug で謎の挙動
>>> var a=1; delete a; a
a is not defined
>>> var x=1; delete x; x
1

//SpiderMonkey
js> var a=1;delete a;a
1
js> var x=1;delete x;x
1

JavaScript 第5版に書かれているのは下の挙動。

FireBug がおかしいっぽい。どちらにしろこの実装は気持ち悪い。


多重代入?

なんかこの辺の話題が出てたような気がしたので

>>> var [a, b] = [3, 4]
>>> a
3
>>> b
4

JavaScript 1.6 からだったかな。


注意

コードの先頭の

js> が spidermonkey 1.7で、

>>> が FireBug で試した。


感想

  • やっぱり PCがないときつい。その場で試したい。なんとしても手に入れないと。
  • 他の言語の話になるとさっぱりわからない。もっと他の言語も学ばなければ。特に P*P。
  • もっと色な人とからみたかった。 Twitter 検索の人と話せたのはうれしかった。

参考




とりあえず、こんなところ。また思い出したら追記するかもしれない。

最後に こんな素晴らしいイベントを企画、開催していただいた Kanasan さんありがとうございました。また参加すると思います。


f:id:higeorange:20071122010210j:image

ふぉくすけステッカー。


higeorange's js:reading Bookmarks に関連ページをまとめるつもり。


追記

Array.fill 良く考えると1文字しかできないのね。やっぱループで回すしかないのかなぁ。

2007年11月17日

for + setTimeout

10まで を数える。

for(var i = 1; i <= 10; i++) {
    setTimeout(function() {
        print(i);
    }, i * 1000);
}

いっけん間違ってなさそうだけど 11 しか表示されない。タイムアウト後はすでにループを抜けて i は 11 になってるため。


for(var i = 1; i <= 10; i++) {
    setTimeout((function(i) {
        return function() {
            print(i)
        }
    })(i), i * 1000)
}

これで OK.

タイムアウトがセットされた時点で外側の function は評価されて、タイムアウト後に返された function を実行てことかな。


http://la.ma.la/misc/userjs/amazon_gift.user.js より。


setTimeoutの第一引数は Function でなければならないことも重要。

2007年11月08日

Skype for Linux Video サポート

こっちも video サポート(謎


ついに来ました。使うかどうかは別としてうれしい限りです。


うかれて試そうとしたら写らない…。設定画面でテストしただけだから実際の通話では使えるのかも、試してもいいよという奇特なかたがいらっしゃいましたら skype ID: higeorange まで。


追記 - テスト

twitterコミュニケーション・バイブル

で、有名な lomo さんに協力してもらってテストできた。

無事にビデオも表示されるようです。しかーし 笑えるほど通話中に Skype が強制終了する。

最初のベータだからこんなものかと思っておく。

今日買ったもの

探偵ガリレオ (文春文庫)

探偵ガリレオ (文春文庫)

予知夢 (文春文庫)

予知夢 (文春文庫)

ウェブ時代をゆく ─いかに働き、いかに学ぶか (ちくま新書)

ウェブ時代をゆく ─いかに働き、いかに学ぶか (ちくま新書)

Perfume 〜Complete Best〜 (DVD付)

Perfume 〜Complete Best〜 (DVD付)

We Are the Night

We Are the Night

Oblivion With Bells

Oblivion With Bells

2007年11月04日

Ajax オブジェクトを自作

Twippera で使うために Ajax オブジェクトを自作していたが、タイムアウト処理がうまくいかず…。

"JavaScript 第5版" に参考になるコードが載っていたので作り直した。


var Ajax = {};
    Ajax.request = function(url, callback, options) {
        var xhr = new XMLHttpRequest();
        var timer;
        if(options.timeout) {
            timer = setTimeout(function() {
                xhr.abort();
                if(options.timeoutHandler) {
                    options.timeoutHandler(url);
                }
            }, options.timeout);
        }

        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4) {
                if(timer) clearTimeout(timer);
                if(xhr.status == 200) {
                    callback(xhr);
                } else {
                    if(options.errorHandler) {
                        options.errorHandler(xhr.status, xhr.statusText);
                    }
                }
            }
        }

        var opts = {
            type: options.type || "GET",
            async: options.async || true,
            user: options.user || null,
            pass: options.pass || null,
            query: options.query || "",
            header: options.header || {}
        }
        if(opts.user && opts.pass) {
            xhr.open(opts.type, url, opts.async, opts.user, opts.pass);
        } else {
            xhr.open(opts.type, url, opts.async);
        }
        for(var t in opts.header) {
            xhr.setRequestHeader(t, opts.header[t]);
        }
            xhr.send(opts.query);
    }

2007年11月03日

Twitter コミュニケーション・バイブル

twitterコミュニケーション・バイブル

twitterコミュニケーション・バイブル


lomo さんから頂きました。家宝にします。


P.115, 116 に私が作った Twippera が掲載されています。

 |