Change Message

　JavaScript を使って時間ごとにページに表示されている
　画像とともに、その説明文も変えてみましょう。

サンプル	（せっかちな方の為に、ボタンを押すと説明文が変わるサンプル）

　まずソース１のすべてを選択をクリックしますと、テキストエリアのソースの背景が黒くなりますので、その上にカーソルを置き右クリックして下さい。垂れ下がったメニューの中からコピーを左クリックしてコピーし、ご自分の html ファイルのソースに貼り付けて下さい。貼り付ける場所は、前回（ JavaScript 入門その２）と同じで、<head> ～ </head> 間です。

　ソース１　すべてを選択

<script type="text/javascript">
<!--
function change_image(){
time=(new Date()).getHours();
if(time>=5 && time<10){
image="asa.jpg"; 
}else if(time>=10 && time<17){
image="hiru.jpg";
}else if(time>=17 && time<23){
image="yuu.jpg";
}else if(time<5 || time>=23){
image="yoru.jpg";
}
document.write("<img src='"+image+"' vspace=6>");
}

function change_message(){
time=(new Date()).getHours();
if(time>=5 && time<10){
message="小さなスカイブルーの花は、キュウリグサの花。";
}else if(time>=10 && time<17){
message="白い可憐な花は、ニガイチゴの花です。";
}else if(time>=17 && time<23){
message="鮮やかな紫色の花は、ムラサキシキブです。";
}else if(time<5 || time>=23){
message="この変わった色と形の実は、ソシンロウバイの実です。";
}
document.write(message);
}
//-->
</script>

　次に同じようにソース２をコピーし、<body> ～ </body> 間の画像とその説明を貼りたい箇所に書き込みます。

それでは簡単に JavaScript の意味を説明しましょう。
if(time>=5 && time<10)
else if(time>=10 && time<17)
else if(time>=17 && time<23)
else if(time<5 || time>=23)
の意味は、前のページで説明した通りですが、この時刻を書き換えたり、
else if(time>=10 && time<17)
の行をいくつか増やせば、もっと小刻みにページを変化させることができます。message = "小さなスカイブルーの花は、キュウリグサの花。";
は、午前５時～午前10時までの時間帯に「小さなスカイブルーの花は、キュウリグサの花。」と言う説明文を表示しますよと言う意味です。
その下は、それ以外の時間帯についてのそれぞれの説明文を設定しています。
document.write(message);
最終的に、その時間帯に指定された説明文を表示する命令をしているタグです。

function change_image()、function change_message() はこの一連の命令に change_image()、change_message() と言う名前をつけています。こうしておけば、

<script language="javascript">

</script>
と言った風に Script 名を書き込んだ箇所で動作させることができます。

　この web ページ上の文章を時間ごとに変える JavaScript は、この Script のみでよく使われます。トップページでの来訪者への挨拶などを「おはようございます。」「こんにちは。」「今晩は。」などと時間が来ると自動的に変えてくれるからです。