javascript

CommonJSのPromiseに沿ったシンプルなオレオレDeferred書いた

jQueryのDeferredのデザインにも使われていることから、一番メジャーになりそうなCommonJS Promises/Aの提案を実装してみました。 CommonJS Promises/Aのwikiを読む限りでは、マストな仕様は以下の3つです。 Promiseは"未完"な状態から始まり、"未完"あるい…

Node.js と MongoDB でナイーブベイズによる文書分類をやってみた

タイトルは若干釣りです>< MongoDB は使ってみたかっただけ。先月から「言語処理のための機械学習入門」を読んでいるので、ナイーブベイズ分類器を書いてみました。「言語処理のための機械学習入門」はホントに説明が分かりやすい良本だった(数式全然分か…

IE8,9で後方互換モードかどうかをチェックする

GmailってIEの後方互換モードで見ると「標準モードで見ていってね!」みたいなメッセージを出してくれて親切ですよね。 あれどういう判定の仕方なんだろうと参考にGmailのJSソース見てみたら、TridentがUserAgentに含まれているかどうかで判定しているみたい…

Google Closure LibraryのDeferredクラスでJSDeferredのloop相当のことをできるようにする

Google Closure LibraryではMochikitのDeferredがサードパーティライブラリとして提供されています(waitとか削られている機能もあるようですが)。 でもMochikitのDeferredではループ処理を遅延処理化する機能は提供されていないので、できるようにしてみま…

Google Closure LibraryのユニットテストをPhantomJSから実行できるようにしてみた

結構前の話になりますが、test.jsという勉強会に参加してきました。そこでt_wada氏のQunitテストをPhantomJSで実行してるやつを見て、とても刺激を受けたので、普段仕事で使ってるGoogle Closure LibraryのユニットテストをPhantomJSで実行できるTAPを作って…

Google Closure Library の goog.events.EventHandler & goog.events.EventTarget のシンプル版を作ってみた

かれこれ1年くらい Google Closure Library を仕事でガッツリ使ってます。 それまでは jQuery でよくね?と思ってたのですが、もはや Closure Library なしでブラウザの大規模UI作るなんて考えられない!というくらい馴染んでしまいました。 ソースも綺麗だ…

綺麗なクラス設計でメンテしやすいJSを書くには

シンプルなHTMLを書く。これに尽きる。 HTMLがシンプルならJSもシンプルにできる(CSSはちょっと別)。 WebアプリのクライアントサイドはHTMLがやっぱり基本なんだ。

Secret of the JavaScript Ninja 3章を読んだ

2章に続いて3章を読み合わせました。ちなみに、2章で使ったassert()がほぼ全てのコードで使われているので、サンプルコードを試したい方はライブラリ化しといた方がいいと思われます。 3章は関数について。JavaScriptは関数型言語なんだよ、関数はファースト…

Secret of the JavaScript Ninja 2章を読んだ

d:id:ojimacと定期的に読んでいくことになった。 一緒に読みたい!という人がいれば気軽にTwitter(@cheesepie)で声かけてください! 2章はデバッグの基本(ロギングとブレークポイント)とテストケースについて。ロギングはまあconsole.logをクロスブラウ…

XMLHttpRequestのステータスコードが0になるケース

XMLHttpRequestのステータスコードが0になるケース。1. プロトコルがftpやfileなどhttp以外の場合 →例えば、ローカルでhtmlファイル開いて実行したりするとステータスは"0"になる2. Webサーバーがリクエストを送る時点で落ちていた場合 w3.orgに仕様として、…

Google ClosureでDOMContentLoadedイベント

closure のイベント処理には DOMContentLoaded イベントをクロスブラウザで実行してくれる仕組みが用意されていません。ということでready()関数を作ってみました。 jQueryの $(document).ready(fn); をclosureで書き直しただけです、すいません。。。ざっく…

初めてのJetpackでカラーピッカー作ってみた

今週末のMozilla勉強会のテーマがJetpackということで、前々から興味があったので触ってみました(初参加!ドキドキ)。JetpackはFirefoxで簡単なアドオンを作るためのアドオンです。 jQueryを内蔵してるので面倒くさい処理が簡単に書けるし、インストーラも…

JavaScriptで型判定いろいろ

型の判定をするときに「typeof」とか「instanceof」とか「==」とかしょっちゅう忘れる。 あとDOM要素もwindowだったりHTMLElementParagraphElementとかいろいろあってややこしや。この辺、jQueryのisArray()やisFunction()ではどうやってるんだろと見てみる…

JavaScriptでチーム開発

チーム開発だと、テストとか後でメンバー変わった時のメンテのしやすさとか考えると、ある程度書き方の作法を統一した方がいいので、どうしようかなーと考え中。何はともあれ、名前空間とクラスの書き方は合わせた方がいいですよね。 例えばこんな風に縛った…

JSONからDOMを生成するシンプルなjQueryプラグイン

jQuery使ってると、人によってDOM生成の仕方が結構まちまちになる。 その辺、クライアントサイドもMVC("M"がJSON、"V"がHTML、"C"がプラグイン)にすれば書き方が統一できるし、ソースも綺麗になりそう。 試しに、HTMLのclass属性を元にしてJSONデータを埋…

jQueryUIのsortableにハマる

超地道な作業ログを残してみる。optionでhelperを"clone"に指定したいんだけど、全然クローンされない。。。 placeholderも表示先エリアをCSSで指定しても全然表示されない。。 正直ソースコードの行数見てげんなりしたけど(コメント込みで7617行)、仕事な…

YUIのツリービューで謎。。。

YUIのツリービューは、YAHOO.widget.TextNodeを継承してノードを自由にカスタマイズできるのが とても便利なんですが、ちょっとハマったところをメモ。ツリーを描画する要素を変数で指定するとなぜか描画されない。 普通にエラーも吐き出してくれないからと…

jQueryでprototype.jsのbindみたいなの

jQueryでスコープを維持したままイベントリスナーを実行するのってどうすればいいんだろと思ってたんですが、bind()ってのがあるんですね。 var Sample = function() { this.initialize.apply(this, arguments); } Sample.prototype = { initialize: functio…

labelをクリックした際のイベントは何?

<input type="radio" id="item-0" name="test" value="hoge" /> <label for="item-0">ラベル</label> こんなHTMLがあって、ラベルをクリックしたときにラジオボタンのvalueを別の場所に表示させたいときは、何のイベントで取ってこれるんだろう。。。試しに「onclick」「onselect」「onchange」試したけど、どれも反応が全くない。 そもそもラベルをク…

JavaScriptでWysiwygなHTMLエディタを作ってみる

久しぶりにJavaScriptの勉強、ということでWysiwygエディタを作ってみました。サンプルも公開してみちゃいます。(一応IE,FF両方動くはず・・!) フォントサイズ変更、太字・斜字・下線、文字色、背景色など基本的な機能を実装してみました。 MDCとMSDNなど…

DOMノードの作成

毎回、document.createElementしてプロパティ追加するの面倒くさいので、まとめる。 var DOM = {}; DOM.create = function(parentElement, tagName, option) { var element = document.createElement(tagName); if(option) { for(i in option) { if(option.h…

隣り合うブロック要素の高さを揃えるJavaScript

よーし久々に書いてみるぞー。wktk divで表を作る時に、中身が可変長な場合、同列内のdivで高さがずれちゃうのを何とかしたい。例えばこんな感じでdivが並んでるとする。 (divはfloatで横並び) <div id="rows_1"> <div class="col"> hoge<br>hoge<br>hoge<br>hoge<br>hoge </div> <div class="col"> hoge<br>hoge<br>hoge<br>hoge </div> <div class="col"> hoge<br>hoge<br>hoge </div> <div class="col"></div></div>…

フォームチェック用JS

作った。といっても質の高いのはたくさん世の中に出てるので、勉強用です。 他のライブラリも画像やCSSも必要ないのが作りたかったんです。 エラー出力先のエレメントを用意しておいて、HTMLの最後にでも、 var v = Validator(document.forms["フォーム名"])…

バリデーション

バリデーション用のJSを作っていて、何故かフォームオブジェクトを取得できず。 調べてみたら、StrictなXHTML1.0だと、form属性にnameを指定できないみたい。input属性は指定できるのに! というわけでidを指定して、document.forms['formid']で無事に取得。

ハイライト処理の続き

結構簡単に出来ると思ったハイライト処理もsetTimeout()かsetInterval()を使わないと随時実行できないと分かって理解するのに苦戦した。といっても多分半分以下くらいしか理解できてないかも。 多分その辺りを理解すればいろいろできる幅が広がるんだろうな…

ハイライト処理

script.aculo.usのソースでエフェクト処理の勉強中。 基本になりそうなハイライト処理に関して。 script.aculo.usはパッと見わかりづらいのでもう少し簡単に書き直していきたい。 ハイライト処理は#ffffffなどのハイライト色と終了時の色を赤(R)・緑(G)・青(…

Functionオブジェクト

JavaScriptで関数を定義するには、"function foo() {}"といつものに加えて、Functionオブジェクトを作ることでも定義出来るらしい。 なので、こんな書き方も出来る。 function hello(name) { var name = name; alert("Hello" + name); } hello("goodman"); /…

キーコードをアラート

イベント関連でもう少し調べた。 onKeydownイベントで押されたキーを判定してみる。 keyevent.js function getKeyCode(e) { var keyHash = { 13 : "Enter", 32 : "Space", 33 : "PageUp", 34 : "PageDown", 37 : "Left", 38 : "Up", 39 : "Right", 40 : "Dow…

イベントハンドラ

引き続きJavaScriptの勉強。今日はイベントの扱いに関していろいろ調べた。 JavaScriptではユーザイベントに対して処理を定義できる。 DOM要素に対してコールバック関数を割り当てるプロパティをイベントハンドラプロパティと呼ぶとのこと。 主なイベントハ…

単数形を複数形に変換するJavaScript(複数形から単数形も)

追記:id:amachangさんからアドバイスをもらったので書き直してみました! 大きなデータはプロトタイプで持つとオブジェクトを作るたびに生成しなくて済むのでメモリに優しくなる、という理解ですがいいんだろうか・・・ ついでに複数形から単数形に変換する…