JavaScript と DOM 操作をマスターする

導入

このラボでは、ダイナミックなパーソナル ファイナンス トラッカーの作成を任務とする新進気鋭の Web 開発者である Alex の目を通して、Web 開発の世界に足を踏み入れます。ユーザーが毎日の支出と収入を入力して追跡できる、使いやすいアプリケーションを構築する。目標は明らかです。直感的で魅力的なインターフェースを開発し、ユーザーが手間をかけずに簡単に財務管理できるようにすることです。このプロジェクトは、個人の財務管理を簡素化するだけでなく、JavaScript と DOM 操作の基本概念を紹介することも目的としています。

私たちは、EconoMe プロジェクトを完了するために 5 つのラボに取り組んでいきます。

知識ポイント:

• 変数宣言 (let、const)
• DOM 操作の基本 (要素の取得、要素の内容の変更)
• イベントリスニング (addEventListener)

基本的なJavaScript

JavaScript は、シンプルなオブジェクト指向のイベント駆動型言語です。これはサーバーからクライアントにダウンロードされ、ブラウザーによって実行されます。

HTML や Web で使用でき、サーバー、PC、ラップトップ、タブレット、スマートフォンなど、より広範囲に使用できます。

その特徴は次のとおりです:

• 通常、クライアント側のスクリプトを作成するために使用されます。
• 主に、HTML ページにインタラクティブな動作を追加するために使用されます。
• これはインタープリタ型言語であり、解釈されたとおりに実行されます。

では、HTML に JavaScript を組み込むにはどうすればよいでしょうか?

含める方法は CSS に似ており、次の 3 つの方法で実行できます。

• 特に短い JavaScript コードの場合は、HTML タグ内で直接。
• の使用タグを使用すると、JavaScript コードを に埋め込むことができます。そして HTML ドキュメントの
• 外部 JavaScript ファイルを使用して、.js 接尾辞が付いたファイルに JavaScript スクリプト コードを記述し、<script> の src 属性を設定してそれを組み込みます。タグ。</script>

たとえば、F12 を押すと、このページに多くの外部 JavaScript ファイルが含まれていることがわかります。また、イベント リスナー をクリックすると、そのページ内に多くの種類のイベントがあることがわかります。ページ。

次に、<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 などの整数または浮動小数点数。
• ブール値: true または false。
• オブジェクト: 複数の値または複雑なデータ構造を保存できます。
• null と unknown: それぞれ「値なし」と「値が定義されていない」を表す特別なタイプ。

変数の使用

変数を宣言したら、プログラムでそれらを使用できます。

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 中国語 Web サイトの他の関連記事を参照してください。