prototype.js (1)

2005-08-29

Flickr プラグインで JavaScript を使ったのをキッカケに、もう少し JavaSctipt を勉強することにした。当面の目標は、Ajaxを使ったチャットの再構築と簡単なボードゲームの作成。

JavaSctipt のライブラリとしては、 Ruby on Rails (RoR) との親和性が高い（らしい） script.aculo.us と、そのベースとなっている prototype.js を使うことにする。

prototype.js は、 JavaSctipt でクラスベースのプログラミングを可能にするライブラリみたいだけど、それ以外にも便利なクラスが含まれているみたい。参考になりそうなページをいくつかピックアップ。

まず最初は、ある要素を別の領域に移動させるサンプルを作ってみた。実はこれだけでも結構時間がかかっていたり…。先は長いな。

<html>
 <head>
   <title>remove and append</title>
   <meta http-equiv="Content-Type" content="text/html; charset=EUC_JP" />
   <script src="prototype.js" type="text/javascript"></script>
   <style tyle="text/css">
     div  { margin:1em; padding: 1em; border: dashed 1px #888; }
     span { padding: 0.3em; border: solid 1px #88f; }
   </style>
 </head>
 <body>
   <div id="div1"></div>
   <div id="div2"><span id="item1" onclick="move()">click me</span></div>
   <div id="div3"></div>

   <script type="text/javascript"><!--
     function move() {
       var to   = $('div1');
       var from = $('div2');
       var item = $('item1');
       // from.removeChild(item);
       to.appendChild(item);
     }
   // -->
   </script>
 </body>
</html>

div2 要素に含まれる item1 要素（「click me」という文字）をクリックすると、その文字が一つ上の div1 に移動するようになっている。

$(‘div1’)

prototype.js で提供されている機能。 id が div1 である要素を返す。getElementById(‘div1’) と同じ意味。
from.removeChild(item)

from から item を削除する。
to.appendChild(item)

to に item を追加する。

試してみたところ、 removeChild の行は無くても同じように動作した。 appendChild すると、自動的に前の親は取り除かれるってことか。

追記

JavaSctipt は Web ブラウザ上で動くので通常の言語よりもデバッグが大変。 FireFox に JavaScript Debbuger プラグインをインストールすると、IDEライクなデバッガが使えるようになる。 BrackPoint の追加や変数の中身を見ることができるので重宝しそう。

FireFox + JavaScript Debbuger + JavaScript コンソール + Live HTTP Header があれば心強いかな。

IEでも、Visual Studioがあればデバッグができるみたい。