2008/12/09(火)自作ライブラリのメモ

ポップアップ

var popup = new CPopup();
    popup.append(項目名, イベント, オプション);
    popup.append(CPopup.Separator);
    popup.append(項目名, イベント, オプション);
    popup.show();

引数の例

  • イベント
    • {'click':clickentry}
  • オプション
    • {n:a[1], w:s._self}

イベントリスト

イベント名概要
click項目がクリックされたときに呼び出される. 返値をfalseにするとpopupを閉じない
close未実装。popupが閉じられる直前に呼び出される
closed未実装。popupが閉じられた直後に呼び出される

イベントメソッドの例

function clickentry(イベント, ポップアップ本体, 項目名, オプション){
}

2008/11/21(金)length プロパティ

配列の要素数ではなく,インデックスの最大値+1を指す.
そのため,

var a = new Array();
a[0] = 0; // length -> 1
a[1] = 1; // length -> 2
a[100] = 100; // length -> 101
a[2] = 2; // length -> 101

になる...

要素数を知りたい場合カウントするしかないの?

var count = 0;
for(var i in ary){ count++; }

2008/11/20(木)メソッド定義のマイルール

コンストラクタの定義

class = function(o){
}

プロトタイプで定義

ここに定義するのは,オブジェクト名付きで呼び出されるメソッド類.thisを信用することができるもの.class内部からしか呼び出さないものは_を付ける.(_付きのメソッドを外部から呼び出しても動作は保証しない)

class.prototype = {
  func1: function(){
  },
  _func2: function(){
  }
}

クラス名付きで定義

イベントなどにより呼び出されるメソッド類.thisを信用できない.必要ならば,引数に自分自身を指すオブジェクトを入れる.

class.func3 = function(){
}

2008/11/19(水)javascriptのpro...

と同じ罠にはまってしまった...
なにやってるんだか.

A = function(){}
A.prototype = {
  pos: {x:0, y:0}
}

a = new A();
b = new A();

a.pos.x = 10; a.pos.y = 20;
b.pos.x = 30; b.pos.y = 40;

a.pos.x; // -> 30;
a.pos.y; // -> 40;
b.pos.x; // -> 30;
b.pos.y; // -> 40;

正しくは↓の通り。

A = function(){
  this.pos = {x:0, y:0};
}
A.prototype = {
  pos: null
}

a = new A();
b = new A();

a.pos.x = 10; a.pos.y = 20;
b.pos.x = 30; b.pos.y = 40;

a.pos.x; // -> 10;
a.pos.y; // -> 20;
b.pos.x; // -> 30;
b.pos.y; // -> 40;

一度,以前作ったプログラムも見直した方がいいかもしれない

2008/11/06(木)javascriptのprototypeではまった

微妙にはまった罠

A = function(){}
A.prototype = {
  data: new Array(),
  push: function(a){
    this.data.push(a);
  },
  pop: function(){
    return this.data.pop();
  }
}

a = new A();
b = new A();

a.push('1st');
a.push('2nd');
b.push('3rd');

a.pop(); // -> '3rd'
b.pop(); // -> '2nd'
a.pop(); // -> '1st'

当然と言えば当然だけど、ポインタ的なものが見えにくいので原因がわかるまで時間がかかりました。というか、C++のクラスとJavascriptのプロトタイプの違いがわかった気がする。正しくは↓の通り。

A = function(){
  this.data = new Array();
}
A.prototype = {
  data: null,
  push: function(a){
    this.data.push(a);
  },
  pop: function(){
    return this.data.pop();
  }
}

a = new A();
b = new A();

a.push('1st');
a.push('2nd');
b.push('3rd');

a.pop(); // -> '2nd'
b.pop(); // -> '3rd'
a.pop(); // -> '1st'

オブジェクトを生成するたびに data そのものを正しく初期化する必要あり。

2008/09/09(火)IEとFFの互換性を維持するために

片方にあったり無かったりするメソッドやプロパティを何とかするためのメモ。
無い場合はundefinedとか返されるので || で繋いでしまえばなんとかなることが多い。

メモ書きなので間違えてるかも。
でも、
x = obj.yyy || obj.zzz;
って書く分には逆でも問題なかったりする。

そのうちいろいろ追加したりすると思う。

プロパティまわり

IE FF 用途
innerTexttextContentエレメントの中のテキストのみ取り出す
e.srcElemente.targetイベントの発生元
tagNamelocalNameタグの名前(AとかIMGとか)*
obj.currentStyledocument.defaultView.getComputedStyle(obj, '')実際に表示されているスタイル
clientHeightoffsetHeightエレメントの高さ
clientWidthoffsetWidthエレメントの幅

* Safari, Google ChromeはlocalNameは小文字で、tagNameは大文字で返すっぽい

イベントまわり

デフォルトの動作を止める

_preventDefault = function (ev){
  if(IsIE)  ev.returnValue = false;
  else      ev.preventDefault();
}

これ以上次の要素にイベントを送らない

但し、IEとFFではイベントの発生順が逆なので注意

_stopPropagation = function (ev){
  if(ADIARY.IsIE) ev.cancelBubble = true;
  else            ev.stopPropagation();
}

エレメントのイベントにメソッドを割り当てる

クリックとかいろいろ。
但し、無名関数を登録すると取り除けなくなるので注意*1

addEvent = function (target, name, func) {
  if(target == undefined || name == '' || func == undefined) return;
  if(target.addEventListener) target.addEventListener(name, func, false);
  else if(target.attachEvent) target.attachEvent('on'+name, func);
  else return false;// setAttribute('on'+name, func);

  return true;
}

エレメントのイベントからメソッドを取り除く

上のaddEventで追加したやつ限定

delEvent = function (target, name, func) {
  if(target == undefined || name == '' || func == undefined) return;
  if(target.removeEventListener) target.removeEventListener(name, func, false);
  else if(target.detachEvent)    target.detachEvent) ('on'+name, func);
  else return false;// setAttribute('on'+name, '');

  return true;
}

*1 : arguments.calleeを使うと取り除けたりするけどそれは例外

2008/08/29(金)ajax

せりかのアルバムで利用しようかと思い、試行錯誤中。
ファイルの移動や、リネームあたりを実装してみたいなぁ。

現在通信する部分を一通りライブラリ化。
あと、一部のよく使いそうなあたりもメソッド化。

prototype.jsとかYUIとか使えば簡単なんだろうけど、そこまででかいライブラリ入れても仕方ないし。

以下、現在の実装例のメモ

続きを読む

2008/07/05(土)オブジェクトのサイズ

フォームオブジェクトのサイズを変更したいということで,ここ最近ずっといじってるのですが,やはりIEが強敵.
Firefoxは無事動いたのですが,IEがどうしても思うような動作にならない.

今のところ一番の問題点は,高さが正しく設定できない.height指定しても,実際の高さはそれ以上になってしまう.
もうしばらく悩むことになりそうです.