プログラミング/JavaScript/prototype.js の変更点

更新 
[[公開メモ]]

#contents

* element.measure("property"); が便利すぎる [#m8c8c92c]

要素のサイズをピクセル単位で測りたいときに重宝する。

DOM の要素は

- 内容物 = width x height
- その周りに padding
- その周りに border
- その周りに margin

があって、それぞれ細かくピクセル単位で指定できる。

詳しい説明はたとえばこことか分かりやすかったです：~
http://webdesignrecipes.com/css-visual-formating-model/

で、これらの値を JavaScript から読みたいとき、
普通に element.style.width とかを参照すると、
空になっていたり "100%" とか "30em" とか返ってきてがっかりする。

この関数はそのような値をちゃんと "px" 単位に直して返してくれる。

しかも、普通にはスタイルで参照できない "margin-box-height" なんかも取れて、とても便利。

"property" として与えることができるのは、

- height
- width
- padding-box-height
- padding-box-width
- border-box-height
- border-box-width
- margin-box-height
- margin-box-width
- top/bottom/left/right = getHeight(), getWidth() = clientWidth, clientHeight
- padding-top/bottom/left/right
- border-top/bottom/left/right
- margin-top/bottom/left/right

で、普通に使いたくなる物はすべてそろっている。

top/bottom/left/right などは、１階層上の「配置されたオブジェクト(positionにrelative/absoluteが指定されたオブジェクト)」のクライアント座標が返ることになる。


細かいレイアウトをする時には

- width <= padding-box-width <= border-box-width <= margin-box-width

の関係があることを必ず覚えておくべきだ。

** IE に対する注意点 [#d406eec3]

古い IE では margin-box-width のことを width と呼んでいたそうで、標準規格との非互換性を生んでいる。

新しい IE でも DOCTYPE をちゃんと指定しないと「古い IE との互換性」を保つモードで表示されることがあるそうで・・・

* 最近は jQuery に駆逐されかかってるのかも？ [#rb5402bf]

prototype.js の他に、jQuery というライブラリもかなり有名。

Ruby on Rails が prototype.js を使っていたので何となくこちらを使い始めたのだけれど、
いろいろ記事を読んでいると今は jQuery の方がずっとシェアが高いみたいで、
なにより Rails も最近は jQuery に乗り換えたんだとか・・・

jQuery はそれ自体が「言語」のような文法になるみたいなので取っつきにくいのだけれど
jQuery はそれ自体が「言語」のような文法になるみたいで取っつきにくいのだけれど
しかたがないからそちらも勉強してみようかなあ。
Counter: 2699 (from 2010/06/03), today: 1, yesterday: 0