Grundlagen von JavaScript

In diesem Kapitel beginnen wir unsere Reise mit JavaScript und lernen die grundlegenden Konzepte und Werkzeuge kennen, die Sie für den Einstieg benötigen.

JavaScript in HTML einbinden

Es gibt verschiedene Möglichkeiten, JavaScript in Ihre HTML-Seiten einzubinden:

1. Inline-Script

JavaScript kann direkt im HTML-Dokument mit dem <script>-Tag eingebettet werden:

<!DOCTYPE html>
<html>
  <head>
    <title>Meine erste JavaScript-Seite</title>
  </head>
  <body>
    <h1>Willkommen zu JavaScript</h1>

    <script>
      // Hier steht Ihr JavaScript-Code
      console.log("Hallo Welt!");
    </script>
  </body>
</html>

2. Externes JavaScript-File

Für grössere Projekte ist es besser, JavaScript in separate Dateien auszulagern:

<!DOCTYPE html>
<html>
  <head>
    <title>Meine erste JavaScript-Seite</title>
    <!-- JavaScript im head laden -->
    <script src="meinScript.js"></script>
  </head>
  <body>
    <h1>Willkommen zu JavaScript</h1>

    <!-- Oder am Ende des body (empfohlen) -->
    <script src="meinZweitesScript.js"></script>
  </body>
</html>

Tipp: Das Einbinden von JavaScript am Ende des <body>-Tags ist oft vorteilhaft, da so zuerst der HTML-Inhalt geladen wird, bevor JavaScript ausgeführt wird.

Die Browserkonsole

Die Browserkonsole ist ein unverzichtbares Werkzeug für JavaScript-Entwickler:

Öffnen Sie Ihren Browser (Chrome, Firefox, Edge)
Drücken Sie F12 oder klicken Sie mit der rechten Maustaste und wählen Sie “Untersuchen”
Klicken Sie auf den Tab “Konsole”

Hier können Sie:

JavaScript-Code direkt eingeben und ausführen
Fehler und Warnungen sehen
Ausgaben Ihres Codes mit console.log() betrachten

Grundlegende Syntax

Anweisungen und Semikolons

Jede JavaScript-Anweisung sollte mit einem Semikolon enden:

let name = "Max";
console.log("Hallo " + name);

Obwohl das Semikolon in vielen Fällen optional ist, wird empfohlen, es immer zu verwenden, um potenzielle Fehler zu vermeiden.

Kommentare

Kommentare helfen, Ihren Code zu dokumentieren:

// Einzeiliger Kommentar

/*
  Mehrzeiliger
  Kommentar
*/

let x = 5; // Kommentar am Ende einer Zeile

Gross- und Kleinschreibung

JavaScript ist case-sensitive. Das bedeutet, variable und Variable sind zwei verschiedene Variablen:

let name = "Max";
let Name = "Anna";
console.log(name); // Ausgabe: Max
console.log(Name); // Ausgabe: Anna

Leerzeichen und Zeilenumbrüche

JavaScript ignoriert zusätzliche Leerzeichen und Zeilenumbrüche. Nutzen Sie dies für einen besser lesbaren Code:

// Diese beiden Schreibweisen sind identisch
let x = 5 + 10;
let y = 5 + 10;

Ausgabemöglichkeiten

Es gibt verschiedene Wege, Ergebnisse in JavaScript auszugeben:

`console.log()`

Die häufigste Methode zur Ausgabe während der Entwicklung:

console.log("Hallo Welt!");
console.log(42);
console.log(true);

`alert()`

Zeigt ein Popup-Fenster an:

alert("Achtung! Wichtige Nachricht.");

`document.write()`

Schreibt direkt in das HTML-Dokument (sollte nach dem Laden der Seite vermieden werden):

document.write("<h2>Neue Überschrift</h2>");

`innerHTML`

Ändert den Inhalt eines HTML-Elements:

document.getElementById("meinElement").innerHTML = "Neuer Text";

JavaScript-Ausführungsreihenfolge

JavaScript-Code wird generell von oben nach unten ausgeführt:

console.log("Erster");
console.log("Zweiter");
console.log("Dritter");
// Ausgabe: Erster, Zweiter, Dritter

Es gibt jedoch Ausnahmen, wie z.B. Funktionen, die erst aufgerufen werden müssen, oder asynchrone Operationen, auf die wir später eingehen werden.

Beste Praktiken für Anfänger

Konsistenter Stil: Verwenden Sie einen einheitlichen Stil (Einrückungen, Namenskonventionen)
Einfach halten: Beginnen Sie mit einfachem Code und steigern Sie die Komplexität schrittweise
Testen Sie häufig: Überprüfen Sie regelmässig, ob Ihr Code wie erwartet funktioniert
Debuggen: Nutzen Sie console.log(), um Variablenwerte während der Ausführung zu überprüfen
Lernen Sie aus Fehlern: JavaScript-Fehlermeldungen in der Konsole helfen Ihnen, Probleme zu verstehen und zu beheben

Übung: Erste Schritte mit JavaScript

Jetzt ist es Zeit, Ihr Wissen in die Praxis umzusetzen:

Erstellen Sie eine einfache HTML-Datei mit folgendem Inhalt:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Grundlagen</title>
  </head>
  <body>
    <h1>Meine ersten Schritte mit JavaScript</h1>
    <p id="ausgabe">Hier wird bald ein Text stehen.</p>

    <script>
      // Hier kommt Ihr JavaScript-Code
      console.log("JavaScript ist geladen!");

      // Ändern Sie den Text im Absatz
      document.getElementById("ausgabe").innerHTML =
        "Dieser Text wurde mit JavaScript geändert!";

      // Erstellen Sie eigene Variablen und geben Sie sie in der Konsole aus
      let meineZahl = 42;
      let meinText = "JavaScript lernen macht Spass!";
      let istWahr = true;

      console.log(meineZahl);
      console.log(meinText);
      console.log(istWahr);

      // Experimentieren Sie mit einfachen Berechnungen
      console.log(meineZahl + 8);
      console.log(meinText + " Es ist " + istWahr + "!");
    </script>
  </body>
</html>

Speichern Sie die Datei als javascript-grundlagen.html
Öffnen Sie die Datei in Ihrem Browser
Öffnen Sie die Browserkonsole, um die Ausgaben zu sehen
Experimentieren Sie mit dem Code:
- Ändern Sie die Werte der Variablen
- Fügen Sie weitere console.log()-Anweisungen hinzu
- Ändern Sie den HTML-Text mit innerHTML

Herzlichen Glückwunsch! Sie haben soeben Ihre ersten Schritte mit JavaScript gemacht. Im nächsten Kapitel werden wir uns mit Variablen und Datentypen beschäftigen – den Grundbausteinen jeder JavaScript-Anwendung.