探索 JavaScript 中的逻辑运算符 - 从入门到实践

介绍

在本实验中，参与者将通过动手实践的网络开发练习，探索 JavaScript 中的基本逻辑运算符。实验将引导学习者创建一个 HTML 文件，并实现 AND (&&)、OR (||) 和 NOT (!) 逻辑运算符的实际演示，从而全面理解这些运算符在 JavaScript 编程中的工作原理。

通过逐步操作，学生将搭建一个交互式网页，展示各种逻辑操作的结果，帮助他们理解这些运算符如何评估条件并返回布尔值。实验强调实践学习，通过使用现实场景（如驾驶资格和用户身份验证）来展示逻辑运算符在 JavaScript 中的应用。

设置 HTML 文件以演示逻辑运算符

在这一步中，你将创建一个基本的 HTML 文件，作为演示 JavaScript 逻辑运算符的基础。我们将搭建一个简单的网页结构，并在脚本部分中探索逻辑操作。

打开 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 时返回 true，否则返回 false。

打开你在上一步中创建的 logical-operators.html 文件。在 <script> 标签内，添加以下 JavaScript 代码来演示 AND 运算符：

// 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 时，它才返回 true
在第一个示例中，canDrive 仅在 isAdult 和 hasLicense 都为 true 时为 true
第二个示例将比较运算符与 AND 结合使用
第三个示例展示了 AND 如何组合多个布尔条件

浏览器中的示例输出：

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

实现 OR (||) 逻辑操作

在这一步中，你将学习 JavaScript 中的 OR (||) 逻辑运算符。OR 运算符在至少一个操作数为 true 时返回 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 (||) 运算符：

如果至少一个条件为 true，则返回 true
在第一个示例中，canRelax 为 true，因为 isHoliday 为 true
第二个示例展示了如何将 OR 与比较和布尔条件结合使用
第三个示例演示了如何组合多个条件

浏览器中的示例输出：

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

实现 NOT (!) 逻辑操作

在这一步中，你将学习 JavaScript 中的 NOT (!) 逻辑运算符。NOT 运算符会反转表达式的布尔值，将 true 变为 false，将 false 变为 true。

打开 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 (!) 运算符：

它会反转表达式的布尔值
在第一个示例中，isSunny 变为 true，因为 isRaining 为 false
第二个示例展示了 NOT 与比较运算符的结合使用
第三个示例演示了 NOT 与更复杂条件的结合

浏览器中的示例输出：

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

在网页上显示逻辑操作结果

在这一步中，你将结合所学的所有逻辑运算符，创建一个综合演示，并在网页上显示结果。我们将修改 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 逻辑运算符探索</h1>

    <div id="andResults" class="result">
      <h2>AND (&&) 运算符结果</h2>
    </div>

    <div id="orResults" class="result">
      <h2>OR (||) 运算符结果</h2>
    </div>

    <div id="notResults" class="result">
      <h2>NOT (!) 运算符结果</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 编程中使用逻辑运算符来做出条件判断并创建更复杂的逻辑评估。