Guten Morgen!

nach dem EWA (Entwicklung Webbasierter Anwendungen) Praktikum und unserer Lösung, möchte ich die privaten Member in JavaScript kurz vorstellen da es wohl dem ein oder anderen noch nicht bekannt ist.

Aufgabe war ein Pizza-Bestellservice zu basteln, bei dem mit Klick auf ein Bild die entsprechende Pizza dem Warenkorb hinzugefügt wird. Beim Hinzufügen soll sich auch entsprechend der Preis ändern. Hier bieten sich die privaten Member sehr an, da man keinerlei sonstige Container braucht.

Beim onklick aufs Bild wird also eine neue Option mit entsprechenden Parameternder Liste zugefügt. Ein privates Memberattribut wird selbst definiert und wird nicht im HTML angezeigt – wir können also der Option beliebig viele, selbst definierte Attribute zuweisen und später wieder im JS zugreifen.
In der Zeile “pizza_neu.preis = preis;” setzen wir das Attribut, wobei der Name komplett beliebig gewählt werden kann:

function addPizza(name, preis){
    var pizza_neu = new Option();
    pizza_neu.innerHTML = name;
    pizza_neu.preis = preis;
    document.getElementById(warenkorbID).appendChild(pizza_neu);
}

Und können beim Preis berechnen wieder ganz einfach zugreifen, indem wir uns die Liste mit allen Options holen und über das zuvor definierte Attribut iterieren:

function price_gen() {
    var korb = document.getElementById(warenkorbID;
    var preis = 0;
    for (var i = 0; i < korb.length; i++) {
    preis += korb.options[i].preis;
    document.getElementById(warenkorbID).innerHTML = "Gesamtpreis: " + preis + " €";
}

Nicht sehr schwer zu verstehen oder anzuwenden, aber man muss es mal gesehen haben

Noch ein kleiner Tip zur nächsten Aufgabe: Ich musste feststellen das sich XAMPP (Apache) und Skype nicht besonders mögen und sich gegenseitig die Ports belegen – wenn sich also der Apache nicht starten lässt, einfach mal Skype beenden!

Wünsche allen einen guten Start in die Woche!
Grüße,
Christian