完全初心者やプログラミング未経験者に向けて何かしてみたい！を応援するために始まったこのプロジェクト。ぜひ活用していってください。
前回の記事はこちら。
特別なエフェクト
jQueryは便利なエフェクトをいくつか提供してくれています。例えば以下のコードを”event.preventDefault();”の下にコピペしてください。
$( this ).hide( "slow" );そしてCtrl+sで保存して、htmlファイルを開いてみてください。リンクをクリックしてアラートのOKをクリックすると地味ですが、ゆっくりと”jQuery”の文字が消えるのがわかるでしょうか。
これがエフェクトです。
コールバックとファンクションについて
他の多くのプログラミング言語とは異なり、JavaScriptは自由に後から実行されるファンクションを通すことができます。コールバックは他のファンクションの引用として渡されます。そして親のファンクションが完了した後に実行されます。
コールバックは特別です。なぜなら親の関数が終了するまで実行されないからです。コールバックは待っている間、ブラウザは他のファンクションを実行したり、処理を走らせたりすることができます。
普通であれば、上から順番に読み込まれていきますが、コールバックはスキップされ、親の関数の処理が終わってからこの関数を実行することができます。
コールバックを使用するため、どのように親のファンクションに入れ込むかが重要です。
競合なしにコールバックする
もし競合なしにコールバックをしたいならば、以下のように記述することができます。
$.get( "myhtmlpage.html", myCallBack );“$.get”は”myhtmlpage.html”を読み込み終わった時に、”myCallBack”というファンクションを実行します。
注意してほしいのは二つの目の関数ですが、文字だけにしてください。基本的にファンクションは”()”を必要としますが、ここでは例外的につけません。
コールバックに引数を追加する
コールバックに引数を追加するのは難しいです。
間違った例
以下のコードは動きません。
$.get( "myhtmlpage.html", myCallBack( param1, param2 ) );
これが失敗するのはコードが”myCallBack( param1, param2 )”をすぐに実行してしまうからです。”myCallBack( param1, param2 )”の返り値を”$.get”の２番目のパラメータとして渡してしまいます。本来であれば戻り値ではなく、ファンクションとして渡したいです。
ではどのようにして”myCallBack()”に引数を渡すのでしょうか。
正しい例
“myCallBack()”を引数と一緒に実行されるように持ち越すには、無名関数をラッパー(wrapper)として使うことができます。”function()”を使用する際に気を付けてほしいのは、param1とparam2の値を指定して”myCallBack()”を呼び出すことしかできないことです。以下が一例です。
$.get( "myhtmlpage.html", function() {
myCallBack( param1, param2 );
});これは”$.get()”が”myhtmlpage.html”を読み込み終わった時、param1,param2を含んだ、”myCallBack()”を実行する無名関数を呼び出しています。
まとめ
これでプログラミング初心者のためのjQuery入門シリーズは終了です。ここまで本当にお疲れ様でした。みなさんが、少しでもプログラミングに興味を持っていただけたら幸いです。
コメント