Einführung

In diesem Lab betreten Sie die Welt der Webentwicklung aus der Sicht von Alex, einem angehenden Webentwickler, dessen Aufgabe es ist, einen dynamischen persönlichen Finanz-Tracker zu erstellen. Erstellen einer benutzerfreundlichen Anwendung, mit der Benutzer ihre täglichen Ausgaben und Einnahmen eingeben und verfolgen können. Das Ziel ist klar – die Entwicklung einer Benutzeroberfläche, die sowohl intuitiv als auch ansprechend ist und sicherstellt, dass Benutzer ihre Finanzen problemlos verwalten können. Dieses Projekt zielt nicht nur darauf ab, das persönliche Finanzmanagement zu vereinfachen, sondern Ihnen auch die grundlegenden Konzepte von JavaScript und DOM-Manipulation näher zu bringen.

Wir werden 5 Labore durchlaufen, um das EconoMe-Projekt abzuschließen.

Wissenspunkte:

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

Grundlegendes JavaScript

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

Es kann mit HTML und im Web sowie im weiteren Sinne auf Servern, PCs, Laptops, Tablets und Smartphones verwendet werden.

Zu seinen Merkmalen gehören:

• Wird normalerweise zum Schreiben clientseitiger Skripts verwendet.
• Wird hauptsächlich verwendet, um interaktives Verhalten in HTML-Seiten hinzuzufügen.
• Es ist eine interpretierte Sprache, die so ausgeführt wird, wie sie interpretiert wird.

Wie integrieren wir also JavaScript in HTML?

Die Einschlussmethode ähnelt CSS und kann auf drei Arten durchgeführt werden:

• Direkt in den HTML-Tags, für besonders kurzen JavaScript-Code.
• Mit dem
• Schreiben Sie mithilfe einer externen JavaScript-Datei den JavaScript-Skriptcode in eine Datei mit dem Suffix .js und fügen Sie ihn ein, indem Sie das src-Attribut des

Wenn wir beispielsweise F12 drücken, können wir sehen, dass viele externe JavaScript-Dateien auf dieser Seite enthalten sind, und wenn wir auf Ereignis-Listener klicken, können wir beobachten, dass es viele Arten von Ereignissen innerhalb der Seite gibt Seite.

Jetzt fügen wir das Tag

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

Was sind Variablen?

Variablen können als Container zum Speichern von Informationen betrachtet werden. Beim Programmieren verwenden wir Variablen zum Speichern von Datenwerten. JavaScript ist eine dynamisch typisierte Sprache, was bedeutet, dass Sie den Typ einer Variablen nicht deklarieren müssen. Der Typ wird während der Ausführung des Programms automatisch ermittelt.

Variablen deklarieren

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 Möglichkeit, Variablen zu deklarieren, und es hat einen Funktionsumfang.
• let: In ES6 eingeführt, ermöglicht let die Deklaration blockbezogener lokaler Variablen.
• const: Wird auch in ES6 eingeführt und dient zum Deklarieren einer Konstante, die nach der Deklaration nicht mehr geändert werden kann.

Zum 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

Arten von Variablen

In JavaScript gibt es verschiedene Datentypen:

• String: Textdaten, wie „Hello, World!“.
• Zahl: Ganzzahlen oder Gleitkommazahlen, wie 42 oder 3,14.
• Boolescher Wert: wahr oder falsch.
• Objekt: Kann mehrere Werte oder komplexe Datenstrukturen speichern.
• null und undefiniert: Spezielle Typen, die „kein Wert“ bzw. „Wert nicht definiert“ darstellen.

Verwenden 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 an die Konsole aus.

DOM-Manipulation

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

Zugriff auf DOM-Elemente

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

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 zur Datei ~/project/script.js des EconoMe-Projekts hinzu:

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

Elementinhalt ändern

Sobald Sie einen Verweis auf ein Element haben, können Sie dessen Inhalt ändern. Zu diesem Zweck werden üblicherweise die Eigenschaften innerHTML und textContent verwendet.

Um beispielsweise

Neuen HTML-Inhalt

in ein div-Element mit id=content einzufügen und „Hello“ durch „New text content“ in einem span-Element mit id=info zu ersetzen, würden Sie Folgendes verwenden folgender JavaScript-Code:

Elemente hinzufügen und entfernen

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

Zum 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 -Elements hinzu.
• Die Methode document.body.removeChild() entfernt das Element aus dem -Element.

Ereignisbehandlung

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

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

wie Klicks, Hover oder Tastendrücke:

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

Nachdem Sie die grundlegenden DOM-Operationen erlernt haben, können Sie den folgenden Code zur Datei ~/project/script.js des EconoMe-Projekts hinzufü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 ursprüngliche HTML-Dokument vollständig geladen und analysiert wurde, ohne darauf zu warten, dass Stylesheets, Bilder und Subframes vollständig geladen werden. Dies macht es zu einem wichtigen Ereignis für die Ausführung von JavaScript-Code, sobald das DOM bereit ist, um sicherzustellen, dass das Skript mit vollständig analysierten HTML-Elementen interagiert.

Dieses Lab erfordert zu diesem Zeitpunkt keine Vorschau des Effekts. Wir werden es überprüfen, nachdem wir den Code in den folgenden Schritten fertiggestellt haben.

Zusammenfassung

In diesem Labor haben Sie sich mit Alex auf den Weg gemacht, einen grundlegenden, aber fundamentalen Teil eines persönlichen Finanz-Trackers zu entwickeln. Sie haben die Voraussetzungen für eine dynamische Webanwendung geschaffen, indem Sie die Projektumgebung eingerichtet und JavaScript verwendet haben, um das DOM zu manipulieren und den anfänglichen Finanzstatus anzuzeigen. Die wichtigste Erkenntnis besteht darin, zu verstehen, wie JavaScript mit HTML-Elementen interagiert, um den Inhalt einer Webseite dynamisch zu ändern, und in den folgenden Schritten den Grundstein für interaktivere Funktionen zu legen.

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

---

? Jetzt üben: Grundlegendes JavaScript und DOM

---

Möchten Sie mehr erfahren?

• ? Lernen Sie die neuesten JavaScript-Fähigkeitsbäume kennen
• ? Lesen Sie weitere JavaScript-Tutorials
• ? Treten Sie unserem Discord bei oder twittern Sie uns @WeAreLabEx