CodeStudy 12-10 continue のこと

今回は 制御文 のまとめをする前の復習として、CodeStudy 12-10 の continue をやってみます。

問題

while 文を使用して、変数 i = 1~100 までのうち、7 で割り切れる数字を、変数 count に全て足したらいくつになるか計算して、それを output ( ) で出力してください。

---

var i = 1;
var count = 0;

//ここにループを書きましょう。
while (i <= 100) {

    i ++;
    if (i % 7 != 0) {
        continue;
    } else {
        count += i;
    }
}
output (count);

---

赤字の部分が 自分で書く必要のある所です。
赤字の部分の
1行目で、while 文を使って繰り返しの処理をしています。繰り返しの条件は、i が 1~100 ですので、100以下 となるように i <= 100 にしました。i は 1づつ増やすので、i < 101 でも良いかも知れません。

2行目 i を 1 増やしていますが、これは i が7になる迄は、count に足される事が無いというのが 予め判っているのでこれでも良いのですが、予め判らない場合は if 文で 分けた処理のそれぞれ最後に i ++ を入れるのが良いと思います。

3~6行目 if 文を使って i が 7 で割り切れるかを判定しています。not 演算子 ( ! ) を使って 7 で割り切れない場合に continue でループを 1回スキップさせて、割り切れる場合は else 以下で i の値を count に足しています。これは not 演算子を使わないで、


if (i % 7 == 0) {
    count += i;
} else {
    continue;
}


このように書いても同じですが、これだと continue を使わなくても同じになってしまうので、回答例のようにしました。
この例題でも、インクリメントをちゃんと入れないと無限ループになってしまうので、注意して下さい。

---

よろしければこちらの記事もどうぞ

　CodeStudy の問題に挑戦した記事の一覧

CodeStudy 12-7 break のこと

制御文のまとめの続きを書こうとしている所ですが、また いつものように CodeStudy で復習をしてみようと思います。今回は break についてです。section 12-7 の問題に挑戦します。

問題

変数 i=0 から while 文でループを回し、その都度変数 count に i の値を足してみましょう。count が 150 を超えたらループを終了し、その時の i を output( ) で出力してください。

---

var i = 0;

var count = 0;

// 今回は意図的に無限ループを作っています。

// 必ずループの途中で break 文により、ループを中止しましょう。

while (true) {

    count += i;

    if (count > 150) {

        break;

    }

    i++;

}

// i をoutput ()で出力します。

output (i);

---

赤字の所が 自分で書く所です。

これは 0 + 1 + 2 + 3 + 4 + …とやっていった合計が 150 をこえたら計算のループを止めて 何回目の足し算で 止めたかを表示させるということですね。

先ず赤字の部分の
1行目 ですが、 while の条件式が true となっています。これは コード中のコメントにもあるように ずっと繰り返し続ける（無限ループ）ので、実行する処理の中に break 等を適切に入れないと、ブラウザがフリーズしたようになってしまい強制終了等 しないといけなくなったりして大変ですので注意が必要です。

2行目 では i の値を count の値に足しています。
3行目 で if 文を使って、count の値が 150 を越えたかをチェックしています。越えている場合は
4行目 の break が実行されて、ループを抜けます。
越えていない場合は
6行目 で i の値を 1 増やしてループを繰り返します。条件式が true で無限ループなので、count が 150 をこえるまで、繰り返し続けます。

ループを抜けたあとの処理は、CodeStudy おなじみの output () で i の値を表示させて終了です。

JavaScript 初歩のまとめ ⑬ 制御文 while

前回の for 文に続いて、同じ繰り返し処理の while 文のまとめです。

while 文

while は プログラムの中のある処理を 繰り返して行うときに使う命令です。

良く似ている 繰り返しの命令に for がありますが、for が繰り返す回数を最初に指定するのに対して、while は条件を満たす間、何回も処理を繰り返すような場合に使うことが多いです。

但し繰り返しの条件に 比較演算子などを使って、for 文と似た使い方もできます。

while 文は次のように書きます。

while ( 繰り返しの条件 ) {

    実行する処理;

}

for 文の書き方と良く似ていますが、( ) の中に カウンタ変数は書きません。この条件で true が返る間はずっと { } の中の処理が繰り返されます。 実際に書いてみます。

ex.1

---

var x = 0;

while (2 * x + 10 != 30) {

    x++;

}

document.write (x);

---

ちょっと良いサンプルが思いつかなかったのですが、小学校で習うような算数の問題を、コンピュータに解かせるとして、人間のやる計算方法ではなくて、 x を0 から 1ずつ増やす総当たり方式で、答えが出るまで繰り返すやり方で解かせます。

ex.1の実行結果

これで気をつけないといけないと思ったのが、while は 条件を満たす ( true が返る ) 間、処理を繰り返す。と言う点です。言い換えると、false が返ると 1回も { } 内が実行されません。この点にだけ気を付ければ、あとは難しい事はないと思います。そこで 原始的ですが、数字当てのゲームを作ってみました。

ex.2

---

var inp; //ユーザーが入力する数
var ans = Math.floor (Math.random()*9 + 1); //乱数で発生させる答
var ctr = 0; //答えを入力した回数

while (true) {
ctr++;
inp = prompt ('1 ~ 10 の数字が変数に代入されています。その数を当てて下さい。');
if (inp == ans) {
document.write('正解。<br>正解までにかかった回数 '　+ ctr + ' 回');
  break;
}
else if (inp > ans) {
alert ('ハズレです ' + inp + ' よりは小さい数です。');
}
else {
alert ('ハズレです ' + inp + ' よりは大きい数です。');
}
}

---

while の条件式を true にしています。この条件だと当然、常に true が返るので ループが終了しません。（無限ループと言うそうです）
無限ループのスクリプトを実行してしまうと、ブラウザが フリーズしたようになってしまって、強制終了しないといけなくなったりして なかなか面倒でした。ここは注意が必要な所です。
無限ループにならないようにしているのが、真ん中あたりの赤字で書いた break です。詳しくは 次回以降に まとめを書こうと思っているのですが、ここでは if 文と組み合わせて ある条件を満たしたときに while のループを抜けるための命令です。

while のまとめの内容から外れてしまいますが、このスクリプトで alert で表示している「ハズレ…」のメッセージは document.write( ) で表示させたかったのですが、どうしても上手く行きませんでした。もうちょっと 勉強が進んだら理由が判るかも知れません。


 ここ迄で while 文については終わりですが、while 文のバリエーションのような do … while 文というのもあるので、次回は それと、今回少し使ってみた break 等についてまとめてみようと思います。その前に また、CodeStudy で復習が必要になるかも…。

---

よろしかったらこちらもどうぞ

制御文に関する記事の一覧

CodeStudy 12-4 while のこと

今 while 文のまとめの記事を書こうとしている所ですが、書き始める前に 色々と復習しています。ずっとお世話になっている CodeStudy  4-1 から 4-4 に while 文の問題がありますので、改めて挑戦してみました。
但し 4-1 から 4-3 は「ちょっとした問題」ですので、ここでは 4-4 だけ取り上げます。

問題

var i =1~30 までループを回し、i が偶数の時のみ、変数 count にその時の i を足してみましょう。 そしてその結果、count がいくつになるのかを output( ) で出力しましょう。


var i = 1;
var count = 0;

//ここにループを書きましょう。
//iをインクリメントするのを忘れないでください。
while (i <= 30) {
    if (i % 2 == 0) {
        count += i;
    }
    i++;
}
//結果をoutputで出力しましょう。
output(count);


赤字の部分が 自分で書く部分です。
このように書いたら 正解になりました。この問題だと ループの回数が、30回と決まっているので、for 文を使っても 答えは出ます。教本などを読むと for 文は ループ回数が決まっている場合に使い、while 文は何回繰り返すか判らない場合に使う事が多いとあります。
では、練習と思って 同じ条件のスクリプトを for 文で書き直してみます。

ex.1

var count = 0;
for (var i = 1; i <= 30; i++) {
    if (i % 2 == 0) {
        count += i;
    }
}
document.write (count);

ex.1の実行結果

書いた行数だけを見ると 少しの差ですが、for で書いた方が少なくて済むようです。

for にしても while にしても 条件の書き方がとても重要だと判ってきました。結果は同じでも 違う書き方というのもできそうですし…。

ともかく練習にはなりましたので、次はwhile 文のまとめを書こうと思います。

---

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

CodeStudy に取り組んだ記事一覧

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 文を書いて、２重のループにする事ができます。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 文にしようかと思います。

---

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

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

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 文を 配列に対しては使わない方が良いようです。まだしっかり勉強していないのですが、エラーになる場合があるようです。

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 の練習などもしてみたいです。