隠居のお勉強：JavaScript Basic (5) switch 構文を使って、本日の曜日を表示する

　前回の学習：[JS If...Else] で、JavaScript を自分のブログへいささかの応用ができたので、勇気を得て続けて W3Schools JavaScript Tutorial でのお勉強である。

今回は、条件式 [JS Switch] の学習。

多くの選択肢から、一つの条件式を選んで実行する場合には、switch 構文を使わねばならない。

以下は使用例である。

<script type="text/javascript">
//You will receive a different greeting based
//on what day it is. Note that Sunday=0,
//Monday=1, Tuesday=2, etc.
var d=new Date();
theDay=d.getDay();
switch (theDay)
{
case 5:
  document.write("Finally Friday");
  break;
case 6:
  document.write("Super Saturday");
  break;
case 0:
  document.write("Sleepy Sunday");
  break;
default:
  document.write("I'm looking forward to this weekend!");
}
</script>

break ステートメンを書くのは次の選択肢が実行されることを阻むためである。

これを応用して、自分のブログのタイトル下にある横長カレンダー横に、本日の曜日を表示することを試みた。横長カレンダーでは、曜日が分からない。

上の example を参考に、次のような外部 js ファイルを秀丸で作成した。ファイル名は何でもいいが、TheDay.js として FFTP でブログサーバーにアップした。


//今日は何曜日かを表示する js ファイル
var d = new Date();
theDay=d.getDay();
switch (theDay)
{
case 0:
  document.write("<span id='js-text-red'><b>本日：日曜日</b></span>");
  break;
case 1:
  document.write("<span id='js-text-grey'><b>本日：月曜</b></span>");
  break;
case 2:
  document.write("<span id='js-text-grey'><b>本日：火曜</b></span>");
  break;
case 3:
  document.write("<span id='js-text-grey'><b>本日：水曜</b></span>");
break;
case 4:
  document.write("<span id='js-text-grey'><b>本日：木曜</b></span>"); 
break;
case 5:
  document.write("<span id='js-text-grey'><b>本日：金曜</b></span>"); 
break;
case 6:
  document.write("<span id='js-text-blue'><b>本日：土曜</b></span>");
 break;
}

スタイルシートに、次のスタイルを追加した。日曜日は、文字色を赤に、土曜日は水色にした。

/* JS TheDay text */
#js-text-grey { color: #408080; font-size: 10px; }
#js-text-red { color: #ff0000; font-size: 10px; }
#js-text-blue { color: #8888ff; font-size: 10px; }

MT テンプレート（メイン・エントリー）の<body> 部のカレンダー表示部分に、次のステートメントを追加した。
```
<script src="http://n-shuhei.net/blog/TheDay.js"></script>
```

　これで、横長カレンダーの横に、本日：金曜日というように、ブログに訪問していただいた日の曜日が表示されるようになった。自作 JavaScript の２作目である。

隠居のお勉強：JavaScript Basic (5) switch 構文を使って、本日の曜日を表示する

タグ:

コメントする