検索結果: Atelier

このブログを検索

Atelierで“条件式”が含まれるブログ記事

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 の２作目である。

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

　雨が降り続くので、今日も JavaScript の学習を　W3Schools Tutorial ですることにした。いつになったら自分のブログに使えるスクリプトが記述できるか分からないが、気長にやっていこうと思う。残された人生の時間はそんなに多くないが。

今日は、[JS Comparisons] から。

Comparison Operators（比較演算子）は、変数あるいは値を比較し真 (true) 偽 (false)を決定する論理式で使用される。
比較演算子の使用例を、下の図に表示する。
Logical Operators（論理演算式）は、変数あるいは値の論理の真 (true) 偽 (false)を決定するときに使用される。
論理演算子の使用例を、下の図に表示する。

JavaScript は、ある条件下において、ある変数にある値を割り当てる Conditional Operator（条件演算子）も備えている。
Conditional Operator（条件演算子）は次のように使用される。

次に、[JS If...Else] の学習。条件式の勉強である。

　Tutorial に例示されている Examples を見ていたら、自分のブログに応用できそうだったので、外部 JS ファイルを記述してタイトル部分に使用してみるとなんとか形になった。
　詳細については、次回のエントリーに掲載したい。

このブログを検索

Atelierで“条件式”が含まれるブログ記事

隠居のお勉強：JavaScript Basic (5) switch 構文を使って、本日の曜日を表示する

タグ:

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

タグ:

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

タグ: