2008年3月20日アーカイブ: Atelier

隠居のお勉強：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 ファイルをブログ・テンプレートのタイトル表示部分に、下の記述を挿入した。
　朝１０時までに訪問していただいた方には、「おはようございます。」、１０時から１８時までに訪問していただいた方には、「こんにちは」、１８時以降２４時までの間に訪問していただいた方には、「今晩は」と表示されるはずである。

<script src="http://n-shuhei.net/blog/Greeting.js"></script>

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

　

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

タグ:

隠居のお勉強：JavaScript Basic (3)

タグ: