JavaScript kompakt

IT 12.6 – Webanwendungen · Einheit 2 · Café-App Schritt 2

Lernziele

Du kannst Variablen und Konstanten anlegen und ihre Unterschiede nennen.
Du kannst mit Zahlen, Texten und Wahrheitswerten arbeiten und Text in Zahlen umwandeln.
Du kannst Bedingungen und Schleifen lesen und schreiben.
Du kannst Funktionen mit Parametern und Rückgabewert entwickeln.
Du kannst Fehler mithilfe der Konsole finden.

Rückblick

1. Welche Aufgabe hat JavaScript neben HTML und CSS?

JavaScript bestimmt das Verhalten: rechnen, auf Eingaben reagieren, die Seite verändern.

2. Wo läuft JavaScript, das in einer Seite eingebunden ist?

Im Browser, also auf dem Gerät der Besucherin oder des Besuchers (clientseitig). Jeder kann den Code lesen.

3. Wo siehst du die Meldung von console.log(‘…’)?

In der Konsole der Entwicklerwerkzeuge (F12). Im Code-Spielplatz erscheint sie unter der Vorschau.

Kopfrechnen an der Kasse

Im Café wird bisher im Kopf gerechnet: drei Kakao zu 1,50 € und zwei Brezeln zu 0,90 €. Dabei passieren Fehler, und in der Pause muss es schnell gehen. Die Café-App soll das übernehmen. Dafür muss sie Zahlen speichern, rechnen, Entscheidungen treffen („Ist heute geöffnet?“) und Arbeitsschritte wiederholen.

Du hast vielleicht schon in einer anderen Sprache programmiert. In dieser Einheit lernst du, wie die Grundbausteine in JavaScript aussehen.

Erkunden: Was rechnet JavaScript?

Bevor du weiterliest: Bearbeite die Erkundungen. Die Erklärungen weiter unten helfen dir erst danach.

Erkundung 1: Erst vermuten, dann ausführen mittel

Schreibe zu jeder Zeile zuerst auf, was in der Konsole erscheinen wird. Führe den Code dann aus und vergleiche.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

a) Beschreibe, bei welchen Zeilen deine Vermutung falsch war.

b) Erkläre den Unterschied zwischen Zeile 4 und Zeile 5.

c) Vermute, warum Zeile 6 nicht genau 0.3 ausgibt, und was das für Preise im Café bedeutet.

Tipp 1

Zu b): Was kann * mit einem Text anfangen, und was macht +, wenn auf einer Seite ein Text steht?

Lösung

Erkundung 2: Die Preisstufen mittel

Das Café plant einen Mengenrabatt. Ein Mitglied des Teams hat dazu eine Funktion geschrieben:

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Vereinbart war: ab 5 Teilen 10 Prozent, ab 10 Teilen 20 Prozent.

a) Beschreibe, was die Schleife am Ende macht.

b) Überprüfe mithilfe der Ausgabe, ob die Funktion die Vereinbarung erfüllt. Gib die Fehler an.

c) Verbessere die Funktion und teste erneut.

Lösung

Die Konsole

Vergleicht eure Ergebnisse. Mit console.log(…) gibt ein Programm Werte in der Konsole aus. Das ist das wichtigste Werkzeug, um zu verstehen, was der Code tut. Fehler erscheinen dort rot, mit Zeilennummer.

Variablen und Konstanten

Eine Variable ist ein benannter Speicherplatz für einen Wert.

let anzahl = 3;        // Variable: Wert darf sich ändern
anzahl = anzahl + 1;   // jetzt 4

const MWST = 0.19;     // Konstante: Wert bleibt fest
MWST = 0.07;           // Fehler: TypeError

	`let` (Variable)	`const` (Konstante)
neuer Wert später erlaubt?	ja	nein
Wert bei der Deklaration nötig?	nein (`let summe;` geht)	ja
wann verwenden?	wenn sich der Wert ändert (Zähler, Summe)	für alles andere

Das Anlegen mit let oder const heißt Deklaration, das erste Setzen eines Werts Initialisierung. In älterem Code findest du noch var. Es verhält sich in Einzelheiten anders, du verwendest es nicht.

Namen: Buchstaben, Ziffern, _ und $, nicht mit einer Ziffer beginnend. Groß- und Kleinschreibung zählt (preis und Preis sind verschiedene Variablen). Üblich ist die camelCase-Schreibweise: gesamtPreis, anzahlBrezeln. Verzichte auf Umlaute und ß.

Datentypen

Typ	Beispiel	Bemerkung
Zahl (`number`)	`3`, `1.5`, `-2`	Dezimalpunkt statt Komma
Text (`string`)	`'Kakao'`, `"Tee"`	in einfachen oder doppelten Anführungszeichen
Wahrheitswert (`boolean`)	`true`, `false`	Ergebnis von Vergleichen
`undefined`		Variable ohne Wert
`null`		bewusst „kein Wert“, zum Beispiel „nichts gefunden“

Rechnen, Text verbinden, umwandeln

Rechenzeichen: + - * / und % (Rest). Klammern wie in der Mathematik. Kurzschreibweisen: summe += preis (dasselbe wie summe = summe + preis), i++ (um 1 erhöhen).

Texte verbinden mit + oder mit einem Template-String in Backticks, in den man Werte mit ${…} einsetzt:

const name = 'Mia';
const anzahl = 2;
console.log('Hallo ' + name + ', du bestellst ' + anzahl + ' Teile.');
console.log(`Hallo ${name}, du bestellst ${anzahl} Teile.`);

Umwandeln: Werte aus Eingabefeldern sind immer Text. Zum Rechnen wandelst du sie um:

Ausdruck	Ergebnis	Bemerkung
`Number('2.5')`	`2.5`	ganzer Text muss eine Zahl sein, sonst `NaN`
`parseFloat('2.5 €')`	`2.5`	liest eine Kommazahl am Anfang des Texts
`parseInt('12a')`	`12`	liest eine ganze Zahl am Anfang
`Number('abc')`	`NaN`	Not a Number: keine gültige Zahl; prüfbar mit `isNaN(…)`
`(4.5).toFixed(2)`	`'4.50'`	Text mit zwei Nachkommastellen
`Math.round(2.345 * 100) / 100`	`2.35`	auf zwei Stellen gerundete Zahl

Bedingungen

if (anzahl >= 5) {
  console.log('Mengenrabatt');
} else if (anzahl === 0) {
  console.log('Nichts bestellt');
} else {
  console.log('Kein Rabatt');
}

Vergleich	Bedeutung	Verknüpfung	Bedeutung
`===`	gleich (Wert und Typ)	`&&`	und
`!==`	ungleich	`\|\|`	oder
`<` `<=` `>` `>=`	kleiner, größer …	`!`	nicht

Schleifen

// zählende Schleife: Start; Bedingung; Schritt
for (let i = 1; i <= 3; i++) {
  console.log('Runde ' + i);
}

// Schleife mit Bedingung
let guthaben = 5;
while (guthaben >= 1.5) {
  guthaben = guthaben - 1.5;   // ein Kakao
}
console.log(guthaben);          // 0.5

Mit break verlässt man eine Schleife vorzeitig. Ist die Bedingung immer erfüllt, läuft die Schleife endlos, und die Seite reagiert nicht mehr.

Funktionen

Eine Funktion fasst Anweisungen unter einem Namen zusammen. Sie bekommt Werte über Parameter und liefert mit return ein Ergebnis zurück.

function gesamtpreis(einzelpreis, anzahl) {
  return einzelpreis * anzahl;
}

const ergebnis = gesamtpreis(1.5, 3);   // Aufruf mit Argumenten
console.log(ergebnis);                   // 4.5

Kurz geschrieben als Pfeilfunktion (arrow function), die du oft in fremdem Code und in Prüfungsaufgaben findest:

const gesamtpreis = (einzelpreis, anzahl) => einzelpreis * anzahl;

return beendet die Funktion sofort. Fehlt es, liefert die Funktion undefined. Variablen, die in einer Funktion mit let oder const angelegt werden, gibt es nur dort.

Zufall: Math.random() liefert eine Zufallszahl von 0 bis unter 1. Math.floor(x) rundet ab. Eine Zufallszahl von 1 bis 6 (Würfel) ergibt Math.floor(Math.random() * 6) + 1.

Texte untersuchen: text.length (Anzahl der Zeichen), text[0] (erstes Zeichen), text.toUpperCase(), text.toLowerCase(), text.includes('ab'), text.slice(1) (ab dem zweiten Zeichen).

Fehler finden

Meldung in der Konsole	häufige Ursache
`SyntaxError: Unexpected token`	Klammer, Anführungszeichen oder Komma fehlt oder ist zu viel
`ReferenceError: … is not defined`	Tippfehler im Namen oder Variable nicht angelegt
`TypeError: … is not a function`	Name falsch geschrieben oder etwas aufgerufen, das keine Funktion ist
keine Meldung, aber falsches Ergebnis	Logikfehler: mit `console.log` Zwischenwerte ausgeben

Die Zeilennummer in der Meldung zeigt, wo der Browser stutzt. Der eigentliche Fehler steht oft eine Zeile davor.

Café-App: Schritt 2

Café-App, Schritt 2: Rechnen für das Café mittel

Schreibe in deine Datei app.js (unter die Zeile aus Schritt 1) drei Funktionen. Teste jede in der Konsole des Browsers, indem du sie dort aufrufst, zum Beispiel preisFormatieren(4.5).

preisFormatieren(preis) liefert den Preis als Text mit Komma und zwei Nachkommastellen und dem Euro-Zeichen: aus 4.5 wird '4,50 €'.
gesamtpreis(einzelpreis, anzahl) liefert den Gesamtpreis als Zahl.
istGeoeffnet(wochentag) bekommt eine Zahl (0 = Sonntag, 1 = Montag, …, 6 = Samstag) und liefert true von Montag bis Freitag, sonst false.

Tipp 1

Zu 1.: toFixed(2) liefert einen Text. Texte haben die Methode replace('.', ',').

Tipp 2

Zu 3.: Montag bis Freitag sind die Zahlen 1 bis 5. Es reicht eine einzige Bedingung mit &&.

Stand nach Schritt 2

Aufgaben

Aufgabe 1: Code lesen – Schreibtischtest leicht

let summe = 0;
let teile = 0;
const preise = [2, 0.5, 3];
for (let i = 0; i < preise.length; i++) {
  summe = summe + preise[i];
  teile++;
}
console.log(teile + ' Teile kosten ' + summe + ' Euro');

preise.length ist die Anzahl der Werte in der Liste (hier 3), preise[0] der erste Wert.

a) Ermittle in einer Tabelle die Werte von i, summe und teile nach jedem Schleifendurchlauf.

b) Gib die Ausgabe an.

Lösung

Aufgabe 2: Eintrittspreise leicht

Ein Freibad hat diese Preise: Kinder unter 6 Jahren frei, 6 bis 17 Jahre 2,50 €, ab 18 4 €.

Implementiere die Funktion eintritt(alter), die den Preis als Zahl zurückgibt. Lass dann prüfen.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Lösung

Aufgabe 3: Countdown mittel

Implementiere eine Funktion countdown(start), die einen Text zurückgibt: countdown(3) liefert '3, 2, 1, los!', countdown(1) liefert '1, los!'.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Tipp 1

Eine for-Schleife kann auch rückwärts zählen: for (let i = start; i >= 1; i--).

Tipp 2

Hänge in jedem Durchlauf die Zahl und ', ' an text an. Nach der Schleife fehlt nur noch 'los!'.

Lösung

Aufgabe 4: Drei Fehler mittel

Die Funktion soll die Kosten für eine Taxifahrt berechnen: 4 € Grundpreis plus 2,20 € je Kilometer. Ab 20 km gibt es einen festen Preis von 45 €. Der Wert für km kommt aus einem Eingabefeld und ist deshalb Text.

Finde und behebe die drei Fehler. Lass dann prüfen.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Tipp 1

Fehler 1 steckt in der Bedingung, Fehler 2 am Ende der Funktion.

Lösung

Aufgabe 5: Abholnummern schwer

Bei Bestellungen per App bekommt jede Bestellung eine zufällige Abholnummer aus Großbuchstaben und Ziffern, zum Beispiel K7Q2. Damit es keine Verwechslungen gibt, kommen die Zeichen 0, O, 1 und I nicht vor.

a) Entwickle eine Funktion abholnummer(laenge), die eine solche Nummer mit der angegebenen Länge zurückgibt.

b) Begründe, warum diese Nummern nicht als Passwort taugen würden, wenn sie im Browser erzeugt werden.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Tipp 1

Eine zufällige Stelle in ZEICHEN bekommst du mit Math.floor(Math.random() * ZEICHEN.length).

Tipp 2

Wiederhole das mit einer Schleife laenge-mal und hänge das Zeichen an einen Text an.

Lösung

Aufgabe 6: let oder const? leicht

let mwst = 0.19;
let produkt = 'Kakao';
let summe = 0;
let zaehler = 0;
for (let i = 0; i < 3; i++) {
  summe += 1.5;
  zaehler++;
}

a) Nenne zwei Unterschiede zwischen einer Variablen und einer Konstanten in JavaScript.

b) Gib an, welche der vier Variablen besser mit const angelegt würden. Begründe.

Lösung

Zusatzaufgabe: Schaltjahre schwer Zusatz

Ein Jahr ist ein Schaltjahr, wenn es durch 4 teilbar ist. Ausnahme: Durch 100 teilbare Jahre sind keine Schaltjahre, es sei denn, sie sind auch durch 400 teilbar.

Implementiere istSchaltjahr(jahr) und gib mit einer Schleife alle Schaltjahre von 1990 bis 2030 aus.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Lösung

Zusammenfassung

console.log(…) gibt Werte in der Konsole aus. Dort stehen auch Fehlermeldungen mit Zeilennummer.
let für Variablen, deren Wert sich ändert, const für alles andere.
Datentypen: Zahl, Text, Wahrheitswert, dazu undefined und null.
+ verbindet Texte, sobald ein Text beteiligt ist. Eingaben sind Text: vorher mit Number oder parseFloat umwandeln.
Kommazahlen sind nicht immer exakt: für die Anzeige runden (toFixed(2)).
Bedingungen mit if, else if, else. Vergleichen mit ===, nicht mit =.
Schleifen mit for (zählend) und while (mit Bedingung).
Funktionen bekommen Parameter und liefern mit return ein Ergebnis.

Selbstcheck

Geh die Fragen ehrlich durch. Wenn du bei einer unsicher bist, lies den verlinkten Abschnitt noch einmal oder bearbeite die passende Aufgabe.

Kannst du Variablen und Konstanten anlegen und Unterschiede nennen? → Variablen und Konstanten, Aufgabe 6
Kannst du mit Zahlen, Texten und Wahrheitswerten arbeiten und umwandeln? → Erkundung 1, Rechnen, Text verbinden, umwandeln, Aufgabe 4
Kannst du Bedingungen und Schleifen lesen und schreiben? → Erkundung 2, Aufgabe 1, Aufgabe 2, Aufgabe 3
Kannst du Funktionen mit Parametern und Rückgabewert entwickeln? → Funktionen, Café-App, Aufgabe 5
Kannst du Fehler mit der Konsole finden? → Fehler finden, Aufgabe 4

Wortspeicher

Begriff	Bedeutung in einfachen Worten
Variable (`let`)	benannter Speicherplatz, dessen Wert sich ändern darf
Konstante (`const`)	benannter Wert, der nach dem Festlegen nicht mehr ersetzt wird
Deklaration	eine Variable oder Konstante anlegen
Datentyp	Art eines Werts: Zahl, Text, Wahrheitswert …
String	Text in Anführungszeichen
Boolean	Wahrheitswert: `true` oder `false`
NaN	„keine Zahl“: Ergebnis einer missglückten Umwandlung
Template-String	Text in Backticks, in den man mit `${…}` Werte einsetzt
Bedingung	Prüfung, von der abhängt, welcher Code ausgeführt wird
Schleife	wiederholt Anweisungen, solange eine Bedingung gilt
Funktion	benannter Block von Anweisungen, der Parameter bekommt und ein Ergebnis zurückgeben kann
Parameter / Argument	Platzhalter in der Funktion / tatsächlicher Wert beim Aufruf
Rückgabewert	Ergebnis, das eine Funktion mit `return` liefert
Pfeilfunktion	kurze Schreibweise einer Funktion mit `=>`
Konsole	Bereich der Entwicklerwerkzeuge für Ausgaben und Fehlermeldungen

Quellen

Hessisches Kultusministerium: Kerncurriculum Fachoberschule, Fachrichtung Technik, Schwerpunkt Informationstechnik, Themenfeld 12.6 Webanwendungen, „Konzepte clientseitiger Skriptsprachen“ (Stand November 2022).
JavaScript nach dem Sprachstandard ECMAScript. Ausführliche, freie Dokumentation: MDN Web Docs, developer.mozilla.org/de (Du verlässt jetzt Maternet).
Texte, Beispiele, Aufgaben und Code-Beispiele sind selbst erstellt.