2013年1月25日

JavaScript 初歩のまとめ ⑫ 制御文 for


前回 for 文を色々と試しながらまとめましたが、もう少し試してみたい事もあるので 続きです。


for 文のネスト


ex.1

document.write ('掛け算');
for (var i = 1; i < 10; i++) { 
    document.write('<br>', i + 'の段', '<br>');
    for (var j = 1; j < 10; j++) { 
        document.write (i + ' × ' + j + ' = ' + i * j, '<br>');
    }
}


ex.1 の実行結果






















for 文の繰り返し処理に for 文を書いて、2重のループにする事ができます。ex.1 では 前回のまとめで作った 掛け算のループを 2重のループに改造して、1の段から 9の段まで表示するようにしてみました。
カウンタ変数 i は ◯の段を 1~9 まで繰り返します。i のループを 1回処理する毎に 内側のループ(カウンタ変数 j のループ)が、i の段 の掛け算を 1~9 まで行います。
j のループが終了すると、i が 1増えて、次の段の掛け算が 行われ、9の段まで行うと全ての処理が終了します。ややこしく見えますが、やっている事は単純です。




複数の変数の値を増減させる for 文


for 文では 複数の変数の値を増減させながら ループする事もできます。この場合 扱う変数を , (カンマ)区切りで 書きます。



ex.2

var num = new Array();
for (var i=0, j=2; i<9; ++i, j*=2) {
    num[i] = j;
}
document.write (num);



ex.2 の実行結果














繰り返し条件を書く ( ) 内に 初期値と ループ1回毎の増減値を ,(カンマ)で区切って書きます。
今の所 この方法以外ではできない処理のサンプルが思いつきませんが、覚えておくと役に立つ時があるかも知れません。ex.2 は次のように書いてもとりあえず同じ結果になりました。

var num = new Array();
var j = 2;
for (var i=0; i<9; ++i) {
    num[i] = j;
    j *= 2;
}

document.write (num);

for 文についてはひとまず完了です。次回のまとめは、繰り返し処理の続きで、while 文にしようかと思います。



よろしければ こちらもどうぞ。 

2013年1月16日

JavaScript 初歩のまとめ ⑪ 制御文 for


少し間が開いてしまいましたが、初歩のまとめの 11回目です。前回に 配列の初歩をまとめたので、これと合わせて使うと色々な活用ができそうな 制御文の for についてです。


for 文


for は プログラムの中のある処理を 繰り返して行うときに使う命令です。
良く似ている 繰り返しの命令に while がありますが、while が何回繰り返すか判らないけど、ある条件を満たすまで繰り返し続けるのに対して、for は繰り返す回数が、あらかじめ決まっている場合に使うことが多いです。但し if 文などと組み合わせることで、繰り返し回数を変更することも もちろんできます。
for 文は次のように書きます。


for ( カウンタ変数の初期値; 繰り返し条件; カウンタ変数の値の変更 ) {
    実行する処理;
}


大まかには、( )の中が 繰り返しを行う条件(この条件を満たす場合に繰り返しを行う。)で、{ } の中が 繰り返して行う 実際の処理です。
( ) の中は、普通 3つに分かれています。左から順に見ていきます。


カウンタ変数の初期値 カウンタ変数というのは、繰り返した回数を入れておく変数です。この初期値を 代入文で書きます。

繰り返し条件 個々に書いた条件が true の場合に繰り返し処理が行われます。カウンタ変数と比較演算子を使った条件がよく使われるようです。

カウンタ変数の値の変更 処理が 1回行われる毎に カウンタ変数の値を増減させる場合がほとんどですが、その増減させる式を 代入文を使って書きます。


簡単な例から 実際に書いてみます。


ex.1

for(var i = 1; i < 10; ++ i) {
    document.write('繰り返し ' + i + '回目');
}


ex.1 の実行結果






















この例では カウンタ変数は i で、初期値は 1 です。繰り返しが1回行われる毎に ++ i ですので、i の値が 1 増えます。そして i の値が 10 より小さい間は繰り返しが続きます。
繰り返しで 実行している処理は、カウンタ変数 を使って 何回繰り返したかを 判りやすく表示させているだけです。 
i が 10 になると、i < 10 の条件では false が返りますので、9回目で繰り返しが終了しています。
同じ条件で こんな事もできました。

ex.2


ex.2 の実行結果






















document.write('かけ算 7 の段','<br>');
for(var i = 1; i < 10; ++i) {
    document.write('7 × ' + i + ' = ' + 7 * i, '<br>');
}

ex.1と繰り返しの条件は 全く同じで、表示させる文字列に少し手を加えてあるだけですが、カウンタ変数を繰り返し処理の中で使うのはかなり応用が利きそうな使い方だと思います。同じような例をもうひとつ 考えてみました。



ex.3

var flg = new Array(0, 1, 0, 0, 1, 1, 0, 0, 1, 1);

for(var i = 0; i < 10; i++) {    
    if(flg[i] == 1) {
        document.write('flg[' + i + ']', '<br>');    
    }
}


ex.3 の実行結果






















最初に 10個の要素を持つ配列 flg を作って、1 か 0 を代入しています。
次に for 文を使っています。( ) 内の条件は、カウンタ変数 i の初期値が 0、i を 1づつ増やして 9になるまでです。
{ } 内の処理の内容は、if 文を使って配列要素に代入された値が、1 かどうかを調べて、1 の場合は、その配列要素を 表示させるものです。

細かく見てみます。カウンタ変数 i の初期値は 0です。1回目の処理の間は i の値はずっと 0ですので、配列の添字に i を使うと flg[0] と同じ事になります。 ex.3 の if 文の条件の所は、下に書いたのと同じことになっています。

if(flg[0] == 1) {

flg[0] に代入されているのは 0 ですので false となり、何も実行する事が無いので 1回目の 繰り返しは終わりになります。
++ i は i の値を 1 増やす意味でしたから 2回目の繰り返しの間 i の値はずっと 1 です。

if(flg[1] == 1) {

flg[1] の値は 1 ですので if 文の判定では true が返って、document.write(' ~ '); が実行されます。表示させる文字列の中にも i が登場しますが、ここでも、i の値は 1 のままですので 表示されるのは flg[1] となります。この流れが、 i が 9 になるまで繰り返されています。




for … in 文


ex.3 では、配列の要素全てに対して処理を行うために 要素数 を自分で数えて繰り返し回数を指定しました。この方法だと 配列の要素数が変わったときに、繰り返し回数も数え直して書き換えないといけません。それでは不便なので、for 文 の別の書き方もやってみます。

ex.4

var flg = new Array(0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1);

for(var i in flg) {    
    if(flg[i] == 1) {
        document.write('flg[' + i + ']', '<br>');    
    }
}



ex.4 の実行結果























ex.3 から赤字の所を変更しました。要素数は 2つ増えています。繰り返し条件は細かく指定していませんが、ちゃんと 11番目の要素まで繰り返し処理されています。

for( 変数 in オブジェクト名 ) {
     実行する処理;
}

このように書きます。オブジェクト名ついては、まだ勉強が進んでいませんので、しっかり理解してから改めてまとめを書きますが、配列もオブジェクトの一種という事ですので in の後に配列名を書くと配列要素の数と同じだけ繰り返して { } 内の処理をしてくれます。配列と for 文 と if 文 を組み合わせて使うのは、とても応用ができそうなので、しっかりと覚えておこうと思います。

for 文は これ以外にも 試してみたい事がいくつかありますので、次回も for 文の続きです。



1月31日 追記:for … in 文を 配列に対しては使わない方が良いようです。まだしっかり勉強していないのですが、エラーになる場合があるようです。

2013年1月5日

JavaScript デジタル表示の時計 ③

デジタル表示の時計 3


少し間が空いてしまいましたが、デジタル表示の時計をさらに改造してみました。今まで 24時までで 表示していたのを AM / PM の表示を付けて、12時までで表示するようにしてみます。前回までにできているプログラムを基にして、
AM / PM を表示する処理を追加するようにします。


Sample.1


function clock() {
    var now = new Date();
    var h   = now.getHours();
    var m   = now.getMinutes();
    var s   = now.getSeconds();

    if (h < 12) {
        var ampm = "AM ";
    }else {
        h -= 12;
        var ampm = 'PM';
    }

    if (h < 10) {
        h = "0" + h;
    }
    if (m < 10) {
        m = "0" + m;
    }
    if( s < 10) {
        s = "0" + s;
    }

    document.getElementById('clockArea').innerHTML = ampm + h + ":" + m + ":" + s;
}
setInterval('clock()',1000);

赤字の部分が 前回のコードに追加した部分です。
変数 h に 「時」「分」「秒」の 「時」が代入されていますから、h の値が 0~11 のときには、AM か PM を代入するための変数 ampm に AM を代入して、h の値が それ以外のとき(12~23)には PM を代入して、表示させる 値の先頭に + 演算子で連結させて表示する…。と これだけでいいのですが、少し気になる箇所もあります。


Sample.1の実行結果





















Sample.1 を実行して 時刻が お昼の 12時を過ぎると 上の画像のようになります。別に間違ってはいませんが、PM 12:41:37 という方が お昼の感じがするのは自分だけでしょうか?もし そのように表示させたいのなら if 文 での条件分岐を 3つにして次のように処理を分ける必要があります。
  1. h の値が 0~11  ampm に AM を代入。
  2. h の値が 12   ampm に PM を代入。
  3. h の値が 13~23  ampmに PM を代入して、h から 12を引く。


ためしに練習と思ってやってみます。



Sample.2


function clock() {
    var now = new Date();
    var h   = now.getHours();
    var m   = now.getMinutes();
    var s   = now.getSeconds();

    if (h == 12) {
        var ampm = "PM ";
    }else if (h < 12) {
        var ampm = "AM ";
    }else {
        h -= 12;
        var ampm = 'PM';
    }


    if (h < 10) {
        h = "0" + h;
    }
    if (m < 10) {
        m = "0" + m;
    }
    if( s < 10) {
        s = "0" + s;
    }

    document.getElementById('clockArea').innerHTML = ampm + h + ":" + m + ":" + s;
}
setInterval('clock()',1000);



Sample.2 の実行結果





















 DEMO


if 文で 2つに条件分岐させていたのを if ~ else if 文で 3つに条件分岐させて処理を分けています。処理の内容は 先に箇条書きにした通りです。

これで ようやく デジタル表示の時計は完成でいいと思います。そのうちに アナログ風の表示の時計にも挑戦してみたいですが、その前に CSS3 の練習などもしてみたいです。