Linux-Java-Memo.com

木曜日 5 14, 2009

JS-Kit Comments

ついでにJS-Kitのコメントも入れてみました。

Facebook Connect

Facebook Connect対応のComment Widgetを入れてみました。各エントリページでFacebookアカウントでコメント記入出来ます。

こちらを参照 Commenting with Facebook Connect

月曜日 2 16, 2009

Firebug動作不安定

久しぶりにFirebugを使ったら挙動がおかしくなっていた。console.debug(〜) させたいのだが、なぜかコンソール画面で「console is not defined」と怒られてしまう。(Firefox 3.0.6 + Firebug 1.3.2)

解決方法として、FIrebugのコンソールタブで、〜でコンソールを停止を選択し、一旦コンソールを停止させてから再び有効とすることで、正しくデバッグ出力されるようになる。だが、使っているうちにまた「console is not defined」になってしまうので、その度に停止→有効を繰り返す必要がある。なんででしょう。

火曜日 6 05, 2007

remember the milkがGoogle Gearsに対応



本日突然画面がきり変わり、メッセージが出ていた。対応早え...
Remember The Milk


火曜日 4 03, 2007

lengthプロパティのパフォーマンス



IEではDOMのNodeListのlengthプロパティのパフォーマンスがとんでもなく遅い。

for(var i=0; i<nodeList.length; i++) { ... }
のようなコードは、
for(var i=0, len=nodeList.length; i<len; i++) { ... }
と置き換えた方が良いとのこと。

月曜日 4 02, 2007

SSL時のjavascript:の記述に注意



SSL接続されているコンテンツ上で、

<a href="javascript:hoge()">
とやると、IEが「セキュリティ情報」ダイアログを出す場合があるらしい。

単に
<a onClick="hoge()">
とやれば問題無いらしい。

金曜日 3 09, 2007

CSSでテキストより薄いcolorでunderlineを表示させたい



テキストのアンダーラインを、うすく表示したい場合、
テキスト背景に画像を指定するやり方で、以下が参考になりました。

RedLine Magazine : CSSでunderlineをカスタム


金曜日 1 26, 2007

JavaScriptメモ



文字列の置換

"abcdefab".replace("ab", "AB");
"abcdefab".replace(/ab/, "AB");
  ==> ABcdefab
全置換
"abcdefab".replace(/ab/g, "AB");
  ==> ABcdefAB



月曜日 11 27, 2006

innerTextとtextContent


Ajaxなコードにまだ慣れておらず、
ブラウザ毎の挙動の違いにぶつかる度にハマってしまい、
時間を浪費しています。まだAjax以前にJavaScriptにも慣れてないし。

今日はinnerText(IE)とtextContent(FireFox)。

MozillaでinnerText

2006.11.28追記: prototype.jsのString.stripTags使えば良さそう。


これもだ

IE の getAttribute / setAttribute: Days on the Moon

水曜日 11 15, 2006

FireFoxとMSIEのDOMの挙動の違い

var hoge = document.getElementById("hoge");
var w = window.open(...);
w.document.appendChild(hoge); //FireFoxだとOK。MSIEだとdocumentが異なるためErrorとなる。

//MSIEのエラーを回避するには、あらかじめw.document配下にも同一タグを作成しておいて、
//innerHTML使うしかない?
w.document.getElementById("hoge").innerHTML = hoge.innerHTML;

DOMのimportNodeはJavaScriptでは未サポートのようなので。

火曜日 11 14, 2006

Javascript デバッグコンソール

2006.12.13追記
FireBugですが、下記のような不具合?があり、知らずに結構ハマりました。

  • console.debugで表示される内容が、最終的に更新された値となっている場合がある? ...console.debugを2回、更新前と更新後のタイミングで挿入して実行させてみたところ、両方とも同じ更新後の値が表示された。
    Debuggerにてブレークポイントを更新前に設定して、一旦停止するようにして実行すると、正しく表示された。
  • { a:a, b:b, c:c } のようなオブジェクトをconsole.debugで表示させた時、すべてのプロパティ?が表示されない場合があった。(プロパティ名が日本語のものが表示されない場合がある?)

WEB+DB PRESS Vol.35 Ajaxの定石 より

明示的Submit

通常のフォーム送信をXMLHttpRequest経由に変更。

MyForm = Class.create();
MyForm.prototype = {
  initialize: function(form, result) {
    Event.observe(form, 'submit',
                            this.submit.bindAsEventListener(this));

    this.form = form;
    this.result = result;
  }
  submit: function(e) {
    var url = 'hoge.php';
    var options = {
      onComplete: this.submitComplete.bind(this),
      parameters: Form.serialize(this.form)
    };
    new Ajax.Request(url, options);
    Event.stop(e); formのsubmit処理は中断させる
    return false;
  }
  submitComplete: function(transport) {
    var result = transport.responseText;
    this.result.innerHTML = result;
  }
}

WEB+DB PRESS Vol.35 Ajaxの定石 より

イベントハンドラの登録


var d = document.getElementById('hoge');
if( d.addEventListener ) {
  d.addEventListener('click', hoge_callback, false);
} else if( d.attachEvent ) {
  d.attachEvent('click', hoge_callback);
}
 → prototype.jsのEvent.observeを使うのがよい。
Event.observe(d, 'click', hoge_callback, false);



2006.11.22追記

登録したイベントハンドラは、使い終わったら解除しないとダメらしい。IEがメモリリークをおこすとのこと。
Event.stopObserving(d, 'click', hoge_callback, false);


WEB+DB PRESS Vol.35 Ajaxの定石 より

ブラウザテンプレート


なぜかJSPもどきが多いのがいまいち。JavaScriptTemplatesがVelocityに近い感じでいいかな。

WEB+DB PRESS Vol.35 Ajaxの定石 より

JSONP(JSON with Padding)

JavaScriptから直接クロスドメインサイトのWebサービス呼び出しを可能にするテクニック。
headタグ内に以下のようなscriptタグを追加生成する。src属性にはクロスドメイン問題が発生しない。
 <script type="text/javascript" charset='utf-8' src='http://hoge/return/json' />
サーバからの出力は以下のようにする。
callback({"result1":"hoge1", "result2":"hoge2"})
scriptタグのロードが完了すると、callback関数が呼び出される仕組み。呼び出し時にcallback関数を指定できるようにしておくとよい。
http://hoge/return/json?callback=handlePosts

WEB+DB PRESS Vol.35 Ajaxの定石 より

Calendar

tags

Feeds

Search

Links