Atelierで“switch”タグの付いているブログ記事

2008年3月21日

隠居のお勉強: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 の2作目である。