掌握 JavaScript 和 DOM 操作

介绍

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

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

知识点:

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/AdvancedConceptsGroup -.-> javascript/es6("ES6 Features") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("DOM Traversal") subgraph Lab Skills javascript/variables -.-> lab-290729{{"JavaScript 和 DOM 基础"}} javascript/data_types -.-> lab-290729{{"JavaScript 和 DOM 基础"}} javascript/es6 -.-> lab-290729{{"JavaScript 和 DOM 基础"}} javascript/dom_select -.-> lab-290729{{"JavaScript 和 DOM 基础"}} javascript/dom_manip -.-> lab-290729{{"JavaScript 和 DOM 基础"}} javascript/event_handle -.-> lab-290729{{"JavaScript 和 DOM 基础"}} javascript/dom_traverse -.-> lab-290729{{"JavaScript 和 DOM 基础"}} end

基础 JavaScript

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

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

它的特点包括：

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

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

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

直接在 HTML 标签中，适用于特别短的 JavaScript 代码。
使用 <script> 标签，可以将 JavaScript 代码嵌入到 HTML 文档的 <head> 和 <body> 中。
使用外部 JavaScript 文件，将 JavaScript 脚本代码写入一个以 .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 中，有几种不同的数据类型：

字符串（String）：文本数据，例如 "Hello, World!"。
数字（Number）：整数或浮点数，例如 42 或 3.14。
布尔值（Boolean）：true 或 false。
对象（Object）：可以存储多个值或复杂的数据结构。
null 和 undefined：特殊类型，分别表示“没有值”和“值未定义”。

使用变量

一旦变量被声明，你就可以在程序中使用它们：

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

console.log() 静态方法会将消息输出到控制台。

DOM 操作

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

访问 DOM 元素

要操作网页的内容，首先需要访问 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 中移除元素

在 HTML 文档中，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 操作的理解，还模拟了现实世界中的网页开发场景，为你迎接更复杂的项目做好了准备。