THE HAM MEDIA BLOG

自作の関数ってどうやって作るんだろう？
どうやれば動くんだろう？

実はさっぱりわかっていなかったりします。

なので、今回は
「魔法の鎖のつなぎ方(1) - ［JavaScript］All About」
これを見てお勉強することにしてみました。

サンプル

今回のは勉強するサイトにのっていたようにサンプルを作ってみます。

このブログのように、HTMLの途中でスクリプトを書いた場合、
サンプルを単に<script>の中に書いただけでは動作しなかった。
なので、$(function)を追加し、HTMLが読み込まれてから実行するようにし、
さらにbuttonをクリックしてから実行されるように組み直してみた。

■HTML

<div class="testClass">DIVでtestClassです</div>
<div class="noTestClass">DIVでnoTestClassです</div>
<p class="testClass">PでtestClassです</p>
<button>実行！</button>

■JavaScript

$(function(){
$("div.preview button").click(function(){
    drawRed("div.testClass").animate({fontSize: "5em"},1000 ); 

    function drawRed(selector){
        $(selector).css("color","red");
        return $(selector);
    }
});
});

■プレビュー

どんな構造だ？

パッとみて、どういう構造しているのかよくわからなかった自分。
なのでいろいろいじってみた。その結果をまとめてみる。

• ・return $(selector);が無いと動作しない。
• ・selectorと名前を付けているところは全て同じでなければならない。
• 　・selectorって名前じゃなくても、全て同じならなんでもいい。
• ・drawRed()という風に括弧内を空にしてもエラーになる。
• ・$(selector).css("color","red");を
  　　　$("div.testClass").css("color","red");としても動作する。
• ・$(selector).css("color","red");を削除した場合、色は変化しないがアニメーションする。

まとめてみると、
function drawRed(selector){
　return $(selector);
}
という風に指定をすると、■■(●●){return $(●●);}のうち、
■■と同じ名前の●●という指定部分を機能として実行するということだろう。

多分だけど、コールバックとかも含めて、
よくわかっていない事が多いから戸惑うのかなとも思ったり。。。

うーん、まだまだJavaScript自体の勉強も不足だから、戸惑う事が多そうだ。
もっと勉強せねば！