初心者のためのホームページ作り 第98号

初心者のためのホームページ作り

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。

なお文中、疑問点や分からない点がありましたら、ご遠慮なく当方まで メールにてご質問ください。

<第98号> 今週のおさらい
             毎週金曜日配信 What's New 2004年7月30日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
   ■ JavaScript講座 (第19回) --- Dateオブジェクト
   JavaScript講座 (第20回)  --- 制御構文
JavaScript講座 --- Dateオブジェクト
JavaScriptで、日付や時間などを扱うのが Dateオブジェクトです。このオブジェクトはメソッドしか存在しませんが、日付や時間、曜日などをコントロールする場合に用いられる非常にポピュラーなオブジェクトです。
Dateオブジェクトを利用するためには、newステートメントという制御文を使って日付オブジェクトを生成します。その上であらかじめ定義されている各メソッドを使って日付や時間を参照したり計算したりします。
例えば、
today = new Date();
  y = today.getFullYear();
 m = today.getMonth() + 1;
 d = today.getDate(); // todayより日数を求める
   document.write("現在は", y, "年", m, "月", d, "日です");
のように、現在の日付を求める場合でも必ず new文を用いて日付オブジェクトを生成する必要があります。
上記スクリプトの実行結果はこちら (あわせて toLocaleStringメソッドも追加しました。)
Dateオブジェクトで定義されているメソッドは以下のとおりです。
Dateオブジェクトのメソッド一覧
メソッド 機能
getDate 現在の日にちを参照 (0 〜 30)
getDay 曜日を参照する (0〜6、日曜〜土曜)
getFullYear 4桁の西暦年を参照する
getHours 現在の時間を参照する
getMilliseconds ミリ秒(1000=1秒)を参照する
getMinutes 分を参照する
getMonth 月を参照する(0〜11、1月〜12月)
getSeconds 秒を参照する
getTime 1970年1月1日午前0時からの経過時間(秒数)を参照する
getTimezoneOffset 世界協定時間との時差を参照する
getUTCDate 世界協定時間の日にちを参照する
getUTCDay 世界協定時間の曜日を参照する(0〜6、日曜〜土曜)
getUTCFullYear 世界協定時間の4桁の西暦年を参照する
getUTCHours 世界協定時間の現在の時間を参照する
getUTCMilliseconds 世界協定時間のミリ秒(1000=1秒)を参照する
getUTCMinutes 世界協定時間の分を参照する
getUTCMonth 世界協定時間の月を参照する(0〜11、1月〜12月)
getUTCSeconds 世界協定時間の秒を参照する
getYear 年(西暦の下2桁)を参照する
parse 1970年1月1日午前0時から指定した日付までの経過秒数を参照
setDate 日にちを設定する
setFullYear 4桁の西暦年を設定する
setHours 現在の時間を設定する
setMilliseconds ミリ秒(1000=1秒)を設定する
setMinutes 分を設定する
setMonth 月を設定する(0〜11、1月〜12月)
setSeconds 秒を設定する
setTime 1970年1月1日午前0時からの経過時間(秒数)を設定する
setUTCDate 世界協定時間の日にちを設定する
setUTCFullYear 世界協定時間の4桁の西暦年を設定する
setUTCHours 世界協定時間の現在の時間を設定する
setUTCMilliseconds 世界協定時間のミリ秒(1000=1秒)を設定する
setUTCMinutes 世界協定時間の分を設定する
setUTCMonth 世界協定時間の月を設定する(0〜11、1月〜12月)
setUTCSeconds 世界協定時間の秒を設定する
setYear 年(西暦の下2桁)を設定する
toGMTString グリニッジ(GMT)標準時間を文字列として参照する
toLocalString ローカル(地域別)時間を文字列として参照する
toUTCString 世界協定(UTC)時間を文字列として参照する
UTC 1970年1月1日午前0時から指定した日付までの経過秒数を参照
時間の計算
時間を計算する場合、時間の最小単位は 「ミリ秒」 なので、秒や分、時、日などの換算する必要があります。1000ミリ秒は 1秒になりますので、1分はその60倍となります。それを踏まえてスクリプトを作成します。
以下は、来年の正月までの日数を求めるもので、差分から得られた値を日数に変換しています。
y = 2005; m = 1; d = 1;
 shogatsu = new Date(y,m,d);

 today = new Date();
 a = (shogatsu.getTime() - today.getTime());
  remain = Math.floor(a / (24 * 60 * 60 * 1000));
 document.write("お正月まであと ", remain, "日です");
サンプルスクリプトの実行結果
JavaScript講座 --- 制御構文
JavaScriptはオブジェクト指向言語といわれています。スクリプトを形成する上でオブジェクトは必要不可欠であるところから、あるいはもともとの言語仕様がオブジェクトで形成されているところからそのように呼ばれています。
しかしながら、オブジェクトを制御するためには欠かせない命令文があります。それがあらかじめ定義されている制御命令文です。これによって、様々なシーンでオブジェクトをコントロールします。
JavaScript制御文一覧
制御文 機能
break 制御構文 (ループなど) から抜け出す
case 条件 (switch文) によって振り分けられた値を指定する
continue 制御構文の先頭に戻る
default switch文の条件に当てはまらない値を指定する
do 1度の処理後に条件を満たすまで繰り返し処理を行う
delete 指定した変数の値やオブジェクトを消去する
else if構文の条件とは異なる条件を指定する
for 指定した条件に基づいて繰り返し処理を行う
function 任意の関数を生成する
if 条件分岐を論理式により設定する
in 同じオブジェクトのプロパティを利用する (for構文で使う)
new 任意のオブジェクトを生成する
return 関数から抜け出る際の戻り値を指定する
switch ある条件から得た値によって処理を指定する
this 現在のオブジェクトを指定する
prototype オブジェクトに任意の属性を指定する
while 条件を満たすまで繰り返し処理を行う
with 対象となるオブジェクトを指定する
var 変数の定義宣言
繰り返し制御 (ループ)
制御文の中で、for、及び while文は、ある一定の処理を繰り返し行うときに利用します。それぞれは似ていますが、条件付けが異なります。
以下は for構文のサンプルです。
a = 0;
 for(a = 1; a < 101; a++) {
 document.write("JavaScript講座 第", a, "回目<br>");
  }
for構文の実行結果
サンプルの実行結果を見てお分かりのとおり、for文の論理式で指定された条件が満たされるまで同じ処理を繰り返します。このサンプルでは 100回も同じ処理が繰り返し指定し実行します。
一方while文では、論理式は条件のみを指定し、条件が満たされるまで繰り返し処理を行います。このとき、あらかじめ条件が満たされていた場合にはループには入りません。これが for文との相違となります。
以下は、while構文のサンプルです。
while (a < = 10) {
  a++;
  document.write("JavaScript講座 第", a, "回目"); 
  }
while構文の実行結果
条件分岐
あらゆる開発プログラム言語のすべてで条件分岐という手法が使われます。ユーザからの入力によって、処理プログラムを選択することができる条件分岐は、if、あるいは switch などの制御文で行います。
for構文は、その引数に論理式 (初期値、条件式、増減式) を設定し、条件が満たされたときに (あるいは満たされない場合) 、処理を行います。(あるいは処理を行わない)
以下は、for構文の具体的なサンプルです。
today = new Date();
  nowDate = today.getHours();
 if(nowDate > 4) && (nowDate <= 11)
 document.write("おはようございます");
     else if(nowDate > 11) && (nowDate <= 18)
   document.write("こんにちは");
        else if(nowDate > 18) && (nowDate <= 23)
     document.write("こんばんは");
          else
          document.write("もう寝ましょう"");
実行結果
  (時間によってメッセージの内容が異なります)
switch文では、あらかじめ幾つかの処理を設定し、求められた値によって処理内容を振り分けるという条件分岐です。同じ条件分岐でも if構文とはちょっと異なるプログラムとなります。
特に、処理を行って構文から抜ける場合には break文が必要になり、条件となる値は case文に続いて示します。以下はその具体的なサンプルです。
today = new Date();
switch(today.getDay()){

case 0:
 document.write("本日は休み、日曜日です");
 break;

case 6:
 document.write("本日は休みかな? 土曜日です");
 break;

default:
 document.write("本日は平日です、さて何曜日?");
 }
実行結果
  (曜日によってメッセージの内容が異なります)
まとめ/dt>
制御文は、直接オブジェクトをコントロールする命令文になります。JavaScriptを学ぶ上で、オブジェクトと共に、制御文をよく理解して覚えておきましょう。


This page is Valid HTML 4.01! 初版公開日 2004年7月30日
Copyright(C) 2002-2004 banban@scollabo.com