var Book = (function (){ var cost = 1000 ,tax = 0.05 ,price = function () { return cost * (tax + 1) }; return { getPrice : function () { return price();//cost * (1 + tax); } ,getTax : function () { return cost * tax; } }; })(); console.log(Book.getPrice());//1050 console.log(Book.getTax());//50 console.log(Book.price());//error Bookはstaticな関数を持ったクラスのように使えます。 getPrice, getTaxはstatic public function

前回の投稿「JavaScriptでOOP – privateぽい関数と変数, staticなやつ」ではstaticな関数と変数を作成しました。 今回はインスタンスが作成できるClassみたいなのにprivateな関数と変数を設定します。 var Product = (function () { var cost = 1000 ,tax = 0.05 ,price = function () { return cost * (tax + 1); } ,main = function () { }; main.prototype = { tax: function (n) { tax = n; } ,price : function () { var p = price(); var t = cost * tax; return [p,t,p-t]; } }; return main; })(

久しぶりにJavaScriptどっぷりな生活を送りました。 これがかなり楽しい。 なんでかなぁって考えるとJavaScriptをガリゴリ書いてるとFlash 5, Flash MX 時代の ActionScript 1 を思い出してしまうからみたいです。 JavaScriptを書くとFlash MX時代に見て覚えたActionScript Tipsがほとんどそのまま使えて楽しいことこの上なかったりします。 当時むさぼり読んだ Robert Penner さんの書かれた “Robert Penner’s Programming Macromedia Flashmx” は忘れられない本のひとつです。この本でprototypeチェーンそしてOOPを知りました。

We'll be back soon! Our site is currently undergoing maintenance. Please check back later.

Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法 2011-08-28 Webデザイナーが、Webサイトのパフォーマンスを重視する傾向はあまり無いように感じますが重要なことです。 Googleでは、0.5秒遅くなると、検索数が20%減少する amazonでは、0.1秒遅くなると、売り上げが1%減少する という報告もあるようです。Webサイトのパフォーマンスはコンバージョンにも影響する大切な部分。 今回はWebサイトのパフォーマンスを上げる方法を取り上げます。 パフォーマンスアップの前に 応答時間の限界 0.1秒までなら、結果はコンピューターではなく、ユーザーによって引き起こされたように感じる。 1秒までなら、"遅れている"と感じるが、ユーザーの思考は途切れずに、自由に動いていると感じる。 10秒までになると、ユーザーがコンピューターに振り回されている気持ちになり、ストレ

連載目次へ クイズ…下記のJavaScriptコードが，意図した動作をしないのはどうしてですか。（制限時間１分） やりたい事 フォーム上で，テキストボックスに整数を入力してもらう。 有効な整数かどうか，ページ上でバリデーションを行なう。 <input type="text" id="my_num"> <input type="button" onClick="f()" value="数値チェック"> <script language="JavaScript"> function f() { var str_num = my_num.value; if ( isNaN( parseInt( str_num ) ) || isNaN( str_num ) ) { alert("有効な整数ではありません。"); } else { alert("OK"); // 有効な整数が入力された } } <

複数のコールバックをまとめて受け取るためのクラスを書いてみました。 JavaScript は何かとコールバックが多用される言語です。単発のコールバックならば問題はありませんが、複数のコールバックを同時に使用して、それらが全て呼ばれたときに処理を進めるなどの処理は記述が複雑になりがちです。 そこでこの Callback クラス。 var cb = new Callback(); request(..., cb.here()); request(..., cb.here()); request(..., cb.here()); cb.then = function(result1, result2, result3) { } 上記のように「複数のコールバック呼び出しが完了した時点で処理をすすめる」パターンを簡素に書くことができます。 各コールバックに渡された引数もまとめて最後の then 関数

IE 10pp2 と iPad2 (iOS5) のスコアを追記しました iPhone4S (iOS5) のスコアを追記しました Firefox 4 から window.mozRequestAnimationFrame が利用可能になっています。 window.requestAnimationFrame / setTimeout(,4) / setInterval(, 16) で パーティクル3万個を飛ばすデモ。 ベンチマークマシンのスペック → MacBook (13-inch, Late 2009) - 技術仕様。 メモリ4GBに + BootCamp + Windows7 上で計測しています。 Windows エクスペリエンスインデックスの数値は、5.1 で、各項目は プロセッサ: 5.8 メモリ: 5.8 グラフィックス: 5.1 ゲーム用グラフィックス: 5.5 プライマリハードデ

結構前に公開していたんですが、きちんとした紹介を書いてなかったので改めて。Githubにて、T.jsという名前のJavaScript用テンプレートエンジンを公開しています。 T.js - DOMBuilder-like template engine for JavaScript T.jsとは JavaScriptでHTMLを書くためのライブラリ（一種のテンプレートエンジン）です。 T.table("#addressbook")({style:{borderCollapse:"collapse"},border:"5"}, T.thead( T.tr( T.th("name"), T.th("address"))), T.tbody( T.tr(".odd")( T.td("alice"), T.td("a street")), T.tr( T.td("bob"), T.td("b str

ちょっと勢いに任せて書いちゃったので攻撃的な文章になってます。。 すごくわかりやすい解説記事を頂いたので、こちらも必読です。 new を不当に貶める陰謀と JavaScript におけるクラスの継承構造の話 - vivid memo (追記：2011/5/15) 前の記事「newを封印して、JavaScriptでオブジェクト指向する」が思いのほか反響が大きかったので、調子に乗って補足を書いてみますよ。 ブコメへの返信 「無用な複雑化に見える。」「俺俺オブジェクト指向な気がする。」といったご意見もいただいたんですが、普通たった１０行の関数でオレオレオブジェクト指向なんて作れないですよ…。JavaScriptの内部機構をほとんどそのまま使っているからこそ、この行数で済むのです。 それに、このプロトタイプ的継承の考え方をDouglas Crockfordが編み出したのは、もう５年も前の話です。E

最近、徳丸本をじわじわ読んでいるのですが、DOM based XSSの話が書いてあったので、少し言及しておこうと思います。 徳丸本から引用 DOM based XSSと呼ばれるXSSがあります。これは、JavaScriptによりクライアント側で表示処理する箇所があり、そこに脆弱性がある場合のXSSです。 サンプル書いてみました。 <script> document.write(unescape(location.href)); </script> こいつを適当なファイル名で保存して、domxss.html#<script>alert("hello")<script>などのURLでアクセスするとalertが表示されるはずです。任意のスクリプトが実行可能な状態ってことですね。任意のスクリプトが実行可能ってことは、セッションクッキー盗み放題で、他人に成り済まして買い物できちゃったりするレベルです

We'll be back soon! Our site is currently undergoing maintenance. Please check back later.

Closure CompilerはJava製のオープンソース・ソフトウェア。Googleでは言わずもがな、コンマ数秒単位の速度にこだわって開発が行われている。速さのためにWebブラウザ自体やOSまで開発してしまうのだから、そのこだわりの強さが感じられるだろう。 CUI版 JavaScriptは開発の方法によって実行速度や読み込み速度が大きく変わってくる。そのためのチェックと最適化処理を行ってくれるのがClosure Compilerだ。Closure CompilerはJavaで作られたソフトウェアで、CUIベースで利用する。 基本的な使い方はJavaScriptファイルを引数で渡し、その出力先を指定することで最適化処理を行ったファイルを生成する。最適化処理は空白を消すのみ、シンプル、アドバンスと3段階から選べるようになっている。さらにエラーチェックも同時に行われ、Warningまたはエラ

Typographyシリーズ第2弾。 文字画像をトレースしてパス情報を求めようとあれこれしています。 オレオレアルゴリズムのため難しい漢字とか苦手かも。。。 How it works : http://jsrun.it/tsmallfield/stars2?debug Stars #1 : http://jsdo.it/tsmallfield/stars /** * @fileoverview Stars 2 * @author Tohl SMALLFIELD */ "use strict"; (function(win, doc) { var vibration = 0, tmr; /** * @see http://dvcs.w3.org/hg/webperf/raw-file/tip/specs/RequestAnimationFrame/Overview.html * * TODO

JavaScriptの書き方はJavaScript自体がある程度自由なためいろいろな書き方ができますが、一貫性を持って書いた方がバグなども発生しにくくなるため、コーディングルールを定めておくのはよいことだと思います(特に複数人の開発の場合) 有名な企業やライブラリはコーディングルールも公開している事が多いので適当にまとめてみました JavaScript style guide – MDC Docs Mozilla/Firefox向けのものなので、一部ECMAScriptの範囲を超えたものも含まれています。 多くの人が見ていると思うので、見たことない人は一度読んでみるといいです。 jscsにこのコーディングルールをチェックするプリセットが用意されています。 Google JavaScript Style Guide Google JavaScript Style Guide 和訳 — Goo