隠居のお勉強：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>