在本实验室中，您将通过 Alex 的视角进入 Web 开发的世界，Alex 是一位崭露头角的 Web 开发人员，其任务是创建动态的个人财务跟踪器。构建一个用户友好的应用程序，允许用户输入和跟踪他们的日常支出和收入。目标很明确 - 开发一个既直观又有吸引力的界面，确保用户可以轻松管理他们的财务，没有任何麻烦。该项目不仅旨在简化个人财务管理，还向您介绍 JavaScript 和 DOM 操作的基本概念。
我们将通过 5 个实验室来完成 EconoMe 项目。
知识点：
JavaScript 是一种简单、面向对象、事件驱动的语言。它从服务器下载到客户端并由浏览器执行。
它可以与 HTML 和 Web 一起使用，并且更广泛地用于服务器、PC、笔记本电脑、平板电脑和智能手机。
其特点包括：
那么，我们如何在 HTML 中包含 JavaScript？
包含方法与CSS类似，可以通过三种方式完成：
例如，如果我们按F12，我们可以看到该页面中包含了很多外部JavaScript文件，通过点击Event Listeners，我们可以观察到该页面中存在多种类型的事件页。
现在，让我们添加 <script>;标记 ~/project/index.html 以包含 script.js 文件。<br> </script>
<!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" />
<!-- Add the script tag to index.html -->
<script src="./script.js"></script>
</head>
<body></body>
</html>
接下来，我们来学习如何在 JavaScript 中定义变量！
变量可以看作是存储信息的容器。在编程中，我们使用变量来存储数据值。 JavaScript 是一种动态类型语言，这意味着您不需要声明变量的类型。类型会在程序执行过程中自动确定。
在 JavaScript 中，您可以使用 var、let 或 const 关键字来声明变量：
例如：
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 中，有几种不同的数据类型：
声明变量后，您可以在程序中使用它们：
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 (Document Object Model) 是一个跨平台、与语言无关的接口，它将 HTML 和 XML 文档视为树结构，其中每个节点都是文档的一部分，例如元素、属性和文本内容。
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");
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:
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
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.
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
以上是掌握 JavaScript 和 DOM 操作的详细内容。更多信息请关注PHP中文网其他相关文章！
