Rumah > Artikel > hujung hadapan web > Menguasai JavaScript dan Manipulasi DOM

Menguasai JavaScript dan Manipulasi DOM

WBOYasal: 2024-08-06 04:05:34540semak imbas

pengenalan

Mastering JavaScript and DOM Manipulation

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.

Mastering JavaScript and DOM Manipulation

Mata Pengetahuan:

Pengisytiharan boleh ubah (biar, const)
Asas manipulasi DOM (mendapatkan elemen, mengubah suai kandungan elemen)
Mendengar Acara (tambahEventListener)

JavaScript asas

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:

Biasanya digunakan untuk menulis skrip sebelah pelanggan.
Terutama digunakan untuk menambah gelagat interaktif dalam halaman HTML.
Ia adalah bahasa yang ditafsirkan, dilaksanakan seperti yang ditafsirkan.

Jadi, bagaimanakah kita memasukkan JavaScript dalam HTML?

Kaedah kemasukan adalah serupa dengan CSS dan boleh dilakukan dalam tiga cara:

Terus dalam teg HTML, terutamanya kod JavaScript yang pendek.
Menggunakan teg, kod JavaScript boleh dibenamkan ke dalam dan daripada dokumen HTML.
Menggunakan fail JavaScript luaran, tulis kod skrip JavaScript dalam fail dengan akhiran .js dan masukkannya dengan menetapkan atribut src bagi tag.

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.

Mastering JavaScript and DOM Manipulation

Sekarang, mari tambah tag kepada ~/project/index.html untuk memasukkan fail 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" />
    <!-- Add the script tag to index.html -->
    <script src="./script.js"></script>
  </head>
  <body></body>
</html>

Seterusnya, mari belajar cara mentakrifkan pembolehubah dalam JavaScript!

Apakah itu Pembolehubah

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.

Mengisytiharkan Pembolehubah

Dalam JavaScript, anda boleh menggunakan kata kunci var, let atau const untuk mengisytiharkan pembolehubah:

var: Sebelum ES6, var ialah cara utama untuk mengisytiharkan pembolehubah dan ia mempunyai skop fungsi.
let: Diperkenalkan dalam ES6, let membolehkan anda mengisytiharkan pembolehubah tempatan berskop blok.
const: Juga diperkenalkan dalam ES6, digunakan untuk mengisytiharkan pemalar yang tidak boleh diubah setelah diisytiharkan.

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

Jenis Pembolehubah

Dalam JavaScript, terdapat beberapa jenis data yang berbeza:

String: Data teks, seperti "Hello, World!".
Nombor: Integer atau nombor titik terapung, seperti 42 atau 3.14.
Boolean: benar atau salah.
Objek: Boleh menyimpan berbilang nilai atau struktur data yang kompleks.
null dan undefined: Jenis khas masing-masing mewakili "tiada nilai" dan "nilai tidak ditentukan".

Menggunakan Pembolehubah

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.

Mastering JavaScript and DOM Manipulation

Manipulasi DOM

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.

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:

Mastering JavaScript and DOM Manipulation

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

Mastering JavaScript and DOM Manipulation

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

Atas ialah kandungan terperinci Menguasai JavaScript dan Manipulasi DOM. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Ciri-ciri Javascript Teratas Anda Boleh Gunakan dalam 4Artikel seterusnya：Ciri-ciri Javascript Teratas Anda Boleh Gunakan dalam 4

Artikel berkaitan

Lihat lagi