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

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

|

さて。

最近、合間を見ては、イヌでもわかるJavaScript(新しいタブで開く)にチャレンジしております。プログラミング学習をするにあたり、ホントに助かってます。各サンプルの各行に、丁寧なコメントつけてくれているので、意味も分からずに「写経」をすることは、ほとんどありません。

ただ、それでもどうしても分からないことが、ときどき登場します。今回はそのうちの1つである、月間カレンダー中に登場する変数の使い方です。

参照サイト:
イヌでもわかるJavaScript講座 Step.22 – 月間カレンダーに挑戦(新しいタブで開く)

calender

変数myTableに関するコード

まずは、何がどう分からないのかを説明しましょう。
本当は、スクリプトの部分だけで40行ほどありますので、まずは問題点である、変数myTableに関わるところだけを抜き出してみましょう。

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

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の使い方について。42個しかないセルが途中で49個も入らないようになるのはなぜか?

前半の「下準備」において”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個も入る変数とはどういうことでしょうか?

なおコードの全文はコチラ(新しいタブで開く)になります