条件分岐 - if文

if文

if文は条件によって処理を分けて行うときに使います。
条件には比較演算子や論理演算子を使った条件式を指定します。

a = 5;
if(a % 2 == 0) {
 document.write(a, 'は偶数です。');
} else {
 document.write(a, 'は奇数です。');
}
  • if(a % 2 == 0) :a÷2の余りが0のとき
  • else:a÷2の余りが0ではないとき


※5÷2のあまりは1なので、else以下の処理をします。

偶数・奇数の判別
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>if文</title>
<script>
var num;

function guki() {
  num = prompt('数値を入力してください。', '半角数字で入力');

if(num % 2 == 0) {
 alert(num + 'は偶数です。');
} 
else {
 alert(num + 'は奇数です。');
}

}
</script>
</head>
<body>
<h1>偶数か奇数かの判別します</h1>
<p>ボタンをクリックすると数値を入力するウインドウが表示されます。</p>
<p><button onclick="guki()">判別する</button></p>
</body>
</html>
  • if(num % 2 == 0) :num÷2の余りが0のとき
  • else:num÷2の余りが0ではないとき
基準値に対しての判別
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset='UTF-8'>
<title>if文のテスト</title>
<script>
var score;	//点数
var refValue = 80; //基準値
var compValue = 100; //満点

score = prompt('点数を入力してください', '半角数字で入力');	

if (score == compValue) {
  document.write('<h1>百点満点!</h1>');
}
if (score >= refValue) {
  document.write('<h1>合格です</h1>');
  document.write('<p>よくがんばりました</p>');
} 
else {
  document.write('<h1>不合格です</h1>');
  document.write('<p>もう少しがんばりましょう</p>');
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset='UTF-8'>
<title>if文のテスト</title>
<script>
var score;	//点数
var refValue = 80;	//基準値
var compValue = 100; //満点

function point() {
  score = prompt('点数を入力してください。', '半角数字で入力');	

if (score >= refValue) {
	
  if (score == compValue) {
    document.write('<h1>百点満点!</h1>');
    document.write('<p>よくがんばりました。</p>');
  } 
  else {
    document.write('<h1>合格です。</h1>');
    document.write('<p>よくがんばりました。</p>');
  }
}
else {
  document.write('<h1>不合格です。</h1>');
  document.write('<p>もう少しがんばりましょう。</p>');
}

}
</script>
</head>
<body>
<h1>基準値をもとに評価します</h1>
<p>ボタンをクリックすると点数を入力するウインドウが表示されます。</p>
<p><button onclick="point()">基準値をもとに評価する</button></p>
</body>
</html>
if〜else if〜else文
  • 複数の条件のどれにあてはまるかによって、それぞれ違う処理を行いたいときは、else ifを使います
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>if文</title>
<script>
var num;

function dgt() {
num = prompt('0から1000までの数値を入力して下さい。','半角数字で入力');
  document.write(num + 'は');

if (0 <= num && num <= 9) {
  document.write('1桁の数です。');
}
else if (10 <= num && num <= 99) {
  document.write('2桁の数です。');
}
else if (100 <= num && num <= 999) {
  document.write('3桁の数です。');
}
else {
  document.write('4桁の数です。');
}

}
</script>
</head>
<body>
<h1>0から1000までの数値の桁数を判別します</h1>
<p>ボタンをクリックすると数値を入力するウインドウが表示されます。</p>
<p><button onclick="dgt()">判別する</button></p>
</body>
</html>
  • if (0 <= num && num <= 9) :numが0以上9以下のとき
  • else if (10 <= num && num <= 99) :numが10以上99以下のとき
  • else if (100 <= num && num <= 999) :numが100以上999以下のとき
  • else:numが上記以外の数字のとき

※実行する処理はどれかひとつです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset='UTF-8'>
<title>if文で春夏秋冬を判断する</title>
<script>
var month;

function season() {
month = prompt('月を入力してください', '1から12の値を半角数字を入力');

if ((month == 12) || (month == 1) || (month == 2)) {
  document.write('<h1>冬です。</h1>');
} else if ((month >= 3) && (month <= 5)) {
  document.write('<h1>春です。</h1>');
} else if ((month >= 6) && (month <= 8)) {
  document.write('<h1>夏です。</h1>');
} else if ((month >=9) && (month <=11)) {
  document.write('<h1>秋です。</h1>');
}

}
</script>
</head>
<body>
<h1>月別に季節を判別</h1>
<p>ボタンをクリックすると月を入力するウインドウが表示されます。</p>
<p><button onclick='season()'>月別に季節を判別する</button></p>
</body>
</html>
if文のネスト
  • if文をはじめとする制御文では、処理の中にさらに制御文を含めることができます
  • このような入れ子のことを「ネスト」と呼びます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>if文のネスト</title>
<script>
var score;
var refValue = 80;
var compValue = 100;


function point() {
  score = prompt('点数を入力して下さい。', '半角数字で入力');

if(score >= refValue) {
	
  if(score == compValue) {
    alert('満点です。');
  } 
  else {
    alert('もう少しです。');
  }
	
} 
else {
    alert('頑張りましょう。')
}

}
</script>
</head>
<body>
<h1>点数を評価</h1>
<p>ボタンをクリックすると点数を入力するウインドウが表示されます。</p>
<p><button onclick="point()">評価する</button></p>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>if文のネスト</title>
<script>
var score;
var refValue = 70;

function point() {
  score = prompt('点数を入力して下さい。','半角数字で入力');
  document.write('あなたの点数は', score, '点です。<br>');

if (score >= refValue) {
		
  if (score == refValue) {
    document.write('平均点です。<br>');
    document.write('次もがんばりましょう!');
  } 
  else {
    document.write('平均点以上です。<br>');
    document.write('よくできました!');
  }

}
else {
  document.write('平均まであと', (refValue - score), '点<br>');
  document.write('もっとがんばりましょう!');
}

}
</script>
</head>
<body>
<h1>平均点数を基準に評価します</h1>
<p>ボタンをクリックすると点数を入力するウインドウが表示されます。</p>
<p><button onclick="point()">平均点数と比べて評価する</button></p>
</body>
</html>

まとめ

  • 「もし〜ならば〜を行う」という処理を行う「if文」
  • 「そうでなければ〜を行う」という処理を行う「if else文」
  • 比較演算子は、「true」もしくは「false」を戻す演算子
  • 複数のステートメントをまとめるブロック
  • 「if else文」を組み合わせることで、2つ以上の細かな条件を設定できる
  • 「||」演算子は、どれかひとつが「true」のときに「true」を返す
  • 「&&」演算子は、どれも「true」のときだけ「true」を返す