1. TOPTOP
  2. Webサービス
  3. JavaScript

変数myTableの使い方がわかった!~イヌでもわかるJavaScript講座 Step.22 – 月間カレンダーに挑戦より

|

calender

先日、変数myTableの使い方がわからん!~イヌでもわかるJavaScript講座 Step.22 – 月間カレンダーに挑戦よりという記事を書きました。

「分からない」といった内容を引用すると、次のとおりです。

前半の「下準備」において”myTable”は、”=new Array(7*myTblLine);”となっていますので、myTableは、28・35・42のいずれの数字にしかなりません。カレンダーを見ていると、マスの数か28・35・42しかないのと同じことです(ちなみにmyTblLineは、4・5・6のいずれの数値)。

にも関わらず、後半で”myDat”という変数に、”=myTable[j+(i*7)];”として数値を代入するとき、[j+(i*7)]となってしまっています。これではmyTable[j+(i*7)に、最大で49(=7+(6*7))が入ることになり、ここで分けわからん状態になります。

「下準備」では最大42個しか入らない変数が、あとになって49個も入る変数とはどういうことでしょうか?

// ****************
//      下準備
// ****************

myMonthTbl= new Array(31,28,31,30,31,30,31,31,30,31,30,31);
myMonth = myDate.getMonth();
myTblLine = Math.ceil((myWeek+myMonthTbl[myMonth])/7);
myTable = new Array(7*myTblLine);

// セルの数が(42 or 35 or 28)の
// いずれかの数値になるテーブルのセルを空にする
for(i=0; i<7*myTblLine; i++){
	myTable[i]=" ";
}

// セルの数が(42 or 35 or 28)のいずれかになるテーブルで月の初日のセルに
// 1日から月末までの数値を入れる
for(i=0; i<myMonthTbl[myMonth]; i++){
	myTable[i+myWeek]=i+1;
}

// ******************************
//      カレンダー(日付)の表示
// ******************************

// 行を6回繰り返す
for(i=0; i<myTblLine; i++){
document.write("<tr>");
	// 列を7回繰り返す
	for(j=0; j<7; j++){
		document.write("<td align='center' ");
     // ??????????
		myDat = myTable[j+(i*7)];
		if (myDat==myToday){
			document.write("bgcolor='#00ffff'>");
		} else if (j==0) {
			document.write("bgcolor='#ffb6c1'>");
		} else {
			document.write("bgcolor='#ffffe0'>");
		}
		document.write("<strong>",myDat,"</strong>");
		document.write("</td>");
	}
document.write("</tr>");
}

myTableがとりうる数値

質問のポイントは、以下の1行です。

  • myDat = myTable[j+(i*7)];

 

カレンダーのセルを表すmyDatという変数に28,35,42の数値しか入らないことを確認することです。このjは見たまんまですが、iは、for(i=0; i<myTblLine; i++){}となっています。myTblLineという変数を確認する必要となります。

下準備のところを見ると、Math.ceil((myWeek+myMonthTbl[myMonth])/7);となっています。

myWeekとmyMonthTbl[myMonth]を足した数値について、7で割り、切り上げるということです。

私が抜粋したコードでは、変数myWeekと配列myMonthTbl[myMonth]については、書いていません。元のコードから抜粋すると、以下の定義されています。

  • myWeek = myDate.getDay();
  • myMonthTbl= new Array(31,28,31,30,31,30,31,31,30,31,30,31);
  • myMonth = myDate.getMonth();

 

つまり、Math.ceil((myWeek+myMonthTbl[myMonth])/7);を日本語に直していくと

Math.ceil((0~6までの数値+28,30,31のいずれかの数値)/7)

Math.ceil((28~37までの数値)/7)

Math.ceil(4~5.2ぐらい)

4から6までの数値

よって、myTblLineの数値は4か5か6のいずれかになります。

i<myTblLineはmyTblLineより1つ少ない数まで

再び、for(i=0; i<myTblLine; i++){}に戻ってみましょう。注目するのは、i<myTblLine;です。myTblLineは最大でも6までなので、iの数値は、5が最大となります。

従って、myDat = myTable[j+(i*7)];は、最小で28個、最大で42個のセルが作成されるということになります。個人的に、i<myTblLineの解釈を勘違いしていたと思います。

月間カレンダーを見ると、セルの数は必ず28,35,42のいずれかの個数しかありませんので、ようやくこのプログラムがカレンダーの要件を満たすことが分かりました。