JavaScript講座
(メールマガジン編)

10/09日発行 ヨッシーの”ホームページを作ろう!(JavaScript編)”★Vol.15★

曜日の呼び出し、配列について

前回は文字を使った日付の表示についてやったね。でも前回は曜日を扱わなかったよね。
これにはわけがあるんだ。
時間や日付というのはすべて数字だよね。だから、返ってきた数字を使ってそのまま表示すればよかったんだ。
でも、曜日というのは国によって違うよね。
日本なら、日曜日、月曜日。アメリカならSunday,Monday。
プログラムはどこでも使えるようになっているほうがいいので、プログラム中では曜日も日時と一緒で数字で返ってくるんだ。
そこで、返ってきた数字を日本語に変換する必要が出てくるね。
今回はその方法についてやってみよう。
ついでに、プログラムを簡単にするために、配列というものを使ってみよう。

 

★ 曜日の表示 ★

じゃあ、前回と同じようにして曜日を出してみよう。

”時刻”変数から好きな値を取り出す

変数(オブジェクト).getDay : (変数から)曜日を取り出す

これは前回も書いたけど、このような曜日を求める命令を使っても実際は数字が返ってくるんだ。
たとえば、前回と全く同じようにして次のような曜日を表示するプログラムを書くとどのようになるだろう。


--曜日を表示するプログラム?--

<HTML>
<HEAD>
<TITLE>曜日の表示?</TITLE>
<SCRIPT language="JavaScript">
today = new Date();
youbi =
today.getDay();
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
document.write("今日は",youbi,"曜日です。");
</SCRIPT>
</BODY>
</HTML>


--解説--


<HTML>
<HEAD>
<TITLE>曜日の表示?</TITLE>
<SCRIPT language="JavaScript">
today = new Date();                     ←日付を取得
youbi = today.getDay();               ←日付から曜日を取得
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
document.write("今日は",youbi,"曜日です。");         ←"youbi"の変数を使って曜日表示(のつもり)。
</SCRIPT>
</BODY>
</HTML>


これを実行するとどうなるとおもう?
実は次のように表示されてしまうんだ。

[実行結果]
今日は4曜日です。

このように、曜日の入るべき場所に数字が入ってしまうんだね。
けど、これを違う日に実行してみると5,6と違う数字になるんだ。
つまり、曜日を文字の変わりに数字で表しているんだ。(数字は万国共通)
ここで、この数字を日本の曜日に変換してやればいいことがわかるね。
実は数字と曜日には次のような関係があるんだ。

<数字と曜日の対応表>
0 → 日曜日
1 → 月曜日
2 → 火曜日
3 → 水曜日
4 → 木曜日
5 → 金曜日
6 → 土曜日

この関係をつかって数字を曜日に変える方法をやってみよう。

★ 数字を曜日に変えるT ★

数字を曜日に変えるにはif文を使えばいいんだ。
つまり、数字が0の時は日曜日、数字が1の時は月曜日・・・・というふうにしていくんだね。

<プログラムの一部>
if(youbi == 0){ youbi = "日"; }
  ←@
if(youbi == 1){ youbi = "月"; }
  ←A
if(youbi == 2){ youbi = "火"; }
  ←B
if(youbi == 3){ youbi = "水"; }
  ←C
if(youbi == 4){ youbi = "木"; }
  ←D
if(youbi == 5){ youbi = "金"; }
  ←E
if(youbi == 6){ youbi = "土"; }
  ←F

これをプログラムの途中に入れて、数字を文字に変換しているんだよ。

<よく分からない人へ>
このプログラムの意味を説明すると、
@もし、曜日に0が返されたら、youbiに日という文字を入れよ。
Aもし、曜日に1が返されたら、youbiに月という文字を入れよ。
Bもし、曜日に2が返されたら、youbiに火という文字を入れよ。
Cもし、曜日に3が返されたら、youbiに水という文字を入れよ。
Dもし、曜日に4が返されたら、youbiに木という文字を入れよ。
Eもし、曜日に5が返されたら、youbiに金という文字を入れよ。
Fもし、曜日に6が返されたら、youbiに土という文字を入れよ。

つまり、返された数字の値によって"youbi"という変数に入る文字を指定して代入しているんだね。

★ 数字を曜日に変えるU ★

上のようなやり方(if文)でも確かに数字を文字に変えることができるんだけど、
実は配列というものを使うともっと簡単に曜日を表示することができるんだ。
vol.1でもやったようけど、配列をつくるには

    変数 = new Array(n)

このようにするんだったね。
じゃあ、まず、配列を使うためにyoubiという配列を作ってみよう。
そして、youbiという配列に日から土までの曜日を順に入れてみよう。

   youbi = new Array("日","月","火","水","木","金","土");

これでyoubiという配列に日から土までの7つの文字が入ったことになるんだ。
このように、配列は","で区切るんだよ。

また、左から0、1、2、3・・・という部屋に入ることになるので、
youbi0番目の部屋には"日"という文字、1番目の部屋には"月"という文字が入っていることになるんだ。
※部屋は0から始まることに注意しよう
そして、配列から自分の出したいものを出してくるためには、

変数[部屋番号]
(例:youbi[1],youbi[5])

このように書くんだ。
※詳しくはもう一度vol.1を読み直そう

じゃあ、これらを確認するために次のプログラムを実行してみよう。


--補足プログラム--

<HTML>
<HEAD>
<TITLE>曜日の表示?</TITLE>
<SCRIPT language="JavaScript">
youbi = new Array("日","月","火","水","木","金","土");
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
document.write("youbi[0]は",youbi[0],"です。<BR>");    ←"日"という字が出るはず。
document.write("youbi[1]は",youbi[1],"です。<BR>");    ←"月"という字が出るはず。
document.write("youbi[2]は",youbi[2],"です。<BR>");    ←"火"という字が出るはず。
document.write("youbi[3]は",youbi[3],"です。<BR>");    ←"水"という字が出るはず。
document.write("youbi[4]は",youbi[4],"です。<BR>");    ←"木"という字が出るはず。
document.write("youbi[5]は",youbi[5],"です。<BR>");    ←"金"という字が出るはず。
document.write("youbi[6]は",youbi[6],"です。<BR>");    ←"土"という字が出るはず。
</SCRIPT>
</BODY>
</HTML>

※わかりやすいようにシンプル(?)に書いたけど、
実際はfor文などを使ってもっと行数を減らすことができる。
時間のある人はやってみよう。


--結果--


youbi[0]は日です。
youbi[1]は月です。
youbi[2]は火です。
youbi[3]は水です。
youbi[4]は木です。
youbi[5]は金です。
youbi[6]は土です。


じゃあ、最後に日付を表示するプログラム(曜日付き)を作ってみよう。
※前回の日付表示プログラムに曜日を足しただけです。"#"の行が追加プログラム。


--日付表示(曜日付き)プログラム--

<HTML>
<HEAD>
<TITLE>日付・時刻表示</TITLE>
<SCRIPT language="JavaScript">
today = new Date();
year = today.getYear();
month = today.getMonth();
date = today.getDate();
hours = today.getHours();
minutes = today.getMinutes();
seconds = today.getSeconds();
youbi =
today.getDay();

day = new Array("日","月","火","水","木","金","土");

</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
document.write(year,"年",month,"月",date,"日",
day[youbi],"曜日",hours,"時",minutes,"分",seconds,"秒");

</SCRIPT>
</BODY>
</HTML>


--解説--


<HTML>
<HEAD>
<TITLE>日付・時刻表示</TITLE>
<SCRIPT language="JavaScript">
today = new Date();
year = today.getYear();
month = today.getMonth();
date = today.getDate();
hours = today.getHours();
minutes = today.getMinutes();
seconds = today.getSeconds();
youbi = today.getDay();                      ←#@曜日を(数字で)取得          

day = new Array("日","月","火","水","木","金","土");          ←#A配列に曜日を入れた

</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
document.write(year,"年",month,"月",date,"日",day[youbi],"曜日",hours,"時",minutes,"分",seconds,"秒");
↑#曜日も表示
</SCRIPT>
</BODY>
</HTML>


表示部にday[youbi]というのがあるよね。
youbiにはその時の曜日が数字で入っているので、

    day[youbi] = day[数字]

となるね。
これを上の方に書いた曜日と数字の対応表にあわせて配列を組むとうまくいくんだ。

(例)"日曜日"を表示する場合
日曜日なのでyoubiには"0"が入る。(@の部分)
配列を対応表に合わせて、上のように設定すると。(Aの部分)
day[youbi] → day[0] → "日"(0番目の部屋は"日")
このように"月"、"火"・・・も同様。



back.gif (1116 バイト) next.gif (705 バイト) top.gif (583 バイト)