なんか、この前書いてたやつが文字制限で書ききれなかったので三部構成にしてみました。
これが第一部。
- 第二部：http://d.hatena.ne.jp/amachang/20051124/1132584232
- 第三部：http://d.hatena.ne.jp/amachang/20051125/1132584378
注：引数に要素の id 属性値を指定する関数及びコンストラクタは要素オブジェクトそのものを入れても同じ動作です。
汎用関数
$
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
function load(){
// ID が 'amano' である HTMLElement を選択する。
alert($('amano').firstChild.nodeValue);
// ID が 'amano' か 'yamashita' か 'katsuno'
// である HTMLElement を選択する。
alert($('amano', 'yamashita', 'katsuno')[2].firstChild.nodeValue);
}
</script></head><body onload="load()"><div><div id="amano">天野</div><div id="yamashita">山下</div><div id="katsuno">勝野</div></div></body></html>
$A
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
var Human = Class.create();
Human.prototype = {
initialize : function(name, age, hobby){
this.name = name;
this.age = age;
this.hobby = hobby;
},
// toArray を実装する。
toArray : function(){
return [this.name, this.age, this.hobby];
}
};
// 天野誕生
var amano = new Human('天野', 24, '勉強');
// 配列に分解
var amanoArray = $A(amano); // いてて
// 配列のそれぞれの要素に alert をかます。
amanoArray.each(alert);
</script></head><body><div></div></body></html>
$H
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
var Human = Class.create();
Human.prototype = {
initialize : function(name, age, hobby){
this.name = name;
this.age = age;
this.hobby = hobby;
}
};
// 天野誕生
var amano = new Human('天野', 24, '勉強');
// ハッシュに分解
var amanoHash = $H(amano); // いてて
// ハッシュのそれぞれの要素に alert をかます。
amanoHash.each(alert);
</script></head><body><div></div></body></html>
$R
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
var Human = Class.create();
Human.prototype = {
initialize : function(name, age, strikeZone){
this.name = name;
this.age = age;
this.strikeZone = strikeZone;
},
// 紹介する。
introduce : function(human){
alert(this.name+'>'+(this.strikeZone.include(human.age)?'いける':'無理')+'\n'+
human.name+'>'+(human.strikeZone.include(this.age)?'いける':'無理')+'\n'
);
}
};
// 天野誕生(23才, ストライクゾーン：20以上36才以下)
var amano = new Human('天野', 24, $R(20, 36));
// 山下誕生(23才, ストライクゾーン：20以上40才未満)
var yamashita = new Human('山下', 23, $R(25, 40, true));
// 年下好きの24才
var girl = new Human('女子', 24, $R(20, 23));
amano.introduce(girl);
yamashita.introduce(girl);
</script></head><body><div></div></body></html>
$F
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
function clicked(){
alert($F('nameSelect')); // 楽チン♪
}
</script></head><body><div>
<form action="uri:dummy">
<div>
<input id="nameSelect" value="天野">
<input onclick="clicked()" type="button" value="alert">
</div
</form>
</div></body></html>
Prototype
Prototype.Version
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
alert('prototype.js ' + Prototype.Version); // バージョン教えて☆
</script></head><body><div></div></body></html>
Class
Class.create
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// 人間を作る
var Human = Class.create();
Human.prototype = {
// コンストラクタを他のインスタンスメソッドと並べて書ける。
initialize : function(name, hobby){
this.name = name; this.hobby = hobby;
},
someMethod1 : function(){},
someMethod2 : function(){}
};
// 天野誕生
var amano = new Human('天野', '勉強');
</script></head><body><div></div></body></html>
Object
Object.extend
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// 動物を作る
var Animal = Class.create();
Animal.prototype = {
initialize : function(){},
breathe : function(){alert('スーハー');},
eat : function(){alert('ぱくぱく');}
};
// 動物を継承した、人間を作る
var Human = Class.create();
Object.extend(Human.prototype, Animal.prototype);
Object.extend(Human.prototype, {
initialize : function(){},
speak : function(){alert('ぺちゃくちゃ');}
});
// 天野誕生
var amano = new Human();
amano.breathe(); // 動物だから
amano.eat(); // 動物だから
amano.speak(); // 人間でもある
</script></head><body><div></div></body></html>
Object.inspect
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// 人間を作る
var Human = Class.create();
Human.prototype = {
initialize : function(name, hobby){
this.name = name; this.hobby = hobby;
},
inspect : function(){
return '#<Human:{' +
'name:' + Object.inspect(this.name) + ', ' +
'hobby:' + Object.inspect(this.hobby) +
'}>';
}
};
// 天野誕生
var amano = new Human('天野', '勉強');
// 山下誕生
var yamashita = new Human('山下', ['飲み', 'カラオケ']);
// 調査
alert(Object.inspect(amano));
alert(Object.inspect(yamashita));
</script></head><body><div></div></body></html>
Function
Function.prototype.bind
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// 人間を作る
var Human = Class.create();
Human.prototype = {
initialize : function(name, hobby){
this.name = name;
},
homework : function(){
alert(this.name + 'は必死に宿題をしてます。');
}
};
// 天野誕生
var amano = new Human('天野');
// 山下誕生
var yamashita = new Human('山下');
yamashita.homework = yamashita.homework.bind(amano);
// 宿題してるのは誰？
amano.homework();
yamashita.homework();
</script></head><body><div></div></body></html>
Function.prototype.bindAsEventListener
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// 人間の作成
var Human = Class.create();
Human.prototype = {
initialize : function(name){this.name = name;},
eat : function() {alert(this.name+'>'+'ぱくぱく');},
speak : function() {alert(this.name+'>'+'ぺちゃくちゃ');}
};
// 天野誕生
var amano = new Human('天野');
// 初期化
function init(){
// フォームから、天野を操作できるようにする。
$('eatButton').onclick = amano.eat.bindAsEventListener(amano);
$('speakButton').onclick = amano.speak.bindAsEventListener(amano);
}
</script></head><body onload="init()"><div>
<form action="uri:dummy"><div>
<input type="button" id="eatButton" value="食べる">
<input type="button" id="speakButton" value="話す">
</div></form>
</div></body></html>
Number
Number.prototype.toColorPart
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// 赤200 緑200 青0
var r = 200;
var g = 200;
var b = 0;
// 色文字列生成
var color = '#' +
r.toColorPart() +
g.toColorPart() +
b.toColorPart();
alert(color);
</script></head><body onload="$('text').style.color=color"><div id="text">■■■</div></body></html>
Number.prototype.succ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript"> // 1 + 1 + 1 + 1 alert(1 .succ().succ().succ()); // 4 // 備考： 何が嬉しいのかよくわからない。 // 誰かこの関数の活用の仕方を教えてください ┏○ぺこ </script></head><body><div></div></body></html>
Number.prototype.times
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript"> // 5回アラートをかます。 (5).times(alert); </script></head><body><div></div></body></html>
Try
Try.these
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
function load(){
var result =
Try.these(
// id='aaa'の要素を取得。無かったら例外
function(){var elem = $('aaa'); if(!elem)throw 0;return elem;},
// id='bbb'の要素を取得。無かったら例外
function(){var elem = $('bbb'); if(!elem)throw 0;return elem;},
// id='ccc'の要素を取得。無かったら例外
function(){var elem = $('ccc'); if(!elem)throw 0;return elem;}
);
if(result){
alert(result.nodeName + '要素取得');
}
else{
alert('ない');
}
}
</script></head><body onload="load()"><div id="ccc"></div></body></html>
PeriodicalExecuter
継承して使う
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// カウンタの定義(PeriodExecuter を継承)
var Counter = Class.create();
Object.extend(Counter.prototype, PeriodicalExecuter.prototype);
Object.extend(Counter.prototype, {
// コンストラクタ
initialize : function(textId, buttonId){
// 継承元のコンストラクタを呼ぶ
PeriodicalExecuter.prototype.initialize.call(this, this.count.bind(this), 1);
// テキストノードを保存。
this.textNode = $(textId).firstChild;
// change メソッドをボタンに登録。
$(buttonId).onclick = this.change.bindAsEventListener(this);
},
// 1秒おきに呼ばれるメソッド
count : function(){
this.textNode.nodeValue = eval(this.textNode.nodeValue) + (this.reverse ? -1 : 1);
},
// クリック時に呼ばれるメソッド
change : function(){
this.reverse = this.reverse ? false : true;
}
});
// メイン
function main(){
var counter = new Counter('time', 'button');
}
</script></head><body onload="main()"><div><div id="time">0</div><form action="uri:dummy"><div><input id="button" type="button" value="↓↑"></div></form></div></body></html>
委譲して使う
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// カウンタの定義
var Counter = Class.create();
Counter.prototype = {
// コンストラクタ
initialize : function(textId, buttonId){
// 委譲する。
this.engine = new PeriodicalExecuter(this.count.bind(this), 1);
// テキストノードを保存。
this.textNode = $(textId).firstChild;
// change メソッドをボタンに登録。
$(buttonId).onclick = this.change.bindAsEventListener(this);
},
// 1秒おきに呼ばれるメソッド
count : function(){
this.textNode.nodeValue = eval(this.textNode.nodeValue) + (this.reverse ? -1 : 1);
},
// クリック時に呼ばれるメソッド
change : function(){
this.reverse = this.reverse ? false : true;
}
};
// メイン
function main(){
var counter = new Counter('time', 'button');
}
</script></head><body onload="main()"><div><div id="time">0</div><form action="uri:dummy"><div><input id="button" type="button" value="↓↑"></div></form></div></body></html>
String
String.prototype.stripTags
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
function main(){
// ボディー内のタグを含むテキストを取得
var text = $('body').innerHTML;
// 表示する。
alert(text);
// タグを省いて表示する。
alert(text.stripTags());
}
</script></head><body id='body' onload='main()'>
<div>あああ<br>いいい<br>ううう</div>
</body></html>
String.prototype.stripScripts
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
var text = '<html>\n' +
'<head>\n' +
'<script>alert("0")</'+'script>\n' +
'<script>alert("1")</'+'script>\n' +
'<script>alert("2")</'+'script>\n' +
'</head>\n' +
'<body></body>\n' +
'<html>\n';
// スクリプトタグを省いて表示
alert(text);
alert(text.stripScripts());
</script></head><body><div></div></body></html>
String.prototype.extractScripts
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
var text = '<html>\n' +
'<head>\n' +
'<script>alert("0")</'+'script>\n' +
'<script>alert("1")</'+'script>\n' +
'<script>alert("2")</'+'script>\n' +
'</head>\n' +
'<body></body>\n' +
'<html>\n';
// スクリプトタグの中身を表示
alert(text);
text.extractScripts().each(alert);
</script></head><body><div></div></body></html>
String.prototype.evalScripts
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
var text = '<html>\n' +
'<head>\n' +
'<script>alert("0")</'+'script>\n' +
'<script>alert("1")</'+'script>\n' +
'<script>alert("2")</'+'script>\n' +
'</head>\n' +
'<body></body>\n' +
'<html>\n';
// Sciprt を実行
alert(text);
text.evalScripts();
</script></head><body><div></div></body></html>
String.prototype.escapeHTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
function main(){
// ボディー内の HTML を取得
var text = $('body').innerHTML;
// 表示する。
alert(text);
// escape して表示する。
alert(text.escapeHTML());
}
</script></head><body id='body' onload='main()'>
<div>あああ<br>いいい<br>ううう</div>
</body></html>
String.prototype.unescapeHTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
function main(){
// ボディー内の escape された HTML を取得
var text = $('body').innerHTML.escapeHTML();
// 表示する。
alert(text);
// unescape して表示する。
alert(text.unescapeHTML());
}
</script></head><body id='body' onload='main()'>
<div>あああ<br>いいい<br>ううう</div>
</body></html>
String.prototype.toQueryParams
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// Query 文字列を設定。実際は URL の ? 以降などをいれて使う
var query = '?a=0&b=1&c=2'; // 行頭の '?' はなくてもよい
// Query を連想配列に変換
var queryParams = query.toQueryParams();
// 表示
for(var key in queryParams){
alert(key + ' > ' + queryParams[key]);
}
</script></head><body><div></div></body></html>
String.prototype.camelize
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// css の名前
var css0 = '-moz-box-sizing';
var css1 = 'background-color';
var css2 = 'color';
// camerize すると CSSStyleDeclaration
// オブジェクトのメンバ名になる。
var style0 = css0.camelize();
var style1 = css1.camelize();
var style2 = css2.camelize();
// 表示
alert( css0 + ' > ' + style0 + '\n' +
css1 + ' > ' + style1 + '\n' +
css2 + ' > ' + style2
);
// CSS 編集
function main(){
$('text').style[style0] = 'border-box';
$('text').style[style1] = '#003366';
$('text').style[style2] = '#FFFFFF';
}
</script></head><body onload="main()"><div id="text">IT戦記</div></body></html>
Enumerable
使い方
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
/*
// ちなみにコンストラクタがないので直接 new はできないＹＯ♪
var e = new Enumerable;
*/
// ■継承されたものを使う。
// $R の復帰値は Enumerable を extend している。
var range = $R(3, 5); // new ObjectRange(3, 5) と同じ
range.each(alert); // Enumerable.each を呼べる。
// ■継承して使う。
var ElementStrings = Class.create();
Object.extend(ElementStrings.prototype, Enumerable);// Enumerable.prototype じゃない。
Object.extend(ElementStrings.prototype, {
// コンストラクタ
initialize : function(id){
this.element = $(id);
},
// テンプレートメソッド _each を実装する。
_each : function(iterator){
$A(this.element.childNodes).each(
// イテレータに子ノードのテキストを渡す。
function(o){iterator(o.firstChild.nodeValue);}
);
}
});
// メイン
function main(){
// Enumerable な ElementStrings を生成
var strings = new ElementStrings('list');
// 全ての要素に alert をかます。
alert('点呼開始！')
strings.each(alert);
}
</script></head><body onload="main()">
<div id='list'><div>天野</div><div>山下</div><div>勝野</div></div>
</body></html>
Enumerable.each
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// Enumerable 継承代表 Array
var enumerable = // [['天野', '勉強'], ['山下', '遊び'], ['勝野', 'バンド']]と同じ
new Array(
new Array('天野', '勉強'),
new Array('山下', '遊び'),
new Array('勝野', 'バンド'));
// イテレータの生成
var iterator = function(pair, index){
alert(pair[0] + 'くん、' + pair[1] + '中♪');
};
// each しちゃう♪イテレータを渡す。
enumerable.each(iterator);
</script></head><body><div></div></body></html>
Enumerable.all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// Enumerable 継承代表 Array
var enumerable = // [['天野', '勉強'], ['山下', '遊び'], ['勝野', 'バンド']]と同じ
new Array(
new Array('天野', '勉強'),
new Array('山下', '遊び'),
new Array('勝野', 'バンド'));
// イテレータの生成(勉強しているか)
var iterator = function(pair, index){
return pair[1] == '勉強';
};
// 全員勉強しているか？
if(enumerable.all(iterator)){
alert('おぉぉぉ！全員勉強しとる！！');
}
else{
alert('勉強しとらんやつもおる！！');
}
</script></head><body><div></div></body></html>
Enumerable.any
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// Enumerable 継承代表 Array
var enumerable = // [['天野', '勉強'], ['山下', '遊び'], ['勝野', 'バンド']]と同じ
new Array(
new Array('天野', '勉強'),
new Array('山下', '遊び'),
new Array('勝野', 'バンド'));
// イテレータの生成(勉強しているか)
var iterator = function(pair, index){
return pair[1] == '勉強';
};
// だれか勉強しているか？
if(enumerable.any(iterator)){
alert('おぉぉぉ！だれか勉強しとる！！');
}
else{
alert('だれも勉強しとらんがな！！');
}
</script></head><body><div></div></body></html>
Enumerable.collect (= Enumerable.map)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// Enumerable 継承代表 Array
var enumerable = // [['天野', '勉強'], ['山下', '遊び'], ['勝野', 'バンド']]と同じ
new Array(
new Array('天野', '勉強'),
new Array('山下', '遊び'),
new Array('勝野', 'バンド'));
// イテレータの生成(一人に一言)
var iterator = function(pair, index){
return pair[0] + 'くん、' + (pair[1] == '勉強' ? 'えらい♪' : '勉強しなさい！');
};
// みんなに一言づつ
var result = enumerable.collect(iterator);
// 結果表示
alert(result.join('\n'));
</script></head><body><div></div></body></html>
Enumerable.detect (= Enumerable.find)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// Enumerable 継承代表 Array
var enumerable = // [['天野', '勉強'], ['山下', '遊び'], ['勝野', 'バンド']]と同じ
new Array(
new Array('天野', '勉強'),
new Array('山下', '遊び'),
new Array('勝野', 'バンド'));
// イテレータの生成(遊んでる人か確認)
var iterator = function(pair, index){
return pair[1] == '遊び';
};
// 遊んでる人を探す。
var result = enumerable.detect(iterator);
// 結果表示
if(result) alert('先生！' + result[0] + 'くんが遊んでます！');
else alert('先生！遊んでる人なんて、いる訳ないです！');
</script></head><body><div></div></body></html>
Enumerable.findAll (= Enumerable.select)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// Enumerable 継承代表 Array
var enumerable = // [['天野', '勉強'], ['山下', '遊び'], ['勝野', 'バンド']]と同じ
new Array(
new Array('天野', '勉強'),
new Array('山下', '遊び'),
new Array('勝野', 'バンド'));
// イテレータの生成(勉強してないことを確認)
var iterator = function(pair, index){
return pair[1] != '勉強';
};
// 勉強してない人を探す。
var result = enumerable.findAll(iterator);
// 結果表示
result.each(function(o){alert('先生！' + o[0] + 'くんがさぼってます！')});
</script></head><body><div></div></body></html>
Enumerable.grep
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
function main(){
// コードを取得
var code = $('code').firstChild.nodeValue;
// 行に分解
var lines = code.split('\n');
// パターン定義
var pattern = /^[ \t]*function[ \t]+[a-zA-Z_$][a-zA-Z0-9_$]*\(\).*$/;
// grep を実行
var funcDeclLines = lines.grep(pattern);
// 結果表示
funcDeclLines.each(alert)
// grep を実行(iterator付き♪)
var funcDeclLineNumbers = lines.grep(pattern, function(o, i){return i});
// 結果表示
funcDeclLineNumbers.each(function(i, j){
alert((j+1)+'個目の関数は'+(i+1)+'行目に宣言されています。')});
}
</script></head><body onload='main()'><div>
<pre id='code'>
// 関数 A
function a(){
return 'a';
}
// 関数 B
function b(){return 'b';}
// 関数 C
function c()
{
return 'c';
}
</pre>
</div></body></html>
Enumerable.include (= Enumerable.member)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// メンバを定義
var members = ['天野', '山下', '勝野', '龍之介'];
// include を呼び出す。
alert('天野はメンバー' + (members.include('天野')?'です。':'ではない。'));
alert('邦彦はメンバー' + (members.include('邦彦')?'です。':'ではない。'));
</script></head><body><div></div></body></html>
Enumerable.inject
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// 人間の定義
var Human = Class.create();
Human.prototype = {
initialize : function(name) {
this.name = name;
}
};
// 人々生成
var cloud = [
new Human('龍之介'), new Human('天野'),
new Human('山下'), new Human('勝野')];
// イテレータの生成。頭の文字一文字とって♪
var iterator = function(memo, human){return memo+human.name.charAt(0)};
// let's inject!!
alert('まとめて : ' + cloud.inject('', iterator));
</script></head><body><div></div></body></html>
Enumerable.invoke
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// 人間の定義
var Human = Class.create();
Human.prototype = {
initialize : function(name){this.name = name;},
speak : function(word){return this.name+'>'+word;}
};
// 人々生成
var cloud = [new Human('天野'), new Human('山下'), new Human('勝野')];
// 騒ぐ
var words = cloud.invoke('speak', 'わいわいがやがや');
// 結果表示
alert(words.join('\n'));
</script></head><body><div></div></body></html>
Enumerable.max
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// 人間の定義
var Human = Class.create();
Human.prototype = {
initialize : function(name, knowledge) {
this.name = name;
// 知識レベル
this.knowledge = knowledge;
}
};
// 人々生成
var cloud = [new Human('天野', 3), new Human('山下', 2), new Human('勝野', 1)];
// 最も高い知識レベルを取得
var best = cloud.max(function(human){return human.knowledge});
// 結果表示
alert('最高の知識レベルは ' + best);
</script></head><body><div></div></body></html>
Enumerable.min
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// 人間の定義
var Human = Class.create();
Human.prototype = {
initialize : function(name, knowledge) {
this.name = name;
// 知識レベル
this.knowledge = knowledge;
}
};
// 人々生成
var cloud = [new Human('天野', 3), new Human('山下', 2), new Human('勝野', 1)];
// 最も低い知識レベルを取得
var worst = cloud.min(function(human){return human.knowledge});
// 結果表示
alert('最低の知識レベルは ' + worst);
</script></head><body><div></div></body></html>
Enumerable.partition
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// 人間の定義
var Human = Class.create();
Human.prototype = {
initialize : function(name, knowledge) {
this.name = name;
// 知識レベル
this.knowledge = knowledge;
}
};
// 人々生成
var cloud = [
new Human('龍之介', 3), new Human('天野', 3),
new Human('山下', 2), new Human('勝野', 1)];
// 知識レベル 3 以上と 3 未満で振分け
var result = cloud.partition(function(human){return human.knowledge >= 3});
// 結果表示
var iterator = function(memo, human){return memo+human.name+' '};
alert('頭よさげ : ' + result[0].inject('', iterator));
alert('頭わるげ : ' + result[1].inject('', iterator));
</script></head><body><div></div></body></html>
Enumerable.pluck
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// 人間の定義
var Human = Class.create();
Human.prototype = {
initialize : function(name, hobby) {
this.name = name;
this.hobby = hobby;
}
};
// 人々生成
var cloud = [
new Human('龍之介', 'ナンパ'), new Human('天野', '勉強'),
new Human('山下', '遊び'), new Human('勝野', 'バンド')];
// pluck で名前だけ抽出
var names = cloud.pluck('name');
// pluck で趣味だけ抽出
var hobbys = cloud.pluck('hobby');
// 表示
names.each(alert);
hobbys.each(alert);
</script></head><body><div></div></body></html>
Enumerable.reject
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// Enumerable 継承代表 Array
var enumerable = [['天野', '勉強'], ['山下', '遊び'], ['勝野', 'バンド']];
// イテレータの生成(勉強していることを確認)
var iterator = function(pair, index){
return pair[1] == '勉強';
};
// 勉強してない人を探す。
var result = enumerable.reject(iterator);
// 結果表示
result.each(function(o){alert('先生！' + o[0] + 'くんがさぼってます！')});
</script></head><body><div></div></body></html>
Enumerable.sortBy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// 人間の定義
var Human = Class.create();
Human.prototype = {
initialize : function(name, hobby) {
this.name = name;
}
};
// 人々生成
var cloud = [
new Human('りゅうのすけ'), new Human('あまの'),
new Human('やました'), new Human('かつ')];
// 名前の長さを求める。
var iterator = function(human){return human.name.length};
// 並び替え♪
cloud = cloud.sortBy(iterator);
// 表示
alert(cloud.inject('名前の短さランク：\n',
function(memo,obj,i){return memo+(i+1)+' 位 '+obj.name+'\n'}));
</script></head><body><div></div></body></html>
Enumerable.zip
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// 人間の定義
var Human = Class.create();
Human.prototype = {
initialize : function(name, hobby) {
this.name = name;
}
};
// 男性集団生成
var males = [
new Human('龍之介'), new Human('天野'),
new Human('山下'), new Human('勝野')];
// 女性集団生成
var females = [
new Human('女性0'), new Human('女性1'),
new Human('女性2'), new Human('女性3')];
// 合コン開始ｗｗ
var hole = males.zip(females); // 複数の配列指定可♪
// hole = [[<龍之介>, <女性0>], [<天野>, <女性1>],
// [<山下>, <女性2>], [<勝野>, <女性3>]]
// 表示
alert(hole.inject('合コン会場\n',
function(memo,obj,i){
return memo+'第 '+(i+1)+' テーブル : '+
obj[0].name+' vs '+obj[1].name+'\n'
}));
</script></head><body><div></div></body></html>
Array
Array.prototype.clear
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript"> var array = ['天野', '山下', '勝野', '龍之介']; // 抹殺 (o'∀')ノ array = array.clear(); // 表示どーん(何もアラートされませーん) array.each(alert); </script></head><body><div></div></body></html>
Array.prototype.first
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript"> var array = ['天野', '山下', '勝野']; // 最初の要素を表示 alert(array.first()); </script></head><body><div></div></body></html>
Array.prototype.last
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript"> var array = ['天野', '山下', '勝野']; // 最後の要素を表示 alert(array.last()); </script></head><body><div></div></body></html>
Array.prototype.compact
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript"> var array = ['天野', null, undefined, '山下', '勝野', '龍之介']; // null 及び undefined を削除する。 array = array.compact(); // 表示 array.each(alert); </script></head><body><div></div></body></html>
Array.prototype.flatten
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
var array = [['天野', '山下', '勝野', '龍之介'],
['邦彦', 'ブル', 'なおや'],
[[[['やし']]]]];
// 一つの配列にしちゃう。
array = array.flatten();
// 表示
array.each(alert);
</script></head><body><div></div></body></html>
Array.prototype.without
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
var array = ['天野', '山下', '勝野', '龍之介'];
// '天野' '龍之介' を削除する。
array = array.without('天野', '龍之介');
// 表示
array.each(alert);
</script></head><body><div></div></body></html>
Array.prototype.indexOf
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
var array = ['天野', '山下', '勝野', '龍之介'];
// 天野は何番目か表示
alert('天野は ' + (array.indexOf('天野')+1) + ' 番目');
// 山下は何番目か表示
alert('山下は ' + (array.indexOf('山下')+1) + ' 番目');
</script></head><body><div></div></body></html>
Array.prototype.reverse
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript"> var array = ['天野', '山下', '勝野', '龍之介']; // 反転どーん array = array.reverse(false); // 表示どーん array.each(alert); </script></head><body><div></div></body></html>
Hash
使い方
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
/*
// ちなみにコンストラクタがないので直接 new はできないＹＯ♪
var e = new Hash;
*/
// ■継承されたものを使う。
// $H の復帰値は Hash を extend している。
var hash = $H(Prototype);
hash.keys().each(alert); // Hash.keys を呼べる。
// ■継承して使う。
var ElementHash = Class.create();
// Hash は Enumerable に依存しているため継承する。
Object.extend(ElementHash.prototype, Enumerable);
Object.extend(ElementHash.prototype, Hash);// Hash.prototype じゃない。
Object.extend(ElementHash.prototype, {
// コンストラクタ
initialize : function(id){
this.element = $(id);
},
// テンプレートメソッド _each をオーバライドする。
_each : function(iterator){
$A(this.element.getElementsByTagName('tr')).each(
function(o){
var spans = o.getElementsByTagName('td');
var key = spans[0].firstChild.nodeValue;
var value = spans[1].firstChild.nodeValue;
var pair = [key, value];
pair.key = key;
pair.value = value;
iterator(pair);
}
);
}
});
// メイン
function main(){
// Enumerable な ElementStrings を生成
var elemHash = new ElementHash('hash');
// 表示
elemHash.each(alert);
// Hash の関数が呼べる。
var keys = elemHash.keys();
var values = elemHash.values();
// 結果表示
keys.each(alert);
values.each(alert);
}
</script></head><body onload="main()"><div>
<table id='hash' border='1px'>
<tr><td>name</td> <td>天野</td></tr>
<tr><td>hobby</td><td>勉強</td></tr>
<tr><td>age</td> <td>12</td> </tr>
</table>
</div></body></html>
Hash.keys
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
var Human = Class.create();
Human.prototype = {
initialize : function(name, age, hobby){
this.name = name;
this.age = age;
this.hobby = hobby;
}
};
var amano = new Human('天野', 24, '勉強');
// ハッシュに分解
var hash = $H(amano); // いてて
// キーの取得
var keys = hash.keys();
// 表示
keys.each(alert);
</script></head><body><div></div></body></html>
Hash.values
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
var Human = Class.create();
Human.prototype = {
initialize : function(name, age, hobby){
this.name = name;
this.age = age;
this.hobby = hobby;
}
};
var amano = new Human('天野', 24, '勉強');
// ハッシュに分解
var hash = $H(amano); // いてて
// 値の取得
var values = hash.values();
// 表示
values.each(alert);
</script></head><body><div></div></body></html>
Hash.merge
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// 人間
var Human = Class.create();
Human.prototype = {
initialize : function(name, age, hobby){
this.name = name;
this.age = age;
this.hobby = hobby;
}
};
// ロボット
var Robot = Class.create();
Robot.prototype = {
initialize : function(name, battery){
this.name = name;
this.battery = battery;
}
};
// オブジェクトを生成してハッシュ化
var amano = $H(new Human('天野', 24, '勉強'));
var amaRobo = $H(new Robot('あまちゃんロボ 1 号', 100));
// 天野にロボットを融合
var union = amano.merge(amaRobo);
// 表示(name は amaRobo のほうに上書きされている)
union.each(function(o){alert(o.key+' : '+o.value)});
</script></head><body><div></div></body></html>
Hash.toQueryString
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// 人間
var Human = Class.create();
Human.prototype = {
initialize : function(name, age, hobby){
this.name = name;
this.age = age;
this.hobby = hobby;
}
};
// オブジェクトを生成してハッシュ化
var amano = $H(new Human('天野', 24, '勉強'));
// クエリに変換
var query = amano.toQueryString();
// 表示
alert(query);
// おぉぉぉ！オブジェクトそのまま遅れるじゃん！
</script></head><body><div></div></body></html>
慣習的にオブジェクトに実装しておくと便利な関数
inspect
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// インスペクタ無しのクラス
var A = Class.create();
A.prototype = {
// コンストラクタ
initialize : function(name, type){
this.name = name, this.type = type
},
};
// クラス A をインスペクタ有りに拡張
var B = Class.create();
Object.extend(B.prototype, A.prototype);
Object.extend(B.prototype, {
// コンストラクタ
initialize : function(name, type){
A.prototype.initialize.apply(this, arguments);
},
// このオブジェクトのインスペクタ
inspect : function(){
return '#<B: {' +
$H(this).map(
function(o){return o.join(': ')}
).join(', ') +
'}>';
}
});
// 二つのクラスのインスタンスを配列にいれ、インスペクタを呼び出す。
// B のみインスペクトされる。
alert(Object.inspect([new A('a', 'a'), new B('b', 'b')]));
// 他にもいろんなインスペクタがある。
alert(Object.inspect(new String('aaa\\aaa'))); // 文字列
alert(Object.inspect([1, 2, '3'])); // 配列
alert(Object.inspect($H(new A('a', 'a')))); // ハッシュ
alert(Object.inspect($R(1, 98))); // レンジ
</script></head><body><div></div></body></html>
toArray
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">
// toArray を実装すると $A 関数から呼ぶ時に便利☆
var IterableObject = Class.create();
IterableObject.prototype = {
// コンストラクタ
initialize : function(value0, value1, value2){
this.value0 = value0; this.value1 = value1; this.value2 = value2
},
// toArray を実装
toArray : function(){
return [this.value0, this.value1, this.value2];
}
};
// インスタンス生成
var obj = new IterableObject('0', ['1-0', '1-1'], '2');
// 配列化
var arr = $A(obj);
// インスペクトして表示
alert(Object.inspect(arr));
</script></head><body><div></div></body></html>
