[JavaScript]③条件分岐

• プログラムの流れ
• if文
• if~else文
• 論理演算子
• 例題　0~1000の数字を入力させ、桁数をブラウザ上に表示するプログラム

プログラムの流れ

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

if文

if (条件式){
  条件が真なら実行;
} else {
  条件を満たさないとき実行
}

• {と}で囲まれた部分をブロックという。
• ブロックの内には複数文を記述できる。

条件式の比較演算子

var boolean;
// == 左辺と右辺が等しければtrue
boolean =  (1 == 1);
document.write(boolean + '<br>');
// != 左辺と右辺が等しくないときtrue
boolean = (1 != 2);
document.write(boolean + '<br>');
// < 左辺が右辺より小さいときtrue
boolean = (1 < 1);
document.write(boolean + '<br>');
// <= 左辺が右辺以下のときtrue
boolean = (1 <= 1);
document.write(boolean + '<br>');
// === 左辺と右辺が等しく、かつデータ型も等しければtrue
boolean = (1 === 1);
document.write(boolean + '<br>');
boolean = (1 === '1');
document.write(boolean + '<br>');
// !== 左辺と右辺が等しくない、もしくはデータ型が等しくないならtrue
boolean = (1 !== 1);
document.write(boolean + '<br>');
boolean = (1 !== '1');
document.write(boolean + '<br>');
</script>

if~else文

• それ以外の場合はの意味
• いくらでも追加できる（多方向分岐）

/*3と5を入力した時ダイアログボックスを表示*/
var n = prompt('数値をひとつ入力','1');
n = ParseInt(n);
if ( n === 3 ){
  alert('入力値は3ですね');
}else if(n === 5){
  alert('入力値は5ですね');    
}else{
  console.log('入力値は'+n);
}
</script>

論理演算子

• 複数の組み合わせ条件を記述できる

var boolean;
// && 左辺と右辺どちらも真なら真
boolean =  (1 == 1 && 2 == 2);
document.write(boolean + '<br>');
// || 左辺と右辺どちらかが真なら真
boolean = (1 == 2 || 2 == 2);
document.write(boolean + '<br>');
// ! 真偽の値を反転
a = true;
document.write(!a);
</script>

まとめ

0~1000の数字を入力させ、桁数をブラウザ上に表示するプログラム

var num = prompt('1~1000の間で数値を入力','200');
num = parseInt(num);
if( num === 1000 ){
  document.write('4桁');         
}else if( num < 1000 && num >= 100 ){
  document.write('3桁');         
}else if( num < 100 && num >= 10 ){
  document.write('2桁');    
}else if( num < 10 && num >= 0 ){
  document.write('1桁');    
}else{
  document.write('正しい値を入力してください');    
}
</script>

d.hatena.ne.jp