前回の変数や演算子に引き続き、今回は繰り返し処理(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の段という具合に段を変える処理を分けています。これが適切な書き方なのかはわかりませんが、とりあえずこれで表示できました。
次回は配列について書いてみようと思います。