介绍
在本实验中，参与者将探索 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 中有效地组合算术运算和操作数值。
