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, 1310 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: WebSql
gelöst Frage von internet2107JavaScript17 Kommentare

Guten Morgen zusammen, zunächst einmal einen schönen dritten Advent. Ich habe ein Problem mit Javascript und WebSQL. Bisher habe ...

Neue Wissensbeiträge
Linux Tools
Dolibarr ERP CRM - Update Prozess
Anleitung von radiogugu vor 13 StundenLinux Tools

Hallo. Dies soll den kurzen Update Prozess der Software schildern. Zugrunde liegt eine Ubuntu Linux VM an der Stelle. ...

Linux Tools
Dolibarr ERP CRM - Überblick der Software
Anleitung von radiogugu vor 16 StundenLinux Tools

Hallo. Nach der Anleitung zur Einrichtung und Installation der Datenbank und des Webserver Dolibarr ERP CRM Installation möchte ich ...

Linux Tools

Dolibarr ERP CRM Installation der Datenbank und des Webserver

Anleitung von radiogugu vor 16 StundenLinux Tools

Hallo zusammen. Ich bin seit kurzem nebenberuflich selbstständig und suchte eine geeignete Software für die Auftragsverwaltung, CRM und ein ...

Sicherheit

Chrome 79 übermittelt eingegebene Kennwörter nach Hause

Information von DerWoWusste vor 1 TagSicherheit15 Kommentare

Ab sofort warnt Chrome standardmäßig Nutzer davor, wenn aus Leaks bekannte Passwörter zum Einsatz kommen. Beim Besuch einer Website, ...

Heiß diskutierte Inhalte
Netzwerke
Netzwerkstruktur für Zuhause 1Anschluss 2 Netze
Frage von chrishaefNetzwerke24 Kommentare

Hallo liebes Forum, Ich hätte da mal eine Frage an die Profis. Bei uns liegt ein DSL Anschluss im ...

Batch & Shell
Eingabeaufforderung macht Pause bei Datensicherung mit Robocopy auf DVD
Frage von anmelderBatch & Shell23 Kommentare

Hallo, ich sichere einige Daten per Robocopy auf DVD-RAM. Wenn ich nicht am Rechner sitze macht der Befehl nach ...

Server-Hardware
Server startet nach Debian Installation nicht mehr
Frage von RobertDServer-Hardware17 Kommentare

Hallo, ich habe heute zum ersten Mal auf meinen Server (selbst zusammengebaut) Linux installiert, ging auch alles ganz gut. ...

Windows 10
Windows 10 Herunterfahren - Funktioniert nach Upgrade von Windows 7 nicht mehr
Frage von krischeuWindows 1016 Kommentare

Hi, ich habe verschiedene PCs mit dem Upgrade Assistenten von Windows 7 Pro 64 Bit auf Windows 10 geupdatet. ...