Arrays und Objekte
Arrays -> W3Schools Arrays
Objekte -> W3Schools Objekte
JSON -> W3Schools JSON
Codebeispiele
// Array erstellen
var namen = [];
// Zu einem Array hinzufügen
namen.push("Susanne")
namen.push("Jan")
// Von einem Array abfragen
// Arrays fangen bei 0 an
namen[0] // -> Susanne
namen[1] // -> Jan
// Objekte erstellen
// Objekte bestehen immer aus "Key": "Value" Paaren
var susanne = {
name: "Susanne",
institut: "HKI"
}
// Objekteigenschaft abfragen
susanne.name // -> "Susanne"
susanne.institut // -> "HKI"
susanne.institut = "IDH" // Wert ändern
Aufgabe
1. Sammeln der Bestellung:
Unser Pizzabestelldienst erlaubt das Bestellen von einzelnen Pizzen die geliefert oder abgeholt werden können. Kunden sollen aber auch die Möglichkeit haben, Sammelbestellungen abzugeben.
- Fügen Sie einen neuen Button hinzu, der beim Klick eine Pizza zur Bestellung hinzufügen soll.
- In JavaScript soll dieser Knopf die Daten, die zu der Pizza gehören (Anzahl, Kosten, Teig, Belag) in einem JavaScript Objekt abspeichern.
- Erstellen Sie ein globales Array, in dem die Pizza-Objekte gesammelt werden sollen. Speichern Sie das Pizza-Objekt in einem globalen Array.
2. Ausgeben der Bestellung:
Welche Pizzen hinzugefügt wurden ist uns num im JavaScript bekannt, aber der Nutzer hat darüber keine Übersicht. Sorgen wir nun dafür, dass die Elemente in unserem Array von Pizzen angezeigt wird.
- Erstellen Sie eine Liste (ol oder ul), in der wir die einzelnen Pizzen, die sich in der Bestellung befinden, anzeigen werden
- Schreiben Sie in JavaScript eine Funktion, die über das Pizzen-Array loopt und für jedes Pizza-Objekt in diesem Array ein Listen-Element (li) erzeugt. Das Listen-Element soll die Informationen über die Pizza beinhalten
- Rufen Sie die Funktion entweder 1. über einen eigenen Knopf, oder 2. innerhalb der JavaScript Funktion aus Teil 1, auf
3. Bestellung als JSON:
Stellen wir uns vor, unser kleiner Pizzadienst speichert alle Bestellungen in einer Datenbank. Die Datenbank ist JSON-basiert, also benötigen wir den Inhalt einer neuen Bestellung ebenfalls als JSON. Für dieses Beispiel reicht es, wenn wir uns das JSON in einem HTML Element ausgeben lassen.
- Erstellen Sie mehrzeiliges Textfeld (textarea), in dem unser JSON ausgegeben werden soll.
- Auf Knopfdruck soll dieses Textfeld mit dem Inhalt des Arrays als JSON formatiert gefüllt werden
Kommentierte Musterlösung
Im Anhang befindet sich eine kommentierte Lösung. Alles, was sich im <script>-Tag befindet, kann hier Zeile für Zeile nachvollzogen werden.