Javascript：DOMオブジェクトかECMAオブジェクトかを判定する。

ドキュメントオブジェクトなのかスクリプトのオブジェクトなのか判定したい時って通常どうするのでしょう？ typeof() ではどちらも "object" なのですが、実際のところ別物ですよね。^(※１）

ということで、幾つか判定用関数を作成してみました。

・ Element かどうかの判定
要は、div とか span とかいったタグ物かどうか？です。

・ DOM Node かどうかの判定
attribute (id や value)、テキストは Element ではないんですが DOM Node を受け継ぐオブジェクトです。

・ ECMA object かどうかの判定
v = {apple : 'りんご'};
なんぞのオブジェクトを判定します。
ちなみにアトミックなもの。数値や文字列もオブジェクトである場合があります。そのような場合も真として検出します。

・ イベント object かどうかの判定

（※１） opera はかなり特殊です。Element をオブジェクトとして他のブラウザ以上に統一的に扱おうとしているようです。

■ 確認環境
ie 6.0, 7.0
ff 1.5
ns 7.1
op 8.53

続きを読む

Javascript：replace へ関数を渡すと非常に遅くなる事がある

replace メソッドの色々な使い方を紹介した記事を幾つか見つけたんですが、これって場合によっては想定外な結果になるんじゃないかな。
該当場所を見つける度に関数のオーバーヘッドが掛かる訳ですから、テスト文字列によってパフォーマンスが著しく変わるハズではないかと。

以下参考に致しました。
「escapeHTML の実装 3 パターン (ベンチマーク付き)」
http://d.hatena.ne.jp/reinyannyan/20060711/
「激しく誤差の範囲内の予感」
http://d.hatena.ne.jp/f99aq/20060714/

ということでやってみた結果、それほど置換数が多くなくても ie に限ると１０倍以上の差がでるようです。ff と op は有意義な差が無いです。

告白すると、replace で正規表現使ったり、関数を渡したりする事ができるなんて・・・。知りませんでした。

おいおい大丈夫かよってなもんで。
「問題なければすべて良し」的な対応をしてきた自分に激しく反省。これからもポロポロ垢が出てくるんだろーなぁ。

以下。テスト内容

続きを読む

Javascript：エレメントの位置をコロコロと変える。

DOM element をスワップさせたり、最前部や最後部に移動させたりする関数群です。ま、簡単に出来ますし、大したコードでもないのですが、微妙に面白いｗ

・ 一つずつ上に移動
・ 一つずつ下に移動
・ 指定要素の最前部に移動
・ 指定要素の最後部に移動
・ 要素の入れ替え

のそれぞれの関数があります。

■ 確認環境
ie 6.0, 7.0
ff 1.5
ns 7.1
op 8.53
メイン環境じゃ無いので少ない・・・。

続きを読む

javascript:厳密なイコール

ぜんっぜん、知らなかったんですが「===」が、ECMA では規定されています。
=== と == に関してちょこちょこっと。

今更何を言っとるんだ状態ですが、javascript === 曖昧 （笑）という図式が私ん中で出来上がっちゃってまして「そんなものはない」と信じ込んでたんですね。
Javascript を扱ってるサイトでも見かけませんよね。（というか気付かなかった）

正直、ECMAscript, DOM, javascript って何が何やら境界がよく分からん。Javascript や action script などが ECMAScript 準拠って事ぐらい。
ま、プロジェクト管理者の中ですら Ajax = javascript なんて人も居るんで、ま、分かり辛いって事で締めとくか。

以下、意外だった人には意外な事ｗ

続きを読む

Ajax：画像を取得して表示する（Firefox）

XMLHttpRequest を使って取得したバイナリーデータ（画像）をブラウザに表示してみました。firefox のみ。
JavaScriptでバイナリを扱う &
　XPCOMを使ってローカルのデータベースにアクセス with Firefox
の記事を読んでいて、そういや Ajax ではどうなん？と思ってやってみた。

■ 他に参考にしたのは以下の記事。
[comp]JavaScriptでバイナリファイルの中身にアクセスできた

■ base64 エンコードには下記のコードを使いました。
JavaScript で Base64 の符号化と復号化
続きを読む

Javascript：if などの制御構文を使わない分岐

if などの制御構文を使わなくても分岐ができます。実際、当たり前の話なんですが、意図的に行うかどうかという、ただそれだけの違いです。

続きを読む

Javascript：for のちょっと変わった使い方

for(var i = 0; i < 10; i++){処理・・・}
for(var i in object){処理・・・}
なんてのは、よく目にしますが・・・。

for(var i = ['あ', 'い', 'う']; i[0]; i.shift()){ alert(i[0]); }
これでも。i に配列を代入して、i[0] が false を返すようなものではない間、shift で i に代入された配列を削っていきます。ということで、この場合は、あ、い、う、と表示される。

当然。もっと自由に考えれば。

var o = {
  v : 2,
  fn : function (){this.v = this.v * 2},
  en : function (){
    if(this.v < 10) return true;
    alert(this.v);
  }
};
for(; o.en(); o.fn()){}

なんてのも。
わざわざこんな処理に冗長な例ですが・・・。for 内の処理や条件を外部で、作成・変更できたりと、結構自由に使えます。ただ。やり過ぎると、深刻な混乱を招いたりするので、誰が見ても分かりやすい物にした方が無難かも。

私は遊びで使ったりします。ひょっとしたら嫌う人もいるかもしれない。

Javascript：Array オブジェクトの継承では length が予期しない値を返す

・ 02/22 後尾に追記

アルファブロガー達^※１が、一時取り上げていた３行の継承に関してですが、これで Array オブジェクトを複製しても組み込み済みのメソッドは、継承元でしか動作しないですね。

■ 試した関数
404 Blog Not Found さんより
javascript - プロトタイプ的継承

function object(o){
  function F(){}
 F.prototype = o;
 return new F();
}

※１　私だけの認識じゃないと思う。

続きを読む

Javascript：setTimeout による呼び出しは関数終了時ではない？

予定された時間になり、その時実行中の関数が終了すれば setTimeout／setInterval での呼び出しが実行されるという訳じゃないんですよね。

ネットでたまに見かけるのは、「function fn(){setTimeout(cb, 20); ・・・;} の場合、・・・の処理が終わって fn(); が終了していないと、20msec 経過しても cb は呼び出されない」などの内容で完結していることがありますが、実際は fn(); が終了していても呼び出されないことがあります。

ま。とある記事読んでいて、あれれ？と思ったので・・・。というか、自分自身も意識しないとそう言ってる。

続きを読む

Javascipt:関数ごとに終了状態をトレースしてゆく関数

関数終了時の変数の状態や arguments などを順次蓄積します。関数内の変数は簡易的にスキャンして、一括取得できるようになっています。
前回の「Javascipt:関数が終了した後でもそのローカル変数が参照できる」を発展させて、関数に eval(getChain()); と記述するだけで、トレース出来るようにしたものです。

機能は以下になります。

• arguments, caller, callee を保存
• 終了時の変数の値を個別・一括で取得
• 複数の関数の終了時の状態を起動順序ごとに配列へ蓄積

■ 確認環境
ie 5.0, 5.5, 6.0, 7.0
ff 1.0, 1.5, 2.0
ns 7.1
※ opera は caller が無いため動作しません。
参考：http://www.opera.com/docs/specs/js/ecma/

■ 注意点
対象とする関数が起動されるたびに延々と蓄積し続けます。
Array.shift() などを使って配列を詰めてもいいかも知れません。

続きを読む

Javascipt:関数が終了した後でもそのローカル変数が参照できる

2/15 追記：関数化はこちら「Javascipt:関数の状態をトレースする関数」

例えば、fn(){var v=1;}を起動・終了後に v が参照出来るんですが、さらにそれを汎用にしてしまったものです。元ネタは以下リンクですが、caller（呼出し元）も一応は記録しておくことが出来るんじゃないかと。

JavaScriptでDebugScreen、その2（最速インターフェース研究会さん）

１年前の古い記事です。つい今しがた見つけてｗ衝撃を受けましたんで色々イジってみる。いつも参考にさせてもらってます。m(_ _)m

続きを読む

Javascript：appendChild のタイミングで処理速度が変わる

createElemement や createTextNode で要素を生成して、すでに描画？されているオブジェクトに入れ込む場合、入れ込むタイミングによって処理速度が変わるようです。

１．生成した div 要素を、先に body へ appendChild してしまってから、div へテキストノードを入れ込む場合（bf とします）

01   obj = document.createElement('div');
02   document.body.appendChild(obj);
03   obj.appendChild(document.createTextNode('string'));

２．生成した div 要素をにテキストノードを入れ込んだ後に、body へ appendChild する場合（af とします）

01   obj = document.createElement('div');
02   obj.appendChild(document.createTextNode('string'));
03   document.body.appendChild(obj);

感覚的には、２の方が速いだろうと思うのですが・・・。
ちなみに div 要素ではなく createDocumentFragment の方が良いかも知れませんが、微妙に遅い感じです。ほとんど、誤差範囲内ではありますがｗ

テスト結果

インラインフレームの読み込みに失敗することがある

HTML の a 要素で、onmousedown を使ってインラインフレームを読み込むと、読み込みに失敗することがあります。イベントが発生するタイミングが問題なのだろうと思いますが、href に何を入れるかによっても異なります。

とりあえず、a タグでインラインフレームを書き換える場合、簡単に４つ試しました。
<a href="javascript:void(0);" onmousedown="func();">
<a href="javascript:void(0);" onclick="func();">
<a href="#" onmousedown="func();">
<a href="#" onclick="func();">

結局のところ、onclick を使えばいいのですが、世の中にはやっかいなプラグインがありまして・・・。全く関係の無い a タグを onclick してもページ遷移と誤解するのか、勝手に終了しちゃう奴があったりします。

続きを読む

Javascript：クエリストリングからパラメータ配列を生成する関数とその逆の関数

クエリストリング（URL の後尾 '?' 以降の文字列：Query String）を連想配列にする関数と、連想配列から Query String を作成する関数。

Javascript は「連想配列」ではありませんけど、この程度なら実質同じかなｗ
ま、知ってれば持ってる or サラっとやってのけられる関数です。

■ Query String について一応簡単に

http://www.google.co.jp/search?
　　　hl=ja&q=url+%E3%82%AF%E3%82%A8%E3%83%AA
など、上の場合 '？' 以降の文字列（QueryString）は、単に

　hl = ja
　q = url クエリ

と言う情報をネット上で使うのに問題の少ない文字列に直したものです。url にくっ付けてページ間で簡易なデータの受け渡しをしています。

続きを読む

Javascript：プロパティの順序

オブジェクトのプロパティの順序が違うことがあったりするというお話し。

[javascript] Firefox の JavaScript はいつのまにかプロパティの順番が変わることがある

スクリプトで作成したものはどうなんだろうか。
「作成した順序で固定されている」として扱ってても問題はありませんでしたが、単に均等に扱っていたためかもしれない。

ちなみに、opera の場合のっけから作成した順序とはことなる並びで呼び出される様です。

ただ、こんなコードじゃダメだと思った時点で検証してません。一応作成したものは変わるということだけは確認しました。
firefox のように必要に合わせて動的に変化するかどうかまでは？です。

Javascript：ちょっと便利な String の拡張

String オブジェクト（文字列）のちょっと便利な拡張を４種類。

1. 文字数のカウント。
2. 文字列にある全ての文字列 s1 を s2に置き換える。
3. 文字列を反転させる。
4. 文字列から数値を全て抜き出す。（文字配列として返す）

どっかのライブラリに似たようなものあるかも知れんけど。ま、いいっしょ。続きを読む

php : 文字エンコーディング関連

イブ前夜に何やってんだか。って、あ、もう１２時回ったかｗ
ま、所帯持ちにゃかんけーねーや。ｗ
あー。なんかいーことしてぇー（爆）

最近、自分の文字エンコードに関する知識の浅さに打ちのめされて、再度勉強中なんですが・・・。はぁ。思ったとおり、めんどーですね。

スクリプトからできるだけ制御しようと思っているんですが、結構考慮すべき関数や設定値が多い。ということで、文字エンコードに関して考慮すべきことや覚え書き。

環境
windows xp sp2
apache 2.0.53
php4 version 4.4.2

続きを読む

ちょっと便利なショートカット関数

prototype.js に習って？よく使う割に面倒な処理をショートカットにしてます。

例えば、innerHTML。
これってあんまりスマートなメソッドではないけど、ラクなのでよく使います。
それでも追加する時などはやっぱり面倒ですよね。

$(id).innerHTML = $(id).innerHTML + htm;

とか。コレを面倒と言い出したら失格かなぁｗ

続きを読む

動的な JavaScript の生成と読み込み＆入れ替え

以前 src や text を使って javascript の動的な読み込みや書き込みをしたんですが、そのサンプルと安全性？クロス？な調査です。
前回の記事はこちら

実際の所、createElement なんぞしなくても空の script タグ書いて、getElementsByTagName や、getElementById で取得したエレメントに src や text を突っ込んでやれば幾らでも「動的な読み込み」や「書き込み」は可能です。

ちなみに ie は、何度も書換えられますが、FireFox はどうやら１回だけ。１度読んでしまうと上書きのようなことは出来ないようです。実際、スクリプトエレメントを削除しても生きているようです。

続きを読む

最終形態？自由に繰返す関数として複製（遅延／繰返し／回数指定して function を複製する３）

１，２を包含して、さらに機能アップした機能過多ｗ関数を作成しました。
但し、最初一回目は遅延させません。

繰り返しの場合は、１回目の遅延なんてやはりレアケースですねｗ
機能的には以下です。

1. インターバル時間、呼出回数を指定して関数を複製する。
2. 関数に現在の呼出回数を渡すことができる。
3. 関数に予定された呼出回数と呼び出し間隔を渡すことができる。
4. 関数から、予定された呼出回数と呼び出し間隔が随時変更できる。
5. 終了時に他関数を起動できる。
6. 関数が false を返せば、止められる。
7. 関数が false を返さず、回数指定もなければ延々と繰り返す。
8. 入れ子でも、this.self で this を取得できる。
9. 入れ子でも、各段階の予定された呼出回数と呼び出し間隔が、関数から取得・変更できる

※ 上記での「関数」とは、複製された関数になります。

前回、ほぼ最終形とのたまったのは誰だったのか・・・
ま、色々いじってるとどんどん欲が出てくるｗ

■ 動作確認
IE 4.0/5.0/5.5/6.0
FF 1.0/1.5
NS 6.2/7.1
OP 7.02/8.53/9.01
Sleipnir 2.30

続きを読む