在这个实验中，你将通过 Alex 的视角进入 Web 开发的世界。Alex 是一位初露头角的 Web 开发者，他的任务是创建一个动态的个人财务追踪器。目标是构建一个用户友好的应用程序，允许用户输入并跟踪他们的日常支出和收入。目标很明确——开发一个既直观又吸引人的界面，确保用户可以轻松管理财务，而不会遇到任何麻烦。这个项目不仅旨在简化个人财务管理，还向你介绍 JavaScript 和 DOM 操作的基本概念。
我们将通过 5 个实验来完成 EconoMe 项目。
知识点:
let, const)addEventListener)JavaScript 是一种简单的、面向对象的、事件驱动的语言。它从服务器下载到客户端，并由浏览器执行。
它可以与 HTML 和 Web 一起使用，更广泛地应用于服务器、PC、笔记本电脑、平板电脑和智能手机。
它的特点包括：
那么，我们如何在 HTML 中包含 JavaScript 呢？
包含方法与 CSS 类似，可以通过三种方式实现：
<script> 标签，可以将 JavaScript 代码嵌入到 HTML 文档的 <head> 和 <body> 中。.js 为后缀的文件中，并通过设置 <script> 标签的 src 属性来包含它。例如，如果我们按下 F12，可以看到此页面中包含了许多外部 JavaScript 文件，点击 Event Listeners 后，可以观察到页面中有许多类型的事件。
现在，让我们在 ~/project/index.html 中添加 <script> 标签以包含 script.js 文件。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>EconoMe</title>
<link rel="stylesheet" href="./style.css" />
<!-- 在 index.html 中添加 script 标签 -->
<script src="./script.js"></script>
</head>
<body></body>
</html>接下来，让我们学习如何在 JavaScript 中定义变量！
变量可以被视为存储信息的容器。在编程中，我们使用变量来存储数据值。JavaScript 是一种动态类型语言，这意味着你不需要声明变量的类型。类型会在程序执行期间自动确定。
在 JavaScript 中，你可以使用 var、let 或 const 关键字来声明变量：
var：在 ES6 之前，var 是声明变量的主要方式，它具有函数作用域。let：在 ES6 中引入，let 允许你声明块作用域的局部变量。const：同样在 ES6 中引入，用于声明一个常量，一旦声明后就不能更改。例如：
var name = "Alice"; // 使用 var 声明一个变量
let age = 30; // 使用 let 声明一个变量
const city = "London"; // 使用 const 声明一个常量在 JavaScript 中，有几种不同的数据类型：
"Hello, World!"。42 或 3.14。true 或 false。null 和 undefined：特殊类型，分别表示“没有值”和“值未定义”。一旦变量被声明，你就可以在程序中使用它们：
console.log(name); // 输出：Alice
console.log("Age: " + age); // 输出：Age: 30
console.log(city + " is a beautiful city"); // 输出：London is a beautiful cityconsole.log() 静态方法会将消息输出到控制台。
DOM（Document Object Model，文档对象模型）是一个跨平台、语言无关的接口，它将 HTML 和 XML 文档视为树结构，其中每个节点都是文档的一部分，例如元素、属性和文本内容。
要操作网页的内容，首先需要访问 DOM 树中的元素。你可以使用多种方法来访问元素，例如通过它们的 ID、类名或标签名：
let elementById = document.getElementById("elementId"); // 通过 ID 访问元素
let elementsByClassName = document.getElementsByClassName("className"); // 通过类名访问元素集合
let elementsByTagName = document.getElementsByTagName("tagName"); // 通过标签名访问元素集合将以下代码添加到 EconoMe 项目的 ~/project/script.js 文件中：
const form = document.getElementById("record-form");
const recordsList = document.getElementById("records-list");
const totalIncomeEl = document.getElementById("total-income");
const totalExpenseEl = document.getElementById("total-expense");
const balanceEl = document.getElementById("balance");一旦你获得了对某个元素的引用，就可以修改其内容。innerHTML 和 textContent 属性通常用于此目的。
例如，要将 <p>New HTML content</p> 插入到 id=content 的 div 元素中，并将 id=info 的 span 元素中的 "Hello" 替换为 "New text content"，你可以使用以下 JavaScript 代码：
你可以使用 JavaScript 动态地在页面上添加或删除元素。
例如：
// 创建一个新元素
let newElement = document.createElement("div");
newElement.textContent = "Hello, world!";
document.body.appendChild(newElement); // 将新元素添加到文档 body 中
document.body.removeChild(newElement); // 从文档 body 中移除元素document.createElement() 方法用于创建 HTML 元素。document.body.appendChild() 方法将新元素添加到 <body> 元素的末尾。document.body.removeChild() 方法从 <body> 元素中移除元素。事件监听器允许你响应用户的操作。
addEventListener("event", function () {});例如点击、悬停或按键：
elementById.addEventListener("click", function () {
console.log("Element was clicked!");
});
在学习完基本的 DOM 操作后，你可以将以下代码添加到 EconoMe 项目的 ~/project/script.js 文件中：
document.addEventListener("DOMContentLoaded", function () {
const form = document.getElementById("record-form");
const recordsList = document.getElementById("records-list");
const totalIncomeEl = document.getElementById("total-income");
const totalExpenseEl = document.getElementById("total-expense");
const balanceEl = document.getElementById("balance");
let draggedIndex = null; // 被拖动项的索引
});JavaScript 中的 DOMContentLoaded 事件在初始 HTML 文档完全加载并解析后触发，而无需等待样式表、图片和子框架加载完成。这使得它成为在 DOM 准备就绪后立即运行 JavaScript 代码的重要事件，确保脚本与完全解析的 HTML 元素进行交互。
本实验目前不需要预览效果。我们将在完成后续步骤中的代码后对其进行回顾。
在本实验中，你和 Alex 一起踏上了一个个人财务跟踪器的基础部分的构建之旅。通过设置项目环境并使用 JavaScript 操作 DOM，你为动态网页应用奠定了基础，并展示了初始的财务状态。关键收获是理解 JavaScript 如何与 HTML 元素交互以动态更改网页内容，为后续步骤中更复杂的交互功能奠定了基础。
这种实践方法不仅巩固了你对 JavaScript 和 DOM 操作的理解，还模拟了现实世界中的网页开发场景，为你迎接更复杂的项目做好了准备。
