こんにちは。あきです。
さて今日はこの折りたたみメニュー（クリックするとメニューが開きます。）
を例にJavaScriptについて学んでいきます。
アキヒロ：
「先輩。前回はバトンの解答ありがとうございます。相変わらず寂しく悲しい毎日を送っているようで。僕はうれしいです。」
先輩：
「うるさい。俺の日常に触れるなと前から言ってるだろ。
それで。今日は上記の”折りたたみメニュー”処理をを説明すればいいのか？」
アキヒロ：
「はい。お願いします。」
先輩：
「それでだ。最初にこの仕組みを明かすとこの処理は単純にサブメニューを隠して表示しているだけなのだ。」
アキヒロ：
「へー。でメインメニューをクリックするとサブメニューを表示する処理が実行されるんですね。」
折りたたみメインメニュー
・サブメニュー１
・サブメニュー２
・サブメニュー３
先輩：
「そうだ。このサブメニューを初期表示で隠すためには
<HEAD>～</HEAD>部分に以下の様な
スタイルシートを記述する。」
<style type=”text/css”>
<!–
.sub{
display : none
;}
–>
</style>
先輩：
「この記述により、初期表示時に
折りたたみメインメニュー
とメインメニューのみ表示することが可能となる。」
アキヒロ：
「はあ。」
先輩：
「そしてこれがメインメニューをクリックすると実行されるJavaScriptの処理だ。」
<script Language=”JavaScript”>
<!–
function pMenu(id)
{
var el = document.getElementById(id);
if (el.style.display=="block")
el.style.display
= ‘none’;
else
el.style.display
= ‘block’;
}
// –>
</script>
先輩：
「まあおそらく分けがわからんだろう。」
アキヒロ：
「はい。全然分かりません。」
先輩：
「こんな物は覚えなくてもいいんだ。Webで探せば似たような処理はいくらでも見つかる。
とにかくこれも<HEAD>～</HEAD>部分に記述する。で、この処理を追うために
function pMenu(id)
というのだけ覚えろ。」
アキヒロ：
「なんですか？これは？」
先輩：
「これはだな関数とよばれていて”pMenu“というのは関数の名前だ。」
アキヒロ：
「ああ。この関数の中で実際にプログラムの処理が実行されるんですね。」
先輩：
「その通り。そしてこのpMenu関数は以下の様にbody欄から呼び出される。」
<body>
<p><
a href=”javaScript:pMenu(‘pdMENU1′)”>折りたたみメインメニュー</a></p>
<ul class=”sub” id=”pdMENU1″>
<li><a href=”“http://netbusiness.rash.jp/”“>サブメニュー１</A></li>
<li><a href=”“http://netbusiness.rash.jp/”“>サブメニュー２</A></li>
<li><a href=”“http://netbusiness.rash.jp/”“>サブメニュー３</A></li>
</ul>
<br>
</body>
</html>
アキヒロ：
「この箇所から呼び出されるのですね。」
“javaScript:pMenu(‘pdMENU1′)”
先輩：
「そうだ。これは誰かが折りたたみメインメニューをクリックする事で呼び出される。」
アキヒロ：
「なるほど。クリックされる事でHead部に記述してあるpMenu関数が呼ばれ書いてあるJavaScriptが実行されてようやく各サブメニューが表示されるのか。」
先輩：
「そうだ。そしてもしこのpMenu関数を他のWebページでも使用したい場合はこの関数を別のファイルに書き拡張子を(.js)にして保存すればいいんだ。」
アキヒロ：
「そうすることでいちいちhead部に書くことなく色々なWebページから同じ関数を呼び出す事ができるというわけですね。」
先輩：
「そういうことだ。」
アキヒロ：
「なるほど。この例のようなJavaScriptを使うとまたサイトマップなどに役に立ちそうですね。」
先輩：
「そうだな。ページを占有することなくメニューを表示できるからとても便利だ。」
アキヒロ：
「またまたとても参考になりました。」
先輩：
「うむ。俺はいつでも最高に役に立つ男なのだ。ようやくわかったかね。」
アキヒロ：
「それでは。また！」
先輩：
「お、おい。何かつっこんで..。あーあ。」
このページのコメント欄もこのサブメニューの仕組みを利用してます。
