Top > HP作成> 隠居のお勉強:JavaScript Basic (4) 訪問時刻によって、挨拶文を変える。

2008年3月20日

隠居のお勉強:JavaScript Basic (4) 訪問時刻によって、挨拶文を変える。

 相変わらず、PC 前でRadio Senbokuを聴きながら、JavaScript のお勉強である。

 前回に書いたように、W3Schools JavaScript tutorial での [JS If...Else] のページにある Examples を応用して、私のブログのタイトルへ訪問時刻によって変化するお礼挨拶を表示させることにした。
 この具体例を記す前に、勉強したことを学習ノートにまとめておきたい。

  • [JS If...Else] で学んだこと。
    • デシジョンによって異なるアクションを実行する条件式を記述できる。
    • 条件式には、if statement ; if...else statement ; if...else if....else statement ; switch statement がある。
    • if statement はある特定条件が真(true) のみの場合にコードを実行する。次に例を示す。
      <script type="text/javascript">
      //Write "Lunch-time!" if the time is 11
      var d=new Date();
      var time=d.getHours();
      if (time==11) { document.write("<b>Lunch-time!</b>"); } <script><b>Lunch-time!</b>"); } <script>

    • if...else statementは、ある条件が、true の場合はあるコードを実行し、false の場合は他のコードを実行する。
      以下は事例。
      <script type="text/javascript">
      //If the time is less than 10,
      //you will get a "Good morning" greeting.
      //Otherwise you will get a "Good day" greeting.
      var d = new Date(); var time = d.getHours();
      if (time < 10) { document.write("Good morning!"); } else { document.write("Good day!"); } </script>

    • if...else if....else statement の記述によって、多くに条件の中から適切な条件に合致するコードを実行させることができる。
      下に example を示す。
      <script type="text/javascript">
      var d = new Date()
      var time = d.getHours()
      if (time<10)
      {
      document.write("<b>>Good morning</b>");
      }
      else if (time>10 && time<16)
      {
      document.write("<b>Good day</b>");
      }
      else
      {
      document.write("<b>Hello World!</b>");
      }
      </script>


 この if...else if....else statement を応用して、下のような外部 js ファイルを秀丸でエンコードを UTF8 として Greeting.js というファイル名(拡張子が js であれば名前は何でも良い)作成し、ブログサーバーに ファイル転送ソフト(FFTP) でアップした。
//ブログ・タイトルに、挨拶を表示する JSファイル
var d = new Date();
var time = d.getHours();
if (time<10)
{
document.write("<span style='color: #ffffe0'><b>おはようございます!! 早くからのご訪問ありがとうございます。</b></span>");
}
else if (time>=10 && time<18)
{
document.write("<span style='color: #ffffe0'><b>こんにちは!! いつもご訪問ありがとうございます。</b></span>");
}
else
{
document.write("<span style='color: #ffffe0'><b>今晩は!! いつもご訪問ありがとうございます。</b></span>");
}
 変数 d time の定義の仕方は、学習を進めると出てくると思うが、今のところ examples の通りに使っている。
 文字色を指定する span タグの間に入れるダブルコーテション( "---")の文字列ははシングルコーテション( '---' )でなければならない。

 この js ファイルをブログ・テンプレートのタイトル表示部分に、下の記述を挿入した。
 朝10時までに訪問していただいた方には、「おはようございます。」、10時から18時までに訪問していただいた方には、「こんにちは」、18時以降24時までの間に訪問していただいた方には、「今晩は」と表示されるはずである。
<script src="http://n-shuhei.net/blog/Greeting.js"></script> 


今まで学習したことを自分のブログのカストマイズに生かせるのはもっと学習が進んでからと思っていたが、この時点でささやかながら応用できた。お勉強の励みになるというものだ。

 

トラックバックURL

このエントリーのトラックバックURL:
http://n-shuhei.net/cgi/mt/mt-tb.cgi/1438

コメント

御隠居さんの向学心には只々感心します。
臨場感溢れる御隠居さんの備忘録は、ご自分の為だけでなく、たくさんの方の役に立っていると思います。

>NWさん

コメントありがとうございます。
この歳になっても、今まで知らなかった(できなかった)ことができるようになるのは、ささいなことでも感激です。
そんなことを公開しているのは、きっと羞恥心がなくなっているせいでしょう。
誰にも気遣うことなく生きる生活っていいですよ。

コメントする

(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)
 MovableType または TypeKey のサインインができない方には、「匿名でコメントする」をクリックください。スパム・コメントを防止するためにコメント入力欄の下のCaptcha:画像で表示されている文字入力をお願いしています。
 できれば、MovableType または TypeKey の登録をしていただければ、Captcha:画像で表示されている文字入力の必要はありません。
MovableType のアカウントの取得は、下のサインインの文字をクリックするとでる画面で「サインイン画面のアカウントがないときはサインアップしてください。」のサインアップをクリックすれば登録画面が表示されます。「ウェブサイトURL」には、http://n-shuhei.net/atelier/ と入力ください。
 また、TypeKey は、 TypeKey サインインをクリックし新規登録ボタンから無料で取得できます。取得された TypeKey で他の多くのブログにコメントができます。)