在 JavaScript 中执行算术运算 - 掌握基础运算符与技巧

介绍

在本实验中，参与者将探索 JavaScript 中的基本算术运算，学习如何使用各种数学运算符操作数字。实验将带领你全面了解如何设置 HTML 环境，实现加法、减法、乘法和除法等基本算术运算，并理解更高级的概念，如取模（modulo）和递增/递减运算符。

参与者将从创建一个包含嵌入式 JavaScript 部分的 HTML 文件开始，然后通过练习不同的算术技巧逐步提升技能。通过动手编码练习，学习者将获得执行数学计算、理解运算符优先级以及探索前缀和后缀递增/递减操作的实践经验，这些是 JavaScript 编程中必不可少的技能。

设置用于 JavaScript 算术运算的 HTML 文件

在这一步中，你将创建一个基本的 HTML 文件，作为执行 JavaScript 算术运算的基础。我们将设置一个简单的 HTML 结构，并包含一个嵌入式 JavaScript 部分，以演示基本的算术功能。

首先，打开 WebIDE 并导航到 ~/project 目录。右键单击文件资源管理器并选择“新建文件”，创建一个名为 arithmetic.html 的新文件。

将以下 HTML 代码复制并粘贴到 arithmetic.html 文件中：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Arithmetic Operations</title>
  </head>
  <body>
    <h1>JavaScript Arithmetic Operations</h1>

    <script>
      // We'll add our JavaScript code here in this section
      console.log("HTML file is ready for arithmetic operations!");
    </script>
  </body>
</html>

让我们分解一下这个 HTML 文件的关键组成部分：

<!DOCTYPE html> 声明这是一个 HTML5 文档
<head> 部分包含文档的元数据
<body> 包含可见内容
<script> 标签是我们编写 JavaScript 代码的地方

为了验证文件是否正确创建，你可以在浏览器的开发者控制台中打开该文件。初始的 console.log() 将帮助你确认文件已正确设置。

实现基本算术运算符 (+, -, *, /)

在这一步中，你将学习如何使用 JavaScript 中的基本数学运算符执行算术运算：加法（+）、减法（-）、乘法（*）和除法（/）。

打开上一步中创建的 arithmetic.html 文件，并修改 <script> 部分以包含以下代码：

<script>
  // Addition Operator (+)
  let sum = 10 + 5;
  console.log("Addition: 10 + 5 =", sum);

  // Subtraction Operator (-)
  let difference = 20 - 7;
  console.log("Subtraction: 20 - 7 =", difference);

  // Multiplication Operator (*)
  let product = 6 * 4;
  console.log("Multiplication: 6 * 4 =", product);

  // Division Operator (/)
  let quotient = 25 / 5;
  console.log("Division: 25 / 5 =", quotient);
</script>

当你在浏览器中打开此 HTML 文件并检查浏览器的开发者控制台时，你将看到以下示例输出：

Addition: 10 + 5 = 15
Subtraction: 20 - 7 = 13
Multiplication: 6 * 4 = 24
Division: 25 / 5 = 5

需要理解的关键点：

+ 运算符将两个数字相加
- 运算符从左操作数中减去右操作数
* 运算符将两个数字相乘
/ 运算符将左操作数除以右操作数

你还可以使用变量执行运算，并混合不同类型的数字，包括整数和浮点数。

探索取模和递增/递减运算符

在这一步中，你将学习两个重要的 JavaScript 算术运算符：取模运算符（%）和递增/递减运算符（++ 和 --）。

打开 arithmetic.html 文件，并使用以下代码更新 <script> 部分：

<script>
  // Modulo Operator (%)
  // Returns the remainder of a division
  let remainder = 17 % 5;
  console.log("Modulo: 17 % 5 =", remainder);

  // Increment Operator (++)
  let x = 10;
  x++; // Increases x by 1
  console.log("Increment: x++ =", x);

  // Decrement Operator (--)
  let y = 20;
  y--; // Decreases y by 1
  console.log("Decrement: y-- =", y);

  // More modulo examples
  console.log("Even/Odd Check: 15 % 2 =", 15 % 2);
  console.log("Even/Odd Check: 16 % 2 =", 16 % 2);
</script>

当你在浏览器中打开此 HTML 文件并检查开发者控制台时，你将看到以下示例输出：

Modulo: 17 % 5 = 2
Increment: x++ = 11
Decrement: y-- = 19
Even/Odd Check: 15 % 2 = 1
Even/Odd Check: 16 % 2 = 0

需要理解的关键点：

取模运算符 % 返回除法后的余数
你可以使用取模运算符来检查一个数字是偶数还是奇数
递增运算符 ++ 将变量增加 1
递减运算符 -- 将变量减少 1

取模运算符特别适用于：

检查偶数/奇数
循环遍历一系列数字
创建模式或分布

理解前缀和后缀递增/递减

在这一步中，你将学习 JavaScript 中前缀和后缀递增/递减运算符的区别。这些运算符看起来相似，但在表达式中使用时行为不同。

打开 arithmetic.html 文件，并使用以下代码更新 <script> 部分：

<script>
  // Postfix Increment (x++)
  let a = 5;
  let b = a++;
  console.log("Postfix Increment:");
  console.log("a =", a); // a is incremented after the value is assigned
  console.log("b =", b); // b gets the original value of a

  // Prefix Increment (++x)
  let x = 5;
  let y = ++x;
  console.log("\nPrefix Increment:");
  console.log("x =", x); // x is incremented before the value is assigned
  console.log("y =", y); // y gets the incremented value of x

  // Similar concept applies to decrement operators
  let p = 10;
  let q = p--;
  console.log("\nPostfix Decrement:");
  console.log("p =", p); // p is decremented after the value is assigned
  console.log("q =", q); // q gets the original value of p

  let m = 10;
  let n = --m;
  console.log("\nPrefix Decrement:");
  console.log("m =", m); // m is decremented before the value is assigned
  console.log("n =", n); // n gets the decremented value of m
</script>

当你在浏览器中打开此 HTML 文件并检查开发者控制台时，你将看到以下示例输出：

Postfix Increment:
a = 6
b = 5

Prefix Increment:
x = 6
y = 6

Postfix Decrement:
p = 9
q = 10

Prefix Decrement:
m = 9
n = 9

需要理解的关键点：

后缀 x++：返回原始值，然后递增
前缀 ++x：先递增，然后返回新值
同样的原则适用于递减运算符 x-- 和 --x
当运算符用于表达式或赋值时，这种区别很重要

练习组合算术运算

在这一步中，你将学习如何组合多个算术运算以创建更复杂的计算。我们将探索组合运算符的不同方式，并演示 JavaScript 如何处理运算顺序。

打开 arithmetic.html 文件，并使用以下代码更新 <script> 部分：

<script>
  // Combining multiple arithmetic operations
  let result1 = 10 + 5 * 2;
  console.log("Result 1 (10 + 5 * 2):", result1);

  // Using parentheses to change order of operations
  let result2 = (10 + 5) * 2;
  console.log("Result 2 ((10 + 5) * 2):", result2);

  // Complex calculation with multiple operators
  let x = 15;
  let y = 7;
  let complexCalc = (x % 4) + y * 2 - x++ / 3;
  console.log("Complex Calculation:", complexCalc);

  // Combining increment/decrement with other operations
  let a = 5;
  let b = 3;
  let mixedCalc = ++a + b-- * 2;
  console.log("Mixed Calculation (++a + b-- * 2):", mixedCalc);
  console.log("a after calculation:", a);
  console.log("b after calculation:", b);

  // Practical example: Calculating average
  let score1 = 85;
  let score2 = 92;
  let score3 = 78;
  let averageScore = (score1 + score2 + score3) / 3;
  console.log("Average Score:", averageScore);
</script>

当你在浏览器中打开此 HTML 文件并检查开发者控制台时，你将看到以下示例输出：

Result 1 (10 + 5 * 2): 20
Result 2 ((10 + 5) * 2): 30
Complex Calculation: 9
Mixed Calculation (++a + b-- * 2): 11
a after calculation: 6
b after calculation: 2
Average Score: 85

需要理解的关键点：

JavaScript 遵循标准的数学运算顺序（PEMDAS）
可以使用括号来改变默认的运算顺序
你可以在单个表达式中组合不同类型的算术运算符
递增和递减运算符可以在更大的计算中使用
始终注意运算符的顺序和位置

总结

在本实验中，参与者学习了如何为 JavaScript 算术运算设置一个基本的 HTML 文件，并探索基本的数学计算。实验引导学习者创建一个包含嵌入式 JavaScript 部分的 HTML 文档，使他们能够使用加法（+）、减法（-）、乘法（*）和除法（/）等运算符练习基本的算术技巧。

学习过程从建立基础的 HTML 结构开始，逐步实现各种算术运算，包括探索取模、递增和递减运算符。参与者通过实际操作了解了不同运算符的变体，掌握了如何在 JavaScript 中有效地组合算术运算和操作数值。