JavaScript Operatoren und Ausdrücke

Einführung

Willkommen zum Lab "JavaScript Operatoren und Ausdrücke". In dieser praktischen Sitzung lernen Sie die grundlegenden Bausteine der JavaScript-Programmierung kennen: Operatoren und Ausdrücke. Operatoren sind spezielle Symbole, die zur Durchführung von Operationen auf Werten (Operanden) verwendet werden, und ein Ausdruck ist jede Codeeinheit, die zu einem Wert ausgewertet wird.

Sie beginnen mit grundlegenden arithmetischen Operatoren wie Addition, Subtraktion, Multiplikation und Division. Anschließend erfahren Sie, wie der Additionsoperator auch zum Kombinieren von Zeichenketten verwendet werden kann, ein Prozess, der als Konkatenation bekannt ist. Abschließend lernen Sie den praktischen Inkrement-Operator kennen. Am Ende dieses Labs werden Sie in der Lage sein, grundlegende Datenmanipulationen in JavaScript durchzuführen.

Additionsoperator bei Zahlen verwenden

In diesem Schritt lernen Sie, wie Sie den Additionsoperator (+) zur Addition von Zahlen verwenden. Dies ist eine der gebräuchlichsten arithmetischen Operationen.

Ihre Laborumgebung ist bereits mit einer index.html-Datei und einer script.js-Datei im Verzeichnis ~/project eingerichtet. Wir werden unseren gesamten JavaScript-Code in der Datei script.js schreiben.

Suchen Sie zuerst die Datei script.js im Dateiexplorer auf der linken Seite Ihres Bildschirms. Klicken Sie darauf, um sie im Editor zu öffnen.

Fügen Sie nun den folgenden Code zu script.js hinzu. Dieser Code deklariert zwei Zahlenvariablen, addiert sie und verwendet console.log(), um das Ergebnis in der Entwicklerkonsole des Browsers auszugeben.

// Step 1: Addition
let num1 = 10;
let num2 = 5;
let sum = num1 + num2;
console.log("The sum is:", sum);

Nachdem Sie den Code hinzugefügt haben, speichern Sie die Datei, indem Sie Strg+S drücken.

Um die Ausgabe zu sehen, navigieren Sie zum Tab Web 8080 oben in der Benutzeroberfläche. Öffnen Sie dann die Entwicklerkonsole, indem Sie F12 drücken oder mit der rechten Maustaste auf die Seite klicken, "Inspizieren" auswählen und dann auf den Tab "Konsole" klicken. Sie sollten die Meldung The sum is: 15 sehen.

Subtraktions- und Multiplikationsoperatoren anwenden

In diesem Schritt wenden Sie die Subtraktions- (-) und Multiplikationsoperatoren (*) an. Diese funktionieren genauso wie der Additionsoperator, führen aber andere Berechnungen durch.

Bearbeiten Sie weiterhin die Datei ~/project/script.js. Fügen Sie die folgenden Codezeilen unter Ihrem vorhandenen Code hinzu, um die Differenz und das Produkt derselben beiden Zahlen zu berechnen.

// Step 2: Subtraction and Multiplication
let difference = num1 - num2;
console.log("The difference is:", difference);

let product = num1 * num2;
console.log("The product is:", product);

Speichern Sie die Datei erneut (Strg+S). Aktualisieren Sie den Tab Web 8080 (Sie können den Aktualisierungsbutton innerhalb des Tabs verwenden). Die Entwicklerkonsole zeigt nun die Ergebnisse für Addition, Subtraktion und Multiplikation an.

Division und Modulo-Operatoren implementieren

In diesem Schritt werden wir die Divisions- (/) und Modulo-Operatoren (%) untersuchen. Der Divisionsoperator führt eine Standarddivision durch, während der Modulo-Operator den Rest einer Division zurückgibt. Dies ist nützlich für Aufgaben wie die Bestimmung, ob eine Zahl gerade oder ungerade ist.

Fügen Sie den folgenden Code am Ende Ihrer Datei ~/project/script.js hinzu.

// Step 3: Division and Modulus
let quotient = num1 / num2;
console.log("The quotient is:", quotient);

let remainder = num1 % 3; // Using 3 to get a non-zero remainder
console.log("The remainder of 10 divided by 3 is:", remainder);

Speichern Sie die Datei und aktualisieren Sie den Tab Web 8080. Überprüfen Sie die Konsole, um die neuen Ausgaben für Division und Rest zu sehen. Sie sollten sehen, dass der Quotient 2 und der Rest 1 ist.

Strings mit dem Plus-Operator verketten

In diesem Schritt sehen Sie eine andere Verwendung des +-Operators: die String-Verkettung (String Concatenation). Wenn der +-Operator mit Strings verwendet wird, fügt er diese zusammen, um einen neuen, längeren String zu erstellen.

Erstellen wir zwei String-Variablen und verketten sie. Fügen Sie diesen Code am Ende von ~/project/script.js hinzu.

// Step 4: String Concatenation
let firstName = "Hello";
let lastName = "World";
let fullName = firstName + " " + lastName;
console.log(fullName);

Im obigen Beispiel fügen wir firstName, ein Leerzeichen " " und lastName zusammen, um einen vollständigen Satz zu bilden.

Nachdem Sie die Datei gespeichert haben, aktualisieren Sie den Tab Web 8080. Die Konsole zeigt nun den verketteten String an: Hello World.

Variable mit ++ Operator inkrementieren

In diesem letzten Schritt lernen Sie den Inkrement-Operator (++) kennen. Dies ist ein unärer Operator, was bedeutet, dass er auf ein einzelnes Operand wirkt. Er ist eine praktische Kurzform zum Hinzufügen von 1 zu einer numerischen Variable, was eine sehr häufige Operation in Schleifen und Zählern ist.

Fügen Sie den folgenden Code am Ende von ~/project/script.js hinzu, um ihn in Aktion zu sehen.

// Step 5: Increment Operator
let counter = 0;
counter++; // This is equivalent to counter = counter + 1;
console.log("The counter value is:", counter);

Speichern Sie die Datei ein letztes Mal und aktualisieren Sie den Tab Web 8080. Die Konsole zeigt den Endwert des Zählers an, der 1 sein sollte.

Zusammenfassung

Herzlichen Glückwunsch zum Abschluss dieses Labs!

In diesem Lab haben Sie die Grundlagen von JavaScript-Operatoren und -Ausdrücken (Expressions) gelernt. Sie haben geübt, Folgendes zu verwenden:

• Arithmetische Operatoren für grundlegende Mathematik: + (Addition), - (Subtraktion), * (Multiplikation), / (Division) und % (Modulo).
• Den +-Operator für die String-Verkettung (String Concatenation), um Texte zusammenzufügen.
• Den ++-Inkrement-Operator als Abkürzung, um den Wert einer Zahl um eins zu erhöhen.

Diese Operatoren sind wesentliche Bausteine in JavaScript und werden in praktisch jedem Programm verwendet. Sie sind nun bereit, sich komplexeren Logiken und Funktionalitäten in Ihren zukünftigen Projekten zu widmen.