初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

Javascript if文

Javascript if文

Javascriptを記述する上でif文という構文があります。
感覚的には記述方法こそ違うものの、Excel関数のIFに似ています。
もし条件を【a >10】と定義したなら、【True】。 それ以外(a < 10)なら【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

下記に具体例を記述してみます。

<script>
var a = prompt ('半角数字1桁を入力してください。','3')
if (a == 3) {
alert('入力した数値は3ですね');
} else {
alert('入力した数値は3以外ですね');
}
</script>

上記を日本語に訳すと 変数【a】をユーザーに入力してもらいます。

f:id:bellsmarket:20150129004237p:plain

その値が3だったらアラートで【入力した数値は3ですね】と表示。

f:id:bellsmarket:20150129004239p:plain

 

それ以外の条件(3以外)であれば、【入力した数値は3以外ですね】と表示するようになります。

f:id:bellsmarket:20150129004242p:plain

多方向分岐

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

if(条件式1){
  条件式1の条件を満たす場合に実行する処理
}else if(条件式2){
  条件式2の条件を満たさない場合に実行する処理
}else if(条件式3){
  条件式3の条件を満たさない場合に実行する処理
}else{
  すべての条件式の条件を満たさない場合に実行する処理

下記に例題を記述します。

<script>
var color = '黒'
if ( color == '青' || color == '緑' ) {
console.log('進む');
} else if( color == '黄' ) {
console.log('注意して進め');
} else if ( color=='赤') {
console.log('止まれ');
} else {
console.log('信号機の故障');
}
</script>

この場合は上から日本語にすると

「変数【color】は青です。
もし【青】もしくは【緑】なら【進む】を出力します。
その他に【黄】なら【注意して進め】を出力します。
その他に【赤】なら【止まれ】を出力します。
それ以外なら【信号機の故障】を出力します。」

になります。

topへ戻る