介绍
欢迎来到「JavaScript 运算符与表达式」实验。在本实践环节中,你将学习 JavaScript 编程的基础构建块:运算符和表达式。运算符是用于对值(操作数)执行操作的特殊符号,而表达式是任何解析为值的代码单元。
你将从加法、减法、乘法和除法等基本算术运算符开始。然后,你将探索加法运算符如何用于组合字符串,这一过程称为字符串连接。最后,你将学习方便的自增运算符。在本实验结束时,你将能够执行基本的 JavaScript 数据操作。
欢迎来到「JavaScript 运算符与表达式」实验。在本实践环节中,你将学习 JavaScript 编程的基础构建块:运算符和表达式。运算符是用于对值(操作数)执行操作的特殊符号,而表达式是任何解析为值的代码单元。
你将从加法、减法、乘法和除法等基本算术运算符开始。然后,你将探索加法运算符如何用于组合字符串,这一过程称为字符串连接。最后,你将学习方便的自增运算符。在本实验结束时,你将能够执行基本的 JavaScript 数据操作。
在本步骤中,你将学习如何使用加法运算符(+)对数字进行加法运算。这是最常见的算术运算之一。
你的实验环境已在 ~/project 目录下设置好 index.html 文件和 script.js 文件。我们将在 script.js 文件中编写所有 JavaScript 代码。
首先,在屏幕左侧的文件浏览器中找到 script.js 文件。点击它在编辑器中打开。
现在,将以下代码添加到 script.js。这段代码声明了两个数字变量,将它们相加,并使用 console.log() 将结果打印到浏览器的开发者控制台。
// Step 1: Addition
let num1 = 10;
let num2 = 5;
let sum = num1 + num2;
console.log("The sum is:", sum);
添加代码后,按 Ctrl+S 保存文件。
要查看输出,请导航到界面顶部的 Web 8080 标签页。然后,按 F12 或右键单击页面,选择“Inspect”,然后点击“Console”标签页来打开开发者控制台。你应该会看到消息 The sum is: 15。

在本步骤中,你将应用减法(-)和乘法(*)运算符。它们的工作方式与加法运算符类似,但执行不同的计算。
继续编辑 ~/project/script.js 文件。在现有代码下方添加以下代码行,以计算相同两个数字的差值和乘积。
// Step 2: Subtraction and Multiplication
let difference = num1 - num2;
console.log("The difference is:", difference);
let product = num1 * num2;
console.log("The product is:", product);
再次保存文件(Ctrl+S)。刷新 Web 8080 标签页(你可以使用标签页内的刷新按钮)。开发者控制台现在将显示加法、减法和乘法的结果。

在本步骤中,我们将探索除法(/)和模(%)运算符。除法运算符执行标准除法,而模运算符返回除法的余数。这对于确定数字是奇数还是偶数等任务非常有用。
将以下代码添加到你的 ~/project/script.js 文件末尾。
// Step 3: Division and Modulus
let quotient = num1 / num2;
console.log("The quotient is:", quotient);
let remainder = num1 % 3; // Using 3 to get a non-zero remainder
console.log("The remainder of 10 divided by 3 is:", remainder);
保存文件并刷新 Web 8080 标签页。检查控制台以查看除法和余数的新输出。你应该会看到商是 2,余数是 1。

在本步骤中,你将看到 + 运算符的另一种用法:字符串连接。当与字符串一起使用时,+ 运算符会将它们连接起来,创建一个新的、更长的字符串。
让我们创建两个字符串变量并将它们连接起来。将此代码添加到 ~/project/script.js 的末尾。
// Step 4: String Concatenation
let firstName = "Hello";
let lastName = "World";
let fullName = firstName + " " + lastName;
console.log(fullName);
在上面的示例中,我们将 firstName、一个空格 " " 和 lastName 连接起来,形成一个完整的短语。
保存文件后,刷新 Web 8080 标签页。控制台现在将显示连接后的字符串:Hello World。

在最后一步中,你将学习递增运算符(++)。这是一个一元运算符,意味着它作用于单个操作数。它是为数字变量加 1 的便捷简写方式,这在循环和计数器中是非常常见的操作。
将以下代码添加到 ~/project/script.js 的末尾,以查看其效果。
// Step 5: Increment Operator
let counter = 0;
counter++; // This is equivalent to counter = counter + 1;
console.log("The counter value is:", counter);
最后一次保存文件并刷新 Web 8080 标签页。控制台将显示计数器的最终值,应为 1。

恭喜你完成了这个实验!
在本实验中,你学习了 JavaScript 运算符和表达式的基础知识。你练习使用了:
+(加法)、-(减法)、*(乘法)、/(除法)和 %(取模)。+ 运算符用于字符串连接,将文本组合在一起。++ 递增运算符作为将数字值增加一的快捷方式。这些运算符是 JavaScript 中必不可少的构建块,几乎在所有程序中都会用到。现在你已经准备好在未来的项目中处理更复杂的逻辑和功能了。