Zusammenfassung und nächste Schritte
Diese Seite bringt keine neue Syntax. Sie legt den ganzen Kurs auf eine Bestellung: Getränk tea, Größe regular. Die Zeile, die du erklären kannst, ist tea / regular.
Woher die Zeile kommt
Die Seite zur Barrierefreiheit hat sie mit einem echten button type=button geschrieben. Mouse, Enter und Space lösen denselben Klick aus. aria-live="polite" spricht nach dem aktuellen Satz. Fehlt size, ist button.disabled true und der Button bleibt. Der Fokus bleibt auf dem Button.
Zwei frühere Zeilen
Beim Debuggen wurde order.cup auf { drink: "tea", size: "regular" } gelesen. Das Objekt hat size, nicht cup. console.error wirft nicht, das Skript läuft weiter. Die Zeile war fixed / tea / regular.
throw new Error("missing size") stoppt label vor return. catch liest error.message, also missing size. error.name ist Error. finally läuft in beiden Fällen. Die Zeile war caught / missing size.
Sieben Reihen, eine Bestellung
Jede Reihe ist ein Stück derselben Bestellung. Öffne die passende Sitzung nur, wenn das Ergebnis noch dünn wirkt.
📊 Was der Kurs mit einer Bestellung kann
| Gruppe | Du kannst | Ein Ergebnis |
|---|---|---|
| Werte und Ablauf | Werte speichern, mit if wählen, eine Liste durchgehen | tea / regular |
| Funktionen | die Bestellung annehmen und eine Zeile zurückgeben | tea / regular |
| Objekte und Arrays | das Feld lesen, JSON lesen, kopieren | { drink: "tea", size: "regular" } |
| Die Seite | den Button finden und die Zeile schreiben | tea / regular |
| Warten | eine async-Funktion anhalten; fetch gibt eine Response | response.ok, dann response.json() |
| Neuere Syntax | Namen ziehen, Text bauen, eine Klasse formen | tea / regular |
| Sorgfalt | die echte Eigenschaft lesen, absichtlich werfen, den Button behalten | fixed / tea / regular, dann caught / missing size, dann tea / regular |
Die Karte ist eine Erinnerung. Sie ist kein zweiter Kurs und hat keine Fragen.
Werte und Entscheidungen
Du speicherst tea und regular, vergleichst sie und wiederholst. if wählt. break verlässt eine Schleife. continue überspringt ein Element und macht weiter.
Funktionen
Eine Funktion gibt tea / regular zurück. Eine Pfeilfunktion ist eine kürzere Funktion. Ein closure sieht die Bindung noch, nachdem die äußere Funktion zurückgekehrt ist.
Objekte, JSON und Arrays
JSON.parse macht aus Text ein Objekt. map baut ein neues Array. find gibt einen Treffer zurück. spread kopiert. rest sammelt, was du nicht benannt hast. Die Kopie ist flach.
Die Seite
querySelector findet den Button. textContent schreibt die Zeile. setTimeout läuft später und ersetzt den Button nicht.
Warten
await hält nur diese async-Funktion an. Der Rest der Seite läuft weiter. Eine async-Funktion gibt immer ein Promise zurück. fetch löst zu einer Response auf, nicht zu einem schon gelesenen Körper. response.json() gibt ein weiteres Promise zurück. HTTP 404 lehnt fetch gewöhnlich nicht ab. Prüfe response.ok. Ein Netzfehler kann ablehnen.
Neuere Syntax
Die Destrukturierung zieht drink und size nach Namen. Ein fehlendes verschachteltes Objekt kann werfen. Template-Literale füllen ${...} zur Laufzeit. Module liegen nicht auf window und laden über HTTP. Eine Kindklasse ruft super vor this auf. Ein privates Feld bleibt in der Klasse.
Wenn die Bestellung falsch ist
Lies size, nicht eine Eigenschaft, die fehlt. console.error wirft nicht, die nächste Zeile läuft weiter. throw stoppt die Funktion, nur catch geht weiter. Lege die Aktion auf einen Button. Lass den Fokusrahmen sichtbar.
Was als Nächstes kommt
Die nächste Seite ist eine kurze Aufgabenliste: hinzufügen, als erledigt markieren und entfernen. Sie gehört noch zum Kernweg.
Danach optional: strict mode, Map und Set, reguläre Ausdrücke, web storage, cookies und Klassenvererbung. Das brauchst du nicht, um den Kernweg abzuschließen.
Sag diese fünf Zeilen laut
- Der Button schreibt tea / regular, und aria-live="polite" spricht nach dem aktuellen Satz
- console.error wirft nicht; die Debug-Zeile war fixed / tea / regular
- throw new Error("missing size") stoppt label vor return; catch liest missing size; die Zeile war caught / missing size
- fetch löst zu einer Response auf; prüfe response.ok vor response.json()
- Die nächste Seite ist die Aufgabenliste