JavaScript勉強会

JavaScriptの学習日記

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

JavaScriptの学習メモ。

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

 

jsstudy.hatenablog.com

 

 

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

(p.90)

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

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

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

 

2つ以上の条件式で1つの条件式を作る

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

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

 

  • 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より小さい」という2つの条件式を評価しています。

 

||演算子

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

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

 

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

 

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

 

「 | 」の入力の仕方

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

 

!演算子

書式 !条件式

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

 

論理演算子 一覧

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

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

 

以下、補足です。

 

論理演算とは?

論理演算は、2進数(0と1)の足し算や掛け算などです。

 

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