Javascriptの解説
このHPで使われているJavascriptの解説
○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
○○○○○○○○○○○○○○○○○○○○○○○○
-
このページでは、このHPに使われているjavascriptの説明をする。 現在使っているjavascriptは、右側のリンクにマウスカーソルを合わせた時、ステータスバー（ウィンドウの下のところ）にそのリンクを説明する文を表示するものと、 トップページ(index.html)の右側にある全レビューという部分のア行、カ行・・という部分をクリックすると隠された領域を表示するというものである。msg=new Array();
msg[0]="";
msg[1]="はじめて来た方用です。";
msg[2]="おもしろ？映画レビューです。";
msg[3]="おもしろ？話です。";
msg[4]="変な人が集まってる掲示板です（笑）";
msg[5]="出来の悪いCG作品です。";
msg[6]="友のサイトを紹介します。";
msg[7]="相互リンクサイトを紹介します。";
msg[8]="フットサルメンバーを募集してます。";
msg[9]="大学の授業で学んだ事やプログラミングに関して少し扱ってます";
function Msg(index){
window.status=msg[index];
return true;
}まずは、リンクにマウスカーソルを合わせた時、ステータスバーにそのリンクを説明する文を表示するjavascriptについて解説する。 最初の1行が配列の宣言である。この配列の要素一つ一つに、それぞれのリンクの説明を先に格納しておく。これを2〜11行目までで行っている。 2行目のmsg[0]="";という文は、マウスカーソルがリンクの外にあるときはメッセージを表示せずに空白を表示するためにこのような要素を作っている。 function〜が関数部分で、リンクにマウスカーソルが合った時は1〜9のindexという引数が入り、マウスカーソルが合わない場合は0という引数が入る。 window.statusという命令で実際にメッセージをステータスバーに表示している。次に、このjavascriptを呼び出すためにhtml文書に記述した内容について説明する。<a href="kouji.html" onmouseover="return Msg(1)" onmouseout="return Msg(0)">このHPについて</a>
<a href="kouji.html" onmouseover="return Msg(2)" onmouseout="return Msg(0)">映画レビュー</a>
<a href="kouji.html" onmouseover="return Msg(3)" onmouseout="return Msg(0)">我が友の軌跡</a>
<a href="kouji.html" onmouseover="return Msg(4)" onmouseout="return Msg(0)">掲示板</a>
<a href="kouji.html" onmouseover="return Msg(5)" onmouseout="return Msg(0)">CG作品館</a>
<a href="kouji.html" onmouseover="return Msg(6)" onmouseout="return Msg(0)">友のサイト</a>
<a href="kouji.html" onmouseover="return Msg(7)" onmouseout="return Msg(0)">相互リンク</a>
<a href="kouji.html" onmouseover="return Msg(8)" onmouseout="return Msg(0)">フットサル</a>
<a href="web/web.html" onmouseover="return Msg(9)" onmouseout="return Msg(0)">プログラミング</a>これが、html本文のリンクタグに記述した内容である。リンクタグにonmouseoverやonmouseoutというイベントハンドラを用いることで、 そのオブジェクト上にマウスポインタが来た時（そのオブジェクト上からマウスポインタが離れた時）にMsg()関数を呼び出すという処理を行っている。 ここでは、オブジェクト上からマウスポインタが離れた時はメッセージを表示させないため、onmouseout="return Msg(0)"と記述し、メッセージの0番、 つまり空欄を表示している。function showhide(id) {
if(!document.getElementById) return;
var style = document.getElementById(id).style;
if(style.display == "block") style.display = "none";
else { style.display = "block"; }
}次に、クリックすると隠された領域を表示するというjavascriptの説明をする。 ユーザーがア行、カ行・・・の部分をクリックすると、上のshowhide関数が呼び出される。引数はid名で、 var style = document.getElementById(id).style;で、styleという変数に引数のidが使われているタグのスタイルを入れる。 そして、もしスタイルのdisplayプロパティがblockならばそれをnoneにして隠された領域を隠し、 逆にスタイルのdisplayプロパティがnoneならばそれをblockにして隠された領域を表示する。 これにより、クリックするごとに隠された領域を隠すか、あるいは表示することができる。 なお、if(!document.getElementById) return;は、DOM1に対応しているプラウザでなかったら処理をしないことを意味する。 次に、showhide関数を呼び出すために、htmlにどのように記述しているかを説明する。<div class="java" onclick="showhide('div1')">ア行</div>
<div id="div1">
<span class="moji2">−−ア行<br /></span>
<div class="margin4 moji2">
アイ・アム・サム
アイ、ロボット
アウトブレイク
青い山脈
アザーズ
アナコンダ
・
・
</div>onclickというイベントハンドラを用いることで、ユーザーがマウスをクリックした瞬間にshowhide関数を呼び出すことができる。 引数はid名で、クリックすることでこのidがついてるdivタグを隠したり表示したりすることができる。 これにより、ユーザーが見たい情報だけを表示することができ、画面がスッキリしたきれいなHPを作ることができる。
