javascript if文とfor文の使い方

このエントリーをはてなブックマークに追加
Pocket

javascriptのif文の使い方

if文は条件によって処理を分けたい場合に使う制御構文。例えばフォームに正しく値が入ってるかどうかでエラーを表示したりする場合にif文を使って処理を分けることができます。

書き方はこんな感じ。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic Loops & Desisions</title>
</head>
<body>
    <h1>Basic Loops & Desisions</h1>

    <p id="message"></p>

    
    <script src="js/basic-loops.js"></script>
</body>
</html>

basic-loops.js

var x = 10;
var y = 15;
var el = document.getElementById('message');

if (x > y) {
    el.innerHTML = 'X is BIG!!';
}else{
    el.innerHTML = 'Y is BIG!!';
}

やってることは単純で、X=10とY=15の変数を用意し、xはyより大きい場合（true）は最初の文を表示、そうでない場合（false）はelse以下の文を表示します。

ブラウザで見ると以下のようになります。
javascript if文とfor文の使い方
ここでは条件を判断するのに>を使いましたが、他にも以下のようなものがあります。

  • a > b : aがbより大きい
  • a < b : aがbより小さい
  • a >= b : aがb以上
  • a <= b : aがb以下
  • a == b : aがbと同じ
  • a != b : aがbと異なる
  • (a == b) && (a == c) : どちらの条件も成立
  • (a == b) || (a == c) : どちらか一方が成立
  • !(a == b) : 成立しない場合

これを先ほどのif()内で使えば立派な制御構文のできあがり。

var a = 1;
var b = 1;
var c = 1;

if((a == b) && (a == c)){
    document.write('全部１');
}

javascript for文の使い方

forは繰り返し構文。例えばブログの最新記事一覧のように同じ処理を繰り返してリストを作ったりするときに使います。

書き方はこんな感じ。

for (var i = 0; i < 5; i++){
    document.write(i);
}

i = 0で初期値をセットしておき、i < 5で繰り返し回数をセット。i++は繰り返しのカウンター１つ回すという意味。

ブラウザでチェックすると以下のようになります。
javascript if文とfor文の使い2

繰り返し回数には配列の長さを入れることで、配列内にあるデータをすべて書き出すということもできます。

var array = [1 , 3 , 5 , 7];
var list = '';

for(var i = 0; i < array.length; i++){
    list+=i + '番目 : ' + array[i] + '<br>';
}

document.getElementById('array_list').innerHTML = list;

これをブラウザで表示すると以下のようになります。
javascript if文とfor文の使い3