javascript Archive

Arrayの拡張

■.each　配列のメソッド　「各配列の要素に関数を適用する」
=>用法
myArray.each(fn[, bind]);
=>引数
fn：関数。この関数は配列の各要素に対して実行されます。この関数の引数は要素（item）とそのインデックス（index）です。bind：オブジェクト。このオブジェクトは関数の中で、’this’として使うオブジェクト

□引数にある関数(fn)の引数について
=>用法
fn(item, index, array)
=>引数
item：mixed　現在実行中の配列の要素（item）
index：数値　現在実行中の配列のインデックス（index）
array：配列　実際の配列？？※この引数の意味は宿題
例）
var testArray = ['keybord','geek','whisper','girl','devil','otaku','akiba','anime','perfume','travel','hbr'];
testArray.each(function(item, index){
document.write(index + “=>” + item)
});

■.every　配列のメソッド　「引数にある関数を全ての要素に実行し、すべてtrueであればtrueを返す」
=>返り値
論理値
=>用法
var allPassed = myArray.every(fn[, bind]);
=>引数
fn：関数。配列のそれぞれの要素にテストする関数
bind：オブジェクト。関数の中で、’this’として使うオブジェクト

□引数にある関数(fn)の引数について
=>用法
fn(item, index, array)
=>引数
item：mixed　現在実行中の配列の要素（item）
index：数値　現在実行中の配列のインデックス（index）
array：配列　実際の配列？？※この引数の意味は宿題
例）
var areAllBigEnough = [10,4,25,100].every(function(item, index){
return item > 20;
});
//10,4,25,100、すべて20より大きくはない（関数の実行結果）ので、falseが戻ってくる
//もし、[30,40,50,700]という配列でおこなった場合はtrueとなる。

■.filter　配列のメソッド　「配列の各要素に対して引数の関数を実行し、trueとなった値で新たに配列を作る」
=>返り値
array：新しい配列
=>用法
var filterdArray = myArray.filter(fn[, bind]);
=>引数
fn：関数。配列のそれぞれの要素に対して実行する関数
bind：オブジェクト。上記関数（fn）の中で’this’を使ってアクセスするオブジェクト

□引数にある関数(fn)の引数について
=>用法
fn(item, index, array)
=>引数
item：mixed　現在実行中の配列の要素（item）
index：数値　現在実行中の配列のインデックス（index）
array：配列　実際の配列？？※この引数の意味は宿題
例）
var biggerThanTwenty = [10, 3, 25, 100].filter(function(item, index){
return item >20;
});
// 20より大きい25と100が要素の配列ができるよ～

■.clean　配列のメソッド　「true と評価された配列の要素だけで構成された新しい配列ができる。」
=>返り値
array：新しい配列
=>用法
var cleanedArray = [0, 3, null, false, true, "foo", ""].clean();

$random(min,max)　「minとmaxの間からランダムな数字を出す。」
=>引数
min：最小値（整数）
max：最大値（整数）
=>返り値
乱数（整数）
例）
alert($random(5,10));

※$splat(obj)　よくわかりません!!!!
$splat(obj)　「引数が定義済みで配列でない場合に配列へコンバートする」
=>引数
obj：どんな値でもＯＫ
=>返り値
配列
例）
$splat(’hello’);　　//戻り値は['hello']
$splat(['a','b','c']);　　//戻り値は['a','b','c']

$time()　「現在の時刻のタイムスタンプを返す」
=>引数
な～っし
=>返り値
現在時刻のタイムスタンプ

$try(fn)　「複数の関数を実行しようと試みる」
=>引数
関数
=>返り値
関数からの通常の返り値　or　全ての関数が失敗したらnull
例）
var result = $try(function(){
return some.made.up.object;
}, function(){
return jibberish.that.doesnt.exists;
}, function(){
return false;
});

alert(result);

$type(obj)　「引数の型を返す」
=>引数
オブジェクト
=>帰り値
‘element’　//文字列。引数のオブジェクトがDOM要素だった場合
‘textnode’　//文字列。引数のオブジェクトがDOMのテキストノードだった場合
‘whitespace’　//文字列。引数のオブジェクトがDOMの空白ノードだった場合
‘arguments’　//文字列。引数のオブジェクトがargumentsオブジェクトだった場合
‘array’　//文字列。引数のオブジェクトが配列だった場合
‘object’　//文字列。引数のオブジェクトがオブジェクトだった場合
’string’　//文字列。引数のオブジェクトが文字列だった場合
‘number’　//文字列。引数のオブジェクトが数字だった場合
‘date’　//文字列。引数のオブジェクトが日付だった場合
‘boolean’　//文字列。引数のオブジェクトが論理オブジェクトだった場合
‘function’　//文字列。引数のオブジェクトが関数だった場合
‘regexp’　//文字列。引数が正規表現オブジェクトだった場合
‘class’　//文字列。引数がクラスだった場合
‘collection’　//文字列。引数が元のHTML要素だった場合。
‘window’　//文字列。引数がwindowオブジェクトだった場合。
‘document’　//文字列。引数がdocumentオブジェクトだった場合。
‘false’　//論理値。引数が未定義やnullやNaNなどの場合
例）
var myString = ‘hello’;
$type(myString);　//「string」が返ってくる。

MooToolsをちょっとづつ解説（勉強）

■Core
$chk（arg）　「引数（arg）が存在するか調べる。」
=>引数
arg：チェック対象のもの
=>返り値
論理値（boolean）：argが存在しているか0の場合は真、それ以外はfalse
例）
function myFunction(arg){
//myFunctionという関数の引数argが存在しているor0の場合は「The object exists or is 0」がダイアログで表示される。それ以外は、「The object is either null, undefined, false, or “”.」とダイアログで表示
if($chk(arg)) alert(’The object exists or is 0.’);
else alert(’The object is either null, undefined, false, or “”.’);
}

使用例）
<script type=”text/javascript”>
<!–
function myFunction(arg){
if($chk(arg)) alert(’The object exists or is 0.’);
else alert(’The object is either null, undefined, false, or “”.’);
}

var test0 = new Object();
var test1;
myFunction(test0); //$chkの結果はtrueとなり、「The object exists or is 0.」がダイアログで表示
myFunction(test1); //$chkの結果はfalseとなり。「The object is either null, undefined, false, or “”.」がダイアログで表示
–>
</script>

$clear(timer)　「setInterval(periodical)やsetTimeout(delay)」をクリアする」
=>引数
timer：setInterval（periodical）やsetTimeout(delay)のタイマーID
=>返り値
null
例）
var myTimer = myFunction.delay(5000);
myTimer = $clear(myTimer);
使用例）
<script type=”text/javascript”>
<!–
function myFunction2(){
alert(’こっちは実行されませ～～～ん’);
}
function myFunction3(){
alert(’こちらが実行されました～～～’);
}
var myTimer = myFunction.delay(5000);//5秒後にmyFunctionを実行するが、
myTimer = $clear(myTimer);//上の行で5秒後にmyFunctionを実行すると決めたけど、この行で即座に解除しているので、実際にはmyFunctionは実行されない。
var myTimer2 = myFunction2.delay(5000);//こちらが実行されます。
–>
</script>

$defined(obj)　「引数（obj）が定義されているか調べる」
=>引数
obj：オブジェクト
=>返り値
論理値：objがnullでもundefinedでもなければtrue、それ以外はfalse
例）
function myFunction4(arg){
if($defined(arg)) alert(’引数は定義されております。’);
else alert(’引数はnullかundefinedです。’);
}

使用例）
<script type=”text/javascript”>
<!–
function myFunction4(arg){
if($defined(arg)) alert(’オブジェクトは定義されています。’);
else alert(’オブジェクトは定義されておりません。’);
}

var test = new Object();
myFunction4(test);

var array = new Array();
myFunction4(array);

var strings = ‘今日は晴れ’;
myFunction4(strings);

var numbers = 0;
myFunction4(numbers);

var test2;
myFunction4(test2);
–>
</script>

$arguments(i)　「渡されたインデックスの値を返す関数を作る」
=>引数
i：数字
=>返り値
function：関数の引数から値を返す関数を返す。
例）
var secondArgument = $arguments(1);
alert(secondArgument(’a',’b',’c'));

使用例）
<script type=”text/javascript”>
<!–
var secondArgument = $arguments(1);
alert(secondArgument(’ゼロ’,'イチ’,'ニ’));//ダイアログでイチと出る。
–>
</script>

$empty　「空の関数。たいてい、クラスのイベントメソッドの中のプレースフォルダーとして利用される」
=>引数
な～し！
=>返り値
な～し！
例）
var emptyFn = $empty;

使用例）
<script type=”text/javascript”>
<!–
var emptyFn = $empty; //var empty = function(){}　と同義
–>
</script>

$lambda(value)　「何もしない空の関数を定義する。しかし、引数に渡した値を返す。」
=>引数
value：返してもらう値
=>返り値
value：引数で渡された値
例）
myLink.addEvenet(’click’,$lambda(false)); //

使用例）
<script type=”text/javascript”>
<!–
//※準備中
–>
</script>

$extend(original, extended)　「全てのプロパティを第一引数（original）に第二引数（extended）で渡されたオブジェクトをコピーする」
=>引数
original：コピーするオブジェクト
extended：コピーされるオブジェクト
=>返り値
object：第一引数（original）にコピーが完了したオブジェクト
例）
var firstObj = {
‘name’:'John’,
‘lastName’:'Doe’
};

var secondObj = {
‘age’:'20′,
’sex’:'male’,
‘lastName’:'Dorian’
};

$extend(firstObj, secondObj);
使用例）
<script type=”text/javascript”>
<!–
var firstObj = {
‘name’:'John’,
‘lastName’:'Doe’
};

var secondObj = {
‘age’:'20′,
’sex’:'male’,
‘lastName’:'Dorian’
};

$mergeObj = $extend(firstObj, secondObj);
alert($mergeObj['name']);
alert($mergeObj['lastName']);//同名のプロパティは上書きされる。
alert($mergeObj['age']);
alert($mergeObj['age']);
alert($mergeObj['sex']);
–>
</script>

$merge(object)　「何個でもオブジェクトを足す。」
=>引数
object：オブジェクト、複数個ある場合はカンマ（,）で区切る
=>返り値
マージされたオブジェクト
例）
var obj0 = {a:1, b:2};
var obj1 = {c:3, d:4};
var obj2 = {e:5, f:6};
var merged = $merge(obj0,obj1,obj2);

var nestedObj0 = {a: {b:1, c:1}}
var nestedObj1 = {a: {b:2}};
var nested = $merge(nestedObj0, nestedObj1);
使用例）
<script type=”text/javascript”>
<!–
var obj0 = {a:1, b:2};
var obj1 = {c:3, d:4};
var obj2 = {e:5, f:6};
var merged = $merge(obj0,obj1,obj2);

var nestedObj0 = {a: {b:1, c:1}}
var nestedObj1 = {a: {b:2}};
var nested = $merge(nestedObj0, nestedObj1);

alert(merged['a']);
alert(merged['b']);
alert(merged['c']);
alert(merged['d']);
alert(merged['e']);
alert(merged['f']);
alert(nested['a']['b']);//同名のプロパティは上書きされる。
alert(nested['a']['c']);
–>
</script>

$each(iterable, fn [,bind])　「繰り返し処理」
=>引数
iterable：繰り返し処理をするオブジェクト、配列
fn：それぞれの要素に対して行う関数
bind：thisキーワードを使うためのオブジェクト
=>返り値

例）
配列だと・・・
$each(['Sun'], ['Mon'], ['Tue'],function(day, index){
alert(’name:’ + day + ‘, index:’ + index);
});

オブジェクトだと・・・
$each({first:”Sunday”, second:”Monday”, third:”Tuesday”},{function(value, key){
alert(”The ” + key + ” day of the week is ” + value);
});

使用例）
<script type=”text/javascript”>
<!–
//配列だと・・・
$each(['Sun'], ['Mon'], ['Tue'],function(day, index){
alert(’name:’ + day + ‘, index:’ + index);
});

//オブジェクトだと・・・
$each({first:”Sunday”, second:”Monday”, third:”Tuesday”},{function(value, key){
alert(”The ” + key + ” day of the week is ” + value);
});
–>
</script>

ずっと疑問だったjavascriptのオブジェクト指向。。。
ようやくちょっと判明。

これがわかると、配布されているライブラリも拡張してより強力にすることができる！！

まずは～
JavaやC++、C#などのオブジェクト指向とはちょっと違います。
PHPのオブジェクト指向ともちょっと違います。
actionscriptのオブジェクト指向ともちょっと違います。

が！！

似てます。
激似です。

基本的に書き方としては、関数を定義するかのごとく書きます。
ただし、javascriptの場合、関数もデータとして扱えます。ここがミソ。
関数もほかの文字列や、数値、論理値のようにデータとして扱えちゃうのです。

ザッツ　「関数オブジェクト」　！！！！

仮に、
function test(){
・・・・・
}
という関数を定義したとしましょう。

この関数をオブジェクトとして扱えちゃいますので、
test.parame = 1;
とか
test.param2 = 2;
とか
test.param3 = 3;
とかできちゃいます。（厳密にはこれは、オブジェクトプロパティとか呼ばれる代物です。）

じゃ～、関数にプロパティが設定できるし、関数もデータとして扱えるから、プロパティとして関数を設定して、メソッドとしてしまえばいいじゃん！！

ということなんです。超簡単に言えば・・・。厳密さに問題があるかもしれません。

じゃ～、具体的に　tashizan　というクラスを作って、引数として渡された２つの値を加算した結果を返すメソッドを持たせましょう。。。

function test(a, b) {
//thisで自分自身をさしています。
//自分の　x　とういプロパティに引数　a　を
//自分の　y　というプロパティに引数　b　を設定してあげます。
//関数をオブジェクトとして扱い、それにプロパティを設定する感じ
this.x = a;
this.y = b;
}

//次に、メソッドを設定しますが、ここで仮に

function test(a, b) {
//thisで自分自身をさしています。
//自分の　x　とういプロパティに引数　a　を
//自分の　y　というプロパティに引数　b　を設定してあげます。
//関数をオブジェクトとして扱い、それにプロパティを設定する感じ
this.x = a;
this.y = b;
this.tashizan = function() {
return this.x + this.y;
}
}
といった具合でJava等のような感覚でメソッドを定義すると、インスタンスを生成する度に、各々のインスタンスが同じメソッドを持った状態で生成されてしまいます。

ザッツ　もったいない！！！！！

ということで、登場するのが

prototypeオブジェクト

これ、どういう代物かと申しますと、
クラス共通のメソッドやら、プロパティを設定できるというもの。
もっと詳しくいいますと、各々のインスタンスは、この　prototypeオブジェクト　からプロパティを継承しているという内容だそうです。
ですので、この　prototypeオブジェクトに対して、そのクラス共通のメソッドだの、プロパティを設定してあげるとよろしいそうで。

ではもう一度、コードに戻りまして、先ほどののfunction test(a, b)・・・は

function test(a, b) {
//thisで自分自身をさしています。
//自分の　x　とういプロパティに引数　a　を
//自分の　y　というプロパティに引数　b　を設定してあげます。
//関数をオブジェクトとして扱い、それにプロパティを設定する感じ
this.x = a;
this.y = b;
}

となり、
共通のメソッド　tashizan　は

test.prototype.tashizan = function() {return this.x + this.y;}

と書きます。
これで、

var test = new test(1, 2);
var test2 = new test(3, 4);

document.write(test.tashizan());
document.write(test2.tashizan());

とするみたいな。
ちょっと説明がしょーもないですね・・・・・・。

『次は、YUIなどで使われている「名前空間」
初めてYUI使ったとき、ま～ったくわからなかったです・・・・。』

とか書いて意気込んで、大事な箇所を書いていたのですが、
javascriptのオブジェクト指向を上手にできるように説明できるようにするため、何回かこのテーマで記事書きたいとおもいます・・・。

お粗末様でございました。