介绍

在本实验室中，您将通过 Alex 的视角进入 Web 开发的世界，Alex 是一位崭露头角的 Web 开发人员，其任务是创建动态的个人财务跟踪器。构建一个用户友好的应用程序，允许用户输入和跟踪他们的日常支出和收入。目标很明确 - 开发一个既直观又有吸引力的界面，确保用户可以轻松管理他们的财务，没有任何麻烦。该项目不仅旨在简化个人财务管理，还向您介绍 JavaScript 和 DOM 操作的基本概念。

我们将通过 5 个实验室来完成 EconoMe 项目。

知识点：

• 变量声明（let、const）
• DOM操作基础知识（获取元素、修改元素内容）
• 事件监听(addEventListener)

基本 JavaScript

JavaScript 是一种简单、面向对象、事件驱动的语言。从服务器下载到客户端并由浏览器执行。

它可以与 HTML 和 Web 一起使用，更广泛地用于服务器、PC、笔记本电脑、平板电脑和智能手机。

其特点包括：

• 通常用于编写客户端脚本。
• 主要用于在HTML页面中添加交互行为。
• 它是一种解释性语言，按解释方式执行。

那么，我们如何在 HTML 中包含 JavaScript？

包含方法与CSS类似，可以通过三种方式完成：

• 直接在 HTML 标记中，适用于特别短的 JavaScript 代码。
• 使用
• 使用外部 JavaScript 文件，将 JavaScript 脚本代码写入后缀为 .js 的文件中，并通过设置

例如，如果我们按F12，我们可以看到该页面中包含了很多外部JavaScript文件，通过点击Event Listeners，我们可以观察到该页面中存在多种类型的事件页。

现在，让我们将

接下来我们来学习如何在JavaScript中定义变量！

什么是变量

变量可以看作是存储信息的容器。在编程中，我们使用变量来存储数据值。 JavaScript 是一种动态类型语言，这意味着您不需要声明变量的类型。类型将在程序执行过程中自动确定。

声明变量

在 JavaScript 中，可以使用 var、let 或 const 关键字来声明变量：

• var：在ES6之前，var是声明变量的主要方式，并且它具有函数作用域。
• let：ES6 中引入，let 允许您声明块作用域的局部变量。
• const：ES6中也引入了，用于声明一个常量，一旦声明就不能改变。

例如：

var name = "Alice"; // Using var to declare a variable
let age = 30; // Using let to declare a variable
const city = "London"; // Using const to declare a constant

变量的类型

在 JavaScript 中，有几种不同的数据类型：

• 字符串：文本数据，例如“Hello，World！”。
• 数字：整数或浮点数，例如 42 或 3.14。
• 布尔值：真或假。
• 对象：可以存储多个值或复杂的数据结构。
• null 和 undefined：分别表示“无值”和“值未定义”的特殊类型。

使用变量

变量声明后，就可以在程序中使用它们：

console.log(name); // Outputs: Alice
console.log("Age: "   age); // Outputs: Age: 30
console.log(city   " is a beautiful city"); // Outputs: London is a beautiful city

console.log() 静态方法向控制台输出一条消息。

DOM操作

DOM (Document Object Model) 是一个跨平台、与语言无关的接口，它将 HTML 和 XML 文档视为树结构，其中每个节点都是文档的一部分，例如元素、属性和文本内容。

访问 DOM 元素

要操作网页的内容，首先需要访问 DOM 树中的元素。您可以使用各种方法来访问元素，例如通过元素的 ID、类名称或标签名称：

let elementById = document.getElementById("elementId"); // Access element by ID
let elementsByClassName = document.getElementsByClassName("className"); // Access a collection of elements by class name
let elementsByTagName = document.getElementsByTagName("tagName"); // Access a collection of elements by tag name

在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 属性通常用于此目的。

例如，要将

新 HTML 内容

添加和删​​除元素

您可以使用 JavaScript 动态添加或删除页面上的元素。

例如：

// Create a new element
let newElement = document.createElement("div");
newElement.textContent = "Hello, world!";
document.body.appendChild(newElement); // Add the new element to the document body
document.body.removeChild(newElement); // Remove the element from the document body

• 在 HTML 文档中，document.createElement() 方法创建 HTML 元素。
• document.body.appendChild() 方法将新元素添加到 元素的末尾。
• document.body.removeChild() 方法从 元素中删除该元素。

事件处理

事件侦听器允许您响应用户操作。

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; // Index of the dragged item
});

JavaScript 中的 DOMContentLoaded 事件在初始 HTML 文档完全加载和解析后被触发，无需等待样式表、图像和子框架完成加载。这使得它成为 DOM 准备好后立即运行 JavaScript 代码的重要事件，确保脚本与完全解析的 HTML 元素进行交互。

本实验此时不需要预览效果。我们将按照以下步骤完成代码后进行审核。

概括

在本实验室中，您开始了与 Alex 一起构建个人财务追踪器的基础部分的旅程。通过设置项目环境并使用 JavaScript 操作 DOM，显示初始财务状态，您已经为动态 Web 应用程序做好了准备。关键要点是了解 JavaScript 如何与 HTML 元素交互以动态更改网页内容，为以下步骤中的更多交互功能奠定基础。

这种实践方法不仅可以巩固您对 JavaScript 和 DOM 操作的理解，还可以模拟现实世界的 Web 开发场景，为您未来更复杂的项目做好准备。

？立即练习：基本 JavaScript 和 DOM

想了解更多吗？

• ？学习最新的 JavaScript 技能树
• ？阅读更多 JavaScript 教程
• ？加入我们的 Discord 或发推文@WeAreLabEx