Prototype.jsを使おう[入門・中級]：住所検索システムを作ろう: Recently Ajax
先日 jQueryを使って作ってみた住所検索システムですが、IEに対応できなかったり、緯度・経度だけをスマートに表示することができませんでした。 管理人たにぐちが、へたれなだけかも知れませんが、jQueryはどちらかというと通信をばりばりやるようなプログラムよりは、CSSを随時切り替えてエフェクトをかけたりといった「表側」の処理が得意なのかも知れませんね。ということで、同じプログラムを Prototype.jsで作ってみました。 サンプルはこちら 住所検索システム - Prototype.js版 Prototype.jsだけだと、XMLの処理などがあんまり充実していないので、XMLを JSONに変換してくれるJKL.ParseXMLライブラリも組み合わせます。（というか、ほとんどこちらのライブラリだけで処理が完了しちゃう） プログラムはこちら。まずは、住所検索のサービスを呼び出すための
ITmedia エンタープライズ：ココを理解すれば近道な「Ajaxフレームワーク」 (1/5)
ココを理解すれば近道な「Ajaxフレームワーク」：Web 2.0で変わるWebプログラミングの常識（1/5 ページ） AjaxをWebアプリケーションに取り入れるには、デファクトスタンダードなフレームワークを利用するのがよい。基礎を理解すると、さまざまな応用例が考えられるはずだ。 このオンライン・ムックPlus「Web 2.0で変わるWebプログラミングの常識」、第6回目となる今回は、第5回「そのサービスはAjaxフレームワークで一変できるか？」に続く、フレームワークの実装例について解説していく。冒頭よりコードを挙げた実践的な内容に入っていくため、内容が不明な場合には、最低でも第5回の最初から読んでみるとよい。 このオンライン・ムックPlus「Web 2.0で変わるWebプログラミングの常識」の連載を読むことで、読者はAjaxの実装形態がどのようになっているのか理解することができるはずだ。
そのサービスはAjaxフレームワークで一変できるか？
そのサービスはAjaxフレームワークで一変できるか？：Web 2.0で変わるWebプログラミングの常識（1/4 ページ） 「prototype.js」と呼ばれるJavaScriptフレームワーク。多くのAjaxを応用したサービスで使われている「Ajaxフレームワークのデファクト」だ。 このオンライン・ムックPlus「Web 2.0で変わるWebプログラミングの常識」では、これまでにAjaxの概要（第1回）から発展系としてどのような取り組みあるのか（第2回）、そして、効率的な組み込み方法の一つとしてJSONと呼ばれるデータ形式のやり取り（第3回）、Webサービスとの連携（第4回）について解説した。 Ajaxアプリケーションの開発では、Webブラウザ依存の問題を解消したり、DOMツリーを操作するといった必要性がある。しかし、開発者が一からコード記述していくのは現実的ではない。そこで一般には、何
prototype.jsクックブック ホットキー（ショートカットキー）の実装 - Yet Another ....
最近、Web上のサービスでもホットキー（ショートカットキー）*1を実装している所を多く見かける。はてなでもそうだし、check*padでもそう。個人的にも凄い好きな機能なので、あると嬉しくなる。 さて、これの実装方法はとりあえずは難しくない（ただし、ブラウザの対応具合に不安が多々ある）。ロジックとしてはこうだ。 documentに発生したkeydownイベントをキャッチする。 イベントの発生元がtextareaタグかinputタグの時は、入力なのでイベント無視。 押されたキーが欲しいキーかを判断。 押されたキーに対応する関数を呼ぶ。 というわけで、サンプル。 http://ya-lab.main.jp/prototype-js-cookbook/06_hotkey/ ここではkeybind.jsと、上記サンプルのソースを見てもらいたい。keybind.jsの動作は上で書いた通りなので、ソー
escapeHTML の実装 3 パターン (ベンチマーク付き) - (new Hatena).blog()
ウェブを扱うライブラリやプログラムで必ずと言って良いほど見かけるものに、escapeHTML という関数があります。 "&" 等、特別な意味を持つ文字を、表示等のために実体参照 (&) に変換するお決まりの関数なんですが、実装には色々とバリエーションがあるものです。 1. String#replace メソッドを繰り返す (MochiKit 等) function escapeHTML(str) { return str.replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<").replace(/>/g, ">"); }このパターンが最も多く見受けられます。Ruby でも同様に gsub を繰り返す方式を見かけることがあります (例: RSS::Utils.html_escape)。 2. Str
Prototype.jsの$のちょっと変わった使い方 - IT戦記
引数に全部$したい場合。 arguments = $A(arguments).map(function(e){ return $(e); });これより arguments = $.apply(null, arguments)こうすると楽チンだし、ちょっと速い。 え？当たり前？ すみません。今日気が付きました。
ScriptaculousのEffect実行順序を管理するJSを作ってみた。 - IT戦記
仕事で使おうと思って作ったら意外といい出来だったので公開してみる。 だうそろーど たとえば、こう書くと var element = $('block'); var planner = new EffectPlanner( [ { Move: [element, {x: 200, y: 200}] }, { Move: [element, {x: 0, y: 300}] }, { Move: [element, {x: 300, y: 0}] }, { Move: [element, {x: 0, y: -300}] }, { Move: [element, {x: -300, y: 0}], next: 1 } ] ); planner.start(); こうなる http://sample.ecmascript.jp/20060523-00.html たとえば、こう書くと var col
hori-uchi.com: OOなJavaScriptの勉強がてら、ボタンの2度押し禁止機能を簡単に実現するライブラリを作ってみました
OOなJavaScriptの勉強がてら、ボタンの2度押し禁止機能を簡単に実現するライブラリを作ってみました ちょっと時代に乗り遅れている気もしますが、最近prototype.jsをつかったOOなJavaScriptを書くのにはまっています。 今日はbindとbindAsEbentListenerの勉強がてら、これまたかなり昔話題になった「2度押し禁止ボタン」を実現するコードを書いてみました。 input.js 使い方はこんな感じです。 // prototype.jsとinput.jsをロードします。 <script type="text/javascript" src="/path/to/prototype.js"></script> <script type="text/javascript" src="/path/to/input.js"></script> <script type=
prototype.js で Ajax してみた, FreeBSD(98) 2.1.0R 入門キット
※ このエントリはすぐ使えるサンプルを提供することを目的としていません。自分の試行錯誤を記録しているだけです。PHP と JavaScript をまーだいたい分かっている人間が実際に Ajax を書く際にうまくいかなかった点の実例としてご覧下さい。 まとまった情報を紙でほしかったので WEB+DB Press Vol.31 を Amazon のマーケットプレイスで購入して GW の宿題としてチャレンジ。とは言っても事前に @IT とかあれこれ情報は手に入れてるのでこの特集だけの知識で書いたわけじゃない。 しかし、思ったより難しいなっていうのが感想。 まず XMLHttpRequest そのものの理解がいまいち足りてない。つかいつも思うが JavaScript って調べにくいったらありゃしない。Ecma262 の部分はよくまとまってるんだけどな。どうにか作ったあとにつらつら見てたら Dyna
川o・-・）＜2nd life - prototype.js 1.5 からの新機能 Template の使い方
JavaScript での変数を使った文字列の作成は何かとめんどくさいですね。prototype.js では 1.5_pre0 から Template という簡易テンプレートとして使えるクラスが加わりました。相変わらずドキュメントはソースと test 嫁なので簡単な使い方を紹介します。 まずは Template となる文字列を new Template で作ります。Template のリテラルは #{}です*1 。 var t = new Template('#{foo}, #{bar}!');次に作成した Template インスタンスの evaluate 関数を呼び出し、引数として Hash(Object) を渡します。 t.evaluate({ foo: 'hello', bar: 'world' }); // hello, world!もしテンプレートを使い回さず、一度限りの文字列
各種JSライブラリのグローバル書き換え状況 - IT戦記
先日、JS O Lait と Prototype.js が両方とも Class オブジェクトを作っていて、一緒に使えないとわかったので。各種ライブラリがどのくらいグローバルな情報をクラックしているかの調査しました。 ↓結果 Prototype.js(1.4.0) window Prototype Class Abstract Try PeriodicalExecuter $ $break $continue Enumerable $A Hash $H $R Ajax Toggle Insertion Field Form $F Position property ObjectRange Object extend inspect bind bindAsEventListener Array from bind bindAsEventListener Array_prototype each
Prototype.js を使った JavaScript OOP 講座 #03
社内の勉強会の資料をここに公開していきます。社内の人も社外の人も読んでください。 ※ターゲットは JavaScript は書いたことない、オブジェクト指向言語プログラマ。 ※信念は「教わるのではなく、必死に着いていきませう」 前回までの内容で Prototype.js でどのようにプログラムを書いていくか理解できたと思います。 ここからは、関数やクラスを覚えた数だけ Prototype.js を使えるようになると思います。 しかし、それではいつか必ず躓きます。他人の書いた JavaScript を使うためにはそのコードを読める必要があります。 JavaScript は、言語の仕様レベルの部分までかなり書き換えることが出来ます。 そのため、もし、動作がおかしくなった場合に、どこがどう影響したか自分で調べられなければならないのです。 今回は、 Prototype.js を読むために必要な知識を
(new Hatena).blog() - DOM 要素の集合のイテレーション
Update: id:reinyannyan:20060411:p1 に続きます getElementsByTagName の様なメソッドで得られた、配列ではない要素集合を配列のように扱いたい時に、prototype.js では "$A" という関数によってまず配列化する、という方法を用います。 これは非常に素晴らしい、便利な方法なんですが、集合の規模が大きくなると、それだけ配列化によるオーバーヘッドも大きなものになってしまいます。 そこで、仮にこのようなものを作ってみました。 // DOM Iterator var Domi = { each: function (collection, yield) { for (var i = 0; i < collection.length; i++) yield(collection[i]); } };べつに配列が欲しいわけじゃない、単純に ea
Ajax 逆引きクイックリファレンス
このページは毎日コミュニケーションズから発売中の書籍「Ajax逆引きクイックリファレンス」のサンプルを掲載しています。 この書籍の元になっているサイト（Ajaxを勉強しよう）も参照してみてください。 ミスや間違い、リンクエラーなどがありましたらopenspc@alpha.ocn.ne.jpまでお願いします。 第一章 Ajaxとは Ajaxとは DHTMLとFlash Ajaxに必要な知識と技術 Ajaxの弱点／難点 通信上の制約 XMLの処理 スタイルシートの注意点 第二章 非同期通信処理 サーバーと通信を行う サーバーからテキストデータを読み込む サーバーからXMLデータを読み込む サーバーにgetメソッドでデータを送信する サーバーにpostメソッドでデータを送信する 読み込みを中断する タイムアウト処理を行う サーバーからの応答を調べる ファイルが読み込めない、存在しない場合の処理を
[JavaScript]DOMっぽいイベントハンドラ、結局最後はprototype-js(後編): CodeWeb
前編の続きです。 bodyの中からイベントハンドラをなくす(Mozilla) さて、ここからが本題です。HTMLソースからイベントハンドラをなくします。尚サンプルはFireFoxとかじゃないと動きません。IE非対応。 で、onclickさんがどっかいっています。どこにいったかというと、 document.getElementById("button3").addEventListener("click",test3,false); この行にいます。addEventListenerというのがイベントハンドラの変わりになるものです。 オブジェクト.addEventListener(イベント,関数,false)ってなかんじで書くと制御できるんですが、これだとHEADの中に書いても下のソースが読み込む前に実行されるのでエラーがおきてしまいます。なのでこの一文が入ります。 window.addEve
#!shebang.jp : prototype.js をちゃんと使ってみる。
September 12, 200516:45 prototype.js をちゃんと使ってみる。 カテゴリ技術ネタ prototype.js をちゃんと(仕事で)使ってみようという事でゴニョゴニョしたメモ。 やりたい事は通常のテキストを編集可能にして Ajax で保存っていうありがち(？)な事。 で、使い方の勉強がてら書いたコードをのせておくと以下のような感じ var Editable = Class.create(); Editable.prototype = { initialize: function(text, url) { this.view = $(text); this.url = url; Element.show(this.view); this.editor = document.createElement('input'); this.editor.type = "t
DOM オブジェクトとメモリリーク: Days on the Moon
IE でのメモリリーク ちょこちょこと紹介されているので知っている人も多いと思うが、IE には DOM ノードに絡んだメモリリークの問題がある。これに関しては Microsoft 自身の記事である「Understanding and Solving Internet Explorer Leak Patterns」に詳しいが、簡単にいえば DOM ノードオブジェクトに関する循環参照を作ると、IE を終了させるまでそのオブジェクトが解放されないというものだ。記事によればメモリリークには以下のようなパターンがあるという。 1. 単純な循環参照 ある DOM ノードオブジェクトのプロパティをたどっていくと自分自身に行き着く場合。以下のようなパターンが考えられる。 element.property == element element1.property1 == element2, element2
suVeneのあれ: Ajaxにおけるメモリリークの注意点
2006年03月06日 Ajaxにおけるメモリリークの注意点 [ajax][javascript][はてブ] はてブの「ブックマークの確認」ページは、IEでメモリリークする！ IE のメモリリーク調べる為の「Drip」ってツールが ここにあって、 このツールは単純にリークしそうなコードチェックしたり、 オートリロードして、外部から参照したメモリ使用量を記録してくれるだけなんだが はてブの追加ページで確認するとこんな感じになる。 (オートリロードなんで負荷高くなるから、悪用したり、やりすぎたりしないようにｗ) タスクマネージャー等の、外部から参照したメモリが増えているからといっても OSがアプリケーション用にキャッシュしているメモリが増加しているだけの 可能性があるから、一概に鵜呑みはできないんだが 平均して1回のリロードに 1M 近く増えていくとかおかしい。 (MicroSoft もタスク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Backstage of theater.js - prototype.js解読
http://blogus.xilinus.com/pages/javawin