[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 もタスク
Prototype.js - Effectサンプル
これはオブジェクト指向JavaScriptライブラリ PrototypeのEffectのサンプルです。付属のサンプルにちょっと手を加えてちょっ と日本語訳したものです。 Effect.Fade() & Effect.Appear() 呼び出し方法 new Effect.Appear(element) new Effect.Fade(element) コード例 onclick="new Effect.Appear('appear')" onclick="new Effect.Fade('appear')"
llameradaの日記 - ユーザがページに滞在した時間をサーバに記録するJavaScript
Ajaxの普及に伴い、ページ当たりのユーザの滞在時間が注目されるようになっている。従来、サービスがユーザに与えるインプレッションの指標としてページ・ビューが広く用いられている。しかし、Ajaxを利用するとページの移動があまり発生しないため、ページ・ビューが低くなってしまう。そこで、インプレッションの指標として、滞在時間を使おうという動きがある。 今回、JavaScriptでユーザの滞在期間が記録できるかどうか調べてみた。取り組む前は難しいかなと思ったが、実際にはとても簡単であった。コードは下記。 (function(){ var start = new Date; window.onunload = function(){ var time = (new Date - start ); var image = new Image; image.src = "/dummy?t=" + tim
Lightbox Plus で画像を同一画面にオーバーレイして表示 :: Drk7jp
前からやろうやろうと思っていたことなのですが、サムネイルをクリックしたときに別画面を起ち上げて元画像を表示するのではなくて、同一画面上にレイヤー重ねて表示したいと思ってました。世の中には便利 Javascript が公開されていまして、メジャーどころで言えば、Lightbox JS ってやつがそうです。 使い方を丁寧に説明してあるサイトで有名どころは、「小粋空間: Lightbox JS で画像を表示する」あたりでしょうか。僕的には Lightbox を更に拡張した Lightbox Plus を入れることにしました。
ma.la's prototype.js Bookmarks on Delicious
Your network connects you to other Delicious users - friends, family, even new people you run across while exploring Delicious. You can add people to your network and keep track of their latest bookmarks right here. And when you save new bookmarks, you can share them with people in your network simply by clicking on a username. Learn more about using your network.
ETech 2006 レポート
ETech も今日が最終日です。午前中のセッションを終えて、聞きたいものはだいたい全部終わったし、ここらで全体を通してのレポートを書いてみます。一つ一つのセッションについて全部レポートは難しいので、個人的に面白いと思ったトピックやセッションだけ振り返ってみたいと思います。 Attention Economy 今回の ETech のテーマは Attention Economy。ETech は 5 回目ですが、毎年このようにテーマがあるらしく、そういえば去年の ETech は "Remix" がテーマでした。この辺がきっかけて Web 2.0 がどうこうという話が盛り上がりはじめたんだっけ。 Attention Economy というのは 今回のテーマは"Attention Economy"ということで、Attentionをキーワードに色々な話が繰り広げられています。 パソコンはどんどん安くな
[ThinkIT] 第1回：Ajaxとは (1/3)
まずは、Ajaxが生まれた背景をおさえる必要がある。そのためにはAjaxとは切り離せないインタラクション・デザインに触れておかなければならない。 読者の皆様の中にも、Apple社の「iPod」で音楽を楽しんでいる方は多いと思う。 iPodのディスプレイの下のスクロールホイールを指で回すと、すぐに反応して画面上のカーソルが上下に動く。スクロールホイールを速く回すほど、カーソルの移動は速くなる。中央のボタンを押せば曲を選択できる。 実は、これはとても優れたインタラクション・デザインだ（少なくとも筆者はそう考えている）。 つまり、インタラクション・デザインとは、「人と操作対象との対話がスムーズに進むようにインタラクション（相互作用）をデザインする」ことだ。ユーザにとっては、インタラクション・デザイン自身が商品とも考えられる。
javascript - Yet Another Previewer : 404 Blog Not Found
2006年03月02日22:28 カテゴリLightweight Languages javascript - Yet Another Previewer 本日はもう一つ行きましょう。 Editor Previewer Help Source 使い方 EditorタブのフィールドにHTMLを入力して、Previewタブを押して下さい。 Editorタブをもう一度押すと、Geckoベースのブラウザーに限り、 PreviewのDOMから再生成されたHTMLでフィールドを書き直します。 それ以外のブラウザの場合、(現時点では)ただ戻ります。 Geckoベースのブラウザーをお使いなら、わざと謝ったHTMLをEditorタブで入力してから、 Previewを押してもう一度Editorを押して下さい。何が起りましたか? 作った理由 BlogのPreview画面では、通常自分用のCSSとは異なるCSSが
みんなの共有財産に育てよう、Ajax非互換性データベース － ＠IT
Ajax非互換性データベース 実はこのデータベースは私が「いい出しっぺ」なのです。Ajaxのプログラムを実際作り始めてすぐ、「これは絶対に必要だ！」という確信を持ったために、周囲を巻き込んで着手させてしまったものといえます。しかし、いったいなぜこのようなデータベースが必要なのでしょうか？ その理由は私の体験に沿って見ていくと分かりやすいと思います。 私がAjaxのプログラムを作り始めてすぐに遭遇したのは、いくつものWebブラウザの非互換性です。遭遇した問題は、私が駄文を書き連ねるオータムマガジンに記録を付けるようにしていきました。しかし、話はそれで終わらなかったのです。プログラムのテスト版を公開すると、私が予想もしていなかったWebブラウザで使った場合のトラブルのレポートが寄せられました。私は、せいぜいInternet Explorer、Firefox、Operaの3種類ぐらいが実際に使わ
JavaScriptで遅延ロードをする方法についてのおさらい
先日リリースした Extractor の Bookmarklet(コメントをチェック(浮き出る版))のデザインや仕様を変えました。主な変更点としては、「マウスでドラッグできる機能」が付いたのとデザインをがらっと変えました。 その際にma.laさんの最速インターフェース研究会で紹介されていたJavaScriptでの遅延ロードのテクニックを拝借させて頂きましたので、覚え書きのつもりで今回どのようにしてそれを使ったのかについて書いておきます。 まず、先に紹介した Extractor の Bookmarklet がなにをやっているかというと、現在見ているページに script タグのエレメントを生成して、他のドメインのJavaScriptのソースを読み込んでいます。Bookmarklet を分解すると下記になっています。具体的には createElement で script タグを生成して、各プ
XML を JSON に変換するサービス - ベータ版を公開 :: Drk7jp
JavaScript 2.0 支援ツール「XML 2 JSON service」って何？ XML を JSON に変換するサービスです。この技術を用いることで、 クロスドメイン制限を超えて JSON 形式で XML 形式のデータを利用することが可能となります。 JSON は XML と比較して JavaScript 上で非常に扱いやすいため、コツを掴めば簡単に自分のサイトで利用できます。 既に幾つかのサイトで実装されていますが、不特定多数の方にサービス提供するために負荷対策を施し、XML 2 JSON service ベータサービスを公開することにしました。 最近良く聞く Ajax とは何が違うの？ 最近、流行りまくっている Web 2.0 と呼ばれるものの基礎技術の１つとして Ajax があげられます。Ajax は大変便利な技術なのですが、セキュリティの観点から自ドメインへのアクセスしか
hibomaのはてなダイアリー - Yahoo! UI Librady の訳 まとめ
Yahoo! User Interface Library 概要 【概要の前半】 【概要の後半】 Yahoo! User Interface Library::Core Utilities 【Animation】 【Connection Manager】 【Dom】 【Drag and Drop 】 【 Event】 Yahoo! User Interface Library::UI Controls 【Calender】 【Slider】 【TreeView】 http://d.hatena.ne.jp/hiboma/20060221/1140489162 【Yahoo! Design Pattern Libraryの訳 まとめ】
Yahoo! Design Pattern Library
Welcome Welcome to the Yahoo! Design Pattern Library. We're thrilled to be sharing patterns and code with the web design and development community, we hope it's useful, and we look forward to your feedback. In fact, we've just launched two new Design Pattern forums: one for discussing this pattern library and another for talking about the ins and out of writing design patterns and maintain
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blogus.xilinus.com/pages/javawin
Simple AJAX with MochiKit and JSON, Part I
DHTMLとAJAXのフリーで使えるコード集「DHTMLgoodies.com」
Ajax入門 | Ajax入門：基本サイトのリンク集
