介绍
在本实验中，学生将通过动手实践 HTML 和 JavaScript 练习来探索 JavaScript 的赋值运算符。实验将引导学习者创建一个 HTML 文件，并实现各种赋值运算符，包括基本赋值（=）、复合赋值（+=, -=）以及乘法/除法赋值（*=, /=）。
参与者将从设置带有嵌入式 script 标签的 HTML 结构开始，然后逐步演示不同的赋值运算符技术。通过使用 console.log 和 document.write() 方法，学生将验证并理解这些运算符在 JavaScript 中的工作原理，从而获得变量操作和值赋值的实践经验。
创建用于 JavaScript 赋值运算符的 HTML 文件
在这一步中，你将创建一个 HTML 文件，作为探索 JavaScript 赋值运算符的基础。HTML 提供了嵌入 JavaScript 代码的结构，使我们能够演示和测试各种赋值运算符技术。
首先，打开 WebIDE 并导航到 ~/project 目录。右键单击文件资源管理器并选择“新建文件”，创建一个名为 assignment-operators.html 的新文件。
以下是你将使用的基本 HTML 结构：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JavaScript Assignment Operators</title>
</head>
<body>
<h1>Exploring Assignment Operators</h1>
<script>
// JavaScript code will be added here in subsequent steps
</script>
</body>
</html>
让我们分解关键组件：
<!DOCTYPE html>声明这是一个 HTML5 文档<script>标签是我们编写 JavaScript 代码的地方- 页面包含一个简单的标题以提供上下文
创建文件后，将其保存到 ~/project 目录中。这个 HTML 文件将成为我们在后续步骤中学习赋值运算符的实践场所。
在浏览器中打开此文件时的示例输出：
Exploring Assignment Operators
实现基本赋值运算符 (=)
在这一步中，你将学习 JavaScript 中的基本赋值运算符 (=)。赋值运算符用于为变量赋值，是存储和操作数据的基本方式。
打开你在上一步中创建的 assignment-operators.html 文件。在 <script> 标签内，添加以下 JavaScript 代码来探索基本赋值：
// Declaring and assigning variables using the = operator
let firstName = "John";
let age = 25;
let isStudent = true;
// Demonstrating variable assignment
console.log("First Name:", firstName);
console.log("Age:", age);
console.log("Is Student:", isStudent);
让我们分解关键概念：
let用于在现代 JavaScript 中声明变量=运算符用于为变量赋值- 变量可以存储不同类型的数据：字符串、数字和布尔值
console.log()用于将值打印到浏览器的控制台
你还可以使用相同的运算符重新赋值变量：
// Reassigning variable values
age = 26;
console.log("Updated Age:", age);
// Assigning the value of one variable to another
let originalAge = age;
console.log("Original Age:", originalAge);
浏览器控制台中的示例输出：
First Name: John
Age: 25
Is Student: true
Updated Age: 26
Original Age: 26
练习复合赋值运算符 (+=, -=)
在这一步中，你将探索 JavaScript 中的复合赋值运算符 += 和 -=。这些运算符提供了一种简写方式，可以在为变量赋值的同时执行加法和减法操作。
打开 assignment-operators.html 文件，并在 <script> 标签内添加以下 JavaScript 代码：
// Initial variable declaration
let score = 100;
console.log("Initial Score:", score);
// Using += operator to add and assign
score += 50; // Equivalent to: score = score + 50
console.log("Score after +50:", score);
// Using -= operator to subtract and assign
score -= 25; // Equivalent to: score = score - 25
console.log("Score after -25:", score);
// Practicing with another variable
let quantity = 10;
console.log("Initial Quantity:", quantity);
quantity += 5; // Add 5 to quantity
console.log("Quantity after +5:", quantity);
quantity -= 3; // Subtract 3 from quantity
console.log("Quantity after -3:", quantity);
关于复合赋值运算符的关键点：
+=将右侧的值加到变量上并赋值结果-=从变量中减去右侧的值并赋值结果- 这些运算符提供了一种更简洁的方式来修改变量的值
- 它们适用于数字，可以简化算术操作
浏览器控制台中的示例输出：
Initial Score: 100
Score after +50: 150
Score after -25: 125
Initial Quantity: 10
Quantity after +5: 15
Quantity after -3: 12
演示乘法和除法赋值运算符 (*=, /=)
在这一步中，你将探索 JavaScript 中的乘法和除法赋值运算符 *= 和 /=。这些运算符提供了一种简洁的方式，可以将变量乘以或除以某个值，并将结果赋值回同一个变量。
打开 assignment-operators.html 文件，并在 <script> 标签内添加以下 JavaScript 代码：
// Multiplication assignment operator (*=)
let price = 10;
console.log("Initial Price:", price);
price *= 3; // Equivalent to: price = price * 3
console.log("Price after *3:", price);
// Division assignment operator (/=)
let quantity = 24;
console.log("Initial Quantity:", quantity);
quantity /= 4; // Equivalent to: quantity = quantity / 4
console.log("Quantity after /4:", quantity);
// Practical example: Calculating total cost
let itemPrice = 5;
let itemCount = 7;
console.log("Item Price:", itemPrice);
console.log("Item Count:", itemCount);
let totalCost = itemPrice * itemCount;
console.log("Total Cost:", totalCost);
totalCost *= 0.9; // Apply 10% discount
console.log("Discounted Total Cost:", totalCost);
关于乘法和除法赋值运算符的关键点：
*=将变量乘以右侧的值并赋值结果/=将变量除以右侧的值并赋值结果- 这些运算符有助于简化数学运算和赋值操作
- 它们适用于数值，并可用于各种计算
浏览器控制台中的示例输出：
Initial Price: 10
Price after *3: 30
Initial Quantity: 24
Quantity after /4: 6
Item Price: 5
Item Count: 7
Total Cost: 35
Discounted Total Cost: 31.5
使用 document.write() 验证赋值运算符结果
在这一步中，你将学习如何使用 document.write() 在网页上直接显示赋值运算符的结果。这种方法为初学者提供了一种简单的方式来输出值，以便可视化他们的 JavaScript 操作。
打开 assignment-operators.html 文件，并修改 <script> 标签以包含以下代码：
// Demonstrating assignment operators with document.write()
let initialValue = 10;
document.write("<h2>Assignment Operator Demonstration</h2>");
document.write("Initial Value: " + initialValue + "<br>");
// Basic assignment
initialValue = 20;
document.write("After Basic Assignment (=): " + initialValue + "<br>");
// Compound addition assignment
initialValue += 5;
document.write("After Addition Assignment (+=): " + initialValue + "<br>");
// Compound subtraction assignment
initialValue -= 3;
document.write("After Subtraction Assignment (-=): " + initialValue + "<br>");
// Multiplication assignment
initialValue *= 2;
document.write(
"After Multiplication Assignment (*=): " + initialValue + "<br>"
);
// Division assignment
initialValue /= 4;
document.write("After Division Assignment (/=): " + initialValue + "<br>");
关于 document.write() 的关键点：
- 直接将 HTML 或文本写入网页
- 可用于显示变量值
- 适用于调试和演示 JavaScript 操作
- 按照调用顺序向页面添加内容
浏览器中的示例输出：
Assignment Operator Demonstration
Initial Value: 10
After Basic Assignment (=): 20
After Addition Assignment (+=): 25
After Subtraction Assignment (-=): 22
After Multiplication Assignment (*=): 44
After Division Assignment (/=): 11
总结
在本实验中，参与者通过动手实践 HTML 和 JavaScript 练习，探索了 JavaScript 的赋值运算符。实验从创建一个 HTML 文件开始，该文件作为展示各种赋值运算符技术的基础，首先使用基本赋值运算符 (=) 来声明和初始化包含不同数据类型（如字符串、数字和布尔值）的变量。
学习过程逐步深入，涵盖了复合赋值运算符的实现，例如 +=、-=、*= 和 /=, 这些运算符提供了简洁的方式来执行算术运算并更新变量值。通过使用 document.write() 和 console.log()，参与者可以验证并可视化这些赋值操作的结果，从而获得对 JavaScript 编程中这些运算符如何工作的实际理解。
