JavaScript-Programmierung: Einkaufsliste

    Hat jemand Lust, mit mir gemeinsam eine JavaScript-Aufgabe zu lösen?
    Es würde mir helfen, wenn ich nur die ersten Gedankengänge mit Euch teilen könnte. Ich hab bei der JavaScript-Programmierung noch nicht ganz so nen Plan wie man überhaupt anfängt. Bin eigentlich noch dabei, es zu lernen.

    Also die Aufgabe lautet wie folgt:


    Schreiben Sie eine JavaScript-Applikation, mit der der Benutzer eine Einkaufsliste anlegen kann. Die Anwendung fragt den Benutzer jeweils nach einem Artikel. Nach jeder Eingabe wird der Benutzer gefragt, ob er einen weiteren Artikel eingeben möchte. Er kann dies bestätigen oder abbrechen.

    Nach Abschluss der kompletten Eingabe kann er auf einen von zwei Buttons klicken, um die Artikel auf- oder absteigend sortieren zu lassen. Die Ausgabe der sortirten Liste erfolgt in einem ul-Element.


    So, kann mir jemand nen Denkanstoß geben wie man hier am besten anfängt?

    :confused:

    Ich würde da jetzt OOP nehmen. Du kannst das ganze aber auch mit 5 Arrays angehen. Was du auf jeden fall brauchst ist:
    -Array
    -eine Sortierfunktion, siehe Array.sort();
    -object HTMLElement .innerHTML / .data
    oder eben OOP
    -eine eiene klasse "artikel", die alle informationen über den jewailigen Artikel speichert,
    dazu ein Array dass alle Artikel hält. Der Rest müste ein kinderspiel sein.

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    Also ich arbeite mit folgenden Funktionen:

    frageEinkaufslisteAn
    sortiereAufsteigend
    sortiereAbsteigend

    im HTML arbeite ich mit

    body onload="frageEinkaufslisteAn()"
    button onclick="sortiereAufsteigend()"
    button onclick="sortiereAbsteigend()"

    Ausgeben tue ich diese dann in einem darunter liegenden DIV ?

    Und wo wende ich die Arrays an?

    Sorry, bin totaler Einsteiger in JavaScript. Habs mir etwas einfacher vorgestellt :shock:

    Ok, etwas ausführlicher:
    in frageEinkauflisteAn(); erstellst du ein array, dass alle Elemente der Liste enthält und speichers es in einer globalen variable.
    in den sortiere(); funktionen benutzt du Array.sort(); um die elemente im Array zu sortieren und schreibst dann am besten noch eine funktion listeAnzeigen(); die das Array als liste in einen container schreibt.

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    man kann das Ganze auch mit Assembler bauen.
    sag mal Tobse, hast du überhaupt Ahnung wovon du da schreibst?
    OOP in JS für sowas billiges ist ja wohl mal das beknackteste, was ich je gelesen habe.

    MUHAHAHAHAHAH!

    Zitat


    man kann das Ganze auch mit Assembler bauen.
    sag mal Tobse, hast du überhaupt Ahnung wovon du da schreibst?
    OOP in JS für sowas billiges ist ja wohl mal das beknackteste, was ich je gelesen habe.

    das hier ist aber noch n stück beknakter...

    Code
    function meineKlasse(bla) {
    /* Konstruktor */
    this.bla=bla;
    this.methode=function () {
         alert(bla);
    }
}
xy=new meineKlasse("abc");
xy.methode();

    Und wieso in aller Welt willst du das mit Assembler lösen, wenn ers in Java Script braucht? Schonmal drüber nachgedacht, dass GUI in Assembler n wenig Arbeit is?
    Jungejungejungejunge, lesen, denken posten.
    EDIT:
    P.S.: JavaScript IST Objektorientiert, zumindest im Großteil. Es heisst ja JavaScript

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    3 Mal editiert, zuletzt von Tobse (6. August 2010 um 17:11)

    Ja, genau, das ist eine JAVASCRIPT-AUFGABE und ich bin gerade dabei JavaScript zu lernen und habe auch bisher noch nichts von "Assemblern" gehört. Wer entscheidet hier überhaupt was "billig" und was "teuer" ist *g*

    Ich danke Dir Tobse!

    Alles andere werd ich einfach mal ignorieren, weil es mich eh nicht weiterbringt ;)

    Nur mal so als Info:
    Javascript ist eine Objektbasierende Script-Sprache und nicht eine objektorientierte Script-Sprache.

    Das mit dem denken, lesen, posten solltest du dir mal zu Gemüte führen!
    Ich lese hier schon länger mit und muss sagen, dass ich selten ein Script von dir gesehen hab, was direkt beim ersten Mal funktioniert hat.

    Aber so ist das mit den Kindern der heutigen Zeit, große Klappe, nichts aufm Kasten, aber immer schön Paroli bieten.

    TE, was du brauchst is ein einzelnes Array, die Arrayfunktionen sagen dir, wie du Elemente hinzufügst, rausnimmst etc.

    dann wirste noch nen confirm brauchen und nen prompt, es sei denn du willst es über <input type="text" /> regeln.
    objektorientiert ist da relativ sinnfrei, weil du nen Code-Overhead hast, der hier nicht mehr gerechtfertigt ist.

    zeig mal, was du schon geschafft hast.

    Lol, aber du mit Assambler zu JS willst besser sein? Naja, dann könnte man ja glatt meinen, wir sind beide aufm gleichen niveau.

    Zitat


    Ich lese hier schon länger mit und muss sagen, dass ich selten ein Script von dir gesehen hab, was direkt beim ersten Mal funktioniert hat.


    darum geht es hier auch garnicht, ich weiss das die scripte die ich hier mabchmal poste nicht gleich funktionieren. Hier geht es um hilfe zur SELBSTHILFE und meine s ript hier sollen dem problemhabenden eine struktur für den ungefähren ablauf des scripts geben. Und wenn du beim lesen auch aufpasst, fällt dir sicherlich auch auf, das schon seit längerer zeit niemand was gegen meine scripte gesagt hat, ausser evtl die, die tatsächlich funktionieren und eben ein problem etwas "unelegant" angehen.
    Damit Back2Topic:
    Du kannst dir ruhig gedanken über das machen, was unregistriert geschrieben hat, auch mit diesen infos kommste sicher ans ziel. Weitere fragen bitte stellen ;)

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    Ok, kann man hier noch was verbessern:

    HTML:
    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <title>Einkaufsliste</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="einkaufsliste.js"></script>
    </head>

    <body onload="frageEinkaufslisteAn()">
    <h1>Einkaufsliste</h1>

    <button onclick="sortiereAufsteigend()">aufsteigend sortieren</button>
    <button onclick="sortiereAbsteigend()">absteigend sortieren</button>

    <div id="ausgabe">
    <p>Ihre Einkaufsliste</p>
    </div>

    </body>

    </html>


    JS:
    var artikel =[];

    function frageEinkaufslisteAn() {
    artikel.push(prompt("Welchen Artikel möchten Sie auf der Einkaufsliste haben?"));
    if (confirm("Wollen Sie einen weiteren Artikel hinzufügen?") == true) {
    frageEinkaufslisteAn();
    } else {
    gebeEinkaufslisteAus();
    }
    }

    function gebeEinkaufslisteAus() {
    var ausgabe = "<ul>";
    for (var i = 0; i < artikel.length; ++i){
    ausgabe += "<li>" + artikel[i] + "</li>";
    }
    ausgabe += "</ul>";
    document.getElementById('ausgabe').innerHTML = ausgabe;
    }

    function sortiereAufsteigend() {
    artikel.sort();
    gebeEinkaufslisteAus();
    }

    function sortiereAbsteigend() {
    artikel.sort().reverse();
    gebeEinkaufslisteAus();
    }

    Zitat von Unregistriert

    man kann das Ganze auch mit Assembler bauen.
    sag mal Tobse, hast du überhaupt Ahnung wovon du da schreibst?
    OOP in JS für sowas billiges ist ja wohl mal das beknackteste, was ich je gelesen habe.

    Man misst OOP nicht am Schwierigkeitsgrad der Aufgabe

    OOP macht immer Sinn

    Zu verbessern gibts eig nix, die aufgabe hasste damit ja erfolgreich abgeschlossen. Um nun noch den vorteil von OOP an dieser stelle aufzuzeigen:
    Artikelliste mit preis/bild, unumständliches (fürs script als auch den benutzer) hinzufügen von artikeln aus der liste zum zettel, übersichtliche anordnung (mit CSS) der artikel sowie das erstellen einer rechnung.

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    Einmal editiert, zuletzt von Tobse (7. August 2010 um 19:40)