心魅 - cocoromi -

半角スペース時々全角

javascript

Document Object Model Events

ブラウザJSでアプリケーションのロジックをつくろうとしていて、どうもObserver Patternになりそうなので、カスタムイベントを扱う方法を調べている。 取り合えずW3Cのドキュメントから。Level3はDraft。 http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-…

Transition,Animation関連のイベント

CSS3からはアニメーションが出来るようになりました。 そうなると重要なのはタイミングを測ることで、W3Cではその為のイベントも定義されています。 イベントの種類 Transition transitionend Animation animationstart animationend animationiteration CSS…

簡易Javascriptテンプレートエンジン

ループと条件分岐をバッサリすてたら、意外とまともなのがかけた気がするから、眠い勢いで紹介してみる。http://github.com/umezo/umezone/blob/master/javascript/template.js 特徴 変数展開しかサポートしてない JSにコンパイルしている JSにコンパイルし…

opensocial-jqueryでリクエストをsigned requestにする方法

URLの後ろにsignedって付ける。 簡単。涙がでる。 参考文献:AjaxOAuth - opensocial-jquery - jQuery.ajax のリクエストに署名できます。jQuery.get や jQuery.post などのショートカットでもリクエストに署名できます。 - OpenSocial jQuery is jQuery bas…

JSでイベントハンドラ周りにコマンドパターンを使って、メンテナンスを簡単にする

JavascriptでAjaxでかつ画面遷移しまくるアプリを作るときに、イベントハンドラの付け替えが割と面倒だったりします。 そんなときには中身を入れ替えない部分の要素にだけイベントハンドラを設定して、あとはクラスをパースして処理を分けるという手段があり…

createTextNodeの挙動

document.createTextNodeは勝手にHTML文字をエスケープしてくれるらしい。 #まぁ考えてみればあたりまえ? var div = document.createElement("DIV"); div.appendChild(document.createTextNode("<span>hoge</span>")); console.log(div.innerHTML);//&lt;span&gt;hoge&lt…

超絶無駄なブックマークレット作った。

Firefox2.0.0.8にて動作確認。実行すると画面が薄暗くなって何もクリック出来なくなります。 javascript:var createCover = function (){var div = document.createElement('div');div.style.margin = '0';div.style.position = 'fixed';div.style.top = '0'…

keydownのイベントで押されたキーのコードを取得する。

イベントオブジェクトのkeyCodeプロパティから取る。 elem.onKeyDown = function onKeyDown(event){ console.log(event.keyCode); }

DOMのテキストノードを作る。

document.createTextNode("text"); でOK。 テキストノードを追加するときは elem.innerHTML += "<hoge />"; とかやると、なんか動作が不安定なので、 ちゃんと elem.insertBefore(textNode , elem.lastChild.nextSibling); とかやった方がいいかも。</hoge>

イベントハンドラのコールバック

SomeObject = { param : "hoge", callback : function (event){ console.log(this.param); } } hoge.addEventListener("someEventName" , SomeObject.callback , false); とかやると。 見事にundefinedになる。 AS2とかだとDelegate.createとか使えばいいん…

イベントからマウスの位置を取得する

firefoxでイベント発生時のマウス座標を取得する。 hoge.onclick = function ( event ){ //このeventオブジェクトから var mousex = event.clientX; var mousey = event.clientY; }

イベントハンドラの登録方法

elementに直接登録するなら element.onSomeEventName = function(event){}; addEventListenerを使うなら。 element.addEventListener("someEventName" , function , boolean); 後者はイベントの名前にonがいらない。 ここでいつもはまる・・・・。