今日から使える JavaScript カスタム関数トップ 10

- Top 10 custom JavaScript functions of all time
  http://www.dustindiaz.com/top-ten-javascript

  すぐにでも使える,気の利いた JavaScript の関数を 10 個紹介.

- 10) addEvent()
  イベントリスナーを登録する関数.クロスブラウザ対応.結構有名.

- 9) addLoadEvent()
  クロスブラウザな window.onload.onload する関数が幾つもある場合に.

- 8) getElementsByClass()
  クラス名から要素を取得する関数.prototype.js にも getElementsByClassName() という名前である.
  prototype.js の getElementsByClassName() との違いは,ノードを指定できること.

- 7) cssQuery()
  CSS のセレクタを使って要素を取得する関数.例えば,

var tags = cssQuery("#foo p.bar a");


  これで,id が foo のタグの孫要素で class が bar である p の孫要素 a タグが取得できる.
  テストページ があるので見てみると分かりやすい.

- 6) toggle()
  要素を表示したり隠したりする関数.prototype.js の Element.toggle() でも実現できる.

- 5) insertAfter()
  既存の子ノードの後に新しいノードを挿入する関数.insertBefore() の逆.
  prototype.js の Insertion.After() でも実現可.

- 4) inArray()
  配列に値があるかチェックする関数というか Array オブジェクトの拡張.
  以前同じようなのを作った.ちなみに関数名は PHP から (in_array()).


- 3, 2, & 1) getCookie(), setCookie(), deleteCookie()
  3, 2, 1 位は Cookie を取得,セット,削除する関数.

- おまけ
  prototype.js のダラー関数.$().確かにこれが最強だと思う.


  各関数を作った人のリンクも用意されているので,それをみるともう少し情報が分かるかもしれない.  
  適当に見ていったので,間違っていたら指摘してください.

canvas を使った JavaScript によるグラフ描画ライブラリ

- new Javascript/Canvas Graph library
  http://aslakhellesoy.com/articles/2006/02/09/announcement-new-javascript-c ...

  Canvas Graph library

  HTML の canvas タグを使ったグラフ描画ライブラリ.アルゴリズムはスプリングモデル.
  canvas タグは Safari 2,Firefox 1.5,Opera 9 でサポートされている.

  使い方は非常に簡単で,上記の画像は以下のソースで実現.本体は graph.js というファイル.

<canvas id="people" width="350" height="350" style="border: 1px solid black"></canvas>
<div id='wilma'>Wilma</div>
<div id='fred'>Fred</div>
<div id='dino'>Dino</div>
<div id='barney'>Barney</div>
<div id='aslak'>Aslak</div>
<div id='dave'>Dave</div>
<div id='patty'>Patty</div>

<script type="text/javascript">
function start() {
    var g = new Graph();
    
    g.addEdge($('fred'), $('wilma'));
    g.addEdge($('wilma'), $('dino'));
    g.addEdge($('fred'), $('barney'));
    g.addEdge($('wilma'), $('barney'));
    g.addEdge($('aslak'), $('fred'));
    g.addEdge($('aslak'), $('dave'));
    g.addEdge($('patty'), $('aslak'));
    g.addEdge($('barney'), $('patty'));
    
    var layouter = new Graph.Layout.Spring(g);
    layouter.layout();
    
    var renderer = new Graph.Renderer.Basic($('people'), g);
    renderer.draw();
}
</script>


  現在リンク先は Internal Server Error で閲覧することは出来ないが,
  ソースは Subversion のリポジトリから取得することが出来る.

svn co http://buildpatterns.com/svn/repos/webdep/trunk/.

- <canvas> タグ リファレンス
  http://www.openspc2.org/HTML/appendix/canvas_param/

prototype.js v1.4.0 の使い方

  http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html

  Using prototype.js v1.4.0 の邦訳版.

Lightbox JS を使わずに Lightbox JS のようなエフェクトをかける方法

- The Lightbox Effect without Lightbox
  http://pjhyett.com/articles/2006/02/09/the-lightbox-effect-without-lightbo ...

  以下のように display none な div の中にコンテンツを書いておき
  Lightbox JS のようなエフェクトをかけて表示する方法が紹介されている.

<div id="box" style="display: none">
  ここにコンテンツを書いておく
</div>


  div の中にかけるので画像だけでなく form なども書くことが出来る.

はてなが監修した Ajax 本 『Ajax イン・アクション』

  4844322222
  http://www.amazon.co.jp/o/ASIN/4844322222/todaysnonsenc-22/ref=nosim/
  Dave Crane (著), Eric Pascarello (著), Darren James (著), 柏原 正三 (翻訳), 株式会社はてな (監修)
  インプレス
  ISBN: 4844322222
  2006/03/24
  5,460 円

XMLHttpRequest 通信時に XML ファイルに利用できる Content-Type

  http://www.kawa.net/works/ajax/tips/mimetype/content-type.html

  どのブラウザがどの Content-Type を利用できるかが判定できる.
  簡単に言えば

text/xml

  を使っておけば問題なさそう.

suggest.js を Ajax に対応させた suggest_ajax.js

  http://blog.yappo.jp/yappo/archives/000376.html

  入力補完を手軽に行うためのライブラリ suggest.js の Ajax 対応版.
  これで,件数が少なければ suggest.js を多ければ suggest_ajax.js をと
  使い分けが出来そう.

Ajax と PHP を使ったチャレンジ & レスポンス方式のログイン認証

  http://www.jamesdam.com/ajax_login/login.html

  何もログイン認証まで Ajax を使わなくてもと個人的には思っているのだけど,
  これは,チャレンジ & レスポンスの部分でうまく Ajax を使っている.

  チャレンジコードをサーバから Ajax で取得してパスワードとの md5 ハッシュ値をサーバに送ることによって
  認証をしている.このため,パスワードそのものがネットワーク上に流れない仕組み.

- via: phpspot開発日誌
  http://phpspot.org/blog/archives/2006/02/ajaxphp_1.html

Ajax と PHP を使ったチャット Shoutbox

  http://www.codepost.org/view/96

  これは面白い.
  入室,退室,リロードなどが全部 Ajax で実装されている.
  DB には MySQL を使っている.

- via: phpspot開発日誌
  http://phpspot.org/blog/archives/2006/02/ajaxphp_shoutbo.html

ツールチップテキストを簡単に実現する JavaScript ライブラリ Tooltips.js

  http://www.matsblog.com/stories/1455512/

  マウスを重ねると,ぶわーという感じにツールチップテキストが表示される.
  下の画像は,ちょうど表示されている途中のもの

  Tooltip.js

  prototype.js,script.aculo.us 必須.
  ライセンスは script.aculo.us ベースなので MIT ライセンスだと思う.

- phpspot開発日誌:
  http://phpspot.org/blog/archives/2006/01/_tooltipsjs.html