くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[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 ('残念!'); 
}

 

 構文

if (条件式) {
   条件を満たす場合(trueのとき)に実行する処理
} else {
   それ以外の場合全部(falseのとき)に実行する処理
}

 

※ elseは「条件を満たさない全ての場合」を表す

 

f:id:pleasure10501:20150328181228p:plain

f:id:pleasure10501:20150328181357p:plain

ソースコード

<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>

表示結果 ↓↓

f:id:pleasure10501:20150328231153p:plain

「100」を入力した場合の表示 ↓↓

f:id:pleasure10501:20150328231126p:plain

「80」を入力した場合の表示 ↓↓

f:id:pleasure10501:20150328231324p:plain

「79」を入力した場合の表示 ↓↓

f:id:pleasure10501:20150328231343p:plain

偶数か奇数かの判別

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>

f:id:pleasure10501:20150329152448p:plain

②別ウィンドウで数値を入力する場合(promptを使う)

f:id:pleasure10501:20150329153810p:plain

ソースコード

<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>

}