«前の日記(2005-08-28 (日)) 最新 次の日記(2005-08-31 (水))»  

まちゅダイアリー


2005-08-29 (月)

prototype.js (1)

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があればデバッグができるみたい。

Tags: Ajax

prototype.js (2)

次は Drag and Drop のサンプル。 これは、 script.aculo.us の機能を使う。 公式サイトのサンプルはこんな感じ。

script.aculo.us では、Drag and Drop でリストの並び替えを実現する Sortableという機能と、より低レベルな Drag And Dropという機能がある。 Sortable だと細かな操作ができないので、ここでは Drag And Drop を使う。

サンプルは以下のとおり。

<html>
 <head>
   <title>Drag and Drop test</title>
   <meta http-equiv="Content-Type" content="text/html; charset=EUC_JP" />
   <script src="prototype.js" type="text/javascript"></script>
   <script src="scriptaculous.js" type="text/javascript"></script>
   <style tyle="text/css">
     .draggable { background-color: pink; border: solid 1px #888; }
   </style>
 </head>
 <body>
   <h1>Drag and Drop test</h1>
   <table border="1">
     <tr>
       <td id="droppable1">1 <span id="draggable1" class="draggable">draggable1</span></td>
       <td id="droppable2">2 <span id="draggable2" class="draggable">draggable2</span></td>
       <td id="droppable3">3 <span id="draggable3" class="draggable">draggable3</span></td>
     </tr>
     <tr>
       <td id="droppable4">4 </td>
       <td id="droppable5">5 </td>
       <td id="droppable6">6 </td>
     </tr>
   </table>
   <p>
   <span id="draggable4" class="draggable">draggable4</span>
   <span id="draggable5" class="draggable">draggable5</span>
   <span id="draggable6" class="draggable">draggable6</span>
   </p>
   <script type="text/javascript" language="javascript">
     for(i=1;i<=6;i++) {
       new Draggable('draggable' + i, { revert:true });
     }
     for(i=1;i<=6;i++) {
       var droppable = $('droppable' + i);
       Droppables.add(droppable, {
         accept: 'draggable',
         onDrop: function(draggable, droppable) {
           droppable.element.appendChild(draggable);
         }
       });
     }
   // -->
   </script>
 </body>
</html>

基本は、マウスで動かす要素のDraggableと、マウスを放す場所のDroppableを使い、Droppable の onDrop イベントに、D&Dされたときに実行したい関数を登録する。 ここでは、最初のサンプルで作った、要素を移動する関数を登録している。

onDrop の関数の引数は、「the Draggable element, and the Droppable element」だとドキュメントに書いてある。 でも実際は、第二引数は Element ではなくて Droppable が渡されているみたい。 Element にアクセスするには、サンプルのように droppable.element を使う。

ちなみに

script.aculo.us は複数の機能を持っていて、それぞれ別の .js ファイルに格納されている。 このうち、 scriptaculous.js を読み込むと、全ての .js ファイルが読み込まれるみたい。

Tags: Ajax