(- prototype.js ajax) ビジュアル系じゃないprototype.js (1)

見た目を操作したり、Ajaxライブラリとしてprototype.js を使用するサンプルなどはいろんなところで見ますが、ビジュアル系じゃない視点でprototype.jsを見たときもかなり現実的に有用なライブラリのようです。d:id:smeghead:20070223:1172222164

ビジュアル系じゃないprototype.jsを理解することを目的として、わからないなりに、prototype.js(1.4.0)を読んでみました。

登場するクラスは、以下でした。

Prototype: 特別クラスのような位置づけ？
Class: 継承可能なクラスを作成するクラスメソッドを提供する。
Abstract: Form Form.Elementの機能を実現するためのクラス？
Try: 引数の関数を順番に実行するクラスメソッドを提供する。
PeriodicalExecuter: 定期的に関数を実行するクラス。
Enumerable: 繰り返しを表すクラス。
Hash: hashをあらわすクラス。
ObjectRange: 範囲をあらわすクラス？
Ajax: ajax
Toggle: 画面の要素の表示非表示をトグルする。
Insertion: なにかわからない。
Field: FormのFieldを操作するクラスメソッドを提供する。
Form: Formを操作するクラスメソッドを提供する。
Position: 点に関するクラスメソッドを提供する。

拡張されたクラスは以下でした。

Function: 関数クラス
Number: 数値クラス
String: 文字列クラス
Array: 配列クラス
Element: 画面の要素クラス
Event: イベントクラス

使いながら調べることにしました。

まずは、Stringクラスに拡張された各メソッドを確認します。

String.stripTags

Stringインスタンスの文字列からタグを除去するメソッド。

Event.observe はprototype.jsで提供されているメソッドで、ロード後にtestFunc関数を実行する設定をしています。

要するにwindow.onload = testFunc(); みたいなことです。

$()も、prototype.js で定義された関数で、getElementByIdへエイリアスになってます。

<script language="JavaScript">
   Event.observe(window, 'load', testFunc, false);
   //messageで取得したタグの中身のタグを除去する。
   function testFunc() {
       alert($('message').innerHTML.stripTags());
   }
</script>
<div id="message">
What the <strong>smeg</strong> is this!
</div>

String.stripScripts

Stringインスタンスの文字列からscriptタグを除去するメソッド。

<script language="JavaScript">
   Event.observe(window, 'load', testFunc, false);
   //messageで取得したタグの中身のscriptタグを除去する。
   function testFunc() {
       alert($('message').innerHTML.stripScripts());
   }
</script>
<div id="message">
What the <strong>smeg</strong> is this!
<script>
       function hello() {
           alert("hello");
       }
   </script>
after script.
</div>

String.extractScripts

Stringインスタンスの文字列の中からscriptタグの中身を配列で取得する。

<script language="JavaScript">
   Event.observe(window, 'load', testFunc, false);
   //messageで取得したタグの中身のscriptタグを配列で取得する。
   function testFunc() {
       $('message').innerHTML.extractScripts().each(
           function(a) {alert(a);}
       );
   }
</script>
<div id="message">
What the <strong>smeg</strong> is this!
<script>
       function hello() {
           alert("hello");
       }
   </script>
after script.
<script>
       function bye() {
           alert("bye");
       }
   </script>
</div>

String.evalScripts

Stringインスタンスの文字列の中からscriptタグの中身を配列で取得しそれぞれを実行する。

<script language="JavaScript">
   Event.observe(window, 'load', testFunc, false);
   //messageで取得したタグの中身のscriptタグを配列で取得し、実行する。
   function testFunc() {
       $('message').innerHTML.evalScripts();
   }
   var i = 0;
</script>
<div id="message">
What the <strong>smeg</strong> is this!
<script>
       alert(++i);
   </script>
after script.
<script>
       alert(++i);
   </script>
</div>

String.escapeHTML

Stringインスタンスの文字列をhtmlエスケープした結果を返す。

<script language="JavaScript">
   Event.observe(window, 'load', testFunc, false);
   //messageで取得したタグの中身のscriptタグの中のHTML要素をescapeする。
   function testFunc() {
       alert($('message').innerHTML.escapeHTML());
   }
</script>
<div id="message">
What the <strong>smeg</strong> is this!
<script>
       function hello() {
           alert("hello");
       }
   </script>
after script.
<script>
       function bye() {
           alert("bye");
       }
   </script>
</div>

String.unescapeHTML

Stringインスタンスの文字列をhtmlアンエスケープした結果を返す。

<script language="JavaScript">
   //unescapeする。
   alert("&#60;b&#62;".unescapeHTML());
</script>

String.toQueryParams

Stringインスタンスの文字列をQueryStringとして解析し、hashとして返却する。

<script language="JavaScript">
   Event.observe(window, 'load', testFunc, false);
   //linkで取得したaタグのhrefの属性から、?以降を取り出しQueryStringを
   //解析する。
   function testFunc() {
       var url = $('link').href;
       var h = url.substring(url.indexOf('?')).toQueryParams();
       alert(h['q']);
   }
</script>
<a id="link" href="http://www.google.co.jp/?q=javascript">search</a>

String.toArray

Stringインスタンスの文字列を1文字づつ配列に格納し返却する。

<script language="JavaScript">
   Event.observe(window, 'load', testFunc, false);
   //文字列を1文字づつを配列にする。
   function testFunc() {
       var array = "abcあいう".toArray();
       for (var i = 0; i < array.length; i++) {
           alert(array[i]);
       }
   }
</script>

String.camelize

Stringインスタンスの文字列を-を含まない文字に変換し返却する。

cssの属性名をjavascriptで扱えるようにするために使用される。

<script language="JavaScript">
   //-の後の文字を大文字にした文字列を返す。
   alert("font-size".camelize());
</script>

Stringクラスは以上です。

週記くらい