THE HAM MEDIA BLOG

実はまだまだ知らない事が多いJavaScriptの基本、
ちゃんと勉強しないとなーなんて思うのですが、
ちょくちょく気づいた時にしかできなかったりします。

そんな今回「あれ？なんだっけな、これ？」
なんて思ったのが「?」の使いどころ。
調べてみたら、条件演算子ということ。
どういう使い方ができるのか、少し試してみた。

条件演算子を使ってみた

条件演算子を使ったサンプルを作ってみる事にした。
ついでにifの条件分岐とちょっとだけ正規表現とかも入れてみた。

$(function(){
  $('button').click(function(){
    $('form').attr('action','');
    xx = $('input').val();
    if(xx >= 21 || xx <= 0){
      alert('数字は１から20の間で入力してください。');
      return false;
    }else if(xx.match(/\D/)){
      alert('数字を入力してください');
      return false;
    }else{
      yy = (xx >= 10) ? "big" : "small";
      $('div.preview p.demo01').text(xx+'は'+yy);
      return false;
    };
  });
});

またわかり辛い例を作ってしまった。
1〜20の数字を入れたときのbig or smallの判定を条件演算子を使っている。
あとは条件分岐のifで分岐させてしまった。
その部分も比較演算子とかでもできるのだろうか。
・・・それは別の機会に考えてみることにしよう。
とりあえず簡易判定には使えそうだ。

もう少しわかりやすい条件演算子例

もう少し部分的に作ってみた

$(function(){
  var xyz = 10; 
  var zz = (xyz >= 5) ? "５以上です(true)" : "５以下です(false)";
  $('p#demo00').text('xyzが10の時zzは'+zz);
});

ついでに比較演算子も

ついでに比較演算子についても勉強。
特に、変数に入れる段階で指定する場合は何がはいるのかを確認。

$(function(){
  var hoge = 2;
  var hoge2 = 2;
  var Display1 = (hoge == hoge2);
  var Display2 = (hoge != hoge2);
  var Display3 = (hoge < hoge2);
  var Display4 = (hoge <= hoge2);
  var Display5 = (hoge > hoge2);
  var Display6 = (hoge >= hoge2);
  var Display7 = (hoge === hoge2);
  $('#test1').text('hoge == hoge2は　'+Display1);
  $('#test2').text('hoge != hoge2は　'+Display2);
  $('#test3').text('hoge < hoge2は　'+Display3);
  $('#test4').text('hoge <= hoge2は　'+Display4);
  $('#test5').text('hoge > hoge2は　'+Display5);
  $('#test6').text('hoge >= hoge2は　'+Display6);
  $('#test7').text('hoge === hoge2は　'+Display7);
});

なるほど、trueとかの判定が返ってくるのですね。
これも勉強になりました。