2014-10-12

2014-10-12

条件文Add Star

JavaScript

 

 

スクリプトには３通りの進み方がある（実行する流れ）

  1. 順次
  2. 分岐
  3. 反復

if文

  • 条件によって、ある処理を実行するかしないか選択して、処理の流れを分岐させたいときに使う構文
  • 条件がtrueのときは処理を実行する
  • 条件が成り立たないとき（falseのとき）は、処理を実行せずスキップします

 

 

if（条件式）｛

　　条件を満たす場合に実行する処理

｝else｛

　　条件を満たさない場合に実行する処理

｝

 

 


条件式の書き方
  • 条件式は、比較演算子を使って記述します

 

演算子説明使用例結果
== 左辺と右辺が等しい場合はtrue 1 == 1 true
!= 左辺と右辺が等しくない場合はtrue 1 != 2 true
< 左辺が右辺より小さい場合はtrue 1 < 1 false
<= 左辺が右辺以下の場合はtrue 1 <= 1 true
> 左辺が右辺より大きい場合はtrue 1 > 1 false
>= 左辺が右辺以上の場合はtrue 1 >= 1 true
=== 左辺と右辺が等しく、かつ

 

データ型も等しい場合はtrue

 1 === '1' false
!== 左辺と右辺が等しくない、もしくは

 

データ型が等しくない場合はtrue

 1 !== '1' true

 


if文のサンプル
  • ｛と｝で囲まれた部分を「ブロック」と呼びます
  • ブロックの中は、複数の文を処理として書くことができます

<script>
//if文
var n = prompt('半角数字１桁を入力してください', '3');
if(n === 3){
alert('入力した数値は3ですね');
}
</script>
  • 入力された数値が「3」のときのみ alert が表示され、それ以外ではプログラムは終了します

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>if文の利用</title>
<script>
var color = '青';
if(color === '青'){
    console.log('進む');
}else{
    console.log('止まる');
}
</script>
</head>
<body>
</body>
</html>

《実行結果》

 

f:id:web-javascript:20130523001620j:image

 


  1. 「var color = '青';」で、変数colorには「青」が代入されています
  2. 「color === '青'」で、一致しているので条件式の結果は「true」となります

注意
  • 「=」と「===」は別の役割

if ～ else文

  • elseは「それ以外の場合は」の意味です

<script>
//if else文
var n = prompt('数値を1つ入力してください');
if(n === 3){
alert('入力した数値は3ですね');
}else{
alert('入力したのは3以外ですね');
}
</script>


if ～ else if ～ else文

  • 条件によって、さらに細かく実行したい処理を選択したいときに使う構文です
<script>
//if else if else文
var n = prompt('数値を1つ入力してください');
if(n === 3){
alert('入力した数値は3ですね');
}elseif(n > 3){
alert('入力した数値は3より大きいですね');
}else{
alert('入力した数値は3より小さいですね');
}
</script>

 

else if ～はいくつでも重ねられる

 

<script>
//if else if else文
var n = prompt('数値を1つ入力してください');
if(n === 3){
alert('入力した数値は3ですね');
}elseif(n > 3){
alert('入力した数値は3より大きいですね');
}elseif(n < 3){
alert('入力した数値は3より小さいですね');
}else{
alert('数値を入力してください');
}
</script>

より複雑な条件式の書き方

  • 条件が1つでは表しきれない場合、論理演算子を使って複数の条件を記述できます

論理演算子

 

演算子説明使用例結果
&& 左辺と右辺のどちらも

 

trueの場合はtrue

 1 == 1 && 2 == 2 true
||

左辺と右辺のどちらかが

trueの場合はtrue

 1 == 2 || 2 == 2 true
! 真偽値を反転させる !a aがfalseの場合はtrue、

 

aがtrueの場合はfalse

 


《複雑な条件式》

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>複雑な条件式</title>
<script>
var color = '青';
if(color == '青' || color == '緑'){
    console.log('進む');
}else{
    console.log('止まる');
}
</script>
</head>
<body>
</body>
</html>


《実行結果》

 

f:id:web-javascript:20130523112013j:image

 


!演算子
  • 論理値を反転する働き
  • JavaScriptでは、nullやundefinedなど値がないことを表す特殊なものは「false」と等しい値として扱われます
  • この特徴を活かし、変数の中に値が代入されているかどうか、という判断を行う場合に「!演算子」を使う方法が用いられます

《!演算子の利用》

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>!演算子の利用</title>
<script>
var a;
if(!a){
    console.log('aは空です');
}
</script>
</head>
<body>
</body>
</html>


《実行結果》

 

f:id:web-javascript:20130523113549j:image

 


  1. 宣言だけして初期化されていない変数には「undefined」という特殊な値が規定値（初期値）として入ります
  2. 「undefined」は「false」と同じ扱いなので、これを反転させると「true」となり、if文のブロック内が実行されます

多方向分岐

  • if文に「else if」ブロックを追加します

 

 

if（条件式1）｛

　　条件式1の条件を満たす場合に実行する処理

｝else if（条件式2）｛

　　条件式2の条件を満たさない場合に実行する処理

｝else if（条件式3）｛

　　条件式3の条件を満たさない場合に実行する処理

｝else｛

　　すべての条件式の条件を満たさない場合に実行する処理

｝

 

 


《if文による多方向分岐》

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>if文による多方向分岐</title>
<script>
var color = '黒';
if(color == '青' || color=='緑'){
    console.log('進む');
}elseif(color == '黄'){
    console.log('急いで進む');
}elseif(color == '赤'){
    console.log('止まる');
}else{
    console.log('信号機の故障');
}
</script>
</head>
<body>
</body>
</html>


《実行結果》

 

f:id:web-javascript:20130523132553j:image

 


  1. 条件式1（信号の色が青か緑）がfalse
  2. 条件式2（信号の色が黃）がfalse
  3. 条件式3（信号の色が赤）がfalse
  4. それ以外の選択（信号機の故障）を表示


 

 

  • 「分岐」とは、処理が多方向にわかれること
  • if文でスクリプトの分岐構造をつくることができる
  • 条件式は比較演算子を使って記述され、結果が論理値となる