Beherrschen von JavaScript und DOM-Manipulation

Einführung

In diesem Lab tauchen Sie in die Welt der Webentwicklung ein, aus der Perspektive von Alex, einem aufstrebenden Webentwickler, der mit der Aufgabe betraut ist, einen dynamischen persönlichen Finanzmanager zu erstellen. Das Ziel ist es, eine benutzerfreundliche Anwendung zu entwickeln, die es Benutzern ermöglicht, ihre täglichen Ausgaben und Einnahmen einzugeben und zu verfolgen. Das Ziel ist klar - eine Schnittstelle zu entwickeln, die sowohl intuitiv als auch ansprechend ist, damit Benutzer ihre Finanzen problemlos verwalten können. Dieses Projekt zielt nicht nur darauf ab, die persönliche Finanzverwaltung zu vereinfachen, sondern auch Sie mit den grundlegenden Konzepten von JavaScript und der DOM-Manipulation vertraut zu machen.

Wir werden durch 5 Labs arbeiten, um das EconoMe-Projekt abzuschließen.

Wissenspunkte:

Variablendeklarationen (let, const)
Grundlagen der DOM-Manipulation (Elemente abrufen, Elementinhalt ändern)
Ereignisüberwachung (addEventListener)

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Fortgeschrittener mit einer Abschlussquote von 64% ist. Es hat eine positive Bewertungsrate von 96% von den Lernenden erhalten.

Grundlagen von JavaScript

JavaScript ist eine einfache, objektorientierte und ereignisgesteuerte Programmiersprache. Sie wird vom Server auf den Client heruntergeladen und vom Browser ausgeführt.

Es kann in Verbindung mit HTML und im Web eingesetzt werden, und noch breiter auf Servern, PCs, Laptops, Tablets und Smartphones.

Ihre Eigenschaften umfassen:

Typischerweise für das Schreiben von Client-seitigen Skripten verwendet.
Hauptsächlich eingesetzt, um interaktives Verhalten in HTML-Seiten hinzuzufügen.
Es ist eine interpretierte Sprache, die während der Interpretation ausgeführt wird.

Wie fügen wir nun JavaScript in HTML ein?

Die Einbindungsmethode ähnelt der von CSS und kann auf drei Arten erfolgen:

Direkt in den HTML-Tags, für besonders kurzen JavaScript-Code.
Mit dem <script>-Tag kann JavaScript-Code in den <head> und <body> des HTML-Dokuments eingebettet werden.
Mit einer externen JavaScript-Datei: Schreiben Sie den JavaScript-Skriptcode in eine Datei mit der Endung .js und fügen Sie sie ein, indem Sie das src-Attribut des <script>-Tags festlegen.

Beispielsweise können wir, wenn wir F12 drücken, sehen, dass auf dieser Seite viele externe JavaScript-Dateien eingebunden sind. Und wenn wir auf Event Listeners klicken, können wir beobachten, dass es viele Arten von Ereignissen auf der Seite gibt.

Fügen wir nun das <script>-Tag in ~/project/index.html ein, um die script.js-Datei einzubinden.

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

Als nächstes lernen wir, wie man Variablen in JavaScript definiert!

Was sind Variablen?

Variablen können als Container zum Speichern von Informationen angesehen werden. In der Programmierung verwenden wir Variablen, um Datenwerte zu speichern. JavaScript ist eine dynamisch typisierte Sprache, was bedeutet, dass Sie nicht den Typ einer Variablen deklarieren müssen. Der Typ wird automatisch während der Ausführung des Programms bestimmt.

Variablendeklaration

In JavaScript können Sie die Schlüsselwörter var, let oder const verwenden, um Variablen zu deklarieren:

var: Vor ES6 war var die primäre Methode zur Deklaration von Variablen, und es hat Funktions-Scope (Gültigkeitsbereich).
let: Mit ES6 eingeführt, ermöglicht let die Deklaration von block-scope (Block-gültigen) lokalen Variablen.
const: Auch mit ES6 eingeführt, wird verwendet, um eine Konstante zu deklarieren, die nach der Deklaration nicht mehr geändert werden kann.

Beispiel:

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

Variablentypen

In JavaScript gibt es mehrere verschiedene Datentypen:

String: Textdaten, wie "Hello, World!".
Number: Ganzzahlen oder Fließkommazahlen, wie 42 oder 3.14.
Boolean: true oder false.
Object: Kann mehrere Werte oder komplexe Datenstrukturen speichern.
null und undefined: Spezielle Typen, die jeweils "kein Wert" und "Wert nicht definiert" repräsentieren.

Verwendung von Variablen

Sobald Variablen deklariert sind, können Sie sie in Ihrem Programm verwenden:

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

Die statische Methode console.log() gibt eine Nachricht in die Konsole aus.

DOM-Manipulation

Das DOM (Document Object Model) ist eine plattformübergreifende und sprachunabhängige Schnittstelle, die HTML- und XML-Dokumente als Baumstruktur behandelt, wobei jeder Knoten ein Teil des Dokuments ist, wie z. B. Elemente, Attribute und Textinhalt.

Zugriff auf DOM-Elemente

Um den Inhalt einer Webseite zu manipulieren, müssen Sie zunächst auf die Elemente im DOM-Baum zugreifen. Sie können verschiedene Methoden verwenden, um Elemente anhand ihrer ID, ihrer Klassennamen oder ihrer Tag-Namen zuzugreifen:

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

Fügen Sie den folgenden Code in die Datei ~/project/script.js des EconoMe-Projekts ein:

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

Modifikation des Elementinhalts

Sobald Sie eine Referenz auf ein Element haben, können Sie seinen Inhalt ändern. Die Eigenschaften innerHTML und textContent werden häufig zu diesem Zweck verwendet.

Beispielsweise können Sie <p>New HTML content</p> in ein div-Element mit id=content einfügen und "Hello" durch "New text content" in einem span-Element mit id=info ersetzen, indem Sie den folgenden JavaScript-Code verwenden:

Hinzufügen und Entfernen von Elementen

Sie können mit JavaScript dynamisch Elemente auf der Seite hinzufügen oder entfernen.

Beispiel:

// 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 einem HTML-Dokument erstellt die Methode document.createElement() das HTML-Element.
Die Methode document.body.appendChild() fügt das neue Element am Ende des <body>-Elements hinzu.
Die Methode document.body.removeChild() entfernt das Element aus dem <body>-Element.

✨ Lösung prüfen und üben

Ereignisbehandlung

Ereignis-Listener (Event-Listener) ermöglichen es Ihnen, auf Benutzeraktionen zu reagieren.

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

So wie auf Klicks, Hover-Effekte oder Tastendrücke:

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

Nachdem Sie die grundlegenden DOM-Operationen gelernt haben, können Sie den folgenden Code in die Datei ~/project/script.js des EconoMe-Projekts einfügen:

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

Das DOMContentLoaded-Ereignis in JavaScript wird ausgelöst, wenn das initiale HTML-Dokument vollständig geladen und geparst wurde, ohne auf das Laden von Stylesheets, Bildern und Unterframes zu warten. Dies macht es zu einem wichtigen Ereignis für das Ausführen von JavaScript-Code, sobald das DOM bereit ist, und gewährleistet, dass das Skript mit vollständig geparsten HTML-Elementen interagiert.

In diesem Lab ist es an dieser Stelle nicht erforderlich, die Wirkung zu previewen. Wir werden es nach Abschluss des Codes in den folgenden Schritten überprüfen.

✨ Lösung prüfen und üben

Zusammenfassung

In diesem Lab haben Sie gemeinsam mit Alex die Reise begonnen, einen einfachen, aber grundlegenden Teil eines persönlichen Finanz-Trackers zu erstellen. Sie haben die Grundlage für eine dynamische Webanwendung gelegt, indem Sie die Projektumgebung eingerichtet und JavaScript verwendet haben, um das DOM zu manipulieren und die anfänglichen Finanzsituationen anzuzeigen. Der wichtigste Punkt ist das Verständnis, wie JavaScript mit HTML-Elementen interagiert, um den Inhalt einer Webseite dynamisch zu verändern. Dies legt die Grundlage für weitere interaktive Funktionen in den folgenden Schritten.

Dieser praktische Ansatz festigt nicht nur Ihr Verständnis von JavaScript und DOM-Manipulation, sondern simuliert auch reale Webentwicklungsszenarien und bereitet Sie auf komplexere Projekte vor.

Grundlagen von JavaScript und DOM