隠居のお勉強：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>
コメントする
(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)