Top-Themen

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

JavaScript Map

Mitglied: tobmes

tobmes (Level 1) - Jetzt verbinden

16.05.2016 um 18:42 Uhr, 1144 Aufrufe, 7 Kommentare

Hi,

ich bins mal wider .

Ich spiele immernoch mit JavaScript herum und hänge jetzt mal wieder. Ich habe diese HTML Datei

01.
<snip>
02.
<img class="unsharp" src="pizza.png" width="104" height="90" alt="lecker Veggi Pizza" onclick="add(this.id);calc('veggie',5.50);" id="veggie" />
03.
<img src="pizza.png" width="104" height="90" alt="lecker Magherita Pizza" onclick="add(this.id);calc('magherita',3.50);" id="magherita" value="3.50" />
04.
<img src="pizza.png" width="104" height="90" alt="lecker Funghi Pizza" onclick="add(this.id);calc('funghi',4.50);" id="funghi" />
05.
<br>
06.
<p id="summe">Summe</p>
07.
</snip>
und diesen JavaScript Code
01.
<snip>
02.
function calc(name,price) {
03.
var m = new Map();
04.
m[name] = price;
05.
var value = m[name];
06.
x = document.getElementById("summe")
07.
x.innerHTML = value;
08.
}
09.
</snip>
Die add funktion ist hier jetzt nicht interessant (Hoffe ich mal)

Also wenn ich auf das Bild klicke, dann wird die Pizza in einen Warenkorb gelegt, jetzt wäre es ja noch interessant zu wissen was denn die ganzen Pizzen im Warenkorb so kosten.
Genau daran scheitere ich gerade. Ich habe mir gedacht, dass ich eine Map aus Pizza-Name und Preis baue. Leider bin ich aber gerade zu doof die Preise mit der Map zu berechnen. Evtl. funktioniert ja meine Map auch nicht richtig. Leider habe ich dazu nicht so viel gefunden, oder verstehe es nicht so richtig. Kann mir jemand evtl. dabei Helfen?

P.S Das ist natürlich kein kommerziellen Projekt, sondern nur was zum lernen.

Danke schon mal
Mitglied: colinardo
16.05.2016, aktualisiert um 19:24 Uhr
Hallo tobmes,
hier mal ein "ganz einfaches" Schema wie du das mit Objekten und einem Array machen kannst:
01.
// Array enthält die Artikel
02.
var warenkorb = [];
03.
// Artikel Objekt-Gerüst erstellen
04.
var artikel = function(n,p){return {name:n,preis:p};}
05.
// ein paar Artikel erstellen
06.
var a1 = new artikel('Pizza Funghi',5.90);
07.
var a2 = new artikel('Pizza Margherita',4.90);
08.
var a3 = new artikel('Pizza Hawaii',6.90);
09.
// Artikel dem Warenkorb-Array hinzufügen
10.
warenkorb.push(a1);
11.
warenkorb.push(a2);
12.
warenkorb.push(a3);
13.
// Variable hält die Gesamtsumme
14.
var total = 0;
15.
//Gesamtsumme aller Artikel im Array zur Gesamtsumme addieren
16.
warenkorb.forEach(function(el){
17.
  total += el.preis;
18.
});
19.
// Testweise Gesamtpreis ausgeben
20.
alert('Die Gesamtsumme des Warekorbs beträgt ' + total.toFixed(2) + '€');
Auch wenn das nur zu deiner Übung dient, im richtigen Leben muss ein Warenkorb immer durch ein anderes serverseitiges Skript auf Validität geprüft werden, denn sonst könnte ein "Wicht" deine Preise einfach nach seinem Gusto manipulieren

Grüße Uwe
Bitte warten ..
Mitglied: tobmes
16.05.2016 um 21:02 Uhr
Hi Uwe,

danke für deine schnelle Antwort. Ich glaube ich verstehe da was nicht so ganz.
Frage 1: Kann ich Zeile 6 nicht durch var a1 = new artikel(name,price); ersetzten, wenn ich eine function calc(name,price) um das ganze herum setzte?
Frage 2: In Zeile 4 ist mir nicht ganz klar, was {return {name:n,preis:p};} macht.

Danke schon mal.

Gruß
Bitte warten ..
Mitglied: Arano
16.05.2016 um 22:35 Uhr
Hi

01.
function calc(name,price) { 
02.
    var m = new Map(); 
Wird damit nicht bei jedem Aufruf von "calc()" "m" auf ein leeres Map-Object zurückgesetzt !?
01.
    m[name] = price;
Wenn eine Artikel (der gleiche Artikel !) 2mal, 3mal, 5mal angeklickt wird, wird dann nicht immer einfach der alte Preis durch den Neuen ersetzt (der zudem noch identisch ist)
01.
    var value = m[name]; 
Wenn "value" als Gesamtpreis ausgegeben wird, sollten dann nicht eine mathematische Operation durchgeführt werden z.B. addieren.

  • Gültigkeitsbereiche
  • Mathematik

Ich nehme mal an, das die Funktion "add()" den Warenkorb managed und das "calc()" nur den Gesamtpreis hochrechen soll (und was ist mir runter !?)
01.
<html>
02.
  <head>
03.
    <script type="text/javascript">
04.
      <!--
05.
        var WKsum = 0;
06.
        function calc( price )
07.
        {
08.
            WKsum += price;
09.
            document.getElementById('wksumme').innerHTML = WKsum + " EUR";
10.
        }
11.
      -->
12.
    </script>
13.
  </head>
14.
  <body>
15.
  
16.
  <a href="#" onclick="calc(1)">111111</a><br>
17.
  <a href="#" onclick="calc(5)">555555</a><br>
18.
  <a href="#" onclick="calc(1.23)">123123</a><br>
19.
  <br>
20.
  WKsum = <span id="wksumme">0 EUR</span>
21.
  
22.
  </body>
23.
</html>

~Arano
Bitte warten ..
Mitglied: colinardo
16.05.2016, aktualisiert um 23:26 Uhr
Zitat von tobmes:
Frage 1: Kann ich Zeile 6 nicht durch var a1 = new artikel(name,price); ersetzten, wenn ich eine function calc(name,price) um das ganze herum setzte?
Frage 2: In Zeile 4 ist mir nicht ganz klar, was {return {name:n,preis:p};} macht.
Das Konstrukt erstellt ein Objekt(Name-Wert-Paar) mit dem an die Function übergebenen Parametern von Name und Preis (n und p). Das ganze ist angelehnt an die objektorientierte Programmierung, ähnlich wie mit Klassen. Man könnte es auch als Prototyp bezeichnen, der alle benötigten Bestandteile eines einzelnen Artikels beherbergt.

Das könntest du sinnvollerweise z.B. auch noch durch ein Feld Anzahl ergänzen, in dem du die Anzahl der Artikel festhältst.
01.
var artikel = function(n,p,a){return {name:n,preis:p,anzahl:a};} 
Wie immer gibt es hier diverse Wege um sein Ziel zu erreichen, das ist ein möglicher.
Bitte warten ..
Mitglied: Sheogorath
16.05.2016, aktualisiert um 23:40 Uhr
Moin,

nachdem mein Aufschrei nun alle geweckt hat, wollen wir uns mal ans Verbessern machen :D

Also zunächst mal ein paar Kommentare zu deinem JavaScript-Code allgemein:

@colinardo hat hier schon das Array angesprochen. Wobei ich es nicht so wie er umsetzen würde.

Was du speichern willst sind in diesem Fall ja weniger Objekte, als viel mehr die Preise zu deinen Pizzas. Das machst du am besten über einen Hash oder wie du schon richtig erkannt hast eine Map. Also eine Speicherstruktur die einen Namen mit einem Preis assoziiert.

Allerdings ist die Art und Weise wie du sie deklarierst für JavaScript eher untypisch.

Statt lange
01.
var m = new Map(); 
02.
m[name] = price; 
Zu schreiben und das ganze auch noch in ein eigenes Objekt zu packen, wäre es einfacher die Preise einfach direkt im Objekt zu speichern:
01.
preise['Pizza Funghi'] = 5.90;
02.
preise['Pizza Margherita'] = 4.90;
03.
preise['Pizza Hawaii'] = 6.90;
Du hast dir das ganze Objekt um die Pizza direkt gespart. Die Preise sind auch direkt erreichbar. Das `new`-Statement sollte man allgemein in JavaScript vermeiden, da es meist überflüssig ist und sehr langsam.

Du kannst die Variable `preise` entweder global definieren, wie du es in @Arano gemacht hat, oder du nutzt ein bisschen mehr JavaScript Magie ;)

Hierzu musst du natürlich den Pizzen eine ID im HTML Code verpassen.
01.
// eine Funktion definieren, die man nach dem Laden des HTML Codes aufruft.
02.
function onReady() {
03.
  // Zuerst mal die Variablen definieren
04.
  var price, sum;
05.
  sum = 0;
06.
  // Die Preise mit den Namen assoziieren
07.
  price['Pizza Funghi'] = 5.90;
08.
  price['Pizza Margherita'] = 4.90;
09.
  price['Pizza Hawaii'] = 6.90;
10.

11.
  // eine Funktion defineren, die wir aufrufen, wenn wir etwas zum Warenkorb hinzufügen
12.
  function addToCart(pizza) {
13.
    // einfach mal auf die Summe drauf rechnen, man kann hier auch ein Array nutzen und per push(a1) den Preis hinein pushen. Wie es in einem echten Warenkorb üblich wäre.
14.
    sum += price[pizza];
15.
   // die summe aktualisieren
16.
   document.getElementById("summe").innerHTML = sum;
17.
  }
18.
  // jetzt definieren fügen wir die onClick funktionen zu den Pizzen hinzu. Wichtig dies hier zu tun, da man sonst keinen zugriff auf prices hat. Dazu muss man allerdings anonyme Funktionen definieren, da man keine Parameter an callback-Funktionen übergeben kann.
19.
    document.getElementById("Funghi'").addEventListener("click", function() {addToCart('Pizza Funghi')});
20.
    document.getElementById("Margherita'").addEventListener("click", function() {addToCart('Pizza Margherita')});
21.
    document.getElementById("Hawaii'").addEventListener("click", function() {addToCart('Pizza Hawaii')});
22.
}
23.
onReady();
So, das sollte die ganze Magie sein :D Wie ich mal wieder feststelle für einen Neueinsteiger vielleicht doch nicht so leicht zu verstehen.

Ich muss anmerken, dass ich den Code gerade grob aus dem Kopf zusammengezimmert habe, vielleicht ist da noch ein Bug drin versteckt, aber Konzeptionell sollte es richtig sein.

Wirklich hart definiert man inzwischen ziemlich ungern onClick Funktionen, da man hierfür global functionen definieren muss. Was eine gute Referenz ist: http://www.w3schools.com/js/js_htmldom_eventlistener.asp

Ansonsten solltest du dir auch mal http://www.w3schools.com/js/js_best_practices.asp lesen.

W3Schools ist als JavaScript Referenz sehr sehr nützlich.

In diesem Sinne viel Spaß bei der Magie ;)

Gruß
Chris
Bitte warten ..
Mitglied: tobmes
17.05.2016, aktualisiert um 14:26 Uhr
Hi erstmal vielen Dank für eure schnelle und super Hilfe. Ein paar Sachen sind mir jetzt schon etwas klarer geworden. Aber Ihr habt mich auch auf eine Idee gebracht, da fehlt mir aber ein Ansatz dazu.

wie ihr schon teilweise geschrieben habt macht es Sinn den Preis im Warenkorb zu reduzieren, wenn ich eine Pizza wieder raus nehme.

Mittlerweile füge ich eine Pizza so zum Warenkorb hinzu:
01.
function add(name, price) {
02.
    var item = document.getElementById("warenk");
03.
    var option = document.createElement("option");
04.
    //var map = new Map();
05.
    //var total = 0;
06.
    
07.
   
08.
   
09.
    option.text = name;
10.
    option.selcted = true;
11.
    item.options[item.length] = option;
12.
    calc(name, price);
13.

14.
}
15.

16.

17.

18.

19.
function calc(name, preis) {
20.
    var sumField = document.getElementById("summe");
21.
    var artikel = function (n, p) {
22.
        return {name: n, preis: p};
23.
    };
24.
    var art = new artikel(name, preis);
25.
    var total = 0;
26.
    warenkorb.push(art);
27.
    warenkorb.forEach(function (el) {
28.
        total += el.preis;
29.
        sumField.innerHTML = total.toFixed(2);
30.
    });
31.
}
Ja, bestimmt nicht schön, aber naja ...

Bisher lösche ich ein einzelnes Item aus dem Warenkorb so:
01.
function removeSelectetItem() {
02.
    var x = document.getElementById("warenk");
03.
   console.log(x.selectedIndex, typeof x); //logt 0, Object
04.
    x.remove(x.selectedIndex);
05.
}
Jetzt müsste ich ja um den Preis zu senken wissen, welches Item ich lösche um den richtigen Preis wieder subtrahieren. Komme ich da so überhaupt dran, oder ist das schon wieder kompletter Müll.

Danke euch schon mal wieder für eure nette Hilfe.
Bitte warten ..
Mitglied: 129413
18.05.2016, aktualisiert um 16:27 Uhr
01.
var cart = {};
02.
var total = 0;
03.

04.
// Preise
05.
var prices = {
06.
  'Pizza A':5.90,
07.
  'Pizza B':4.90,
08.
  'Pizza C':7.90,
09.
  'Pizza D':9.90
10.
}
11.

12.
// Pizza hinzufügen
13.
function addPizza(pizza){
14.
  if (cart[pizza] == undefined){
15.
   cart[pizza] = 1;
16.
  }else{
17.
   cart[pizza] += 1;
18.
  }
19.
  calcSum(cart);
20.
}
21.

22.
// Pizza entfernen
23.
function removePizza(pizza){
24.
  if (cart[pizza] > 0){
25.
   cart[pizza] -= 1;
26.
  }else{
27.
   delete cart[pizza];
28.
  }
29.
  calcSum(cart);
30.
}
31.

32.
// Summe berechnen
33.
function calcSum(cart){
34.
  total = 0;
35.
  for(var pizza in cart){
36.
   if (cart.hasOwnProperty(pizza)){
37.
    total += cart[pizza] * prices[pizza]
38.
   }
39.
  }
40.
}
41.

42.
// Beispiele zum Hinzufügen und Entfernen
43.
addPizza('Pizza A');
44.
addPizza('Pizza B');
45.
addPizza('Pizza B');
46.
removePizza('Pizza B');
47.
addPizza('Pizza C');
48.

49.
alert(total.toFixed(2));
Gruß skybird
Bitte warten ..
Ähnliche Inhalte
E-Business
Google Map Marker
gelöst Frage von tomi93E-Business6 Kommentare

Hallo, ich habe für ein Restaurant bei uns eine Website eingerichtet und wollte im zuge dessen auch mit Google ...

JavaScript
Javascript Funktionen
gelöst Frage von agowa338JavaScript5 Kommentare

Hallo, habe gerade mehrere schönen Javascripte per mail bekommen und frage mich gerade, was eigentlich folgendes in einem Javascript ...

JavaScript
JavaScript hochladen
gelöst Frage von Patrick-ITJavaScript12 Kommentare

Hallo zusammen, ich bin auf der Suche nach einer Seite, wo ich meine JavaScript Datei hochladen kann und die ...

JavaScript
Javascript Array
gelöst Frage von internet2107JavaScript2 Kommentare

Ich habe folgendes Problem. Ersetze ich die folgenden Zahlen gegen Variablenwerte, bekomme ich nicht das Ergebnis, wie mit festen ...

Neue Wissensbeiträge
Windows 10
Windows 10 Mai 2019 Update (Version 1903) ist da
Information von kgborn vor 1 StundeWindows 10

Nur ein kurzer Infosplitter: Microsoft hat die Nacht (21. Mai 2019) das Funktionsupdate auf Windows 10 Version 1903 freigegeben. ...

E-Mail

Newsletter: Unread News - IT News in Byte Länge

Tipp von franktaylor vor 13 StundenE-Mail8 Kommentare

Hallo, würde gerne auf einen Newsletter hinweisen, den ich heute per Zufall gefunden und mit euch gerne teilen möchte: ...

Outlook & Mail

Outlook 2016 stürzt ab, wenn man ein (at)- Zeichen im Text einer neuen E-Mail schreibt

Tipp von Enriqe vor 1 TagOutlook & Mail4 Kommentare

Bei uns in der Firma häuften sich die Fälle, bei denen sich Outlook kommentarlos verabschiedet, wenn man ein - ...

Google Android

Google sperrt Android-Updates und den Play Store für Huawei

Information von Deepsys vor 2 TagenGoogle Android9 Kommentare

Das finde ich schon ein starkes Stück, Trump der Welt Diktator. So kann man mit einem Dekret mal eben ...

Heiß diskutierte Inhalte
Windows Server
Passwortänderung an RODC möglich?
Frage von DexthaWindows Server23 Kommentare

Hallo, ich habe einen RODC, auf welchen ich über ldaps (Web-Seite mit php7) Passwortänderungen durchführen möchte. Ist das grundsätzlich ...

DNS
DNS fragt falsche ip zuerst ab
gelöst Frage von recoldDNS23 Kommentare

Hallo zusammen, wollte mal fragen, was mit meiner DNS falsch ist? der A eintrag 88.48.118.88 sollte auf den ts3 ...

Windows 10
Windows am MAC
gelöst Frage von LeeX01Windows 1019 Kommentare

Guten Abend zusammen, ich habe gerade ein Macbook Pro vor mir welches ich mit einem Windows 10 to go ...

Windows Server
RDP als Citrix Alternative
gelöst Frage von samreinWindows Server18 Kommentare

Hallo zusammen, ich bin neu hier und das ist mein erster Beitrag. Ich bin Einzeladmin und wir setzen bei ...