« Gyaoでトランスフォーマー | Main | 文化系トークラジオ Life »

Prototype.jsをやっとこ触ってみたり

プロジェクト内で使用するちょっとしたCGIを書いています。んで、ボタンを押すと画面内の表示が出たり消えたりするようなものを書きたかったのです。

実は、入社当時にちょっとしたプロジェクトで書いたことがあったので、コピペしました。動いた。私のJavaScriptの知識はこの頃が最高です(笑)。

こんな感じ

<style  id=stl name="stl">
.sample {display:none;}
</style>

<script>
<!--
var cssStyleSheet = document.styleSheets["stl"];

function showBlock(paramClass){
  var myStyle;
  for(i=0; i < cssStyleSheet.rules.length; i++){
    if(cssStyleSheet.rules.item(i).selectorText==paramClass){
      myStyle=cssStyleSheet.rules.item(i);
    }
  }

  if(myStyle.style.display == "none"){
    myStyle.style.display = "block";
  }else{
    myStyle.style.display = "none";
  }
}
// -->
</script>

<div class="sample">ここが出たり消えたりする</div>

<input type='button' value="click"
         onClick='showBlock(".sample");'/>

ドキュメントではなく、スタイルシートの方を変えに行ってしまうところがバッド(笑)

ところが、IEでは動くけど、Firefoxでは動きません。ま、今回の目的には別に構わないんですけどね。しかし、なんとなく釈然としないし、これを書いた2001年当時ならいざ知らず、今はブラウザの差を吸収するコードはライブラリに任せるのが当たり前という世の中です。

というわけで、JavaScriptをRubyに近づける為のライブラリ(違)であるPrototype.jsをちょっとだけ勉強してみました。ほう、$$関数というのを使えば同じclass属性の要素を取ってこられるんですな。そして、取ってきたものにイテレーターで処理できると・・・ふむ、toggleなんてメソッドが要素に追加されるんですか・・・。

・・・えーっと 

<script type="text/javascript" src="prototype.js"></script>
<div class='sample'>ここが出たり消えたりする</div>
<input type='button' value="click"
         onClick='$$(".sample").invoke("toggle");'/>

ぐはっ、これだけで終わりなのか!

すごいな、Prototype.js。こんなの知ったら、もう、素のJavaScript書けんじゃないか・・・。やっぱ、常に勉強はしてないとだめだなあ・・・

|
|

« Gyaoでトランスフォーマー | Main | 文化系トークラジオ Life »

パソコン・インターネット」カテゴリの記事

Comments

prototype.jsは便利なんだけれど、
まずは、素のJavaScriptを理解しないと思って、
まだprototype.jsは封印している(笑)

が、たぶん、封印はそのうちとかれる(w

Posted by: nac | December 09, 2007 at 11:16 PM

Post a comment



(Not displayed with comment.)


Comments are moderated, and will not appear on this weblog until the author has approved them.



TrackBack

TrackBack URL for this entry:
http://app.cocolog-nifty.com/t/trackback/47905/17315081

Listed below are links to weblogs that reference Prototype.jsをやっとこ触ってみたり:

« Gyaoでトランスフォーマー | Main | 文化系トークラジオ Life »