せりかログ

ポップアップ

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

引数の例

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

イベントリスト

イベントメソッドの例

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

最近はユーザ登録必要なサービスばかりなのね
お試しで作りたいだけなんだけどなぁ
機能限定でいいからguestで2-3日使わせてもらえないかなぁ

配列の要素数ではなく，インデックスの最大値+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++; }

コンストラクタの定義

class = function(o){
}

プロトタイプで定義

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

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

クラス名付きで定義

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

class.func3 = function(){
}

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

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;

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

微妙にはまった罠

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 そのものを正しく初期化する必要あり。

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

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

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

プロパティまわり

* 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;
}

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

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

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

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

続きを読む

なんとかなるようになりました．
今のところ

• IE6
• Firefox 2
• Firefox 3
• Opera 9.5

で動作確認済み
微妙な実装だったりもするけれど，なんとか目標は達成できた模様

まあ，自分で作らずにyuiとか使えば早かったんだろうけどね
JavaScript＋CSSのお勉強と言うことで

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

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