堀北真希うさぎ
主な作品
堀北真希うさぎがソフトレンズをつけている仮想コマーシャル動画〜平成一桁頃のボシュロム製品のCM風に〜

ページ案内▼

月により表示コンテンツを切替える。

日付を表示させるの応用で、月により表示させるコンテンツを切替えるスクリプトです。

応用すれば、月だけでなく日や曜日、時刻によっても切替えが可能ですが、ここでは簡単の為、月によりコンテンツを切替える方法を解説します。

月により表示コンテンツを切替える・目次。

月により表示コンテンツを切替えるスクリプトのサンプル。

スクリプトを実行できる環境なら、以下に現在の季節が表示されます。

月により表示コンテンツを切替えるスクリプトのソース。

月により表示コンテンツを切替えるスクリプト「ContentByMonth.js」は以下の通りです。

now=new Date();
mo=now.getMonth()+1;
if (mo==12 || mo<=2) {
    document.write('<p><em>冬ですねえ。</em></p>');
    }
else if (mo>=3 && mo<=5) {
    document.write('<p><em>春ですねえ。</em></p>');
    }
else if (mo>=6 && mo<=8) {
    document.write('<p><em>夏ですねえ。</em></p>');
    }
else  {
    document.write('<p><em>秋ですねえ。</em></p>');
    }

スクリプトの処理の流れ。

以下、順番に解説してみます。

1. 月を取得する。

1.1. 現在の日時情報を取得する。

以下の一行目の処理で、現在の日時情報を取得します。

now=new Date();

具体的には、nowという変数に新しいDate型のオブジェクトを代入しています。Date型のオブジェクトには、日時に関する情報が入ります。「new Date()」は括弧内で特に指定しない場合、実行時の日時を表わす情報を与えます。

1.2. 現在の日時情報から月の値を取得する。

以下の処理で、現在の日時から月の値を取得します。

mo=now.getMonth()+1;

具体的な処理としては、Date型オブジェクトnowから月の値を取出しています。ここで注意したい事として、月は0から始まるので1加えておく必要があるという事です(このスクリプトでは特に必要は無いのですが、間違いが起きにくくなります)。

2. 月により表示させるコンテンツを撰ぶ。

以下の処理で、

  1. 12月〜 2月
  2. 3月〜 5月
  3. 6月〜 8月
  4. 9月〜11月

に分けてHTML文書に埋め込むコンテンツを変えております。

if (mo==12 || mo<=2) {
    document.write('<p><em>冬ですねえ。</em></p>');
    }
else if (mo>=3 && mo<=5) {
    document.write('<p><em>春ですねえ。</em></p>');
    }
else if (mo>=6 && mo<=8) {
    document.write('<p><em>夏ですねえ。</em></p>');
    }
else  {
    document.write('<p><em>秋ですねえ。</em></p>');
    }

具体的には、以下の対応する条件に応じてHTMLに埋込むコンテンツを変えています。

12月〜 2月
12月か 2月以前
3月〜 5月
3月以降且つ 5月以前
6月〜 8月
7月以降且つ 8月以前
9月〜11月
その他

「条件A || 条件B」とは「条件Aが成り立つか、さもなければ条件Bが成り立つ事」が条件という条件式を作る論理演算子、また「条件A && 条件B」とは「条件Aが成り立ち、且つ条件Bも成り立つ事」が条件という条件式を作る論理演算子です。

if文は、簡単に言えば「CSSに対応した環境で無ければ、後続の文を実行せよ」というものです。通常if文は単一の条件しか判断出来ませんが、二番目以降に「else if (…) {」を続ける事により、複数の条件を別々に判断できるようになります。更に全ての条件がいずれも満たされない場合は一番最後に「else {」で例外処理を実行できます。

各々のif文で実行されるdocument.write()メソッドは、HTMLを当該箇所に埋込むものです。ここでは<p>要素を埋込んでいますが、<img>要素を埋込めば画像を切替えることも出来ます(当サイトの表紙はこれで画像を切替えております)。

ネットスケープ 4.xでの注意事項。

ネットスケープ 4.xでは、複雑なHTMLを埋込もうとすると、スタイルシートが正常に機能しなくなる事があります。画像等の複雑な操作をする場合は、<table>要素の内容とすると安全度が高まります。

または、スクリプト側で<table>要素を出力するのもいいでしょう。

具体的には、スクリプト本体の先頭と末尾に、以下の文を加えます。

document.write('<table summary="ネットスケープ 4.x対策のテーブルです。" border="0" style="border: 0px; "><tr><td style="border: 0px; ">');
            …
        (スクリプト本体)
            …
document.write('</td></tr></table>');

ネットスケープ 4.xでは、HTMLを埋込む際に絶対に改行文字(JAVAスクリプトの文字列中には「\n」と書く)を入れないで下さい。入れると途中でHTML文書に不正な改行文字が埋込まれる事があります。

しらぎくのウェブサイト作成入門サイトマップ

marguerite.site@gmail.com