JavaScript 和 DOM 基础

JavaScriptJavaScriptBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

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

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

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 后,可以观察到页面中有许多类型的事件。

JavaScript 事件监听器示例

现在,让我们在 ~/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 中,你可以使用 varletconst 关键字来声明变量:

  • 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):整数或浮点数,例如 423.14
  • 布尔值(Boolean):truefalse
  • 对象(Object):可以存储多个值或复杂的数据结构。
  • nullundefined:特殊类型,分别表示“没有值”和“值未定义”。

使用变量

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

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

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

JavaScript 变量声明示例

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");

修改元素内容

一旦你获得了对某个元素的引用,就可以修改其内容。innerHTMLtextContent 属性通常用于此目的。

例如,要将 <p>New HTML content</p> 插入到 id=content 的 div 元素中,并将 id=info 的 span 元素中的 "Hello" 替换为 "New text content",你可以使用以下 JavaScript 代码:

DOM 内容修改示例

添加和删除元素

你可以使用 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!");
});
事件处理演示 gif

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

您可能感兴趣的其他 JavaScript 教程