シンプルなカラーピッカーを作ってみました。 →サンプルはこちら。 四角をクリックすると色選択UIがポップアップします。 色にカーソルをあわせて、クリックで選択。 ソースは以下。 /** * カラーピッカー * @param elementId ピッカーを表示する要素のID * …

「.style.backgroundColor」で要素の背景色を取得した場合、ブラウザによって値の形式が異なるようなのでちょっと調べてみた。 ブラウザ 型 形式 Firefox3.0.5 string 常に「rgb(255,255,255)」形式で返される IE6,7 string スタイルでの設定値が返されるが…

この間作成した数値の先頭に0を追加して桁をあわせる関数がバグっていたので修正。「Math.log(0)」って-Infinityを返すのね・・・orz。あと負数の場合もNaNになるのか。 Math.log( 0 ) // -Infinity Math.log( -1 ) // NaN Math.log( -100 ) // NaNというこ…

数値の先頭に0を追加して桁をあわせる関数を書きました。 /** * 必要な桁数まで0を埋める。 * @param number 数値 * @param size 桁数 */ function fillZero( number, size ) { var s = Math.log( number ) * Math.LOG10E; for( i=1,n=size-s,str="";i

Yahoo! UI Library - Cookie Utilityを使うとCookieにさくっとアクセスできます。 1.必要なモジュールをインポートすれば、 <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/cookie/cookie-min.js"></script> 2.「YAHOO.uti…

CSS+JavaScriptを使って、簡単なプログレスバーを作ってみました。戦略は以下のとおり。 バーとして使うアニメーションGIFを作成しておく。 サンプルでは→を用意して使いました。 プログレスバーとするdiv要素を用意し、CSSで 背景画像として↑の画像を設定。…

prototype.jsのインポートで利用可となる、「Enumerable#each()」ですが、これちゃんとbreakできるんですね。具体的には、「throw $break;」とすることで、以降の要素の列挙がキャンセルとなります。 var out = document.getElementById( "out" ); var array…

prototype.jsをインポートすれば、String#gsub()も使えるようになります。 「gsub()」は「文字列のうち、正規表現にマッチする部分すべてを置換文字列で置き換える」関数です。 置換文字列は「正規表現の評価結果」をコンテキストとしたテンプレート文字列と…

prototype.jsをインポートするとtimesが使えるのか! // 0〜10までを列挙 var out = document.getElementById( "out" ); (10).times( function(i){ out.innerHTML += i + "<br/>"; } ); 実行結果はこちらいいね!</br/>

prototype.jsをインポートすると追加される「Function#argumentNames」を使うと、「関数の仮引数名一覧」を取得できます。 // 関数。 var f = function( mii, tora, shiro ) {} // 仮引数一覧を取得 var out = document.getElementById( "out" ); out.innerH…

prototype.jsをインポートすると追加される「Function#bind」を使うと、「関数とオブジェクトを関連づけた関数」を作成できます。 オブジェクトと関連づけられていない関数内では、thisはグローバルスコープとなりますが、 オブジェクトと関連づけられた関数…

JavaScriptの 正規表現"\w"は日本語にマッチしない。以下検証用のコード。 /*文字列に正規表現がマッチするか評価する。*/ function test( str, reg ) { var out = document.getElementById("out"); out.innerHTML += str + " / " + reg + " : " + ( new Reg…

hrefを無効化するときに使う"void(0)"ですが、そんな組み込み関数あったっけ、と思って調べて見た。→Mozilla developer center - Special Operators - voidリファレンスによると、voidは 右辺の式を実行するが、 式の実行結果を返さない ようにするための演…

今日、CodePressのコードを読んでいて見つけたfor文。 var array = 省略 for(var i=0,n=array.length;i

accesskeyじゃなく、accessKeyなので注意な! document.getElementById("foo").accessKey = "X"; "accesskey"でも以下の場合は設定可能で、なんかのバグかなーとか子一時間悩んだ。orz. FireFoxでsetAttribute()で設定した場合(IEでは効果なし) innerHTMLで要…

JavaScriptで配列を列挙するとき、 for ( var i = 0; i < array.length; i++ ) {} と書くより、 var length = array.length; for ( var i = 0; i < length; i++ ) {} とした方が早いらしい。理由は「配列の長さを参照するのが遅い」からで、上の方だとループ…

昨日のサンプルコードを書くときに気になってちょっと試していたのだけど、innerHTMLでscriptタグを挿入しても実行されないみたいだなー。(FireFox3とIE7では)。あれ、じゃYUIのGetUtilityはどうやってるんだろう、と思っていろいろ試してみるとappendChild(…

prototype.jsをインポートすると追加される「String.escapeHTML()」や「String.stripTags()」を使うと、HTMLのタグをサニタイズできます。 「String.escapeHTML()」は「」などの文字列を「&lt;」や「&gt;」に置き換えます。 「String.stripTags()」はタグを…

「Custom JavaScript Dialog Boxes」はJavaScriptでシンプルなモーダルダイアログを実現するライブラリです。使い方も簡単で、 1.必要なソースとcssをインポートして、 <link rel="stylesheet" type="text/css" href="dialog_box.css" /> <script type="text/javascript" src="dialog_box.js"></script> 2.htmlのすべての本文を囲むようにid='content'な要素を追加。 このライブラリでは、</link>…

Yahoo! UI Library : calendarを使ってカレンダーの表示と選択された日を取得するサンプルです。 必要なソースを取り込んで、 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/calendar/assets/skins/sam/calendar.css"> </link>

やっぱり、ちゃんと測ってみようかな。ということで、プログラム上で画像を描き終わるまで(=graphics.drawRectやctx.fillRectから復帰するまで)の処理時間を出力するようにしてみました。 →Flashで描く →Canvas+JavaScriptで描く(ExplorerCanvasを設定済み。…

FlashとCanvas+JavaScriptのどっちが描画が早いか、四角を16*16*16=4096個描くスクリプトを書いて試してみました。 →Flashで描く →Canvas+JavaScriptで描く(ExplorerCanvasを設定済み。IEでも見れます。) ちゃんとは計ってないけど、何回かリロードして試し…

Miiで使っているキーバインドクラスを手直しして、PrototypeJSに依存しないようにした。使い方は次のような感じで、引数で「リスナを設定する要素」と「キー&処理のペア」を指定してnewするだけ。 // キーバインド // 第一引数で、キーとそれが押された場合…

次のようなコードを書いたら、IE6で無限ループに! // テスト用オブジェクト function Test() {} Test.prototype = { a: function() {}, b: function() {} } var test = new Test(); // for .. inでループ → IE6だと無限ループに! for ( var i in test ) { do…

JavaScriptで動的に作成したエントリに、はてなスターをつけられるようにするサンプルです。 HatenaStar.jsを取り込むと、ドキュメントロード時に指定されたルールに従ってはてなスター対象となるエントリが検索され、☆追加ボタンや☆数の表示が行われますが…

コマンドのグレーアウト機能を作るときに、JavaのActionみたいな仕組みがあれば便利そうだな、と思って作ってみました。 Actionってなに? コマンドを実行した時の処理内容(関数)と、コマンド実行可/不可といったコマンドのプロパティをまとめてオブジェクト…

昔書いたリスナ登録ユーティリティをContainerJS version 0.3.0にあわせて修正。Typeを使ってちょっと短く書けるようになってます。 サンプル 簡単に解説。 モデル、ビュー、コントローラからなる簡単なプログラムです。 ビュー→モデルの依存でオブザーバー…

text2pngはHTML内の任意のテキストをPNG画像に変換するWebサービスです。 専用のJavaScriptクライアントライブラリのAPIを実行することで、HTML内の要素がPNG画像に置き換わります。 テキストのフォントやサイズは、CSSの値が継承されます。また、APIの引数…

自作Webサイトへ、はてなスターを導入する手順のメモです。次の2つを行えばとりあえず★が付けられるようになります。 はてなスターから提供されているスクリプトを読み込む。 ★を付けられるエントリの一覧を返すメソッド(Hatena.Star.EntryLoader.loadEntrie…

はてなスターAPIを使ってさくっと取得できます。JSONPに対応しているので、JavaScriptだけ書けばOK。 /** * はてなスター情報取得リクエストから呼ばれるコールバックハンドラ。 * @param {Object} data はてなスター情報 */ function showStar( data ) { do…