Aufwärmen · Aufgabe 1 von 7
// B2.1 · ca. 30 Min. · Einstieg
Primitive Typen und typeof
Nach dieser Lektion bestimmen Sie den Typ jedes JavaScript-Werts, sagen vorher, was + mit Text und Zahlen macht, und wandeln Werte gezielt mit Number(), String() und Boolean() um.
Lektion 1 von 5 in B2 Grammatik, Typen und Operatoren
Anfang des ModulsWeiter
Danach können Sie
- Die sieben primitiven Typen und object nennen und den Typ eines Werts mit typeof prüfen
- Vorhersagen, was + mit Strings und Zahlen macht und was -, * und / mit Strings machen
- Werte mit Number(), String() und Boolean() umwandeln und wissen, was NaN, 0 oder false ergibt
Vorhersagen · Aufgabe 2 von 7
Sagen Sie es vorher, bevor Sie weiterlesen: Was gibt dieser Code aus?
console.log("5" + 2, "5" - 2);Üben · Aufgabe 3 von 7
Ergänzen Sie einen Wert, sodass das Programm boolean ausgibt.
console.log(typeof ____);console.log(typeof );Üben · Aufgabe 4 von 7
Ordnen Sie jedem Ausdruck zu, was console.log dafür ausgibt.
Üben · Aufgabe 5 von 7
Ein Formularfeld enthält "12px". Was gibt dieser Code aus?
console.log(Number("12px"));Denksport · Aufgabe 6 von 7
Knobelaufgabe. Was gibt dieser Code aus?
console.log(1 + 2 + "3", "1" + 2 + 3);Anwenden · Aufgabe 7 von 7
Mini-Aufgabe. Eine Shop-Seite liefert den Preis "19.99" als String, der Versand kostet 4.5. Geben Sie den Typ von beiden aus, dann die falsche Summe, die price + shipping ergibt, dann die richtige Summe mit Number(). Geben Sie zum Schluss Boolean("") aus, um zu sehen, was ein leeres Formularfeld zählt.
Prüfen Sie Ihr Ergebnis anhand dieser Liste
Selbst programmieren
Lesen Sie das ausgearbeitete Beispiel und lösen Sie dann die Übungen. Ihr Code läuft in Ihrem Browser oder auf Ihrem Computer und wird nie hochgeladen.
Ausgearbeitetes Beispiel
Ein Bestellformular auslesen
Werte aus einem Webformular kommen als Strings an, auch wenn sie wie Zahlen aussehen. Dieses Programm zeigt, was das mit einer Rechnung macht, wandelt die Werte gezielt um und prüft einige Typen mit typeof. Führen Sie es aus, ändern Sie dann quantity in "three" und sehen Sie nach, was Number() daraus macht.
main.js
// Values from a web form always arrive as text.
const quantity = "3";
const price = "4.50";
const giftNote = "";
console.log(typeof quantity, typeof price);
console.log("joined:", quantity + price);
console.log("total:", Number(quantity) * Number(price));
console.log("gift note?", Boolean(giftNote));
console.log("price as text:", String(Number(price)));
console.log(typeof null, typeof undefined, typeof 10n);
Ausführen mit
node main.jsAusgabe
string string
joined: 34.50
total: 13.5
gift note? false
price as text: 4.5
object undefined bigint- quantity + price verbindet die beiden Strings: Aus "3" und "4.50" wird "34.50".
- Number() macht aus jedem String zuerst eine Zahl, also multipliziert *: 3 × 4.5 ist 13.5.
- Ein leerer String wird zu false, Boolean(giftNote) zeigt also, dass das Feld leer blieb.
- Number("4.50") ist 4.5; String() macht daraus wieder Text, ohne die zusätzliche Null.
- typeof null ist "object", ein alter Fehler der Sprache, der beibehalten wurde.
Ändern und ausführen
Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.
Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.
Übungen
Übung 1 von 2
Den Warenkorb zählen
Zwei Mengen kommen als Strings aus einem Formular, "2" und "3". Das Programm soll Items: 5 und danach Type: number ausgeben, gibt aber Items: 23 und Type: string aus. Wandeln Sie die Mengen mit Number() um, bevor Sie sie addieren, und behalten Sie die beiden console.log-Zeilen bei.
Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.
Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.
Hinweise
Hinweis 1
apples + pears verbindet zwei Strings: "2" + "3" ist "23".
Hinweis 2
Number("2") ist die Zahl 2. Wandeln Sie jede Menge vor dem + um.
Hinweis 3
const total = Number(apples) + Number(pears);
Eine Lösung zeigen
Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.
// Two quantities typed into a form arrive as text.
const apples = "2";
const pears = "3";
const total = Number(apples) + Number(pears);
console.log("Items:", total);
console.log("Type:", typeof total);
Auf dem eigenen Computer ausführen
Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.
main.js
// Two quantities typed into a form arrive as text.
const apples = "2";
const pears = "3";
const total = apples + pears;
console.log("Items:", total);
console.log("Type:", typeof total);
main.test.js
import {test} from 'node:test';
import assert from 'node:assert/strict';
import {runMain} from './learnrun.js';
const lines = async () => (await runMain()).trimEnd().split('\n');
test('gibt die Anzahl der Artikel aus', async () => {
const got = await lines();
assert.equal(got[0], 'Items: 5', `die erste Zeile ist ${JSON.stringify(got[0])}, erwartet: "Items: 5"`);
});
test('die Summe ist eine Zahl', async () => {
const got = await lines();
assert.equal(got[1], 'Type: number', `die zweite Zeile ist ${JSON.stringify(got[1])}, erwartet: "Type: number"`);
});
test('gibt zwei Zeilen aus', async () => {
const got = await lines();
assert.equal(got.length, 2, `das Programm gab ${got.length} Zeile(n) aus, erwartet: 2`);
});
package.json
{
"type": "module"
}
package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.
Programm ausführen:
node main.jsPrüfungen ausführen (learnrun.js muss im selben Ordner liegen):
node --testÜbung 2 von 2
Wahr oder falsch?
Geben Sie in einer Zeile aus, was Boolean() aus diesen sechs Werten macht, in dieser Reihenfolge: 0, "0", "", " " (ein Leerzeichen), null und "false". Übergeben Sie alle sechs Ergebnisse an ein einziges console.log. Sagen Sie jedes Ergebnis vorher, bevor Sie das Programm ausführen.
Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.
Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.
Hinweise
Hinweis 1
console.log(Boolean(0), Boolean("0")) gibt zwei Ergebnisse in einer Zeile aus; ergänzen Sie die anderen vier genauso.
Hinweis 2
Unter den Strings ist nur der leere String "" false; "0", " " und "false" enthalten Zeichen.
Hinweis 3
0 und null werden beide zu false.
Eine Lösung zeigen
Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.
console.log(Boolean(0), Boolean("0"), Boolean(""), Boolean(" "), Boolean(null), Boolean("false"));
Auf dem eigenen Computer ausführen
Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.
main.js
// Print Boolean(value) for each value, all on one line:
// 0, "0", "", " ", null, "false"
main.test.js
import {test} from 'node:test';
import assert from 'node:assert/strict';
import {runMain} from './learnrun.js';
test('gibt eine Zeile aus', async () => {
const got = (await runMain()).trimEnd().split('\n');
assert.equal(got.length, 1, `das Programm gab ${got.length} Zeile(n) aus, erwartet: 1`);
});
test('gibt die sechs Ergebnisse der Reihe nach aus', async () => {
const got = (await runMain()).trimEnd();
assert.equal(got, 'false true false true false true', `das Programm gab ${JSON.stringify(got)} aus`);
});
package.json
{
"type": "module"
}
package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.
Programm ausführen:
node main.jsPrüfungen ausführen (learnrun.js muss im selben Ordner liegen):
node --testHäufige Fehler
bigint und number mischen
const big = 10n;
console.log(big + 1);
Was Node.js ausgibt
TypeError: Cannot mix BigInt and other types, use explicit conversionsWarum, und die Lösung
bigint und number sind verschiedene Typen, und beim Rechnen wandelt JavaScript nicht selbst zwischen ihnen um, weil ein großer bigint als number Stellen verlieren könnte. Verwenden Sie auf beiden Seiten bigints, big + 1n, oder wandeln Sie gezielt um: Number(big) + 1. Die meisten Programme brauchen bigint nie; nutzen Sie ihn nur für ganze Zahlen, die für number zu groß sind.
null wie einen String behandeln
const nickname = null;
console.log(nickname.length);
Was Node.js ausgibt
TypeError: Cannot read properties of null (reading 'length')Warum, und die Lösung
null bedeutet „kein Wert“, hat also keine length und auch sonst keine Eigenschaften. Eine davon zu lesen, stoppt das Programm; undefined ergibt denselben Fehler mit undefined in der Meldung. Prüfen Sie, woher der Wert kommt: Wenn ein Name fehlen kann, geben Sie ihm einen String wie "" statt null, oder behandeln Sie den fehlenden Fall zuerst (Modul B3 zeigt, wie das mit if geht).
Ein Symbol mit + verbinden
const id = Symbol("id");
console.log("id: " + id);
Was Node.js ausgibt
TypeError: Cannot convert a Symbol value to a stringWarum, und die Lösung
Ein Symbol ist eine eindeutige Kennung, kein Text, und + weigert sich, es stillschweigend in einen String umzuwandeln. Wenn Sie es anzeigen müssen, wandeln Sie es gezielt um: String(id) ergibt "Symbol(id)". Symbole kommen in diesem Kurs selten vor; der Punkt ist, dass + die meisten Werte ungefragt umwandelt, diesen aber nicht.
JavaScript im Browser: die eigene Engine Ihres Browsers in einem abgeschotteten Worker. Syntaxfehler findet acorn 8.18.0, MIT. Lizenz und Quellcode
Abschlussquiz
5 Fragen, ohne Hinweise. Ab 80 % ist die Lektion abgeschlossen.
Erledigen Sie zuerst alle Aufgaben oben, um das Abschlussquiz freizuschalten.