Collection & Copy - JavaScriptにおける古典的継承
翻訳 原文：Classical Inheritance in JavaScript著者：Douglas Crockford ※原文のコード内に誤りがあり、このまま記述しても動作しません。著者のコメント及び補足情報は翻訳メモを参照下さい。 君は自分が利口で階級にも属さず 自由だなんて思い込んでる―John LennonJavaScriptは、クラスという概念に囚われていない言語です。JavaScriptでは、古典的な継承の代わりにプロタイプ的な継承を使用します。これはC++やJavaのような旧来のオブジェクト指向言語に長けたプログラマを当惑させるかもしれません。JavaScriptのプロトタイプ的継承が、古典的継承に比べていかに表現力が優れているかを、これから見ていきましょう。 JavaJavaScript強い型付け弱い型付け静的動的古典的プロトタイプ的クラス関数コンストラクタ関数メソッド関
ブラウザ上でお絵かき: Days on the Moon
「Ajax を使った手書き文字認識」を見て。ここでは線を描くのに絶対配置の span 要素を大量生成しているけど、最近のブラウザってベクター描画エンジン付きのものが多いわけで。WinIE 5 以降の VML 、Opera 8 ・ Firefox 1.5 以降の SVG 、Safari 1.3 ・ Firefox 1.5 以降の canvas 要素といった具合に。 ということで各ブラウザでベクター描画エンジンが使えればそれを使い、なければ絶対配置の HTML 要素を大量生成することで、ブラウザ上でお絵かきできるというものを作ってみた。元に戻す / やり直すこともできる。線を描くだけで塗りつぶしはできないが。 その線を描くために作ったのが DrawingCanvas クラス。以下のようにすることで三角形が描ける。実際の描画部分には SVG Tiny 、HTML Canvas 、CSS Posi
最速インターフェース研究会 :: 実践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リファクタリング
同じ事をやるにも、いろんな書き方があるわけでいかにして短くてわかりやすいコードを書くかというノウハウを紹介します。 例として"abcde"を80回繰り返した文字列を作るとして実際に自分のコーディングスタイルがどんな風に変化していったのか、という。 短くなるのは確かなんだけどわかりやすいかというと、人によるかもしれない。 グローバル関数を定義2年前なら、多分こういう具合だった。 //ふつうに関数として定義する function x(str,num){ var tmp = ""; for(var i=0;i<num;i++){ tmp += str; } return tmp; } x("abcde",80) Stringのメソッドとして定義1年前だとこんな感じ。 //Stringのメソッドとして定義する String.prototype.x = function(num){ var tmp
WWW SQL Designer
What's new? 25.9.2008 Version 2.2 SQLite storage New datatypes New translations 18.7.2008 Version 2.1.1 Fixes in MySQL XSLT Minor improvements 28.6.2008 Version 2.1 New languages Dynamic window title "note" datatype attribute 1.4.2008 Version 2.0.1 Fixed AUTOINCREMENT for Foreign Keys Minimap visual aesthetic changes 28.3.2008 Version 2.0 ! Thanks to Mirko Buffoni for numerous consultations and su
YappoLogs: ページがどんなキーワードで検索されたかをTagCloud風に表示させるくっつきサービス
ページがどんなキーワードで検索されたかをTagCloud風に表示させるくっつきサービス Search Word Cloud ※11時に仕様を変更した追記を行っています。 うまい説明が思い浮かばないのですが javascriptファイルをページに貼り付けておくだけで、そのページに訪問した際に使われた検索キーワードを自動的に検知して そのキーワード達をTagCloud風に表示させる物を作ってみました。 機能は上記のものだけでいたってシンプルです。 このblogは、topの左上と各エントリの上にくっつけてます。 基本的な集計単位はURLベースなので、同一コンテンツに複数のURLが割り当てられてる時には挙動が変になるでしょう。 他にもネタがあるけど、とりあえず設置方法だけ書いておきます。 設置方法 <script src="http://swc.blogdb.jp/js/swc_init.js">
Collection & Copy - JavaScriptにおける高階プログラミング
翻訳 原文：Higher Order Programming In Javascript著者：Sjoerd Visscherライセンス：クリエイティブ・コモンズ・ライセンス(帰属) 前提知識JavaScriptを使ったオブジェクト指向プログラミングの知識が必要となります。以下のWebreferenceの記事を読み、よく理解しておいてください。OOP in Javascript, part IOOP in Javascript, part IIDouglas Crockford最終更新2004/3/28はじめに高階プログラミングでは、値として関数を使うことができます。つまり引数として関数を別の関数へ渡すことも、関数を別の関数の返り値にすることもできるのです。この形式のプログラミングは、しばしば関数型プログラミングで使用されますが、「通常」のオブジェクト指向のプログラミングでも非常に有用です。
最速インターフェース研究会 :: JavaScriptによるQRコード生成ライブラリ
ってのを作りました。 http://la.ma.la/misc/qrcode/ ネタのつもりで作ってたんだけど意外と大変だった。というか時間かけすぎた。 なんの役に立つのかと言われたら何の役にも立たないと自信を持って言える。 Ruby用QRコード生成クラスからの移植です。ライセンスはオリジナルに準拠します。 http://www.swetake.com/qr/ QRコードの仕様とかアルゴリズムとかそういうのは全然わかりません。挙動が同じになるようにしてみただけです。 表示にはテーブルタグを使っています。画像オフでも表示できます。 動作テストには http://www.psytec.co.jp/docomo.html を使いました。 アーカイブにdatファイル同梱したのでファイルサイズが2MB超えてます。 ソースだけ見たい人は、これをどうぞ。当然これだけじゃ動かないけど。 http://la
JavaScriptの簡易プロファイラ - llameradaの日記
JavaScriptで少し大きなアプリケーションを作っていると、処理速度がどんどん遅くなってしまうことがある。処理速度を向上させるには、ボトルネックとなっている処理を見つけて、その部分のパフォーマンスを改善するのが一般的である。そこで、ボトルネックを見つけるのに便利なプロファイラを作ってみた。 コードはこちら。 var Profiler = Class.create(); Profiler.prototype.extend({ initialize: function(){ this.keys = []; this.records = {}; }, observe: function(object, name){ name = name || "Method"; for (property in object) { if(typeof object[property] == "functi
AJAXアプリケーションのデバッグ、JavaScriptログ出力、Log4js - FAX
リンク Ajax非同期通信アプリケーションのデバッグを行う際に、以下ライブラリを利用し、ログ出力を行ないながら動作詳細を確認した。フランス製。 Log4js 前提クライアントとサーバーの通信をリアルタイムでログ出力を確認したい。Venkmanでステップ実行を行うと、タイムアウトが発生する。また正確なタイミングで振る舞いを確認できない。debug.jsは、まとめてフラッシュするため利用は難しい。 特徴ログを出力すると、リアルタイムに行が増えていく。ソートや、フィルタも存在する。debugや、infoなどのカテゴリ分けがある。ログと一緒に、オブジェクトインスペクタも表示できる。 利用手順ダウンロードし展開されたファイル全てを一つのディレクトリへ配置。HTMLヘッダに、以下を記述。 ログ出力したい部分に、以下を記述。debug、info、error、warnの4つのメソッドがある。フランス語、N
プロトタイプベース・オブジェクト指向
prototype-based object oriented 。 オブジェクトがスロット（クラスのインスタンスならインスタンス変数やメソッドに相当）の追加をクラスに依存せずに自由にできることを前提としたオブジェクト指向。あるいはそうしたオブジェクトを用いたプログラミングや、それをサポートする機構。 「インスタンスベース」、「オブジェクトベース」とも。 これらへの言い換えは「プロトタイプベース」という言葉が持つ限定的なニュアンスを払拭するのにおおいに役立つ。しかし同時に、前者の「インスタンスベース」において特に、“プロトタイプベースにはクラスがない”あるいは“プロトタイプベースはクラスベースの対極にある（あるいはアンチテーゼである）”といったような教科書的記述に惑わされている人をひどく混乱させるらしく、極端な拒絶反応を示す人もいるので注意。また、後者においては、オブジェクトオリエンテッド＝
onload時に複数のfunctionを実行するJavaScript
昨日に引き続きJavaScriptねたです。 ページを表示した時点でJavaScriptを実行したい場合、 window.onload=function(){ alert('called when window is loaded.'); } のようにwindowオブジェクトのonloadイベントに実行したいfunctionをセットしてやればいいのですが、これだと、オンロード時にひとつのfunctionしか実行できません。 そこで、オンロード時に複数のfunctionを実行できるようなスクリプトを書いてみました。今回のコードはnaoyaさんのprototype.js でデザインパターン - IteratorのエントリにあるIteratorパターンのコードをそのまま借りたリスペクト指向プログラミングになってますｗ //multiple_onload.js var OnloadFunction
Ajax時代の、サーバ<->クライアントで協調するMVCフレームワーク：Goodpic
This shop will be powered by Are you the store owner? Log in here
Collection & Copy - [翻訳]JSON in JavaScript
翻訳 原文：JSON in JavaScript JavaScriptは、 Netscape Navigator用のページスクリプト言語として広まった汎用のプログラミング言語です。Javaのサブセットであると広く信じられていますが、それは違います。Cのような構文とソフトオブジェクトをもつSchemeに類似した言語です。JavaScriptは、ECMAスクリプト言語仕様-第3版で標準化されました。 JSONの表記法は、JavaScriptのリテラルオブジェクトの表記法のサブセットです。JSONはJavaScriptのサブセットであるため、あれこれ悩まずにJavaScript言語で使用できます。 var myJSONObject = {"bindings": [ {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"
Collection & Copy - JSON入門
翻訳(thanks to JavaScript++かも日記) 原文：Introducing JSON JSON(JavaScript Object Notation)は、軽量のデータ交換フォーマットです。人間にとって読み書きが容易で、マシンにとっても簡単にパースや生成を行なえる形式です。JavaScriptプログラミング言語（ECMA-262標準第3版 1999年12月）の一部をベースに作られています。JSONは完全に言語から独立したテキスト形式ですが、C、C++、C#、Java、JavaScript、Perl、Python、その他多くのCファミリーの言語を使用するプログラマにとっては、馴染み深い規約が使われています。これらの性質が、JSONを理想的なデータ交換言語にしています。 JSONは2つの構造を基にしています。 名前/値のペアの集まり。様々な言語で、これはオブジェクト、レコード、構
1分でわかるJSAN - FAX
1分でわかるJSAN 技術 概要 JSANは、他のライブラリをインポートするライブラリです。 リポジトリ リポジトリは、ライブラリの検索対象のパスです。 JSAN.addRepository()で追加します。 JSAN.includePathにリストされます。 デフォルトのリポジトリは「.」と「lib」です。 JSAN.use() ライブラリをインポートするには、JSAN.use()を使います。 クラスがロードされます。 個々の関数もグローバルコンテキストへロードされます。 JSAN.require() クラスのみをロードします。 「Test.Simple.plan()」のように、全部書けば呼び出せます。 グローバルコンテキストを汚しません。 JSAN.exporter() ロード済みのクラスから、好きな関数をグローバルへ置き直します。 関数が使いやすくなります。 好きなライブラリの、好き
script.aculo.us - web 2.0 javascript
This is a bugfix release that bumps script.aculo.us to version 1.9.0. Most importantly, the included Prototype 1.7 provides performance and compatibility improvements with the latest browsers. One other fix is includes, that makes the script.aculo.us loader work better if you use script tags in the BODY of your page. Download at http://script.aculo.us/, or grab/fork the source at http://github.com
JSAN-0.10 - ドキュメント - FAX
翻訳 原文：JSAN-0.10 - DocumentationCopyright (c) 2005 Casey West. All rights reserved. 名前JSAN - JavaScript Archive Network概要 // または、ライブラリの中では if (typeof JSAN != 'undefined') { JSAN.use('Some.Library'); } 詳細このライブラリは、古典的なプログラミング言語に備わる振る舞いをJavaScriptへ追加します。そして、きちんと設計されモジュールに分けられたコードを作成するために必要な機能をプログラマに提供します。クラスプロパティglobalScope JSAN.globalScope = _player; globalScopeには、デフォルトでselfの値がセットされます。これはウェブブラウザでは上手く
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ajax を使った手書き文字認識
nazono.objectdump [javascript] nazoking