第1回 JSDeferredによる簡単非同期処理 | gihyo.jp
どうもはじめまして、株式会社はてなのid:cho45です。これから数回に渡り、拙作のJavaScriptのライブラリであるJSDeferredの紹介と、それに関係するJavaScriptにおける非同期の技術に関して解説させていただきます。 JavaSciptにおける非同期処理 非同期処理とは まずは確認程度に、非同期処理がどういうものかを解説しておきます。先に乱暴にまとめてしまうと、以下の事柄が大切なところです。 非同期とは「あとで」という意味 同期処理はコードの見た目順に実行される／非同期ではそうならない JavaScript の非同期処理は絶対に同期処理にすることができない JavaScriptにおける非同期処理をいくつか例に出すと、以下のようなものが挙げられます。 リスト1 // XMLHttpRequest の例 var req = new XMLHttpRequest(); re
JavaScriptでタイマーを使って擬似マルチスレッドを実現する方法
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers SitePointのJavaScript Timer-Based Pseudo-ThreadingにおいてJavaScriptで擬似マルチスレッドプログラミングを実装する基本的な方法が紹介されている。アイディアの根幹は細切れにした関数をsetTimeout()で一定期間区切りにして、順次実行していくというもの。実際のところ、このテクニックを使って擬似マルチスレッドプログラミングを実施するのは開発の手間を考えるとあまり効率のいい方法とはいいにくい。効率のいいマルチスレッド処理を実現するにはWeb Workersを使うというのが現実的といえる。しかし、掲載されているサンプルコードが興味深く、Web Workersが利用できないブラウザ向けの手法として
最速インターフェース研究会 :: JavaScriptにおけるdeep clone
http://blog.livedoor.jp/dankogai/archives/50957890.html まず、Object.prototypeにメソッドを生やしてしまうとfor inでキーを列挙するときにいちいちhasOwnPropertyを使わないといけなくなるので普通は使いません。影響が大きすぎるので、よっぽど変態的なライブラリじゃないと使わない。他のライブラリと組み合わせるとほぼ確実に問題が起きる。それから、deep_cloneが欲しい場合はJSONを作ってevalすればよい。パフォーマンスを気にする場合とか、浅いコピーが必要な場合はそれなりに工夫する必要があるけど。 で、JSONにするのにFirefoxだとtoSourceというのが使える。unevalというラッパーがあって、これだとnullでも平気。 http://subtech.g.hatena.ne.jp/cho45/
最速インターフェース研究会 :: 実践JavaScriptリファクタリング、その2
連載すんの？ リファクタリングとか嘘で実は実践ビルトインオブジェクトハックなんだけど。 例題 配列 a = [3,5,4,2,1] から一番小さな値と、一番大きな値を取り出すにはどうすればいいか。 多分昔はこんな風に書いてたと思うんですよ。 a = [3,5,4,2,1]; for(i=0;i<a.length;i++){ if(i == 0){ min = a[0]; max = a[0]; } if(min > a[i]){min = a[i]} if(max < a[i]){max = a[i]} } 模範解答として、後先考えないやり方を提示しておく。 a = [3,5,4,2,1]; min = a.sort().shift();// 1 max = a.sort().pop(); // 5 短い。ただし、これをやるとaの内容は並べ替えられて最初と最後の要素が取り除かれる。 a /
JavaScriptでの配列のコピー - STONEDSOUL
JavaScriptで配列をコピーするのにちょっとハマったので、調べたことを書いておく。以下のコードは llevalで結果を確認した。 JavaScriptでは、以下のようにすると配列のコピーではなく、元の配列への参照となる。 var a = [1, 2, 3]; var b = a; print(a); //[1, 2, 3] print(b); //[1, 2, 3] b[3] = 4; print(a); //[1, 2, 3, 4] print(b); //[1, 2, 3, 4] シンプルな配列ならば、次のようにしてコピーできる。 for文を使う。 var a = [1, 2, 3]; var b = []; for (var i=0, l=a.length; i<l; i++) { b[i] = a[i]; } print(a); //[1, 2, 3] print(b); /
JavaScriptによるマルチスレッドの実現‐Concurrent.Threadの裏側
function f ( ) { do_something(); do_another(); do_one_more(); } このプログラムでは順番に3つの関数を呼び出していますが、各関数呼び出しの間でいったんスレッドの実行権を他のJavaScriptコードに渡したいとします。これは次のように、各関数呼び出しをそれぞれ別の関数に分けて、間にsetTimeoutを挿むようにプログラムを書き換えることで実現できます。 function f ( ) { do_something(); setTimeout(f1, 1); // 1ミリ秒後にf1を呼び出す } function f1 ( ) { do_another(); setTimeout(f2, 1); } function f2 ( ) { do_one_more(); } こうして書き換えた関数fを、 f(); f(); のようにし
JavaScript 標準ライブラリ Error - Wikibooks
[編集] Errorオブジェクト Errorオブジェクトはエラーメッセージを作成する。throw文でエラーを発生させるために用いられる。 var error = new Error(); error.name = "HumanError"; // エラーの名前（任意） error.message = "Something is wrong."; // エラーメッセージ throw error; // エラー発生 uncaught HumanError: Something is wrong. EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIErrorなどいくつかのエラー型はあらかじめ定義されており、エラーの種類に応じて使い分けることができる。 function reduce(callback) { // 関数を定義
FirebugのProfileでJavaScript関数の実行時間を計測するのが便利そう - F.Ko-Jiの「一秒後は未来」
リクルートのメディアテクノロジーラボ主催の The JUI 2008 Tokyo ってのに行ってきた。 jQuery UI Libraryの開発者(Paul Bakaus氏)やid:amachangさんのプレゼン、ライトニングトークでは株式会社はてなのid:malaさんの飛び入り参加などもあって楽しかった。 眠いので一番おぉっと思ったものをひとつ。 amachangさんのプレゼンで「便利なのでおすすめ」と説明されていた Firebug を使ったJavaScript関数の実行時間計測の方法が初耳でとても便利そうだった。具体的には Firebug にある Profile の機能でJavaScriptの実行時間が関数別に見られるというもの。 ↑ Own Time というのが内部の関数の実行時間を含まない、その関数そのものの実行時間を示すらしい。 関数の内部の一部分の実行時間を計測したいときは、計
JSXGraph
Interactive geometry, plotting, visualization JSXGraph is a cross-browser JavaScript library for interactive geometry, function plotting, charting, and data visualization in the web browser. Upcoming events: A JSXGraph workshop and several JSXGraph related talks at the International Meeting of the STACK Community 2025, in Durham, UK, April 7-9, 2025 24 hours of JSXGraph 2025, 26. - 27. February 20
prototype を使う場合と使わない場合の速度比較 - basyura's blog
prototype を知らずに作って今に至る某システム。レスポンス問題が再燃したので prototype の使用有無でどれだけ違うのかちょっと比較してみた。 簡単なオブジェクトを new で生成する場合の速度比較 this.xxx を使ってグローバルな関数をメンバ(オブジェクトの外部からアクセスできる関数)として定義する this.xxx を使って内部関数をメンバとして定義する prototype を使って一つずつ関数を定義する prototype を使って一度に関数を定義する 1. this.xxx を使ってグローバルな関数をメンバ(オブジェクトの外部からアクセスできる関数)として定義する var count = 100000 var start = new Date(); function Test1(a , b , c , d , e ) { this.a = a; this.b =
Sort an Array of Objects in JavaScript with the sort() method— SitePoint
Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. If you need to sort an array of objects into a certain order, you might be tempted to reach for a JavaScript library. But before you do, remember that you can do some pretty neat sorting with the native Array.s
JavaScriptのsort()機能を知る
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers WebページやWebアプリケーションを開発するにあたってJavaScriptは欠かすことができないプログラミング言語になりつつある。ブラウザさえあれば簡単に使い出すことができて、それなりにすぐに効果が見込める。しかし、検索してもまとまった優れたチュートリアルやAPIマニュアルにたどり着きにくいというプログラミング言語でもある。Mozillaがこの状況を変えようと取り組みを開始したことは、この状況のひとつの側面を示唆している。 しかし逆に見ると、毎日さまざまなブログでテクニックやティップを得やすいプログラミング言語だともいえる。すでにある程度のプログラミングの経験があるなら、JavaScriptはそうしたスニペットやティップを積み重ねて使っていくの
Javascript
クラスを用いたオブジェクト指向 JavaScript はプロトタイプ・ベースのオブジェクト指向言語ですが、Java のようなクラス・ベースのオブジェクト指向でプログラミングすることも可能です。 しかしプログラムの表面上の外見は複雑になります。 簡単にクラスを定義できるような構文上のサポートがないからです。 コンストラクタ Java 言語では、オブジェクトを作成するときに new 演算子を使いました。 実は JavaScript でも new 演算子が使えます。 今、Java 言語で書くと次のようになるクラスのオブジェクトを作りたいとしましょう。 class Position { int xpos, ypos; Position(int x, int y) { xpos = x; ypos = y; } } JavaScript 言語では、まず次のような関数を書きます。 この関数をコンストラ
Turn.js: The page flip effect in HTML5
Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5. <div id="flipbook"> <div class="hard"> Turn.js </div> <div class="hard"></div> <div> Page 1 </div> <div> Page 2 </div> <div> Page
PSD.js by meltingice
A Photoshop PSD file parser in Javascript for NodeJS and the browser. View the Project on GitHub meltingice/psd.js Download ZIP File Download TAR Ball View On GitHub A general purpose PSD parser written in Coffeescript. Based off of PSD.rb. It allows you to work with a Photoshop document in a manageable tree structure and find out important data such as: Document structure Document size Layer/fold
HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」:phpspot開発日誌
turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ＆ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単です。<div>を並べて初期化するだけ。 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript Timer-Based Pseudo-Threading — SitePoint
Google Code Archive - Long-term storage for Google Code Project Hosting.
GitHub - max-mapper/geojson-js-utils: JavaScript helper functions for manipulating GeoJSON
GitHub - bjornharrtell/jsts: JavaScript Topology Suite
