do whileで試しに書いてみた。

2014年5月14日

ETC

do whileの勉強

do {}while();の勉強がてらちょっとスクリプトを書いてみました。これを何に使うかって言うとちょっとあれなんですが、ちょっと楽しかったので久々の記事更新ということで記載したいと思います。

ぶっちゃけ記事を更新したかった感が強いです。

簡単な説明

以下のものを使って、1月から12月までのすべての日付をdocument.writeを使って書き出して、それに対して土日に色をつけてみよう。って感じです。

変数 if文 switch文 Date関数

まずは do while文とは

do while文は

do{
    命令文;
} while(評価式)

という形で書かれます。

doの{}の中に書かれている命令文をwhile()の中に書かれている評価式が有効な間はずっとその命令文を続けます。

たとえばこんなかんじです。

var i = 1;
do {
     console.log(i);
     i += 1;
} while( i < 10)

これは、変数iが10より少ない間ずっと繰り返します。ですので4行目の’i += 1’を抜くと延々に何かをやり続けブラウザの読み込みが延々に止まらない感じになります(これに気づかずさきほど30分ぐらいハマってました。)

評価式の部分がちゃんと終わらせるような条件を中に忘れずに書くように気をつけましょう(主に自戒)

本題

さて、本題です。これを踏まえた上でちょろっと書きました。主にパーツとしては

・12ヶ月繰り返す部分・日付をカウントして書き出す部分(月によって違う日付を) ・日付と月を書き出す部分・日付が土日だったら色を替える部分

これが揃えばおそらく一年間の日付が書き出せて、土日の色を変えられるんじゃないか?です。

12ヶ月繰り返す部分

これは先ほどのもろにdo whileですね。

var month = 1;
do {
  この中の処理は後ほど    
  month += 1;
}while(month <= 12);

変数monthは1月から12月って言うことで month = 1 => 最初に1をセット(ここは0でもいいけどなんとなく精神衛生的に) month += 1 => 1を毎回足して条件にいつかマッチするように month <= 12 => 比較演算子で12以下を表現と記載しているところがポイントな気がします。

月によって違う日付を設定する

switch(month){
      case 1:
      case 3:
      case 5:
      case 7:
      case 8:
      case 10:
      case 12:
        lastDay = 31;
        break; 

      case 2:
        lastDay = 28;
        break;

case 4:
      case 6:
      case 9:
      case 11:
          lastDay = 30;
          break;
  }

変数lastDayに対してswitch文でその月の最後の日付を出してあげる感じ。

その月の日付を書き出す

ポイントはdo whileで書きつつも、評価式は固定にできないので毎月の最後の日付を変数にいれてあげるところです。

// lastDayは上記のやつから引き継ぎ
var day = 1;
do {
    document.write(day);
  day += 1;
} while (day <= lastDay );

こんな感じです。

日付と月を書き出す部分

したがって月と日を書き出す部分は下みたいな感じにするとうまくいきそうです。

var day = 1;
    month = 1;
    lastDay;

do {

    do{
    document.write(day);
    day += 1;
    } while( day <= lastDay)

  day = 1 // 初期化? これをやらないと引き続き足し続けてしまう。
  month += 1
}while( month <= 12 );

日付が土日だったら色を変える

これはif文とDate関数で曜日を判定するのhtmlとか複合ですが、そんな難しいことはなく、Date関数で週を評価できるような日付の形を頑張って作り出し、それをweekという変数にいれてif文するって感じです。

var fullDay = ("2013/" + month + "/" + day);
  var week = new Date(fullDay).getDay();

if (week == 0 ) {
      document.write(" " + day + "");
  } else if( week == 6 ) {
      document.write(" " + day + "");
  } else {
      document.write(" " + day + ""); 
  }

最終的にはこうなったっていう全体

<!doctype html>

// varriable 
        var month   = 1,
            day     = 1,
            lastDay = 1;

do {
            switch(month){
                case 1:
                case 3:
                case 5:
                case 7:
                case 8:
                case 10:
                case 12:
                    lastDay = 31;
                    break; 

                case 2:
                    lastDay = 28;
                    break;

case 4:
                case 6:
                case 9:
                case 11:
                    lastDay = 30;
                    break;
            }

document.write( '

' + month + '月
' );

do{
                var fullDay = ("2013/" + month + "/" + day);
                var week = new Date(fullDay).getDay();

if (week == 0 ) {
                    document.write(" " + day + "");
                } else if( week == 6 ) {
                    document.write(" " + day + "");
                } else {
                    document.write(" " + day + ""); 
                }

day += 1;
            } while ( day <= lastDay );

day = 1;
            month += 1;

} while (month <= 12);

終わりに

つうことでちょっと業務終わりに書いてみました。do whileはなにか難しい処理をするときには(時間とか)大事な処理な気がするので、ちゃんと使えるようにしておきたいですね。

共有: