3. Unterrichtsblock: Variablen, Datentypen und Rechnen

Heute lernst du, wie man in JavaScript Werte speichert, mit ihnen rechnet und sie vergleicht. Du arbeitest lokal in einem Projektordner und siehst Ergebnisse in der Browser-Konsole und auf der Seite. Neben jedem Beispiel siehst du, was dabei herauskommt.

Projekt vorbereiten

Lege einen Ordner js-projekt mit zwei Dateien an: index.html und app.js. Das Skript bindest du wie in Block 2 als externe Datei ein.

<!-- index.html -->
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>JavaScript üben</title>
  </head>
  <body>
    <h1>JavaScript üben</h1>
    <p id="ausgabe"></p>
    <script src="app.js"></script>
  </body>
</html>

// app.js
console.log("app.js wurde geladen");

Öffne index.html im Browser und drücke F12. Im Reiter Konsole steht jetzt die Ausgabe von console.log(). Dort erscheinen auch Fehlermeldungen.

Variablen: Werte speichern

Eine Variable ist ein Name für einen gespeicherten Wert. Mit let legst du eine Variable an, deren Wert sich ändern darf. Mit const legst du eine Konstante an, deren Wert gleich bleibt.

const name = "Lina";   // bleibt gleich
let alter = 17;       // kann sich ändern

alter = 18;           // neuer Wert: erlaubt
console.log(name, alter);

Namen für Variablen

Üblich ist die camelCase-Schreibweise: preisProStueck. Wähle Namen, die sagen, was gespeichert ist.

Und was ist mit var?

Bevor es let und const gab (vor 2015), benutzte man var. Du findest es in vielen älteren Beispielen und Tutorials im Netz. Es funktioniert, verhält sich aber an drei Stellen anders und führt leicht zu Fehlern, die man nicht bemerkt:

var alter = 17;
var alter = 18;            // kein Fehler, obwohl doppelt angelegt
console.log(alter);        // 18

console.log(vorname);      // undefined, nicht einmal ein Fehler
var vorname = "Lina";

Dasselbe mit let: Hier meldet JavaScript beide Fehler sofort und du findest sie gleich. Die zwei Beispiele laufen getrennt, weil schon der erste Fehler das Skript stoppt.

let alter = 17;
let alter = 18;            // Fehler: Name schon vergeben
console.log(alter);

console.log(vorname);      // Fehler: benutzt, bevor es angelegt wurde
let vorname = "Lina";

Fehlermeldungen lesen

Fehler gehören dazu. Die Konsole zeigt dir, was schiefgelaufen ist: den Fehlertyp, eine Erklärung und die Datei mit Zeilennummer. Drei typische Fehler:

const pi = 3.14;
pi = 3;              // const neu zuweisen

let punkte = 10;
let punkte = 20;     // Namen doppelt angelegt

console.log(gesamtpreis);   // gibt es nicht

Datentypen

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

const name = "Lina";
const alter = 17;
const istSchueler = true;
let ohneWert;

console.log(typeof name);
console.log(typeof alter);
console.log(typeof istSchueler);
console.log(typeof ohneWert);

Eingaben aus Formularfeldern sind immer Text. Probiere es aus:

const eingabe = "42";
console.log(typeof eingabe);            // string
console.log(typeof Number(eingabe));    // number

Text und Zahl mischen

Der Operator + rechnet bei Zahlen und hängt bei Text zusammen. Sobald ein Text dabei ist, wird zusammengehängt.

console.log(5 + 5);        // 10
console.log("5" + 5);      // 55
console.log("Hallo" + 5);  // Hallo5
console.log("5" - 2);      // 3  (Minus gibt es nur für Zahlen)
console.log(Number("5") + 5);  // 10

Rechnen

Mit Zahlen rechnest du mit den arithmetischen Operatoren. Es gilt Punkt vor Strich, mit Klammern steuerst du die Reihenfolge.

Probiere mit eigenen Zahlen aus:

Kurzschreibweisen für Zuweisungen

Statt punkte = punkte + 5 schreibt man kürzer punkte += 5.

let punkte = 10;
punkte += 5;     // 15
punkte *= 2;     // 30
console.log(punkte);

Vergleichen

Vergleiche liefern immer einen Wahrheitswert: true oder false. Wir benutzen den strengen Vergleich ===: Er prüft Wert und Datentyp.

const x = 5;
console.log(x === 5);     // true
console.log(x === "5");   // false, denn "5" ist Text
console.log(x == "5");    // true, weil == den Typ ignoriert
console.log(x > 3);       // true

Eigenheiten von JavaScript

JavaScript hat einige Eigenheiten, die auf den ersten Blick wie Fehler aussehen. Es sind Regeln der Sprache, und man muss sie kennen, sonst wundert man sich. Sage bei jedem Ausdruck zuerst voraus, was herauskommt, und klicke dann auf „Ergebnis zeigen“.

Text und Zahlen

Das + hängt Text zusammen oder rechnet. Ein + vor einem Wert versucht, daraus eine Zahl zu machen. Aus "a" wird dabei NaN („Not a Number“, keine Zahl).

console.log("b" + "a" + +"a" + "a");

Kommazahlen sind nur Näherungen

Der Computer rechnet im Zweiersystem. Viele Dezimalzahlen wie 0,1 lassen sich dort nicht genau darstellen. Deshalb ist 0.1 + 0.2 nicht exakt 0,3.

Division durch null und NaN

JavaScript bricht bei einer Division durch null nicht mit einem Fehler ab. Es liefert Infinity (unendlich) oder NaN.

Abschlussaufgaben

Jetzt wird es anspruchsvoller. Nimm dir Zeit, es müssen nicht alle Aufgaben geschafft werden.

Kurz zusammengefasst

Variablen speichern Werte, const ist der Standard und let nur für Werte, die sich ändern. Jeder Wert hat einen Datentyp, und mit Text und Zahlen ist Vorsicht geboten. Rechnen geht mit + - * / % **, vergleichen mit ===. Die Konsole zeigt dir Ergebnisse und Fehler.