前書き
JavaScriptもJQueryも全く分からなかった時にはまったポイントなどをまとめます。
今流行りらしいJavaScript、この世から消えてなくなればいいのにと日々願っています。
前提知識
（変数とか関数などの概念がわかる人）
JQueryって何？
JQueryはJavaScriptを使用したスクリプト言語みたいなものです。
JavaScriptだったらごちゃごちゃ書かなければいけないものをJQueryなら
少ないコードで書けたりします。
何ができんの？
WebアプリケーションでHTMLを動的に編集したりなんかに使います。
Ajaxを用いてサーバとの通信したりですとかもやれます。
例えば、ボタンクリックしたら特定の場所を非表示にするとか
テキストをクリックしたらダイアログ出すとか、文字色変えるとか、CSSのクラスを追加するとか、HTML系に関することだったらほぼ何でもできるかと。
抑えるべきポイント
じゃあ開発やるときに概念として抑えるポイントは何か
変数に関数を突っ込むという概念
JQueryというかJavaScriptでは変数に関数を突っ込むのがザラにあります。
//変数に関数を突っ込む
var test = function(){
alert("フィブログラム");
};
//メイン関数内で呼び出せる
function main(){
test();
};
main関数が呼び出された際の動きは下記のとおりです
main呼び出し→test変数にアクセス→test変数は関数が入ってるので関数呼び出されalertが実行される。
イメージとしてはC、C++にある関数ポインタに近いです。
Javaで言うならメソッドだけ定義されたクラスだと思ってくれればいいかと。
これ、すごい、多用します。
関数の引数に↑の関数が指定できる
JavaScriptは変数に型定義なんてものはありません。
VBでいうなら全部Valiant型かなんかです。
厄介なのが関数の引数に上記で書いたタイプの変数が渡せることです。
//4.execute内で呼び出されて実行される
var test = function(){
alert("フィブログラム");
};
var execute = function(method){
//3.引数でもらった関数を実行(引数methodの中身はtext変数)
method();
};
//1.メイン関数が実行される
function main(){
//2.executeにtest変数を引数として渡して呼び出す
execute(test);
};
そろそろわけわかんなくなってきましたね。
JavaScript系の関数は引数に型が書かれないので引数の中身が何者なのか非常にわかりづらいです。
呼び出し元で何が渡されてきているのかを確認、意識することがキモになります。
引数の中身をいきなり定義できる
上記のプログラムですが、下記のように書くこともしばしばあります。
//4.execute内で呼び出されて実行される
var execute = function(method){
//3.引数でもらった関数を実行
method();
};
//1.メイン関数が実行される
function main(){
//2.executeの引数として関数を直接書いて渡す
execute(function(){
//※前のソースで書いてたtest変数の内容を直接引数の中に書きだす
alert("フィブログラム");
});
};
ひとつ前のソースと全く同じですが、書き方が若干違います。
引数に直接関数を定義することができます。めちゃソース追いにくい。
関数を呼び出すときに引数が足りなくても問題ない
Javaなんかでは引数の数ってかなり重要ですよね。
オーバーロードなんかしてると引数の数によって呼び出されるメソッドが変わってきます。
ただ、JavaScriptではその辺まったくないです。
//4.execute内で呼び出されて実行される
var execute = function(text, loseFlg){
if(loseFlg){
// loseFlgが渡されて且つtrueだった場合のみ表示
alert(text + "：J.avaScriptには勝てなかったよ・・・。");
}else{
// 渡されなかったり、falseだったら表示されない
alert(text + "：J.avaScriptなんかに負けない！。");
}
};
//1.メイン関数が実行される
function main(){
// 1.「フィブ：J.avaScriptなんかに負けない！」を表示
execute("フィブ");
// 2.「フィブ：J.avaScriptには勝てなかったよ・・・。」を表示
execute("フィブ",true);
};
一方は第二引数なし。もう一方は第二引数ありです。
これ、両方同じ関数が呼ばれます。
引数を指定しなかった場合、何がわたってくるかはちょっとわかりませんが、
（undefineかnullかなんかだと思う）文法エラーにはなりませんし
普通に許容されます。
Javaとかやってるとかなり馴染みがありません。
まとめ
JavaScriptとかJQueryとかをやるうえでまず上記を理解するとソースが読みやすくなると思います。
js系の優秀なIDEはほとんどないであろうなので、トレースしていくにはかなり鍛練が必要になります。
引数の中に関数が定義されててその中で関数が定義されててその中で・・・
なんて追っていくことも多いので、その辺の概念を理解しましょう。
全く知らない状態で既存ソース読むと割とハマります。
あとは鍛練です。
初回はここまで。
次からはJQueryに寄った話を書いていく予定。
