JavaScript勉強会

JavaScriptの学習日記

3.5 時間で異なるメッセージを表示する　《論理演算子》　【JavaScript超入門】

JavaScript 読書メモ

JavaScriptの学習メモ。

今日は『確かな力が身につくJavaScript「超」入門』の第３章を読んでみます。

 

jsstudy.hatenablog.com

 

 

3.5 時間で異なるメッセージを表示する　《論理演算子》

(p.90)

ここまでのif文では「○○が△△だったら」や「××が□□より大きかったら」というかたちの条件式を書いてきました。

それでは、「時刻が19時以降で、かつ21時より前」とか、「9時台、もしくは15時台」というような条件式はどうやって書けばよいでしょう？

今回は、新しく紹介する方法で、２つ以上の条件式から１つの条件を設定して、ページを開いたときの時間によって異なるメッセージを表示させてみます。

 

２つ以上の条件式で１つの条件式を作る

ページを開いたときにアラートダイアログボックスを表示しますが、ただ表示するのではなく、そのときの時間によってメッセージを切り替えます。

メッセージの内容と、切り替える条件は次のようにします。

 

  • 19時以降21時までは「お弁当30ï¼…OFF」
  • 9時台または15時台なら「お弁当1個買ったら1個おまけ！」
  • それ以外なら「お弁当はいかがですか」

 

サンプルコード

時間帯でメッセージを切り替える

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>3-05_logical</title>
</head>
<body>
  <h1>時間で異なるメッセージを表示する</h1>
  <h2>2つ以上の条件式で1つの条件を作る</h2>
  <script>
    var hour = new Date().getHours();

    if (hour >= 19 && hour < 21) {
      window.alert('お弁当30%OFF!');
    } else if (hour === 9 || hour === 15) {
      window.alert('お弁当1個買ったら1個おまけ！');
    } else {
      window.alert('お弁当はいかがですか');
    }
  </script>
</body>
</html>

 

実行結果 

ページを開いた時刻によってアラートダイアログボックスのメッセージが変わります。

 

f:id:jsstudy:20170409232051p:plain

 

論理演算子

(p.93)

&&演算子

書式　条件式1　&&　条件式2

&& は、「左側の条件式がtrue、かつ右側の条件式もtrue」になるとき、全体の評価結果がtrueになります。

 

    if (hour >= 19 && hour < 21) {

 

変数hourがの値が「19以上　かつ　21より小さい」という２つの条件式を評価しています。

 

||演算子

書式　条件式1　||　条件式2

|| は、「左側の条件式、もしくは右側の条件式、少なくともどちらか片方がtrue」になるとき、全体の評価結果がtrueになります。

 

    } else if (hour === 9 || hour === 15) {

 

変数hourの値が「9　もしくは　15」という２つの条件式を評価しています。

 

「 | 」の入力の仕方

「 | 」（バーティカルバー、縦線）は、日本語キーボードでは[Shift]キー＋[￥]を押せば入力できます。

 

!演算子

書式　!条件式

ある条件式の前に「!」がついている場合、その条件式の評価結果がfalseのとき、trueになります。

 

論理演算子 一覧

(p.94)　aもbも条件式

演算子 意味
a && b aとbが両方trueのとき、全体の評価結果がtrue
a || b aかbの少なくともどちらか1つがtrueのとき、全体の評価結果がtrue
! a aがtrueでないとき、評価結果がtrue

 

以下、補足です。

 

論理演算とは？

論理演算は、２進数（０と１）の足し算や掛け算などです。

 

itpro.nikkeibp.co.jp

 

コンピュータの世界では，計算のことを演算（えんざん）と呼びます。

コンピュータにできる演算の種類には，数学の加減乗除の四則演算の他にもいくつかの種類があります。

その中でも，よく使われるのが論理演算（ろんりえんざん）です。

 

四則演算なら，加算結果，減算結果，乗算結果，除算結果が得られます。

例えば，5＋3という加算の演算結果は8になります。

 

これは論理演算も同様です。データを演算して，その結果を得ます。

例えば，1 AND 1という論理演算の結果は1になります。

 

論理演算には，「AND演算」，「OR演算」，「XOR演算」，「NOT演算」の4種類があります。

論理演算と四則演算の大きな違いは，論理演算が2進数の1けた（＝1ビット）を対象としていることと，演算結果が決してけた上がりしないことです。

 

論理演算は，0または1だけを演算し，その結果も0または1のいずれかになります。

2進数の0が偽（ぎ＝ウソ）を表し，1が真（しん＝ホント）を表していると考えれば，論理演算は真偽を演算するものとみなせるので，論理演算の結果を表す表のことを「真理値表（しんりちひょう）」とも呼びます。

 

論理演算の真理値表は丸暗記する必要ありません。演算の意味が理解できれば，すぐに覚えられるからです。

 

AND　論理積

AND演算（アンドえんざん）の機能は，英語のANDの意味そのものです。

1と1のAND演算結果だけが1になります。

演算する2つの値の両方が1（真）なら演算結果が1（真）になるのです。

AND演算のことを「論理積（ろんりせき）」とも呼びます。

 

OR　論理和

OR演算（オアえんざん）の機能も，英語のORそのものです。

演算する2つの値のどちらか一方が1（真）なら演算結果が1（真）になります。

OR演算のことを「論理和」とも呼びます。

 

XOR　排他的論理和

XOR演算（エックスオアえんざん）は，eXclusive ORという言葉の略称で，「排他的論理和（はいたてきろんりわ）」とも呼ばれます。

これは，OR演算に似ているが排他的である，すなわち他を除外するという意味です。

OR演算の真理値表とXOR演算の真理値表を比べて見ると，1と1の演算結果だけが異なっています。これが排他的ということです。

演算する値が同じなら（1と1，または0と0），演算結果は0になります。

 

NOT　論理否定

NOT演算（ノットえんざん）は，単項演算（たんこうえんざん）です。

単項演算とは，1つの値に対して演算を行うものです。

AND演算，OR演算，XOR演算は2つの値に対して演算を行いましたが，NOT演算は1つの値を反転する演算を行います。

反転するとは，0なら1に，1なら0にすることです。

2進数は0と1しかないのですから，0の反転は1で，1の反転は0です。

NOT演算のことを「論理否定（ろんりひてい）」とも呼びます。

 

論理演算の結果を「ベン図」で確認してみます。

ベン図 : プレゼンや思考整理に役立つ【図・表・グラフ】25パターン - NAVER まとめ

ベン図

グループ（集合）同士の包含関係、または各要素が位置する領域を示す。

f:id:jsstudy:20170409220550j:plain

 

Javascript 演算子 2 - 初心者のWEBデザイン

f:id:jsstudy:20170409234829g:plain

 

http://taishi-blog.com/logical-operation/

f:id:jsstudy:20170409220656j:plain

 

f:id:jsstudy:20170409220706j:plain

 

f:id:jsstudy:20170409220731j:plain

 

f:id:jsstudy:20170409220741j:plain

 

JavaScriptの論理演算子

developer.mozilla.org

 

論理 AND (&&)

論理 OR (||)

論理 NOT (!)

 

まとめ

複数の条件式をつなげるときは、論理演算子を使えばOK

 

 

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

 

Â