javascript

onclickなどでjqueryっぽいイベントを仕掛ける

jQueryでエレメント生成と同時に$(hoge).click(hogeOnclickCallback) みたいなのやってると、その内どんなイベントがフックされてどこに飛ぶのか分からなくなってしまう。みんなどうやってるんだろ。jQuery-templateとhtmlのイベントアトリビュートで設定す…

Base64エンコードされた画像データからmime-typeを推測する

xpath

xpathと$ (getElementById) どこにでもあるやつ。

グリモンとかでDOMを簡単に作成する関数

使用例 var div = tag("div",{id:"dibid",class:"hoge"},["hoge",tag("br"),"huga"]); for(var i=0;i<10;i++){ var span = tag("span"+i,{insertBefore:document.getElementById("gagaga"),onclick:function(){ alert(i) },"click"); } これすごい使える。あ…

draggable

エレメントをドラッグ移動可能にする。firefoxのみ。Greasemonkey内で使うことを想定 例: <div style="width:100px;height:100px;" id="hoge"> どらっぐ移動可能 </div> <script> draggable('hoge'); </script>

最近のjsプログラムの組み方

僕はコードスタイルが一定しないのですが、最近はクロージャ!クロージャ! 最近は Firefox拡張/Greasemonkey/userChrome.js 系の javascript しか書いてないんだけど、そのあたりで「オブジェクトの継承」とかしたいと思うことがなく、 prototype とかやや…

グラデーションする関数

//b=最初の色(#rrggbb)、a=最後の色。 function(i){ 0〜1 の内 i の位置の色"r,g,b"を返す関数 } // "rgb(r,g,b)" の組を渡すと "rgb(r,g,b)" で返す function gra_rgb(b,a){ return gra(b,a,parse_rgb,build_rgb) } // "#rrggbb" の組を渡すと "#rrggbb" で…

WiiでSAGOOL

Shibuya.js で 「WiiでSAGOOL」という名前で会社の宣伝させてもらいました。プレゼン資料置きます。 WiiでSAGOOLですが、内容的には「デバッグコンソールがない環境でのJavaScript開発」に役立つものになっていると思います。 反省 プレゼン用タイマーを自作…

IE5でアルファチャンネルPNGを使うための一番簡単なライブラリ あるいはIEの失われたテクノロジに驚異せよ

http://d.hatena.ne.jp/amachang/20070206/1170715555 http://labs.unoh.net/2007/02/ie6_png_fix.html http://web.kankodo.net/2007/02/01-233315.html http://phpspot.org/blog/archives/2007/02/iepngjavascript.html なんかはやってるみたいなんで作って…

compareDocumentPosition

で、編集画面が使いにくい(投稿関係ボタンをテキスト・エリアの下に)のを作るときにドキュメントが全然見つからずに苦労したcompareDocumentPositionについて そもそもieだと contains で「エレメントは親子関係にあるか?」が調べられるのだけれど、Mozil…

関数指向から覚えるオブジェクト指向

javaScriptの勉強をしながらオブジェクト指向が分かっちゃう!(対象読者レベル:JavaScript中級以上で、オブジェクト指向を理解していること) 関数が値である JavaScriptの世界では、関数も値である。ある意味これが一番の特徴になっているといってもいい…

文字化けを解消するかもしれない Latin1toUtf8

Yahoo! Widgets の Google Calendar モジュールだと日本語が化けすぎ。 何と間違ってるんだろう、と調べてみたところ、Google Calendar から送られてくるデータはutf-8 なのに、それを Latin1であると解釈して、ユニコードに変換しているっぽい。Latin1の7ビ…

Ruby/SpiderMonkey

わ、はてなダイアリー市民じゃなくなってたよ! RubyistグループでRuby/SpiderMonkeyモジュール(仮称)作成日記書いてます。 http://rubyist.g.hatena.ne.jp/nazoking/ 名前から見てわかるとおり、RubyからJavaScript(SpiderMonkey)を使うためのモジュー…

DHTMLで子を探す、親を捜す

結構よくある処理だとおもう。 function searchParent(e,f){ return e && (f(e)?e:searchParent(e.parentNode,f)) ; } function searchChild(e,f){ return e && (f(e)?e:(searchChild(e.firstChild,f) || searchChild(e.nextSibling,f))); } searchChild エ…

newを実装する

new は予約語なので、代わりにneoで*1 Function.prototype.neo =function(){ var obj={}; obj.__proto__ = this.prototype; var ret = this.apply(obj,arguments); if( ret && typeof(ret)=='object' ){ delete obj; obj = ret; } return obj; }ふむ… obj={}…

PHP5でJavascriptを動かす J4P5

これはすごい http://j4p5.sourceforge.net/ JavascriptをPHP5上で走らせる、というPHPスクリプトである。スクリプト言語でスクリプト言語を実装する意味はよくわからないかもしれないが…きちんと、クロージャやプロトタイプも使える。 実装を見てみると、な…

一番短いajaxライブラリ

「ajaxはもうスーパーサイヤ人と同じくらい普通(c)id:amachang」な時代のための簡単コピペライブラリ function ajax(url,onload){ var x=null try{ x= new XMLHttpRequest; }catch(e){ try{ x= new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ x= new Acti…

プリミティブ値

JavaScriptではあらゆるオブジェクトはObject型の子である。数値や文字列といったものでも例外ではない。オブジェクトはプロパティーを持ち、それは拡張できる。 var a = new Object(); a.p = "test"; alert( a.p ); // "test" JavaScriptにはString型、Numb…

prototypeでオブジェクト型プロパティーを定義してはいけない

function Class(){ } Class.prototype.p1=new Array();さて上のコードに問題があることがわかるだろうか? JavaScriptではクラス定義の代わりにprototypeを使う。 オブジェクトは自信に定義されていないプロパティーはprototypeチェーンをたどって検索し、そ…

関数の実行時間を得る

↑のエントリに関連して。JavaScriptだと Dateオブジェクトは数値として扱うことができ、その場合ミリ秒の数字になる。従って var start = new Date(); testfunction(); var end = new Date(); var span = end-start; // start から end までのミリ秒を得ると…

MozillaDOMの不思議 style.display をいじるよりappendChildの方が早い

GreaseMonkeyをいじっていたんですが、2ちゃんねるのスレッド一覧をインクリメントサーチするスクリプトを書いてたんです。 // as は 検索したい文字列のリスト // as[i].element は文字列に対応する A エレメント // ↑はdocument.getElementsByTagName('A'…

XMLHttpRequestの文字化けにoverrideMimeType

XMLHttpRequestでshift_jisなどからshift_jisのstaticなテキストを読もうとしたときに文字化けすることがある。 var n = new XMLHttpRequest(); n.open("/sjis.txt"); :Content-Typeのcharsetがちゃんとしてなかったりする場合だ。で、MozillaのXMLHttpReque…

prototypeに直接オブジェクトを代入するときの不具合

javascriptの”クラス”の作り方としていくつかの方法があるが function class1(){ } class1.prototype={ prop:1 }こういう書き方がある。なんだか記述量が減って素敵な気がするのだが function class2(){ } class2.prototype.prop = 1;実は、こういう作り方と…

Object.prototype 汚染に関してObjectを親に持たないオブジェクト

__prpto__ に null を代入すればObjectを親に持たないオブジェクトが作成できる。 問題の所在 以前書いたエントリーの通り、Object.prototype に便利関数を入れるとどんなオブジェクトに対しても使えるようになって便利なんだけどハッシュとして使用する場合…

XMLビルダ

Collection & Copy - JavaScript、マークアップビルダ、存在しないメソッド http://d.hatena.ne.jp/brazil/20050905/1125896604 を読んで、すこし話題がずれるんですが、JavaScriptでXMLマークアップビルダ作るならこんな感じかなぁ /** よくあるHTMLエスケ…

FunctionChain

JavaScriptのすてきなのは、関数を返値として設定できること、関数もまたプロパティーを持っていること。 で、こんな関数のようなクラスのようなものを作ってみました。これをつかうと document.onload = FunctionChain( function(e){ alert('読み込まれまし…

Object.watch と Greasemonkey の脆弱性

知らなかったのだけれど、Mozilla の Object には watch というメソッド(イベントハンドラ?)がある。 o=new Object; o.p = 1; o.watch("p",function( id, oldval, newval ){ alert("o." + id + " changed from " + oldval + " to " + newval); return new…

resizegrip

resizegrip http://nazo.yi.org/nazonojs/?name=resizegrip エレメントをマウスドラッグでリサイズできるようにします。こういうやつです→ firefox エクステンションであるResizeable Textarea*1 のパクリ汎用化です(コードはオリジナル)。 floatingWindow…

入力補完ウィンドウを出す nazono.suggestion

新しく一つ追加です。 http://nazo.yi.org/nazonojs/?name=suggestion suggestion 入力補完ウィンドウを出す 補完アルゴリズムとかはつけてない(;´Д`)ので、自由にカスタマイズ可能… これと ajax、json あたりを使えば、Google Suggest みたいなことがき…

nazonojs

http://nazo.yi.org/nazonojs/ いろいろなjavascriptライブラリです。ご自由にお使いください。ライセンスはLGPLを考えています(アドバイスがあったら是非)。 以前からいろいろ作りためていたのを、一応公開。公開するに当たっていろいろ修正していたんだ…