nicht angemeldet
Rolf BHallo Larissa,
sorry, hier ist keine „mach mir die Hausaufgaben“ Stelle. Versucht ihr euch an der Vorlesung rein zum Spaß, oder seid ihr in einem Hybridstudiengang, der einen Informatikanteil hat (Wirtschaftsinformatik kommt mir da in den Sinn...)?
Lösungsvorschläge sollten hier ohne Vorleistung eurerseits also nicht kommen. Es würde euch auch nichts nützen, wenn ihr hier irgendwas abschreibt; ihr müsst es ja auch verstehen. Ein paar Tipps kann ich aber loswerden; Code zum kopieren werde ich mir verkneifen. Den müsst ihr liefern. Kommentare zu EUREM Code gebe ich gern.
jQuery ist so gedacht, dass man über die jQuery-Funktion (oder $) eine gewisse Menge von HTML Elementen auswählt und darauf dann Aktionen ausführt. Die Auswahl erfolgt im Prinzip mit Hilfe der üblichen CSS-Selektoren, die von jQuery nochmal erweitert werden. Aktionen können sein:
- registriere zu einem Button eine Funktion, die beim Klick auf den Button aufgerufen wird. Dazu müsst ihr wissen, was Events sind (Ereignisse), welche Benutzeraktion welche Ereignisse auslöst und wie man eine Behandlungsfunktion für ein bestimmtes Ereignis registriert.
- lies den Wert eines input-Elements aus
- ändere den Wert eines input-Elements.
Wie das geht, steht garantiert in eurem Lehrtext. Allerdings hat sich jQuery in den letzten Jahren ein wenig gewandelt, und ich weiß nicht, was euer Lehrtext als „die richtige Methode“ für das Registrieren von Eventhandlern („Ereignisbehandlungs-Funktion“) präsentiert. Es geht allgemein mit on, einen Klick-Handler kann man auch mit click registrieren.
Es gibt auch eine englische Webseite, die alle jQuery-Funktionen dokumentiert, allerdings als Referenz und nicht als Lehrwerk. Sie heißt http://api.jquery.com.
Die genannten drei Aktionen reichen als jQuery-Aktivität für Aufgabe 1 und sind Grundlage für Aufgabe 2. Wenn ihr den JavaScript-Teil am Ende des HTML notiert, habt ihr auch keine Probleme mit dem Vorhandensein der Elemente (das ist ein Grundproblem: der Browser führt <script> Elemente aus, wenn er sie antrifft, und wenn das Script in <head> des HTML steht, existieren der Button noch nicht, auf dessen Klick ihr reagieren wollt. Das kann man lösen, aber das ist eine Komplexität mehr. Und das muss ja jetzt nicht sein).
Weitere Fragen sind natürlich: Was ist eine JavaScript-Funktion, was eine Variable, wie weise ich einer Variablen einen Wert zu, was ist das DOM - habt ihr da Klarheit? Wisst ihr, was ihr vor euch habt, wenn ihr im Browser F12 drückt?
Die Aufgabe 2 könnt ihr auf unterschiedliche Weise lösen; für dein Einfüge-Button am einfachsten ist aber sicherlich die append-Funktion von jQuery. Die andere Aktion - ListItem entfernen wenn man drauf klickt - ist völlig Banane, ListItems sind per definition keine interaktiven Elemente und sollten daher nicht auf Klick reagieren. Aber davon wissen Profs nicht unbedingt was. KORREKT wäre ein Button im ListItem, der auf den Klick reagiert.
Aber der Prof ist bekanntlich Gott, diese Vorgehensweise macht die Aufgabe auch etwas einfacher, also macht es so. Nutzt dafür das Bubbling von Events. Das meint: wenn ein Listitem geklickt wird, wird das click-Event nicht nur auf dem <li> signalisiert, sondern auch auf allen Elternelementen. Ihr könnt also einen click-Handler auf dem <ul> registrieren, der bekommt jeden Klick auf die List-Items darin mit. Ganz egal, ob die <li> beim Registrieren des click-Handlers schon vorhanden waren oder nicht. Diesem click-Handler wird ein Parameter übergeben, das Event-Objekt. Den müsst ihr übernehmen. Darin gibt's eine Eigenschaft namens target, und die entspricht dem geklickten <li>. So einen Elementverweis kann man ebenfalls an die $-Funktion übergeben, und dann mit jQuery-Funktionen behandeln. Hier bietet sich die remove-Funktion an.
Für die dritte Aufgabe müsst ihr erstmal die Logik bauen, die die Teiler einer Zahl ermittelt, und dann mit jQuery ins DOM packen. Da könnte man eine zweistufige Liste erzeugen, man könnte auch eine Definitionsliste bauen - denkt euch ein schönes HTML dazu aus, schreibt ein paar Zeilen davon von Hand, um ein Muster zu haben, und erzeugt es dann so ähnlich wie in Aufgabe 2 mit jQuery.
Rolf
sumpsi - posui - clusi
Henry