Webデザインノート｜JavaScript accordionMenu ・関数について

「jquery.min.js」を使ったアコーディオンメニュー

<script type="text/javascript">
$(function(){
  $("dd:not(:first)").css("display","none");
  
  $("dl dt").click(function(){
    if($("+dd",this).css("display")=="none"){
      $(this).siblings("dd").slideUp("slow");
      $("+dd",this).slideDown("slow");
    }
  });
});
</script>

htmlの記述や、dlタグで囲んだスタイル指定、
ライブラリをローカルに組み込むかネット経由のAjaxを使うか、などはいいとして、問題のスクリプト内の構造というか仕組みはどうなっているか。
簡単にではありますが、記述順番ごとに説明したいと思います。

とりあえずAjaxのリンク

http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

アコーディオンメニューせつめい

$(function(){

▲ここでは、htmlを開いた時点で以降の処理を開始するという意味。

$("dd:not(:first)").css("display","none");

▲１番目(first)以外のdd要素を「display:none」で閉じる命令。
・「not(:first)」は、最初の要素以外を、という意味。
・「.css」は、その後に続くスタイル指定を適応させる、という意味の命令。

$("dl dt").click(function(){

▲dlのdt要素をクリックしたら以降の処理を開始する

if($("+dd",this).css("display")=="none"){

▲もし、クリックされたdt要素に関連するddが非表示だった場合

$(this).siblings("dd").slideUp("slow");

▲現在開いていたdd要素を閉じる(しかもスローで)

$("+dd",this).slideDown("slow");

▲クリックされたdt要素に対応するdd要素を開く(しかもスローで)

※関数の引数内で、

「dd」が現在開いているdd要素。
「+dd」がクリックされたdtに対応するdd要素。

ちなみに私自身、これら知識は今日初めて覚えました。
プログラマーやってたからと言っても、全然違う言語ですから最初は意味不明です。
英語わかる人に、「英語っていう外国語ができるんだから、フランス語ぐらいできるんでしょ？」って言うのと同じ感じ。
最初は皆同じであります。。

関数について

先に下記リンクを御覧ください。
関数についての概要を説明した過去記事です。

関数について

リンク先にあったように、「Actor.お手」という指令。
その「.お手」の部分。
関数によっては、ここにさらに詳細な命令を書き加えることができます。そんなときは「.お手(×××、△△△)」とか書いたりします。
そして、×××、△△△に当たる部分が「引数」といいます。
引数とは、呼び出し元(命令の発信元)から付け加える、追加の細かい指令のようなもの。(その他、加工してほしい原材料など)

Math関数、random関数も結局は同じことです。

Math関数は、様々な数式を簡単に計算してくれる万能電卓か。
random関数はそのまま。ランダムな数値を出してくれる。

などなど。
何をしたいかで関数を使い分けたり組み合わせたりして色々な動きを表現していく。それがJavaScript(jQuery)です。(だと思います…)

どんなﾌﾟﾛｸﾞﾗﾐﾝｸﾞ言語にも関数は付き物。
というか無くてはならない存在。

だって関数が無かったら、
こまかい指令ごとにいちいち命令群を作らなきゃいけなくなるし、似たような動きをする関数でも、用途ごとにまた新しく作り直さなきゃいけなくなるからです。(それらを万能に使えるようにするのが大事なんですが)

関数は使いながら覚えていくしかないので、
がんばって身につけていきましょう。