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



