Einführung
In diesem Lab werden die Schüler die JavaScript-Zuweisungsoperatoren durch eine praktische HTML- und JavaScript-Übung erkunden. Das Lab führt die Lernenden durch das Erstellen einer HTML-Datei und die Implementierung verschiedener Zuweisungsoperatoren, einschließlich des einfachen Zuweisungsoperators (=), der zusammengesetzten Zuweisung (+=, -=) und der Multiplikations-/Divisionszuweisung (*=, /=).
Die Teilnehmer beginnen mit dem Aufbau einer HTML-Struktur mit einem eingebetteten Skript-Tag und demonstrieren dann schrittweise verschiedene Techniken für Zuweisungsoperatoren. Indem die Schüler die console.logging- und document.write()-Methoden verwenden, werden sie überprüfen und verstehen, wie diese Operatoren in JavaScript funktionieren, und erhalten praktische Erfahrungen bei der Manipulation von Variablen und der Zuweisung von Werten.
Erstellen Sie eine HTML-Datei für JavaScript-Zuweisungsoperatoren
In diesem Schritt erstellen Sie eine HTML-Datei, die als Grundlage für die Exploration von JavaScript-Zuweisungsoperatoren dienen wird. HTML bietet die Struktur zum Einbetten von JavaScript-Code, was uns ermöglicht, verschiedene Techniken für Zuweisungsoperatoren zu demonstrieren und zu testen.
Öffnen Sie zunächst die WebIDE und navigieren Sie zum Verzeichnis ~/project. Erstellen Sie eine neue Datei mit dem Namen assignment-operators.html, indem Sie im Dateiexplorer mit der rechten Maustaste klicken und "Neue Datei" auswählen.
Hier ist die grundlegende HTML-Struktur, die Sie verwenden werden:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JavaScript Assignment Operators</title>
</head>
<body>
<h1>Exploring Assignment Operators</h1>
<script>
// JavaScript code will be added here in subsequent steps
</script>
</body>
</html>
Zergliedern wir die wichtigsten Komponenten:
<!DOCTYPE html>deklariert dies als ein HTML5-Dokument- Der
<script>-Tag ist der Ort, an dem wir unseren JavaScript-Code schreiben werden - Die Seite enthält einen einfachen Titel, um den Kontext bereitzustellen
Nachdem Sie die Datei erstellt haben, speichern Sie sie im Verzeichnis ~/project. Diese HTML-Datei wird unser Experimentierfeld sein, um in den folgenden Schritten über Zuweisungsoperatoren zu lernen.
Beispielausgabe, wenn Sie diese Datei in einem Browser öffnen:
Exploring Assignment Operators
Implementieren Sie den einfachen Zuweisungsoperator (=)
In diesem Schritt lernen Sie über den einfachen Zuweisungsoperator (=) in JavaScript. Der Zuweisungsoperator wird verwendet, um einen Wert einer Variablen zuzuweisen, was eine grundlegende Möglichkeit bietet, Daten zu speichern und zu manipulieren.
Öffnen Sie die Datei assignment-operators.html, die Sie im vorherigen Schritt erstellt haben. Fügen Sie innerhalb des <script>-Tags folgenden JavaScript-Code hinzu, um den einfachen Zuweisungsoperator zu erkunden:
// Declaring and assigning variables using the = operator
let firstName = "John";
let age = 25;
let isStudent = true;
// Demonstrating variable assignment
console.log("First Name:", firstName);
console.log("Age:", age);
console.log("Is Student:", isStudent);
Zergliedern wir die wichtigsten Konzepte:
letwird verwendet, um Variablen in modernem JavaScript zu deklarieren- Der
=-Operator weist einen Wert einer Variablen zu - Variablen können verschiedene Datentypen speichern: Zeichenketten, Zahlen und boolesche Werte
console.log()wird verwendet, um Werte in der Browserkonsole auszugeben
Sie können auch Variablen mit dem gleichen Operator neu zuweisen:
// Reassigning variable values
age = 26;
console.log("Updated Age:", age);
// Assigning the value of one variable to another
let originalAge = age;
console.log("Original Age:", originalAge);
Beispielausgabe in der Browserkonsole:
First Name: John
Age: 25
Is Student: true
Updated Age: 26
Original Age: 26
Üben Sie zusammengesetzte Zuweisungsoperatoren (+=, -=)
In diesem Schritt werden Sie die zusammengesetzten Zuweisungsoperatoren += und -= in JavaScript erkunden. Diese Operatoren bieten eine kürzere Möglichkeit, Addition und Subtraktion durchzuführen, während ein neuer Wert einer Variablen zugewiesen wird.
Öffnen Sie die Datei assignment-operators.html und fügen Sie folgenden JavaScript-Code innerhalb des <script>-Tags hinzu:
// Initial variable declaration
let score = 100;
console.log("Initial Score:", score);
// Using += operator to add and assign
score += 50; // Äquivalent zu: score = score + 50
console.log("Score after +50:", score);
// Using -= operator to subtract and assign
score -= 25; // Äquivalent zu: score = score - 25
console.log("Score after -25:", score);
// Practicing with another variable
let quantity = 10;
console.log("Initial Quantity:", quantity);
quantity += 5; // Fügt 5 zur quantity hinzu
console.log("Quantity after +5:", quantity);
quantity -= 3; // Subtrahiert 3 von quantity
console.log("Quantity after -3:", quantity);
Wichtige Punkte zu zusammengesetzten Zuweisungsoperatoren:
+=addiert den Wert auf der rechten Seite zur Variablen und weist das Ergebnis zu-=subtrahiert den Wert auf der rechten Seite von der Variablen und weist das Ergebnis zu- Diese Operatoren bieten eine kürzere Möglichkeit, Variablenwerte zu modifizieren
- Sie funktionieren mit Zahlen und können arithmetische Operationen vereinfachen
Beispielausgabe in der Browserkonsole:
Initial Score: 100
Score after +50: 150
Score after -25: 125
Initial Quantity: 10
Quantity after +5: 15
Quantity after -3: 12
Demonstrieren Sie die Multiplikations- und Divisionszuweisungsoperatoren (*=, /=)
In diesem Schritt werden Sie die Multiplikations- und Divisionszuweisungsoperatoren *= und /= in JavaScript erkunden. Diese Operatoren bieten eine präzise Möglichkeit, eine Variable zu multiplizieren oder zu dividieren und das Ergebnis der gleichen Variable zurückzuweisen.
Öffnen Sie die Datei assignment-operators.html und fügen Sie folgenden JavaScript-Code innerhalb des <script>-Tags hinzu:
// Multiplication assignment operator (*=)
let price = 10;
console.log("Initial Price:", price);
price *= 3; // Äquivalent zu: price = price * 3
console.log("Price after *3:", price);
// Division assignment operator (/=)
let quantity = 24;
console.log("Initial Quantity:", quantity);
quantity /= 4; // Äquivalent zu: quantity = quantity / 4
console.log("Quantity after /4:", quantity);
// Practical example: Calculating total cost
let itemPrice = 5;
let itemCount = 7;
console.log("Item Price:", itemPrice);
console.log("Item Count:", itemCount);
let totalCost = itemPrice * itemCount;
console.log("Total Cost:", totalCost);
totalCost *= 0.9; // Apply 10% discount
console.log("Discounted Total Cost:", totalCost);
Wichtige Punkte zu Multiplikations- und Divisionszuweisungsoperatoren:
*=multipliziert die Variable mit dem Wert auf der rechten Seite und weist das Ergebnis zu/=teilt die Variable durch den Wert auf der rechten Seite und weist das Ergebnis zu- Diese Operatoren helfen, mathematische Operationen und Zuweisungen zu vereinfachen
- Sie funktionieren mit numerischen Werten und können in verschiedenen Berechnungen verwendet werden
Beispielausgabe in der Browserkonsole:
Initial Price: 10
Price after *3: 30
Initial Quantity: 24
Quantity after /4: 6
Item Price: 5
Item Count: 7
Total Cost: 35
Discounted Total Cost: 31.5
Verifizieren Sie die Ergebnisse des Zuweisungsoperators mit document.write()
In diesem Schritt lernen Sie, wie Sie document.write() verwenden, um die Ergebnisse von Zuweisungsoperatoren direkt auf der Webseite anzuzeigen. Diese Methode bietet eine einfache Möglichkeit, Werte auszugeben, um es für Einsteiger zu ermöglichen, ihre JavaScript-Operationen zu visualisieren.
Öffnen Sie die Datei assignment-operators.html und ändern Sie den <script>-Tag, um folgenden Code hinzuzufügen:
// Demonstrating assignment operators with document.write()
let initialValue = 10;
document.write("<h2>Zuweisungsoperator-Demonstration</h2>");
document.write("Initial Value: " + initialValue + "<br>");
// Basic assignment
initialValue = 20;
document.write("Nach einfacher Zuweisung (=): " + initialValue + "<br>");
// Compound addition assignment
initialValue += 5;
document.write("Nach Additionszuweisung (+=): " + initialValue + "<br>");
// Compound subtraction assignment
initialValue -= 3;
document.write("Nach Subtraktionszuweisung (-=): " + initialValue + "<br>");
// Multiplication assignment
initialValue *= 2;
document.write("Nach Multiplikationszuweisung (*=): " + initialValue + "<br>");
// Division assignment
initialValue /= 4;
document.write("Nach Divisionszuweisung (/=): " + initialValue + "<br>");
Wichtige Punkte zu document.write():
- Schreibt HTML oder Text direkt auf die Webseite
- Kann verwendet werden, um Variablenwerte anzuzeigen
- Nützlich für das Debugging und die Demonstration von JavaScript-Operationen
- Fügt Inhalte zur Seite in der Reihenfolge hinzu, in der sie aufgerufen wird
Beispielausgabe im Browser:
Zuweisungsoperator-Demonstration
Initial Value: 10
Nach einfacher Zuweisung (=): 20
Nach Additionszuweisung (+=): 25
Nach Subtraktionszuweisung (-=): 22
Nach Multiplikationszuweisung (*=): 44
Nach Divisionszuweisung (/=): 11
Zusammenfassung
In diesem Labo erkunden die Teilnehmer die JavaScript-Zuweisungsoperatoren durch eine praktische HTML- und JavaScript-Übung. Das Labo beginnt mit der Erstellung einer HTML-Datei, die als Grundlage für die Demonstration verschiedener Zuweisungsoperator-Techniken dient, beginnend mit dem einfachen Zuweisungsoperator (=), um Variablen mit verschiedenen Datentypen wie Zeichenketten, Zahlen und booleschen Werten zu deklarieren und zu initialisieren.
Die Lernreise geht weiter mit der Implementierung zusammengesetzter Zuweisungsoperatoren wie +=, -=, *= und /=, die präzise Möglichkeiten bieten, arithmetische Operationen durchzuführen und Variablenwerte zu aktualisieren. Indem die Teilnehmer document.write() und console.log() verwenden, können sie die Ergebnisse dieser Zuweisungsoperationen verifizieren und visualisieren und praktisches Verständnis dafür erlangen, wie diese Operatoren in der JavaScript-Programmierung funktionieren.
