JavaScript-Programmierung: Einkaufsliste

Alic3M

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?

Tobse

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.

Alic3M

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

Tobse

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.

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.

Tobse

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

Alic3M

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

Unregistriert

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.

Tobse

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

Alic3M

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 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();
}

Pion

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

Alic3M

Und wer möchte nun meine Aufgabe bewerten? Irgendwelche Verbesserungsvorschläge? Ist das nicht OOP was ich gemacht habe?

Pion

Das ist kein OOP aber das sollte genügen hier

Tobse

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.

Tags