19、カレンダー


時計は、今の時刻が使えるだけではなく、 年月日を変更して、過去や未来を表示することもできます。
自分の生まれた日に戻って、今日は何曜日?、と聞けば答えてくれますし、万年カレンダーだってできます。
1、曜日を調べる

ます時計置場を準備します。

時計置場名=new Date();

この時点では時計置場の時計には現時点のパソコンの時計のデータが入っています。
そして時計置場の各データ−を変更するために準備されている命令は次の表の通りです。

putFullYear(指定データ置場) putMonth(指定データ置場) putDate(指定データ置場)

実際に使う場合は

時計置場.setFullYear(指定データ置場);

のように書きます。
全要素を修正すには、次のように書きます.

jikan=new Date(); y=2001; m=10; d=1; jikan.setFullYear(y); //年 jikan.setMonth(m); //月 jikan.setDate(d); //日
曜日は設定した日の曜日に自動的になりますので、前ページで曜日を調べたときのように

w=jikan.getDay(); ww="日月火水木金土".substr(w,1);
として「ww」置場のデータを曜日の窓に表示すれば実現します。

それでは、次の窓に年月日を入力して、何曜日がを調べてみよう。

西暦日は 曜日です。

あなたは、何曜日生まれ?、誕生日を入力すれば、すぐわかりますね。
ソースは、最後に、一括して紹介しますが、そろそろ、自分でも考えてみてくださいね。

2、万年カレンダー

パソコンの時計をクリックするとカレンダーが表示されます。
年の窓を変更すれば1980年から2099年までの万年カレンダーが見られる。
しかし、多くの方は自分の誕生月のカレンダーを見ることは、もっと過去に遡れなければできません。
この機会に、どんな過去でも、未来でもつかえる万年カレンダーを作ってしまいましょう。
実はカレンダーは基本的には7通りしかないのです。(日数の多少は別にすると)
1日が何曜日か?
が解れば、以降月の日数だけ、順番に書いていけばいいのです。

年月を入力して、その月の1日の曜日を調べるまでは前項と同じです。
その後のロジックに少々工夫が必要ですが...、
とりあえず、次の窓に、年月を入力して、「作成」ボタンをクリックして体験してみてください。

西暦月のカレンダー



(1)月の日数

カレンダーを作るには、月々の日数が違うので、すぐ使えるように月々の日数を準備しておく必要があります。
立体置場の各階を月に関連付けて、1階に1月の日数、2階に2月の日数、.....というように準備する。
事前に各階のデータが決まっている場合は
立体置場の設置とデータのセットを同時に行う方法がありますので今回はその方法でセットします。
具体的には

nisuu=new Array(0,31,28,31,30,31,30,31,31,30,31,30,31);

のように書きます。

さらに、閏年には2月の日数を29日に変更する必要があります。
具体的には、「余り算」と「もしも」を使って 4年ルール、40年ルール、100年ルールで閏年を判別します。

if((y%4)==0){ nisuu[2]=29; if ((y%40)== 0){ nisuu[2]=28; if((y%100) == 0){ nisuu[2]=29; } } }

(2)多数の窓

今まで、FORMの各窓には
<input type="text" name="窓名"> のように窓に名前を付けJavaScriptからは

document.form名.窓名.value=置場名;
のように窓の名前を指定してデータの受渡しをしてきました。
しかし窓の数が多くなると、一つ一つ名前を付けていては大変です。
立体置場のように一連番号で指定できれば便利です。
実は、<FORM>〜</FORM>の間に設けられた窓やボタンには設置順に 設置番号(先頭は「0」)が付られています。
この番号を使って

document.form名.elemens[設置番号].value=立体置場名[階数];
のようにデータ受渡しができるのです。
窓に名前を付けなくて良ければ、沢山の窓でもタグをいちいち書かなくても
JavaScriptの「から・まで」を使って、 JavaScriptにタグを書かせるてしまうことができます。

for(i=1;i<=31;i++){ document.write('<input type="text" size=3 value="">'); }

とすれば、31個の窓が一挙にできます。
<TABLE>と込み合わせ作れば、上のカレンダーのようにできます。
具体的には

for(i=0;i<6;i++){ document.write('<tr>'); for(j=0;j<7;j++){ document.write('<th><input type="text" size=2 value="" ></th>'); } document.write('</tr>'); }

のように書きます。
準備だできたら

w=jikan.getDay();
で求めた曜日番号のw番目の窓から、日数だけ繰り返し窓に連番をセットしていきます。

3、体験してみよう


以上の解説が理解できたら、以下のソースを解読してみてください。
そしてソースをコピーして「メモ帳」に貼り付け、HTMLファイルとして保存した上で、そのファイルをダブルクリックして開いてみてください。
<html> <head> <title>javascript入門no19</title> <script languege="JavaScript"> <!-- //曜日調べ// function tokei(){ mydate= new Date(); //窓から置場に y=document.tokei_form.nen.value; m=document.tokei_form.tuki.value; d=document.tokei_form.hi.value; //時計設定 mm=m-1; mydate.setFullYear(y); mydate.setMonth(mm); mydate.setDate(d); //曜日取得 w=mydate.getDay(); ww="日月火水木金土".substr(w,1); //窓に表示 document.tokei_form.you.value=ww; } //万年カレンダー// function calendar(){ mydate= new Date(); //窓から置場に y=document.calendar_in_form.nen1.value; m=document.calendar_in_form.tuki1.value; d=1; mm=m-1; //時計セット mydate.setFullYear(y); mydate.setMonth(mm); mydate.setDate(d); //曜日取得 w=mydate.getDay(); //月の日数 nisuu=new Array(0,31,28,31,30,31,30,31,31,30,31,30,31); //閏年2月の日数 if((y%4)==0){ nisuu[2]=29; if ((y%40)== 0){ nisuu[2]=28; if((y%100) == 0){ nisuu[2]=29; } } } //窓を白紙に for(i=0;i<42;i++){ document.calendar_out_form.elements[i].value=""; } //カレンダー表示 for(i=1;i<=nisuu[m];i++){ b=i+w-1; document.calendar_out_form.elements[b].value=i; } } //--> </script> </head> <body> <center> <!--曜日調べフォーム--> <form name="tokei_form"><hr> 西暦<input type="text" name="nen" size=4 value="">年 <input type="text" name="tuki" size=2 value="">月 <input type="text" name="hi" size=2 value="">日は<br><br> <input type="button" value="何曜日?" onClick="tokei()"> 「<input type="text" name="you" size=2 value="">曜日です。」 </form> <hr> <!--年月入力フォームー--> <form name="calendar_in_form"> 西暦<input type="text" name="nen1" size=4 value="">年 <input type="text" name="tuki1" size=2 value="">月のカレンダー <input type="button" value="作成" onClick="calendar()"> </form> <!--カレンダー表示フォーム--> <form name="calendar_out_form"> <table border=1 width=320> <tr> <th>日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th> </tr> <script language="javascript"> <!-- for(i=0;i<6;i++){ document.write('<tr>'); for(j=0;j<7;j++){ document.write('<th><input type="text" size=2 value="" ></th>'); } document.write('</tr>'); } //--> </script> </table> </center> </body> </html>