JavaScript論理演算子と三項演算子OR AND NOT

今回は論理演算子と三項演算子について書きます。論理演算子には3個の記号があります。|| (OR:論理和), && (AND:論理積), ! ( NOT:否定)。三項演算子は3 つのオペランドをとる演算子です。疑問符 (?)コロン (:) で文を区切ります

三項演算子はJavaScriptの学習の中でも一番眠くなる項目です。興味がない場合は必要があるときに戻って読んでください。

論理演算子

論理演算子は「&&」「||」「!」の3種類あります。2つ式んＰ

記号名称英語だと
&&論理積AND
||論理和OR
!論理否定NOT

&& 論理積

&&（論理積）は全体の中から2個の条件に合った真ん中の部分になります。下の画像ではDの部分になります。

サンプルのコードは下記のようになります。

<script>
let nennrei = 30;
if (nennrei >= 20 && nennrei <= 40) {
document.write("年齢は20才以上40才以下です。");
} 
</script>

変数nennreiを2パターンの条件式で比較してさらにその両者に合致した場合に実行されます。

||（論理和）

||（論理和）は2個の条件式でどちらも当てはまる場合です、下の画像ではBCDの部分みたいな

サンプルは下のようになります。

<input type="text" id="tx"><br>
<button>ボタン</button>
<script>
function ck() {
//テキストボックスに入力された数字
let nennrei = document.getElementById("tx").value;
if (nennrei == 20 || nennrei <= 40) {
alert("年齢は20才か40才以下です。");
}
} 
</script>

サンプル(別窓）

テキストボックスに40以下の数字を入力すると条件は20または40以下ですよ～と言ってくれます。

!（論理否定）

!（論理否定）演算子は偏屈です。OKならNG、NGならOKにするといった変な演算子です。イコールの前につけると「イコールではありません」になります。

下のサンプルでは「!=」にしていますので、NOTになります。

<input type="text" id="tx"><br>
<button>ボタン</button>
<script>
function ck() {
//テキストボックスに入力された数字
let num = document.getElementById("tx").value;
if (num != 20) {
alert("入力された数字は20ではありません。");
}
} 
</script>

サンプル(別窓）

「～～～ではない」なのでテキストボックスに20以外の数字を入力するとアラートが表示されます。

三項演算子

条件演算子とも呼ばれています。書き方は次のようになります。

条件式? 処理1（おっけーの場合実行する） : 処理2（NGのとき実行される）;

条件式と比較しておっけーなら処理1が実行されて違う場合は処理2が実行されます。

サンプルは次のようになります。

<input type="text" id="tx"><br>
<button>ボタン</button>
<script>
function ck() {
//テキストボックスに入力された数字
let tennsuu = document.getElementById("tx").value;
let kekka = (tennsuu >= 70) ? "合格" : "不合格";
alert(kekka);
} 
</script>

サンプル(別窓）

テキストボックスに70以上の数字が入力されると処理1の「合格」が表示されます。70未満の時は処理2の「不合格」が表示されます。

三項演算子はif文で表示することができます。

<input type="text" id="tx"><br>
<button>ボタン</button>
<script>
function ck() {
//テキストボックスに入力された数字
let tennsuu = document.getElementById("tx").value;
if (tennsuu >= 70) {
alert("合格");
} else {
alert("不合格");
}
}
</script>

三項演算子を利用すると一行で済みますが、少し複雑な感じがしますのであまり使いません。

以上論理演算子と三項演算子の解説でした。

 

このページはこれで終了です。

お疲れ様でした！

前のページ　 INDEX　 次のページ

コメント

ホーム