[JavaScript]条件分岐 if文と条件式
【例題1】
「10-5の答えは?」という問題の答えを入力してもらい、それが 5 の時は「正解!」と表示する。それ以外の時は「残念!と表示する。
⇓
【考え方】
画面に答えを入力してもらい、その値を「x」と定義する ・・・A
もし(if)xが5ならば( x = 5 ) →「正解!」と表示 ・・・B
あるいは(else) xが5でなかったら →「残念!」と表示 ・・・C
⇓
x = prompt ('答えを半角数字で入力してください'); ・・・A
if ( x == 5 ) { ・・・B
alert ('正解!');
} else { ・・・C
alert ('残念!');
}
構文
条件を満たす場合(trueのとき)に実行する処理
} else {
それ以外の場合全部(falseのとき)に実行する処理
}
※ elseは「条件を満たさない全ての場合」を表す
【ソースコード】
<p>10-5の答えは?</p>
<script>
var x;
x = prompt ('答えを半角数字で入力してください');
//答えを入力する画面を表示し、答えをxと定義する(A)
if ( x == 5 ) { // 条件:答えが5の場合(B)
alert ('正解!'); // 「正解!」と表示
} else { // それ以外の場合(C)
alert ('残念!'); // 「残念!」と表示
}
</script>
</body>
</html>
条件式について
== 左辺と右辺が等しい場合
!= 左辺と右辺が等しい場合
< 左辺が右辺より小さい場合
> 左辺が右辺より大きい場合
≤ 左辺が右辺以下の場合
≥ 右辺が左辺以下の場合
=== 左辺と右辺が厳密に等しい場合(データ型も一致している場合)
!== 左辺が右辺と等しくない、又はデータ型が同じでない場合
== は、入力された値のデータ型が違っても、trueと見なされるが、
=== は数字もデータ型も一致しなければtrueにならない。
【例題2】
数値を1つ入力する。それが3なら「入力した数字は3ですね」、3以外なら「入力した数字は3以外ですね」と表示させる
<script>
var n = prompt('数字を1つ入力してください','半角数字を入力してください')
//入力画面の表示
n = Number( n ); //入力した文字を数値扱いにする
if ( n === 3 ) { //入力したのが3の場合
alert( '入力した数字は3ですね' );
} else { //入力したのが3以外の場合
alert( '入力下数字は3以外ですね' );
}
</script>
・n = Number( n ); により、数値扱いとなり、n === 3 が使用できるようになる
ーNumber関数についてー
prompt( )に入力した値(戻り値)は文字列として扱われる。
それを数値として扱うために使われるのがNumber関数。
- 入力ダイアログボックスを表示する promptメソッドの戻り値は文字列です
- 戻り値を数値として扱うには、文字列を数値に変換する必要があります
- 通常は「Number関数(Numberはオブジェクトですが、関数として扱うことができます)」を使用します
- 関数は、ひとまとまりの処理を名前(関数名)で呼び出せるよにしたもの
- 関数は、メソッドと同じ様に引数を処理して値を返します
※先生のブログより引用
より複雑な条件分岐
「4以上 又は10未満」のような、1だけで表せない条件を指定する方法です。論理演算子を使います。
論理演算子
&& 左右の条件式がどちらも満たされる場合のみ「true」になる。and。
|| 左右のどちらかが満たされる場合に「true」になる。 or。
! trueとfalseを入れ替える
【例題3−1】テストの点数を入力し、合否判定する
表示するメッセージは以下の通り。
79点以下・・・「不合格です。再テストを受けましょう」
80点以上99点以下・・・「合格。よく頑張りました」100点 ・・・百点満点!おめでとう!!
【ソースコード】
<body>
<p>テストの合否の判定をします。</p>
<script>
var n = prompt('テストの点数を入力してください','半角数字を入力');
if (n < 80) { //79以下の場合
document.write('<br>不合格です。再テストを受けましょう');
} else if ( n>=80 && n<=99 ) { // 80以上かつ99以下の場合
document.write( '<br>合格。よく頑張りました' );
} else if (n == 100) { //100の場合
document.write('<br><h1>百点満点!おめでとう!!</h1>');
}
</script>
</body>
表示結果 ↓↓
「100」を入力した場合の表示 ↓↓
「80」を入力した場合の表示 ↓↓
「79」を入力した場合の表示 ↓↓
偶数か奇数かの判別
2で割った余りが0かどうかで判別する
【例題4】
①
<script>
var n = 10;
if ( n%2 === 0) { //n÷2の余りが0になるとき ※数値型なので===が使える
document.write (n, 'は偶数です');
} else { //n÷2の余りが0でないとき
document.write (n, 'は奇数です');
}
</script>
②別ウィンドウで数値を入力する場合(promptを使う)
【ソースコード】
<body>
<p>偶数か奇数かの判別をします。</p>
<p>ボタンを押すと入力ウィンドウが表示されます</p>
<button onclick="hanbetsu()">入力する</button>
<script>
function hanbetsu() {
var n = prompt('数値を半角で入力してください');
if (n%2==0){
alert(n +'は偶数です');
} else {
alert(n +'は奇数です');
}
}
</script>
</body>
【例題3−2】基準点を80点とする条件での条件分岐
<body>
<p>テストの合否を判定します</p>
<button onclick="point()">判定する</button>
<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>
</body>
}