【プログラミング学習メモ】繰り返し処理if文・while文の書き方

プログラミムコードが表示されたPC画面

前回の変数や演算子に引き続き、今回は繰り返し処理(if文/while文)についてです。

if文の書き方

if文は条件によって処理を変える場合に利用する。論理演算子を利用することで、複雑な処理を行うことも可能。記述方法は下記の通り。

if (条件1) {
  条件1に一致した場合に実行する処理
} else if(条件2){
  条件2に一致した場合に実行する処理
} else{
  条件1,2に一致しなかった場合に実行する処理
}

CodeCampの課題で書いたコードはコチラ。

0~100のランダムな数値を3つ取得し、「それぞれの数値」と「一番大きい数値」の情報を表示するプログラムです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>if</title>
</head>
<body>
    <script>
        // 0〜100のランダムな数字を3つ取得
        var rand1 = Math.floor(Math.random() * 101);
        var rand2 = Math.floor(Math.random() * 101);
        var rand3 = Math.floor(Math.random() * 101);
        document.write("<p>rand1:" + rand1 + "</p>");
        document.write("<p>rand2:" + rand2 + "</p>");
        document.write("<p>rand3:" + rand3 + "</p>");
        
        //一番大きい数値を表示
        if (rand1 > rand2 && rand1 > rand3) {
            document.write("<p>一番大きい数値は、rand1:" + rand1 + "です。</p>");
        } else if (rand2 > rand1 && rand2 > rand3) {
            document.write("<p>一番大きい数値は、rand2:" + rand2 + "です。</p>");
        }else{
            document.write("<p>一番大きい数値は、rand3:" + rand3 + "です。</p>");
        }
    </script>
</body>
</html>

このプログラムで少しややこしいのが、0〜100のランダムな数字を取得する処理。

    var rand1 = Math.floor(Math.random() * 101);
    var rand2 = Math.floor(Math.random() * 101);
    var rand3 = Math.floor(Math.random() * 101);

この部分ですね。

Math.floor(); 引数として与えた数字の小数点以下を切り捨てる

Math.random(); 0以上1未満のランダムな数値を生成する

0以上1未満のランダムな数値に101を乗算することで、100以下のランダムな数値(小数点あり)を取得、小数点以下を切り捨てることで、100以下のランダムな数値を取得するという流れです。

ランダムな数値を取得したあとは、if文で条件毎に数字を比較して、document.write();で表示して完了です。

繰り返し処理の書き方

特定の処理を繰り返し行う場合書き方は、for文、while文の2種類。

for文は繰り返し回数が決まっている場合に、while文は特定条件を満たすまで繰り返す場合に利用する。

for文の書き方

for(初期値; 条件式; 増減式){
  繰り返し行う処理
}

while文の書き方

while(条件式){
  繰り返し行う処理
}

CodeCampの課題で書いたコードはコチラ。

繰り返し処理を利用して、九九を表示するプログラムです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>for文</title>
</head>
<body>
<script>
    var n = 1;
    var m = 1;
    var sum = n * m;
    
    for(var i = 1; i < 10; i++){
        
        for (var j = 1; j < 10; j++){
            document.write("<p>" + n + "*" + m + "=" + sum + "</p>");
            m = m + 1;
            sum = n * m;
        }
        n = n + 1;
        m = 1;
        sum = n * m;
        j = 1;
    }

</script>
</body>
</html>

for文を使って書きました。

for文の中にfor文を入れています。

これは、1×1=1、1×2=2、1×3=3…と、まずは1の段の中での数字を変えていく処理と、1の段が終わったら2の段という具合に段を変える処理を分けています。これが適切な書き方なのかはわかりませんが、とりあえずこれで表示できました。

次回は配列について書いてみようと思います。