Variablen in JavaScript definieren und verwenden

Einführung

In diesem Lab werden die Teilnehmer die grundlegenden Konzepte des Definierens und Verwenden von Variablen in JavaScript erkunden, eine entscheidende Fähigkeit für die Webentwicklung. Das Lab führt die Lernenden durch das Verständnis der Rolle von JavaScript bei der Erstellung interaktiver Web-Erfahrungen, das Einrichten einer HTML-Umgebung und das Beherrschen von Variablendeklarations- und Manipulationstechniken.

Die Teilnehmer werden lernen, wie Variablen mit dem Schlüsselwort var deklariert werden, wie diesen Variablen Werte zugewiesen werden und wie sie dynamisch auf Webseiten angezeigt werden. Indem sie Schritt-für-Schritt-Anweisungen folgen, werden die Schüler praktische Erfahrungen mit den Kernprogrammierungsprinzipien von JavaScript sammeln, einschließlich der Variablennamenskonventionen und der grundlegenden Skripttechniken, die die Grundlage der modernen Webentwicklung bilden.

Verstehen Sie JavaScript und seine Rolle in der Webentwicklung

In diesem Schritt lernen Sie über JavaScript und seine entscheidende Rolle in der Webentwicklung. JavaScript ist eine leistungsstarke und vielseitige Programmiersprache, die Websites Interaktivität und dynamische Funktionalität verleiht.

JavaScript ist eine Client-Seite-Skriptsprache, die hauptsächlich in Webbrowsern verwendet wird. Es ermöglicht es Entwicklern, interaktive und dynamische Webseiten zu erstellen, indem sie HTML und CSS manipulieren, Benutzerevents verarbeiten und komplexe Berechnungen in Echtzeit durchführen.

Wichtige Merkmale von JavaScript sind:

Läuft direkt in Webbrowsern
Ermöglicht interaktive Web-Erfahrungen
Kann HTML und CSS dynamisch modifizieren
Unterstützt ereignisgetriebene Programmierung
Wird für die Front-End- und Back-End-Entwicklung verwendet (mit Node.js)

Hier ist ein einfaches Beispiel, um die grundlegende Funktionalität von JavaScript zu demonstrieren:

<!doctype html>
<html>
  <head>
    <title>JavaScript Einführung</title>
  </head>
  <body>
    <h1 id="greeting">Hello, Web Development!</h1>
    <script>
      // JavaScript kann dynamisch den Seiteninhalt ändern
      document.getElementById("greeting").innerHTML = "Welcome to JavaScript!";
    </script>
  </body>
</html>

Beispielausgabe im Browser:

Welcome to JavaScript!

Dieses Beispiel zeigt, wie JavaScript den Inhalt einer Webseite sofort modifizieren kann, was seine Macht bei der Erstellung dynamischer Web-Erfahrungen demonstriert.

HTML-Datei für JavaScript einrichten

In diesem Schritt lernen Sie, wie Sie eine HTML-Datei erstellen, die JavaScript-Code enthalten und ausführen kann. HTML liefert die Struktur für Webseiten, und JavaScript fügt Interaktivität und dynamische Funktionalität hinzu.

Navigieren Sie zunächst zum Projektverzeichnis:

cd ~/project

Erstellen Sie eine neue HTML-Datei namens variables.html mit der WebIDE:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Variablen</title>
  </head>
  <body>
    <h1>JavaScript-Variablen lernen</h1>

    <!-- Wir werden im nächsten Schritt JavaScript hier hinzufügen -->
    <script>
      // JavaScript-Code wird hier stehen
    </script>
  </body>
</html>

Wichtige Punkte zur HTML-Struktur:

<!DOCTYPE html> deklariert, dass dies eine HTML5-Dokument ist
Das <script>-Tag ist der Ort, an dem JavaScript-Code geschrieben wird
Sie können das <script>-Tag im <head>- oder <body>-Abschnitt platzieren

Beispielausgabe, wenn die Datei im Browser geöffnet wird:

JavaScript-Variablen lernen

Das <script>-Tag ermöglicht es Ihnen, JavaScript direkt in der HTML-Datei zu schreiben oder auf eine externe JavaScript-Datei zu verweisen. Im nächsten Schritt werden wir diesem Datei JavaScript-Code hinzufügen, um mit Variablen zu arbeiten.

Variablen mit dem Schlüsselwort var deklarieren

In diesem Schritt lernen Sie, wie Sie in JavaScript Variablen mit dem Schlüsselwort var deklarieren. Variablen sind Container zur Speicherung von Datenwerten, die im gesamten Code verwendet und manipuliert werden können.

Öffnen Sie die Datei variables.html in der WebIDE und modifizieren Sie den <script>-Abschnitt, um Variablendeklarationen hinzuzufügen:

<!doctype html>
<html lang="en">
  <body>
    <script>
      // Variablen mit dem Schlüsselwort var deklarieren
      var firstName = "John";
      var age = 25;
      var isStudent = true;

      // Sie können auch eine Variable ohne Anfangswert deklarieren
      var lastName;
    </script>
  </body>
</html>

Wichtige Punkte zur Variablendeklaration:

var wird verwendet, um Variablen in JavaScript zu deklarieren
Variablen können verschiedene Datentypen speichern:
- Zeichenketten (Text): "John"
- Zahlen: 25
- Boolesche Werte: true oder false
Sie können eine Variable ohne Anfangswert deklarieren

Um die Variablen in Aktion zu sehen, können Sie console.log() verwenden, um ihre Werte anzuzeigen:

<script>
  var firstName = "John";
  console.log(firstName); // Gibt aus: John
</script>

Beispielausgabe in der Entwicklerkonsole des Browsers:

John

Variablenwerte zuweisen und anzeigen

In diesem Schritt lernen Sie, wie Sie in JavaScript Variablenwerte zuweisen und mit verschiedenen Methoden anzeigen. Auf dem vorherigen Schritt aufbauend werden wir untersuchen, wie mit Variablenwerten umgegangen wird.

Öffnen Sie die Datei variables.html und aktualisieren Sie den <script>-Abschnitt mit dem folgenden Code:

<!doctype html>
<html lang="en">
  <body>
    <div id="output"></div>
    <script>
      // Variablen deklarieren und zuweisen
      var firstName = "John";
      var age = 25;
      var isStudent = true;

      // Variablenwerte erneut zuweisen
      age = 26;
      firstName = "Jane";

      // Werte mit console.log() anzeigen
      console.log("Name: " + firstName);
      console.log("Age: " + age);
      console.log("Is Student: " + isStudent);

      // Werte auf der Webseite anzeigen
      var outputElement = document.getElementById("output");
      outputElement.innerHTML =
        "Name: " +
        firstName +
        "<br>Age: " +
        age +
        "<br>Is Student: " +
        isStudent;
    </script>
  </body>
</html>

Wichtige Punkte zuweisen und anzeigen von Variablen:

Verwenden Sie =, um Werte an Variablen zuzuweisen oder erneut zuzuweisen
console.log() zeigt Werte in der Entwicklerkonsole des Browsers an
document.getElementById().innerHTML kann Werte direkt auf der Webseite anzeigen
Sie können Strings und Variablen mit + konkatenieren

Beispielausgabe in der Entwicklerkonsole des Browsers:

Name: Jane
Age: 26
Is Student: true

Beispielausgabe auf der Webseite:

Name: Jane
Age: 26
Is Student: true

Üben Sie die Variablennamenskonventionen

In diesem Schritt lernen Sie die bewährten Methoden für die Namensgebung von Variablen in JavaScript. Ein gutes Variablennamen ist entscheidend für das Schreiben von sauberem, lesbarem und wartbarem Code.

Öffnen Sie die Datei variables.html und aktualisieren Sie den <script>-Abschnitt mit den folgenden Beispielen:

<!doctype html>
<html lang="en">
  <body>
    <div id="output"></div>
    <script>
      // Gute Variablennamenskonventionen

      // Verwenden Sie camelCase für Variablennamen
      var firstName = "John";
      var lastName = "Doe";
      var age = 25;
      var isStudent = true;

      // Deskriptive und sinnvolle Namen
      var totalPrice = 99.99;
      var discountPercentage = 10;
      var calculatedDiscount = totalPrice * (discountPercentage / 100);

      // Vermeiden Sie Variablen mit einzelnen Buchstaben (außer in speziellen Fällen wie Schleifen)
      var x = 10; // Schlecht
      var width = 10; // Gut

      // Zeigen Sie die Ergebnisse an
      console.log("Full Name: " + firstName + " " + lastName);
      console.log("Discounted Price: $" + calculatedDiscount);

      var outputElement = document.getElementById("output");
      outputElement.innerHTML =
        "Full Name: " +
        firstName +
        " " +
        lastName +
        "<br>Age: " +
        age +
        "<br>Discounted Price: $" +
        calculatedDiscount;
    </script>
  </body>
</html>

Wichtige Variablennamenskonventionen:

Verwenden Sie camelCase (z.B. firstName, lastName)
Wählen Sie deskriptive und sinnvolle Namen
Vermeiden Sie Variablennamen mit einzelnen Buchstaben
Verwenden Sie in Ihrem Namensstil konsistent
Verwenden Sie Substantive für Variablen
Verwenden Sie sinnvolle Präfixe wie is für boolesche Variablen

Beispielausgabe in der Entwicklerkonsole des Browsers:

Full Name: John Doe
Discounted Price: $9.999

Beispielausgabe auf der Webseite:

Full Name: John Doe
Age: 25
Discounted Price: $9.999

Zusammenfassung

In diesem Labyrinth erkunden die Teilnehmer die grundlegenden Konzepte von JavaScript-Variablen und ihre Rolle in der Webentwicklung. Das Labyrinth beginnt mit der Einführung von JavaScript als leistungsstarkes clientseitiges Skriptsprache, die interaktive und dynamische Web-Erlebnisse ermöglicht, wobei ihre Fähigkeit betont wird, HTML und CSS zu manipulieren, Benutzerereignisse zu verarbeiten und Echtzeit-Berechnungen durchzuführen.

Durch einen schrittweisen Ansatz setzen die Lernenden eine HTML-Datei auf und beginnen, die Variablendeklaration mit dem Schlüsselwort var zu üben, wobei sie die Wichtigkeit angemessener Variablennamenskonventionen und die Art und Weise verstehen, wie Variablenwerte zugewiesen und angezeigt werden. Die praxisorientierten Übungen liefern praktische Einblicke in das Erstellen dynamischer Webinhalte und demonstrieren die Vielseitigkeit von JavaScript bei der Umwandlung statischer Webseiten in interaktive und ansprechende Benutzererlebnisse.