掌握 JavaScript 和 DOM 操作

介绍

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

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

知识点：

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

基本 JavaScript

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

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

其特点包括：

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

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

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

• 直接在 HTML 标签中，适用于特别短的 JavaScript 代码。
• 使用标签，JavaScript代码可以嵌入到中。和 HTML 文档的。
• 使用外部 JavaScript 文件，将 JavaScript 脚本代码写入带有 .js 后缀的文件中，并通过设置 <script> 的 src 属性来包含它。标签。</script>

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

现在，让我们添加 <script>;标记 ~/project/index.html 以包含 script.js 文件。<br> </script>

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EconoMe</title>
    <link rel="stylesheet" href="./style.css">
    <!-- Add the script tag to index.html -->
    <script src="./script.js"></script>
  
  

接下来，我们来学习如何在 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 文档视为树结构，其中每个节点都是文档的一部分，例如元素、属性和文本内容。

Accessing DOM Elements

To manipulate the content of a web page, you first need to access the elements in the DOM tree. You can use various methods to access elements, such as by their ID, class name, or tag name:

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

Add the following code to the ~/project/script.js file of the EconoMe project:

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

Modifying Element Content

Once you have a reference to an element, you can modify its content. The innerHTML and textContent properties are commonly used for this purpose.

For example, to insert

New HTML content

into a div element with id=content and replace "Hello" with "New text content" in a span element with id=info, you would use the following JavaScript code:

Adding and Removing Elements

You can dynamically add or remove elements on the page using JavaScript.

For example:

// 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

• In an HTML document, the document.createElement() method creates the HTML element.
• The document.body.appendChild() method adds the new element to the end of the element.
• The document.body.removeChild() method removes the element from the element.

Event Handling

Event listeners allow you to respond to user actions.

addEventListener("event", function () {});

such as clicks, hover, or key presses:

elementById.addEventListener("click", function () {
  console.log("Element was clicked!");
});

After learning the basic DOM operations, you can add the following code to the ~/project/script.js file of the EconoMe project:

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

The DOMContentLoaded event in JavaScript is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. This makes it an important event for running JavaScript code as soon as the DOM is ready, ensuring that the script interacts with fully parsed HTML elements.

This lab does not require previewing the effect at this point. We will review it after completing the code in the following steps.

Summary

In this lab, you embarked on the journey of building a basic yet fundamental part of a personal finance tracker with Alex. You've set the stage for a dynamic web application by setting up the project environment and using JavaScript to manipulate the DOM, showing initial financial states. The key takeaway is understanding how JavaScript interacts with HTML elements to dynamically change the content of a web page, laying the groundwork for more interactive features in the following steps.

This hands-on approach not only solidifies your understanding of JavaScript and DOM manipulation but also simulates real-world web development scenarios, preparing you for more complex projects ahead.

---

? Practice Now: Basic JavaScript and DOM

---

Want to Learn More?

• ? Learn the latest JavaScript Skill Trees
• ? Read More JavaScript Tutorials
• ? Join our Discord or tweet us @WeAreLabEx

以上是掌握 JavaScript 和 DOM 操作的详细内容。更多信息请关注PHP中文网其他相关文章！