LabEx
ログイン登録

JavaScript における論理演算子を探求する

JavaScriptBeginner
オンラインで実践に進む

はじめに

この実験では、参加者はハンズオンなウェブ開発の演習を通じて JavaScript の基本的な論理演算子を探求します。この実験では、学習者が HTML ファイルを作成し、AND (&&)、OR (||)、および NOT (!) の論理演算子の実際のデモを実装することを通じて、これらの演算子が JavaScript プログラミングでどのように機能するかを包括的に理解するように導きます。

段階的なアプローチに従うことで、学生はさまざまな論理演算の結果を表示するインタラクティブなウェブページをセットアップし、これらの演算子が条件を評価してブール値を返す方法を理解することができます。この実験では、運転適格性やユーザー認証などの現実世界のシナリオを使って、JavaScript における論理演算子の応用を示すことで、実践的な学習を強調しています。

論理演算子のデモ用の HTML ファイルをセットアップする

このステップでは、JavaScript の論理演算子をデモするための基本的な HTML ファイルを作成します。論理演算を探求するためのスクリプトセクションを持つ簡単なウェブページ構造をセットアップします。

WebIDE を開き、~/project ディレクトリに移動します。WebIDE のインターフェイスを使って、新しいファイル logical-operators.html を作成します。

ここに使用する初期の HTML 構造を示します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Logical Operators Demo</title>
  </head>
  <body>
    <h1>Exploring Logical Operators in JavaScript</h1>

    <div id="output"></div>

    <script>
      // We'll add our JavaScript logical operator examples here
    </script>
  </body>
</html>

この HTML ファイルの主要なコンポーネントを分解してみましょう。

  • <!DOCTYPE html> 宣言は、これが HTML5 ドキュメントであることを指定します
  • ページを説明するためにタイトルと見出しを追加しました
  • <div id="output"> は、論理演算子の結果を表示するために使用されます
  • <script> タグは、JavaScript コードを記述する場所です

このファイルをブラウザで開いたときの例の出力です。

Exploring Logical Operators in JavaScript

AND (&&) 論理演算を実装する

このステップでは、JavaScript の AND (&&) 論理演算子について学びます。AND 演算子は、両方のオペランドが真の場合にのみ true を返し、それ以外の場合は false を返します。

前のステップで作成した logical-operators.html ファイルを開きます。<script> タグの中に、AND 演算子を示すための次の JavaScript コードを追加します。

// AND (&&) Logical Operator Demonstration
function demonstrateAndOperator() {
  let output = document.getElementById("output");

  // Example 1: Simple boolean AND
  let isAdult = true;
  let hasLicense = true;
  let canDrive = isAdult && hasLicense;
  output.innerHTML += `Can drive? ${canDrive}<br>`;

  // Example 2: Comparison AND
  let age = 25;
  let hasValidLicense = age >= 18 && age <= 65;
  output.innerHTML += `Valid driving age? ${hasValidLicense}<br>`;

  // Example 3: Multiple conditions
  let isMember = true;
  let hasDiscount = true;
  let canGetSpecialOffer = isMember && hasDiscount;
  output.innerHTML += `Special offer available? ${canGetSpecialOffer}<br>`;
}

// Call the function when the page loads
demonstrateAndOperator();

AND (&&) 演算子を分解してみましょう。

  • 両方の条件が真の場合にのみ true を返します
  • 最初の例では、canDrive は isAdult と hasLicense の両方が真の場合にのみ true になります
  • 2 番目の例では、比較演算子と AND を使っています
  • 3 番目の例は、AND が複数のブール条件を結合する方法を示しています

ブラウザでの例の出力です。

Can drive? true
Valid driving age? true
Special offer available? true

OR (||) 論理演算を実装する

このステップでは、JavaScript の OR (||) 論理演算子について学びます。OR 演算子は、少なくとも 1 つのオペランドが真の場合に true を返し、それ以外の場合は false を返します。

logical-operators.html ファイルを開き、<script> タグの中に OR 演算子を示す新しい関数を追加します。

// OR (||) Logical Operator Demonstration
function demonstrateOrOperator() {
  let output = document.getElementById("output");

  // Example 1: Simple boolean OR
  let isWeekend = false;
  let isHoliday = true;
  let canRelax = isWeekend || isHoliday;
  output.innerHTML += `Can relax? ${canRelax}<br>`;

  // Example 2: Comparison OR
  let age = 16;
  let hasParentalConsent = true;
  let canAttendEvent = age >= 18 || hasParentalConsent;
  output.innerHTML += `Can attend event? ${canAttendEvent}<br>`;

  // Example 3: Multiple conditions
  let hasCoupon = false;
  let isNewCustomer = true;
  let canGetDiscount = hasCoupon || isNewCustomer;
  output.innerHTML += `Eligible for discount? ${canGetDiscount}<br>`;
}

// Call the function when the page loads
demonstrateOrOperator();

OR (||) 演算子を分解してみましょう。

  • 少なくとも 1 つの条件が真の場合に true を返します
  • 最初の例では、isHoliday が真なので canRelax は真になります
  • 2 番目の例は、比較とブール条件とともに OR をどのように使用できるかを示しています
  • 3 番目の例は、複数の条件を結合することを示しています

ブラウザでの例の出力です。

Can relax? true
Can attend event? true
Eligible for discount? true

NOT (!) 論理演算を実装する

このステップでは、JavaScript の NOT (!) 論理演算子について学びます。NOT 演算子は、式のブール値を反転させ、真を偽に、偽を真に変えます。

logical-operators.html ファイルを開き、<script> タグの中に NOT 演算子を示す新しい関数を追加します。

// NOT (!) Logical Operator Demonstration
function demonstrateNotOperator() {
  let output = document.getElementById("output");

  // Example 1: Basic NOT operation
  let isRaining = false;
  let isSunny = !isRaining;
  output.innerHTML += `Is it sunny? ${isSunny}<br>`;

  // Example 2: NOT with comparison
  let age = 16;
  let isAdult = !(age < 18);
  output.innerHTML += `Is an adult? ${isAdult}<br>`;

  // Example 3: Negating a complex condition
  let hasTicket = true;
  let isCrowded = true;
  let canEnter = !(hasTicket && isCrowded);
  output.innerHTML += `Can enter? ${canEnter}<br>`;
}

// Call the function when the page loads
demonstrateNotOperator();

NOT (!) 演算子を分解してみましょう。

  • 式のブール値を反転させます
  • 最初の例では、isRaining が偽なので isSunny は真になります
  • 2 番目の例は、比較とともに NOT を使用しています
  • 3 番目の例は、より複雑な条件での NOT を示しています

ブラウザでの例の出力です。

Is it sunny? true
Is an adult? false
Can enter? false

Web ページ上に論理演算結果を表示する

このステップでは、学んだすべての論理演算子を組み合わせて、ウェブページに結果を表示する包括的なデモを作成します。論理演算子の結果を表示するためのより構造化されたアプローチを含めるように HTML ファイルを変更します。

次の完全なコードで logical-operators.html ファイルを更新します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Logical Operators Demo</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
      }
      .result {
        margin: 10px 0;
        padding: 10px;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <h1>JavaScript Logical Operators Exploration</h1>

    <div id="andResults" class="result">
      <h2>AND (&&) Operator Results</h2>
    </div>

    <div id="orResults" class="result">
      <h2>OR (||) Operator Results</h2>
    </div>

    <div id="notResults" class="result">
      <h2>NOT (!) Operator Results</h2>
    </div>

    <script>
      // Function to display results
      function displayResult(elementId, message) {
        const element = document.getElementById(elementId);
        const resultLine = document.createElement("p");
        resultLine.textContent = message;
        element.appendChild(resultLine);
      }

      // AND (&&) Operator Demonstration
      function demonstrateAndOperator() {
        let isAdult = true;
        let hasLicense = true;
        let canDrive = isAdult && hasLicense;
        displayResult("andResults", `Can drive? ${canDrive}`);

        let age = 25;
        let hasValidLicense = age >= 18 && age <= 65;
        displayResult("andResults", `Valid driving age? ${hasValidLicense}`);
      }

      // OR (||) Operator Demonstration
      function demonstrateOrOperator() {
        let isWeekend = false;
        let isHoliday = true;
        let canRelax = isWeekend || isHoliday;
        displayResult("orResults", `Can relax? ${canRelax}`);

        let age = 16;
        let hasParentalConsent = true;
        let canAttendEvent = age >= 18 || hasParentalConsent;
        displayResult("orResults", `Can attend event? ${canAttendEvent}`);
      }

      // NOT (!) Operator Demonstration
      function demonstrateNotOperator() {
        let isRaining = false;
        let isSunny = !isRaining;
        displayResult("notResults", `Is it sunny? ${isSunny}`);

        let age = 16;
        let isAdult = !(age < 18);
        displayResult("notResults", `Is an adult? ${isAdult}`);
      }

      // Run all demonstrations when page loads
      function runAllDemonstrations() {
        demonstrateAndOperator();
        demonstrateOrOperator();
        demonstrateNotOperator();
      }

      // Call the main function when the page loads
      window.onload = runAllDemonstrations;
    </script>
  </body>
</html>

このバージョンの主な改善点：

  • 各論理演算子用にスタイル付けされた結果セクションを追加
  • 結果を表示する displayResult() 関数を作成
  • すべての演算子のデモを実行する runAllDemonstrations() 関数を実装
  • 読みやすさを向上させるための基本的な CSS を追加
  • ページが読み込まれた後にすべてのスクリプトが実行されるように window.onload を使用

例のブラウザ出力は、個別のスタイル付けされたセクションで AND、OR、および NOT 演算子の結果を表示します。

まとめ

この実験では、参加者はハンズオンなウェブ開発の演習を通じて JavaScript の論理演算子を探求しました。この実験は、専用の出力 div 付きの HTML ファイルを作成することから始まり、論理演算を示すための構造化された環境を整えました。参加者は AND (&&)、OR (||)、および NOT (!) 演算子について学び、これらの論理演算子がブール式をどのように評価し、プログラムのフローを制御するかを示す実際の例を実装しました。

インタラクティブなアプローチにより、学習者は HTML ファイル内に直接 JavaScript コードを書くことで、各論理演算子の動作を理解することができました。ブール値を操作し、比較技術を使用することで、参加者は論理演算子が JavaScript プログラミングにおいて条件付きの決定を行い、より複雑な論理評価を作成するためにどのように使用できるかを理解することができました。

関連 JavaScript コース
初心者向け JavaScript

初心者向け JavaScript

javascriptweb-development
三目並べウェブアプリを作成する

三目並べウェブアプリを作成する

javascriptweb-development
モグラたたき Web ゲームの作成

モグラたたき Web ゲームの作成

javascriptweb-development