Erste Schritte: Variablen, Datentypen und Operatoren

Worum es geht

Ilaria ist im 2. Lehrjahr als Mediamatikerin bei der Seenland Tourismus AG in Murten. Die Website ist sauber in HTML und CSS gebaut, aber sie kann nichts: Wer wissen will, was die Schifffahrt mit Fondue für eine Gruppe von 17 Personen kostet, muss anrufen. Das Marketing wünscht sich einen Preisrechner, der sofort antwortet.

Genau dafür gibt es JavaScript. HTML legt fest, was auf der Seite steht, CSS, wie es aussieht, und JavaScript, was passiert: rechnen, entscheiden, reagieren. In dieser Lektion schreibst du deine ersten Zeilen und lernst die Bausteine kennen, aus denen jedes Skript besteht: Variablen, Datentypen und Operatoren. Am Ende rechnest du die MWST für eine Offerte aus, und zwar so, dass kein Rappen verloren geht.

JavaScript einbinden und die Konsole öffnen

JavaScript läuft direkt im Browser. Du schreibst es in eine eigene Datei, zum Beispiel script.js, und bindest sie im head deiner Seite ein:

<!DOCTYPE html>
<html lang="de-CH">
<head>
  <meta charset="utf-8">
  <title>Ausflüge am Murtensee</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <h1>Ausflüge am Murtensee</h1>
</body>
</html>

Das Attribut defer ist wichtig: Der Browser lädt das Skript zwar sofort herunter, führt es aber erst aus, wenn das ganze HTML gelesen ist. Ohne defer läuft das Skript, bevor der body existiert, und findet später keine Elemente.

In script.js steht als Erstes:

console.log("Hallo Murten!");

Öffne die Seite mit Live Server in VS Code und drücke F12 (oder Ctrl + Shift + I, auf dem Mac Cmd + Option + I). Im Tab Console steht jetzt «Hallo Murten!». Die Konsole ist ab heute dein wichtigstes Werkzeug: Hier siehst du Ausgaben und rote Fehlermeldungen, und du kannst JavaScript direkt eintippen und ausprobieren.

Variablen: Werte mit Namen

Eine Variable ist ein benannter Speicherplatz für einen Wert, wie eine beschriftete Schachtel. In modernem JavaScript gibt es zwei Arten:

const PREIS_ERWACHSENE = 59;   // ändert sich nicht
let anzahlPersonen = 12;       // darf sich ändern

anzahlPersonen = 17;           // erlaubt, weil let
// PREIS_ERWACHSENE = 65;      // Fehler: Assignment to constant variable.

• const (constant): Der Wert wird einmal zugewiesen und danach nicht mehr ersetzt. Das ist der Standard.
• let: nur für Werte, die sich wirklich ändern, zum Beispiel ein Zähler oder ein Zwischentotal.
• var findest du noch in alten Skripten. Verwende es nicht, es hat verwirrende Regeln.

Für Namen gilt in JavaScript camelCase: anzahlPersonen, preisProKind. Feste Konfigurationswerte schreiben viele Teams in GROSSBUCHSTABEN wie PREIS_ERWACHSENE. Wähle sprechende Namen: gesamtpreis erklärt sich selbst, x nicht.

const kategorien = ["Wasser"];
kategorien.push("Wandern");     // Zeile A
let anzahl = kategorien.length;
anzahl = anzahl + 1;             // Zeile B
const PREIS = 59;
PREIS = 65;                      // Zeile C

Datentypen und Operatoren

Jeder Wert hat einen Datentyp. Mit typeof fragst du ihn ab:

Arrays und Objekte schauen wir in Lektion 2 genau an.

Mit Zahlen rechnest du wie gewohnt: +, -, *, / und % (Rest einer Division, 17 % 5 ergibt 2). Spannend wird es, wenn Text und Zahl zusammenkommen. Das + hat in JavaScript zwei Bedeutungen: Bei Zahlen addiert es, bei Text hängt es an.

console.log(10 + 5);       // 15
console.log("10" + 5);     // "105"  Text + Zahl = Text wird angehängt
console.log("10" - 5);     // 5      minus gibt es nur für Zahlen, also wird umgewandelt
console.log(Number("10") + 5); // 15  sauber umgewandelt

Das ist keine Theorie: Alles, was aus einem Eingabefeld kommt, ist Text, auch wenn eine Zahl drinsteht. Wandle Eingaben darum immer zuerst mit Number() um. Kann Number() den Text nicht lesen, entsteht NaN (Not a Number). Achtung: Number("") ergibt 0, nicht NaN. Ein leeres Feld musst du also selbst abfangen.

const eingabe = "20";
console.log(eingabe + 10 - 5);

Texte zusammensetzen mit Template Literals

Statt Texte mühsam mit + zu verketten, verwendest du Template Literals: Text zwischen Backticks (`), in den du mit ${...} Werte einsetzt.

const personen = 17;
const ort = "Murten";
console.log(`Gruppe mit ${personen} Personen ab ${ort}`);
// Gruppe mit 17 Personen ab Murten

Rechnen mit Geld: Rappen statt Franken

Tippe in die Konsole 0.1 + 0.2. Das Ergebnis ist 0.30000000000000004. Der Computer speichert Kommazahlen binär, und manche Dezimalbrüche lassen sich so nicht exakt darstellen. Bei einem Preisrechner ist das gefährlich: Nach ein paar Rechenschritten steht plötzlich CHF 769.9499999 auf dem Bildschirm.

Die Lösung aus der Praxis: Rechne intern in Rappen als ganze Zahlen und wandle erst bei der Ausgabe in Franken um. Mit toFixed(2) bekommst du genau zwei Nachkommastellen als Text.

const preisRappen = 5900;               // CHF 59.00
const total = preisRappen * 12;         // 70800 Rappen, exakt
console.log(`CHF ${(total / 100).toFixed(2)}`); // CHF 708.00

Erste Entscheidung: if und else

Ein Programm muss entscheiden können. Die Druckerei im Kundenstamm von Ilaria gibt ab 1000 Flyern Rabatt. Das sieht so aus:

const auflage = 2000;
let rabatt = 0;

if (auflage >= 5000) {
  rabatt = 0.25;
} else if (auflage >= 1000) {
  rabatt = 0.15;
}

const totalRappen = Math.round(auflage * 18 * (1 - rabatt)); // 18 Rappen pro Stück
console.log(`CHF ${(totalRappen / 100).toFixed(2)}`);       // CHF 306.00

Die Bedingungen werden von oben nach unten geprüft, die erste zutreffende gewinnt. Darum steht die grösste Schwelle zuerst. Mehr zu Bedingungen und Vergleichen folgt in Lektion 2.

Schritt für Schritt: MWST für eine Offerte

Das Marketing schickt Firmen Offerten für Ausflüge. Auf jedem Nettobetrag kommen 8.1 % MWST dazu (Normalsatz in der Schweiz seit 2024). Ilaria will Nettobetrag, MWST und Bruttobetrag in der Konsole sehen.

Schritt 1: Ausgangswerte festlegen. Die Offerte lautet auf CHF 1'250.00 netto. In Rappen sind das 125000.

const MWST_SATZ = 8.1;           // Prozent
const nettoRappen = 125000;      // CHF 1250.00

Schritt 2: MWST berechnen und auf ganze Rappen runden. 125000 × 8.1 / 100 = 10125. Bei anderen Beträgen entstehen Bruchteile von Rappen, darum runden wir mit Math.round.

const mwstRappen = Math.round(nettoRappen * MWST_SATZ / 100);  // 10125

Schritt 3: Bruttobetrag addieren. Weil beide Werte ganze Zahlen sind, ist die Addition exakt: 125000 + 10125 = 135125.

const bruttoRappen = nettoRappen + mwstRappen;                 // 135125

Schritt 4: Für die Anzeige in Franken umwandeln. Erst jetzt teilen wir durch 100 und formatieren mit zwei Stellen.

console.log(`Netto:  CHF ${(nettoRappen / 100).toFixed(2)}`);  // Netto:  CHF 1250.00
console.log(`MWST:   CHF ${(mwstRappen / 100).toFixed(2)}`);   // MWST:   CHF 101.25
console.log(`Brutto: CHF ${(bruttoRappen / 100).toFixed(2)}`); // Brutto: CHF 1351.25

Schritt 5: Gegenprobe. Rechne mit dem Taschenrechner nach: 1250 × 1.081 = 1351.25. Stimmt. Ändere nettoRappen auf 4590 (CHF 45.90): Die MWST ist 4590 × 8.1 / 100 = 371.79, gerundet 372 Rappen, brutto CHF 49.62.

In den Code-Laboren dieses Kurses schreibst du deinen Code jeweils in einen vorbereiteten Funktionsrahmen: Zwischen den geschweiften Klammern steht deine Logik, und mit return gibst du das Ergebnis zurück. Was Funktionen genau sind, lernst du in Lektion 3. Automatische Tests prüfen danach, ob alles stimmt.

Das zweite Labor kümmert sich um das Problem mit den Eingabefeldern: Eine Person tippt «12,50» mit Komma, eine andere lässt das Feld leer.

Typische Fehler

1. Skript ohne defer im head. Das Skript läuft, bevor die Elemente da sind. In späteren Lektionen führt das zu null-Fehlern. Korrektur: defer ergänzen.
2. Mit Text rechnen. "12" + 5 ergibt "125". Korrektur: Eingaben mit Number() umwandeln und mit Number.isNaN() prüfen, ob die Umwandlung geklappt hat.
3. Komma statt Punkt. In JavaScript ist der Dezimaltrenner immer der Punkt. Number("12,50") ergibt NaN. Korrektur: Komma vorher mit .replace(",", ".") ersetzen.
4. Mit Franken-Kommazahlen rechnen und erst am Schluss runden. Kleine Ungenauigkeiten summieren sich. Korrektur: in Rappen rechnen, nach jeder Prozentrechnung mit Math.round auf ganze Rappen runden.
5. const für einen Zähler. const zaehler = 0; zaehler = zaehler + 1; bricht mit «Assignment to constant variable» ab. Korrektur: Für Werte, die sich ändern, let verwenden.

Zusammenfassung

• JavaScript bindest du mit <script src="script.js" defer></script> ein, Ausgaben siehst du mit console.log in den DevTools (F12).
• const ist der Standard, let für veränderliche Werte, var nicht mehr verwenden.
• Wichtige Datentypen: Zahl, Text, Wahrheitswert, undefined, null, Array und Objekt. typeof zeigt den Typ.
• + mit Text hängt an statt zu addieren. Eingaben immer mit Number() umwandeln.
• Template Literals mit Backticks und ${...} machen Ausgaben lesbar.
• Geld in Rappen als ganze Zahl rechnen, erst bei der Anzeige mit toFixed(2) in Franken formatieren.
• if / else if / else prüft von oben nach unten, die erste zutreffende Bedingung gewinnt.