Dalam Makmal ini, anda akan melangkah ke dunia pembangunan web melalui pandangan Alex, pembangun web yang sedang berkembang yang ditugaskan untuk mencipta penjejak kewangan peribadi yang dinamik. Untuk membina aplikasi mesra pengguna yang membolehkan pengguna memasukkan dan menjejaki perbelanjaan dan pendapatan harian mereka. Matlamatnya jelas - untuk membangunkan antara muka yang intuitif dan menarik, memastikan pengguna boleh menguruskan kewangan mereka dengan mudah tanpa sebarang kerumitan. Projek ini bukan sahaja bertujuan untuk memudahkan pengurusan kewangan peribadi tetapi juga untuk memperkenalkan anda kepada konsep asas JavaScript dan manipulasi DOM.
Kami akan berusaha melalui 5 makmal untuk menyelesaikan projek EconoMe.
Mata Pengetahuan:
JavaScript ialah bahasa yang ringkas, berorientasikan objek dan dipacu peristiwa. Ia dimuat turun daripada pelayan kepada klien dan dilaksanakan oleh penyemak imbas.
Ia boleh digunakan dengan HTML dan Web, dan secara lebih meluas pada pelayan, PC, komputer riba, tablet dan telefon pintar.
Ciri-cirinya termasuk:
Jadi, bagaimanakah kita memasukkan JavaScript dalam HTML?
Kaedah kemasukan adalah serupa dengan CSS dan boleh dilakukan dalam tiga cara:
Sebagai contoh, jika kita menekan F12, kita dapat melihat bahawa banyak fail JavaScript luaran disertakan dalam halaman ini, dan dengan mengklik pada Pendengar Acara, kita dapat melihat bahawa terdapat banyak jenis acara dalam halaman.
Sekarang, mari tambah
<!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>
Seterusnya, mari belajar cara mentakrifkan pembolehubah dalam JavaScript!
Pembolehubah boleh dilihat sebagai bekas untuk menyimpan maklumat. Dalam pengaturcaraan, kami menggunakan pembolehubah untuk menyimpan nilai data. JavaScript ialah bahasa yang ditaip secara dinamik, bermakna anda tidak perlu mengisytiharkan jenis pembolehubah. Jenis akan ditentukan secara automatik semasa pelaksanaan program.
Dalam JavaScript, anda boleh menggunakan kata kunci var, let atau const untuk mengisytiharkan pembolehubah:
Contohnya:
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
Dalam JavaScript, terdapat beberapa jenis data yang berbeza:
Setelah pembolehubah diisytiharkan, anda boleh menggunakannya dalam program anda:
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
Kaedah statik console.log() mengeluarkan mesej kepada konsol.
DOM (Document Oobjek Model) ialah antara muka bebas bahasa merentas platform yang menganggap dokumen HTML dan XML sebagai struktur pokok , di mana setiap nod adalah sebahagian daripada dokumen, seperti elemen, atribut dan kandungan teks.
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
Atas ialah kandungan terperinci Menguasai JavaScript dan Manipulasi DOM. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Pertanyaan blockchain pelayar Ethereum
Perkara yang perlu dilakukan jika ikon desktop komputer tidak boleh dibuka
Apakah perbezaan antara paparan pangkalan data dan jadual
Bagaimana untuk menggunakan python untuk gelung
Apakah mata wang yang dimiliki oleh USDT?
Bagaimana untuk mematikan muat turun automatik WeChat
Tutorial input simbol lebar penuh
Bina pelayan Internet
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
