はてな技術発表会日記 - script.aculo.us8月17日の技術勉強会 - Flexレイアウト手書き勉強会 8月17日に行われました技術発表会の内容を撮影した動画ファイル/資料を公開いたしました。内容は以下のとおりです。 テーマ Flexレイアウト手書き勉強会 発表者 d:id:secondlife 勉強会動画 ダウンロード…
川o・-・）＜2nd life script.aculo.usのファイルサイズを軽減
http://www.goodpic.com/mt/archives2/2006/02/ajax.html で紹介されてる通り、script.aculo.usは通常のロードではファイルサイズが100KBを超えます。しかし、それはフルでロードしたときの容量なのです。script.aculo.usはロードするパッケージを選ぶことができる*1ので必要な機能だけを選べば良いのです。例えば、たいていの場合はscript.aculo.usのeffects.jsだけしか使わなかったりするので <script src="/js/scriptaculous.js?load=effects" type="text/javascript"></script> とすればOK。これでファイルサイズは34KBに収まります。また、二つ以上のパッケージを選択したい場合は <script src="/js/scriptac
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
関数、オブジェクト、クロージャ - FAX
(thanks to id:koyachi、del.icio.us/rtk2106) OOPとFPと。関数、オブジェクト、クロージャの使い分けについて考えます。 関数型が良いのか、オブジェクト指向が良いのか、知りたいと思っていました。色々なページを読み、現時点で一応の答えを得ました。 カウンタを例にして、関数、スコープ、オブジェクト、クロージャの順に見て行きます。関数関数は処理です。入力と出力があります。関数型プログラミングでは、関数同士の入力と出力を連結しプログラムが構成されます。 var current = 0; function next(v){ return v + 1 } function previous(v){ return v - 1 } ok( 1 == ( current = next(current) ) ); ok( 2 == ( current = next(cu
suggest.js - 入力補完ライブラリ
Japanese / English JavaScriptで入力補完を手軽に行うためのライブラリです。 (【お知らせ】ver2.0からprototype.jsを必要としなくなりました) 下記のような機能を持っています。 入力内容をもとに検索を行い、補完候補を表示します。(Google Suggestぽく) Ajaxでは無く、初回画面表示時のみデータの読み込みを行い、それ以降は、クライアント側で対象データから検索します。したがって、入力内容に変化があってもサーバ側にアクセスすることはありません。 検索は、前方一致/部分一致、大文字と小文字の区別あり/なしといったように、オプションで簡単に指定できます。また、その他にも様々なオプションが指定可能です。 検索結果の表示上限を指定できます。(デフォルト上限20件) 補完候補はキーボードの上下と、マウスにて選択できます。また、キーボードで選択中にES
fladdict.net blog: JavaScript, ActionScriptにおける .this とは何なのか？
人様にActionScript (あるいは JavaScript)を教える時に、絶対に鬼門となるthisスコープについてのまとめメモ。 ECMAスクリプトでは関数が他の変数に代入可能な為、関数のthisが文脈によって変動します。どうも、Javaとかやってる人にはそれがスゴイ気持ち悪いらしいのです。 thisとな何なのか？ 端的に言うならば、thisは「その関数を、何のプロパティと解釈して呼び出したか？」によって決定します。 関数を直接呼び出す場合と、オブジェクトのプロパティに代入してから呼び出す場合を比較してみます。 function hoge(){ alert(this); //trace(this); flashの場合はコッチ } var myObj = new Object(); myObj.hoge = hoge; hoge(); myObj.hoge(); のように書いた場合、
fladdict.net blog: JavaScriptでthisスコープをコントロールする
ひげぽん OSとか作っちゃうかMona: 実践 prototype.js [1] ひげぽん OSとか作っちゃうかMona: 実践 prototype.js [2] ひげぽん氏のprototype.jsの記事を読んでいて、「イベントハンドラ内のthisスコープを変更するにはどうする？」みたいな内容があって、ちょうど同じ問題をやったばかりだったので書いてみるテスト。 クロージャを使うのですが、直接発行するのではなく、「スコープをずらすクロージャ」を返す関数を作ってやるとよいと思います。 FlashのDelegateクラスがちょうど内部的に、同じような処理をしてます。 ECMAScriptでは「関数=オブジェクト」なので、クロージャを擬似Commandパターンと解釈して、factoryで返してやると素敵。というかJavaScriptはネイティブにCommandパターンが実装されている、といっても
[JavaScript]DOMっぽいイベントハンドラ、結局最後はprototype-js(前編): CodeWeb
「WEB2.0へ繋がるイベントパンドラのまとめ」とかタイトルにつけてみようかと思ったけど大嘘つきになるのでやめた。 最近HTMLソース内に極力JavaScriptのソースを書かないでプログラムを組むように心がけてるので、ここらで一度自分用にまとめてみようかと思って今回はイベントハンドラ（？）について色々書いてみました。先にオチを言ってしまいますけど、最終的にはprototype-jsのEvent.observe使ってしまいますので内容にあまり期待しないように。 では、「テキストボックスの内容を下のテキストエリアにコピーする」というサンプルを使って長々と無駄に語っていきます。しばらくブログ更新してなかったので文章が変なのは仕様です。 これまでのJavaScript まず、従来のJavaScriptだとこんな感じです。とくに何も説明する必要もないと思います。 サンプル ソース <script
Realtime validation using Ajax
Posted by masuidrive Wed, 04 Jan 2006 21:45:00 GMT Ajaxなどを駆使して、入力値を動的にチェックするライブラリ、realtime validation を公開しました。 >> http://masuidrive.jp/validation 正規表現とメッセージを指定するだけで、入力した瞬間にユーザに対してガイドメッセージを表示させる事ができ、今までの様に画面遷移後にエラーが出て、ユーザがエラー位置を把握しづらいと言う事がありません。 これで、あなたのサイトも一気にWeb2.0！ なのに使い方は超簡単。 prototype.js とvalidate.js を自分のHTMLに読み込んで、下記の様に正規表現で表示するメッセージを指定するだけ。 Validator.register({ "#mail" : { "/^([^@\\s]+)@((?:
こども(てれび) prototype.js ってなに？の巻
追記 2005-08-23 Using prototype.js v1.5.0 リファレンスがあったみたい。これを読んだ方がはるかに有益です。あー書くんじゃなかった。 はてなの人気者 id:naoya が「prototype.js でデザインパターン」というのをやってるんだけど、prototype.js の説明をしてくれなくて困る。前から「Rails の prototype.js は便利だ」というのを目にすることがあったので、ちょうどいい機会だってことで調べた。 http://prototype.conio.net/ ドキュメントが全然ない。ないこたないと思うのでご存知の方は教えてください。しょうがないのでコードを読むことに。 http://dev.conio.net/repos/prototype/src/ ここのを順次読みます。 base.js http://dev.conio.net
cyano: prototype.js version 1.4.0系でのEnumerableの使い方
Ruby on Railsなどのフレームワークに標準付属されていて、オブジェクト指向なJavaScriptを書く人たちの間で注目されているprototype.jsですが、Version 1.3.1時点での機能についての解説書は見つけたものの（prototype.js v1.3.1 の使い方）、1.4系で盛り込まれるであろうEnumerableについては見つけることができませんでした。なので、Version 1.4.0_rc4時点でのEnumerableについて解説してみます。 Enumerableとは、配列やハッシュなどのデータ構造に対して繰り返し処理をさせるための機能を集めたものです。たとえば配列に入っている値それぞれについて処理を行いたかった場合、従来ならば以下のように書いていたでしょう。 var data = [1,2,3,4]; for(var i=0; i<data.length
Animating with Javascript - An article to get you started on Javascript animation
An Introduction to Javascript Animation Animating elements with Javascript using DOM compliant, non-invasive code Color fading and resizing to notify user for dynamic changes created on 29.08.2005 Introduction Javascript animations are seen more and more in our daily web routines. Most can be annoying too, if they simply serve the purpose to lamely look cool, while they may actually only distract
Lightbox JS
Overview Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers. Note: An new version of this script is available: Lightbox JS v2.0 Example To make sense of it all, check out these examples. Click on a thumbnail or text link below: Benefits Places images above your current page, not within. This frees you fr
prototype.js読んでみた。
以下mixi日記の転載、僕みたいにprototype.jsってなんだよ?と焦ってる忙しい人向けの清涼剤エントリのつもり。今週は９連休なので、やる気があります（謎） 参考にさせてもらったprototype.jsに言及された方のコメントに書いてあった通り、「便利で適度にコンパクトで素敵」というのが最大の特徴。jakarta commonsみたいに、その気になれば３０分もあれば十分に読めるのが魅力でこういうライトなライブラリは好きです。 最近、Ajax系のフレームワークが出ていて、すごく気になってたけど、ことprototype.jsに限って言えば、別に使わなくてもさして不利益にもならないことがわかったので安心した。ただし、このレベルのJavaScriptを書ける人は少ないよなぁ。JavaScriptのウザイとこ＝本質をコンパクトにまとめている感じなので、オブジェクトのスコープとかthisの使い方
prototype.js v1.5.0 の使い方
それは何？ prototype.js は Sam Stephenson によって書かれた JavaScript ライブラリです。 この熟考の上記述された標準に準拠したコードは、Web 2.0 において特徴となるリッチでインタラクティブなウェブページを制作する際の重荷を、あなたの肩から取り去ってくれるでしょう。 もしこのライブラリを使ったことがあるなら、充実したドキュメントがこのライブラリの売りではないことに気がついたはずです。 私は他の開発者と同様に、ソースコードを読み、試行錯誤しながら prototype.js を理解しました。 自分が学んでいる間にメモを取り、それを他の人たちと共有することは価値があるのでは、と考えたのです。 加えて、このライブラリによって提供されているオブジェクト、クラス、関数、拡張機能についての 非公式リファレンス も提供しています。 ここで提供する例とリファレンス
Object オブジェクトの prototype に便利メソッドを放り込むのはやめて頂きたい - nazokingのブログ
JavaScriptの便利系ライブラリで、Object の prototypeにいろいろ放り込むのがあるけど、やめていただきたい。例えば http://prototype.conio.net/ の Object.prototype.extend とか。便利なんだけどね。 Object.prototype.extend = function(object) { for (property in object) { this[property] = object[property]; } return this; }わかる、わかるよやりたいことは。あれば確かに便利だ。そしてオブジェクト指向の考え方からして、そこにあるべきだろう。 でも、 info={name:"タロウ",tel:"090-xxx-xxx"}; for( i in info ){ document.write( i+"="+ i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.hawk.34sp.com/stdpls/jsnotes/jssinso/04_scope.html
いまどきの(ry
Effective JavaScript - Dynamic Scripting
night.nu