導入

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

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

ナレッジポイント:

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

基本的なJavaScript

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

HTML や Web で使用でき、さらに幅広いサーバー、PC、ラップトップ、タブレット、スマートフォンでも使用できます。

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

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

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

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

• 特に短い JavaScript コードの場合は、HTML タグ内に直接。
• 外部 JavaScript ファイルを使用して、.js 接尾辞が付いたファイルに JavaScript スクリプト コードを記述し、

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

次に、

次は、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 ドキュメントをツリー構造として扱う、クロスプラットフォームの言語に依存しないインターフェイスです。 , ここで、各ノードは要素、属性、テキスト コンテンツなどのドキュメントの一部です。

DOM 要素へのアクセス

Web ページのコンテンツを操作するには、まず DOM ツリー内の要素にアクセスする必要があります。 ID、クラス名、タグ名など、さまざまなメソッドを使用して要素にアクセスできます:

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

次のコードを EconoMe プロジェクトの ~/project/script.js ファイルに追加します:

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

要素コンテンツの変更

要素への参照を取得したら、その内容を変更できます。この目的には、innerHTML プロパティと textContent プロパティが一般的に使用されます。

たとえば、

新しい HTML コンテンツ

要素の追加と削除

JavaScript を使用して、ページ上の要素を動的に追加または削除できます。

例えば：

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

• HTML ドキュメントでは、 document.createElement() メソッドによって HTML 要素が作成されます。
• document.body.appendChild() メソッドは、新しい要素を 要素の末尾に追加します。
• document.body.removeChild() メソッドは、 要素から要素を削除します。

イベント処理

イベント リスナーを使用すると、ユーザーのアクションに応答できます。

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

クリック、ホバー、キーの押下など:

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

基本的な DOM 操作を学習した後、EconoMe プロジェクトの ~/project/script.js ファイルに次のコードを追加できます。

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

JavaScript の DOMContentLoaded イベントは、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに、最初の HTML ドキュメントが完全に読み込まれて解析されたときに発生します。これにより、DOM の準備が整うとすぐに JavaScript コードを実行するための重要なイベントとなり、スクリプトが完全に解析された HTML 要素と確実にやり取りできるようになります。

このラボでは、現時点ではエフェクトをプレビューする必要はありません。次の手順でコードを完成させた後にレビューします。

まとめ

このラボでは、Alex とともにパーソナル ファイナンス トラッカーの基本的かつ基本的な部分を構築する旅に乗り出しました。プロジェクト環境をセットアップし、JavaScript を使用して DOM を操作し、初期の財務状態を表示することで、動的 Web アプリケーションの準備が整いました。重要なポイントは、JavaScript が HTML 要素とどのように対話して Web ページのコンテンツを動的に変更するかを理解し、次の手順でよりインタラクティブな機能の基礎を築くことです。

この実践的なアプローチは、JavaScript と DOM 操作の理解を確実にするだけでなく、現実世界の Web 開発シナリオをシミュレートし、今後のより複雑なプロジェクトに備えることができます。

?今すぐ練習: 基本的な JavaScript と DOM

もっと詳しく知りたいですか?

• ?最新の JavaScript スキル ツリーを学ぶ
• ?続きを読む JavaScript チュートリアル
• ? Discord に参加するか、@WeAreLabEx でツイートしてください