Ergebnis 1 bis 8 von 8
Like Tree1Likes
  • 1 Post By tsseh

Thema: Anfängerprobleme: Codezeilen erläuterung!

  1. #1
    Mugen ist offline Grünschnabel
    registriert
    21-01-2016
    Beiträge
    4

    Anfängerprobleme: Codezeilen erläuterung!

    Hi Leute,
    Hoffe das Thema passt hier halbwegs hin. SuFu hab ich leider nichts gefunden und auch wenn es sicher sehr banale Fragen sind, komm ich alleine nicht weiter.... google youtube alles nichts genützt

    Konkret habe ich verschiedene Zeilen Code, die ich gerne verstehen und nachvollziehen würde, ich aber beim besten Willen nicht drauf komme, was die Intention dahinter ist/war. Sobald ich was verstanden habe, kommen dann die nächsten xD

    Code:
    $.each(Pizza, function(i){
                        $('#dropdown').append(new Option(Pizza[i].name, i, true, true));
                        });
    kurze Erklärung:
    "Pizza" ist ein array aus JSON objekten (also zb Hawai ist ein Objekt aus dem Array).
    #dropdown ist die ID von nem <select></select>
    und ich will jetzt die ganzen verschiedenen Pizzen als option in dem select drin haben.

    So, und jetzt mal wie ich den Code verstehe:

    1.Zeile:
    mit "$.each" rufe ich die each-function aus jquery auf, die letztlich über mein array "pizza" iteriert und bei jedem Objekt die Funktion "function(i)" ausführt. [Warum brauche ich hier ein "i"?]

    2. Zeile:
    Da ich meine Pizzen in das select Menü bringen will, wähle ich es mit "$('#dropdown') aus.
    ".append()" ist eine Funktion um das letzte Element hinzu zu fügen. Innerhalb der append Funktion muss ich angeben, was hinzugefügt wird, nämlich eine neue Auswahlmöglichkeit. das geschieht mittels "new Option()".
    Und jetzt beginnt mein Problem:
    Was sind das alles für Angaben innerhalb der Klammern von "new Option"?
    "Pizza[i].name" ist offensichtlich der Name des Objektes an der i-ten Stelle des Pizza-Arrays (name ist jeweils ein key in den einzelnen JSON Objekten). Aber was soll da bitte dann "i" und "true" "true"?
    wenn ich in html ein <select>-dings mache, brauch ich bei den Optionen auch nie soviele Werte dazu?

    Wäre echt dankbar für ein bisschen Hilfe

  2. #2
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.631

    AW: Anfängerprobleme: Codezeilen erläuterung!

    Frage:
    Zitat Zitat von Mugen Beitrag anzeigen
    Warum brauche ich hier ein "i"?
    Antwort:
    Zitat Zitat von Mugen Beitrag anzeigen
    "Pizza[i].name" ist offensichtlich der Name des Objektes an der i-ten Stelle des Pizza-Arrays
    Zitat Zitat von Mugen Beitrag anzeigen
    Was sind das alles für Angaben innerhalb der Klammern von "new Option"?
    da musst du in deinem Option-objekt nachsehen, was die parameter bedeuten.

  3. #3
    Mugen ist offline Grünschnabel
    registriert
    21-01-2016
    Beiträge
    4

    AW: Anfängerprobleme: Codezeilen erläuterung!

    Erstmal vielen Dank für deine Antwort! Leider hab ich überhaupt keine Ahnung wo ich die Option-parameter sehen kann :/ kann also nur rätseln was es mit den "i" und den "true" "true" auf sich hat...
    Hier mal der gesamte Code.

    Code:
    <html>
        <head>
            <title>Pizzabestellung</title>
        <meta charset="utf-8">
            
            <script type="text/javascript" src="js/jquery-1.11.2.js"></script>
            <script type="text/javascript" src="js/jquery.form.js"></script>
            <script type="text/javascript" src="js/jquery.validate.js"></script>
    	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
            </head>
        
        <body>
                
            <div>
                <h1>Mhhhh, Pizza! Ihre Bestellung:</h1>
                <select id="dropdown"></select>
               
        <button id="Bestellen">Bestellen</button>
            
        
        </div>
            
            <script>
            
                   
                    var hawaii = {
                        name : "Hawaii",
                        zutaten : ["Schinken, Ananas"]
                        };
                    var roma = {
                        name : "Roma",
                        zutaten : ["Salami", "Schinken", "Zwiebeln", "Pilze"]
                        };
                    var margherita = {
                        name : "Margherita",
                        zutaten : ["Käse", "Tomatensoße"]
                        };
                    var vegetarisch = {
                        name : "Vegetarisch",
                        zutaten : ["Pilze", "Paprika", "Oliven", "Zwiebeln"]
                        };
                    var döner = {
                        name : "Döner",
                        zutaten : ["Dönerfleisch", "Zwiebeln", "Knoblauchsoße"]
                        };
    
                    var Pizza = [hawaii, roma, margherita, vegetarisch, döner];
    
                    $.each(Pizza, function(i){
                        $('#dropdown').append(new Option(Pizza[i].name, i, true, true));
                        });
                    
                
                    $('#Bestellen').click(function(){
                        $_Pizza = $('#dropdown').val();
                        $_zutaten = Pizza[$_Pizza].zutaten.length;
                        $_Preis = 3 + $_zutaten * 0.5;
                        alert("Pizza: " + Pizza[$_Pizza].name +"\n"+ "Zutaten: "+ Pizza[$_Pizza].zutaten + "\n" + "Preis: " + $_Preis + " Euro");
                    });
                 </script>
        </body>
    
    
    
    </html>
    Vielleicht sieht ja einer woher die Parameter kommen

  4. #4
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.631

    AW: Anfängerprobleme: Codezeilen erläuterung!

    Zitat Zitat von Mugen Beitrag anzeigen
    Vielleicht sieht ja einer woher die Parameter kommen
    woher sie kommen kann ich dir sagen, die frage ist aber wohin sie gehen.
    ich vermute mal das hier:
    Code:
    <script type="text/javascript" src="js/jquery.form.js"></script>
    sonst musst du mal weitersuchen woher das option-objekt kommt


    du hast 2 mal jquery eingebunden
    Zitat Zitat von Mugen Beitrag anzeigen
    Code:
    <script type="text/javascript" src="js/jquery-1.11.2.js"></script>
    ...
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
    Geändert von mikdoe (21-01-2016 um 18:06 Uhr) Grund: Zitat repariert

  5. #5
    Mugen ist offline Grünschnabel
    registriert
    21-01-2016
    Beiträge
    4

    AW: Anfängerprobleme: Codezeilen erläuterung!

    ja, hatte es 2mal drin, weil ich jquery nicht auf dem Rechner hab, deswegen
    " <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">"
    damits funktioniert!

    Hab folgende Zeilen jetzt einfach mal gelöscht, weil die Dateien sowieso nicht vorhanden sind.
    (der code ist die Musterlösung zu einer Übungsaufgabe und ich hab nur die html-Datei, sonst nichts.)
    Code:
            <script type="text/javascript" src="js/jquery-1.11.2.js"></script>
            <script type="text/javascript" src="js/jquery.form.js"></script>
            <script type="text/javascript" src="js/jquery.validate.js"></script>
    Also können die parameter ja nicht von "js/jquery.form.js" kommen, wenn die Datei gar nicht vorhanden bzw nicht mehr implementiert ist und es trotzdem noch fehlerfrei im Browser angezeigt wird, oder?

    ok, hab jetzt die beiden "true"- parameter einfach mal gelöscht und anscheinend waren die nur zur Zierde da, läuft einwandfrei ohne "true" --> dieses Problem wäre also gelöst!

    Jetzt bleibt nur noch das "i"

    Code:
    $.each(Pizza, function(i){
                        $('#dropdown').append(new Option(Pizza[i].name, i));
                        });
    " function(i)":
    kann es hier einfach nur für "index" stehen? wäre das möglich? Wenn ich es aus der Funktion raus nehme, dann werden die Elemente nicht ins dropdown-Menü übernommen und es bleibt leer.

    $('#dropdown').append(new Option(Pizza[i].name, i)); :
    Das erste "i" ist ja der index im array, was ist mit dem 2.? Wenn ich es weglasse, wird das alert(); später nicht ausgeführt, das dropdown-menu bleibt davon unberührt und die Pizzen werden trotzdem übernommen.
    Kann es also sein, dass:
    ich dem dropdown ja nicht nur den Namen übermitteln bzw geben will, sondern auch irgendwie den Inhalt? nur bräuchte ich da irgendwie ne Erklärung wie das "function(i)" dann mit "(new Option(Pizza[i].name, i)" dieser Zeile zusammenhängt, damit ich es auch wirklich verstehe.

  6. #6
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.631

    AW: Anfängerprobleme: Codezeilen erläuterung!

    Zitat Zitat von Mugen Beitrag anzeigen
    Hab folgende Zeilen jetzt einfach mal gelöscht, weil die Dateien sowieso nicht vorhanden sind.
    (der code ist die Musterlösung zu einer Übungsaufgabe und ich hab nur die html-Datei, sonst nichts.)
    scheint tatsächlich bei einigen browsern ein buildin objekt zu sein, vermutlich weil der ie das mal so hatte

    https://msdn.microsoft.com/en-us/lib...=vs.85%29.aspx

    aber das scheint nicht standard zu sein, also vorsicht

    Zitat Zitat von Mugen Beitrag anzeigen
    Also können die parameter ja nicht von "js/jquery.form.js" kommen
    nee, das sowieso nicht, sie kommen von hier:new Option(Pizza[i].name, i, true, true)

    Zitat Zitat von Mugen Beitrag anzeigen
    kann es hier einfach nur für "index" stehen? wäre das möglich?
    was sagt denn die doku? jQuery.each() | jQuery API Documentation


    Zitat Zitat von Mugen Beitrag anzeigen
    nur bräuchte ich da irgendwie ne Erklärung wie das "function(i)" dann mit "(new Option(Pizza[i].name, i)" dieser Zeile zusammenhängt, damit ich es auch wirklich verstehe.
    das i wird einmal genutzt um den namen des i-ten arrayeintrages zu ermitteln und einmal an das Option-objekt übergeben, was es bedeutet steht oben im link.
    Mugen likes this.

  7. #7
    Mugen ist offline Grünschnabel
    registriert
    21-01-2016
    Beiträge
    4

    AW: Anfängerprobleme: Codezeilen erläuterung!

    was sagt denn die doku? jQuery.each() | jQuery API Documentation
    Die besagt, dass der callback, also die Funktion aus ( Integer indexInArray, Object value ) besteht. Da hier aber nur 1 parameter im callback ist, tipp ich mal auf IndexInArray

    Code:
    new Option(Pizza[i].name, i, true, true)
    das option-object bekommt dann quasi gesagt: Nim als value den index (also 0-4)?

    die boolean-parameter werden also erst dann gebraucht, wenn zb ein reset-button hinzu kommt (das wird dann wohl in eine der nächsten Aufgaben kommen ^^)

    Soweit so gut, hab jetzt schon echt viel gelernt - va dass man sich die API ducumentation gut ansehen soll

    Weiter gehts:
    Code:
    $('#Bestellen').click(function(){
                        $_Pizza = $('#dropdown').val();
                        $_zutaten = Pizza[$_Pizza].zutaten.length;
                        $_Preis = 3 + $_zutaten * 0.5;
                        alert("Pizza: " + Pizza[$_Pizza].name +"\n"+ "Zutaten: "+ Pizza[$_Pizza].zutaten + "\n" + "Preis: " + $_Preis + " Euro");
                    });
    1. Zeile: dem Element mit der id="bestellen" wird quasi eine onclick funktion hinzugefügt.
    2. Zeile: Was "$_" bedeutet bin ich mir unsicher... "$" ist der selector und "_" gibt quasi an, das jetzt eine neue Variable kommt? Dieser wird dann der value von dem ausgewählten dropdown-dings zugewiesen(also der index).
    3.Zeile: Wieder neue Variable, der dann ein Integer zugewiesen wird (also die Anzahl der Zutaten)
    usw den Rest versteh ich dann schon, wenn das oben beschriebene korrekt ist. "$_" ist an sich das wichtige, da hab ich in google auch viele verschiedene Sachen gelesen 0.o
    Mein Problem war die ganze Zeit, dass ich nicht verstanden hab, wie man dem dropdown den Inhalt der Objekte zuweist. Daweil wird das ja gar nicht gemacht, sondern es wird nur der Index zugewiesen und mit dem Index werden dann die Daten innerhalb der alert()-funktion abgefragt..


    @ tsseh:
    Mega Danke schonmal, hast mir viel geholfen

  8. #8
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.631

    AW: Anfängerprobleme: Codezeilen erläuterung!

    Zitat Zitat von Mugen Beitrag anzeigen
    2. Zeile: Was "$_" bedeutet bin ich mir unsicher... "$" ist der selector und "_" gibt quasi an, das jetzt eine neue Variable kommt? Dieser wird dann der value von dem ausgewählten dropdown-dings zugewiesen(also der index).
    das $_ gehört mit zum variablennamen und hat keine besondere bedeutung, es wird einfach eine variable $_Pizza angelegt und der value zugewiesen, was dienem index entspricht. die variable hätte man auch wieder i nennen können oder index, oder ...

    - - - Aktualisiert - - -

    ach, was unter anderem schlecht ist an diesem code, es werden globale variable angelegt.
    besser wäre
    Code:
    $('#Bestellen').click(function()
    {
      var idx = $('#dropdown').val();
      var zutaten = Pizza[idx].zutaten.length;
      var preis = 3 + zutaten * 0.5;
      alert("Pizza: " + Pizza[idx].name +"\n"+ "Zutaten: "+ Pizza[idx].zutaten + "\n" + "Preis: " + preis + " Euro");
    });

Ähnliche Themen

  1. [FRAGE] Spezielle Codezeilen beim laden auslassen
    Von henrmul im Forum JavaScript
    Antworten: 7
    Letzter Beitrag: 03-06-2015, 08:36
  2. Antworten: 2
    Letzter Beitrag: 23-08-2012, 12:51
  3. Anfängerprobleme
    Von miss_rookie im Forum JavaScript
    Antworten: 25
    Letzter Beitrag: 14-09-2008, 16:10

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •