Larissa: Problem mit JavaScript und jquery Aufgaben

SELF-Forum

Problem mit JavaScript und jquery Aufgaben

Larissa
– Informationen zu den Bewertungsregeln

Hallo zusammen,

Die Überschrift ist relativ unspezifisch, weil es sich um mehrere Probleme handelt. Wir versuchen uns gerade als "Nicht-Informatiker" an einer Vorlesung zu JavaScript und jQuery. Es gestaltet sich jedoch schwieriger als gedacht. Gerade hängen wir an unterschiedlichen Aufgabenstellungen. Vielleicht gibt es hier Tipps und Lösungsvorschläge 😀

Erstellen Sie eine HTML/jQuery-Datei, die zwei HTML-Elemente vom Type <input type="text"> und einen Button enthält. Beim Klicken auf den Button soll der Inhalt der beiden input-Felder vertauscht werden. → Wie die HTML-Elemente erstellt werden ist klar. Nur die Funktion zum Auslösen des Inhaltstauschs fehlt…

Erstellen Sie eine HTML/jQuery-Datei, die ein input-Feld vom Typ Text und zwei Buttons, sowie ein Element vom Typ <ul> enthält. Beim Klicken auf den Button soll der Inhalt des Textfelds als List-Item (<li>) an das Element vom Typ <ul> angehängt werden. Beim Klick auf jedes dieser List-Item soll es gelöscht werden (aus dem DOM-Tree entfernt werden). → Der HTML-Teil ist wieder klar, nur an den Funktionen haperts..

Schreiben Sie ein JavaScript-Programm, das für die Zahlen von 1 bis 100 jeweils alle echten Teiler ausgibt. Ein echter Teiler einer Zahl ist größer als 1 und kleiner als die Zahl.

Vielen Dank für Eure Tipps!

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Problem mit JavaScript und jquery Aufgaben

    Rolf B (Versionen)
    +1 Informationen zu den Bewertungsregeln

    Hallo 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
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. Problem mit JavaScript und jquery Aufgaben

      Larissa (Versionen)
      – Informationen zu den Bewertungsregeln

      Hallo Rolf,

      das sollte auch nicht eine reine "Abschreibe-Aufgabe" werden ;-) uns fehlen nur zum Teil ein wenig die Basisinfos (stehen nämlich nicht wirklich im Skript..) und bevor wir uns tot-googlen, wollten wir mal hier anfragen. Und ja wir studieren den Hybridstudiengang Medienkultur & Medienwirtschaft.

      Das ist mein bisheriger Erfolg zu Aufgabe 1

      <!DOCTYPE html>
<html>
    <head>
	<title>Aufgabe 2.2 </title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style type="text/css">
	
    </style>
    </head>
    <body>
	
	<form> 
	<label for="vname">Vorname: 
		<input id="vname" name="vname" value="Vorname"> 
	</label> <label for="zname">Zuname: 
		<input id="zname" name="zname" value="Nachname"> 
	</label>
	<button type="button" id="tauschen">Tausche Elemente</button>
	</form>
	<script type="text/javascript">
	
	$(document).ready(function(){	  
        $("#tauschen").click(function() {
		$('#vname').val('Nachname');
		$('#zname').val('Vorname');
			});
		});
    
	</script>

    </body>
</html>

      Das Problem ist nur, dass ich nicht Inhalte der Input-Elemente tauschen kann, sondern nur den Platzhalter Text... Beim rest werd ich mich nochmal ausprobieren, aber zumindest haben wir schon ein paar Hinweise, welche Funktion funktionieren könnten, danke! :-)

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Problem mit JavaScript und jquery Aufgaben

        J o
        – Informationen zu den Bewertungsregeln

        Hey,

        Das ist mein bisheriger Erfolg zu Aufgabe 1

        <!DOCTYPE html>
<html>
    <head>
	<title>Aufgabe 2.2 </title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style type="text/css">
	
    </style>
    </head>
    <body>
	
	<form> 
	<label for="vname">Vorname: 
		<input id="vname" name="vname" value="Vorname"> 
	</label> <label for="zname">Zuname: 
		<input id="zname" name="zname" value="Nachname"> 
	</label>
	<button type="button" id="tauschen">Tausche Elemente</button>
	</form>
	<script type="text/javascript">
	
	$(document).ready(function(){	  
        $("#tauschen").click(function() {
		$('#vname').val('Nachname');
		$('#zname').val('Vorname');
			});
		});
    
	</script>

    </body>
</html>

        Sieht doch ganz schick aus. Jetzt müsst ihr nur noch den wirklichen Wert (val()) des Input Felds auslesen (und am besten zwischenspeichern) und dann in das jeweils andere schreiben.

        Gruß
        Jo

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. Problem mit JavaScript und jquery Aufgaben

        Henry
        +1 Informationen zu den Bewertungsregeln

        Hallo Larissa,

        Warum in den Vorlesungen direkt JQuery angegangen wird... Na ja, Dozenten halt. Aber ich hätte da eine Lektüre mit vielen Beispielen für dich, vom Initiator des ganzen SELFHTML hier, höchstselbst.

        Insbesondere der Abschnitt Inhalte einfügen/entfernen dürfte dich interessieren.

        Gruss
        Henry

        Beitrag melden
        +1
        Informationen zu den Bewertungsregeln

      3. Problem mit JavaScript und jquery Aufgaben

        Rolf B
        – Informationen zu den Bewertungsregeln

        Hallo Larissa,

        ok, ihr steht also nicht so weit am Anfang wie die Frage zuerst vermuten ließ. Sorry für die falsche Einschätzung.

        Ich habe deine Antwort leicht modifiziert; man kann Codebeispiele in ~~~ einschließen und bekommt dann eine ordentliche Formatierung vom Forum. Hinter dem einleitenden ~~~ notiert man die Sprache, html, css oder js. Also so:

         ~~~js
   $(function() {
      // bla bla blub
   });

        
Ihr habt den ready-Handler kapiert, sehr schön. Ihr beschriftet die input Elemente mit label, **sehr sehr schön**. Jetzt fehlt nur noch das lang="de" Attribut im html-Element, und sogar Gunnar wäre fast zufrieden 😂

Wenn ihr mit einem ready-Handler arbeitet, könnt ihr das Script übrigens überall notieren; weil die per ready() registrierte Funktion erst aufgerufen wird, wenn das DOM fertig ist. Aber bitte beachtet [diesen Hinweis](http://api.jquery.com/ready/) in der jQuery-Referenz. Die ready-Funktion ist zwar (noch) nicht missbilligt, aber es wird ganz klar gesagt, dass die bevorzugte Methode darin besteht, den ready-Handler direkt an die $-Funktion zu übergeben. Also so:

~~~js
$(function() {	  
  $("#tauschen").click(function() {
    $('#vname').val(/* hmm */);
    $('#zname').val(/* hmm */);
  });
});

        Da ihr eure Aktivität rein lokal ausführt, braucht ihr nicht unbedingt ein form. Ihr wollt ja nichts zum Server schicken. Aber das kommt bestimmt noch, also lasst es ruhig stehen.

        		$('#vname').val('Nachname');
		$('#zname').val('Vorname');

        setzt konstante Werte – eben 'Nachname' und 'Vorname' – in die Zielfelder ein. Das wollt ihr nicht, ihr wollt den Wert des jeweils anderen Feldes haben. Den Wert eines per $-Funktion ermittelten Feldes bekommt man von jQuery mit .val().

        Rolf

        --
        sumpsi - posui - clusi
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      4. Problem mit JavaScript und jquery Aufgaben

        Robert B.
        – Informationen zu den Bewertungsregeln

        Hallo Larissa,

        uns fehlen nur zum Teil ein wenig die Basisinfos (stehen nämlich nicht wirklich im Skript..)

        Aber z.B. im Wiki.

            <head>
	<title>Aufgabe 2.2 </title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style type="text/css">
	
    </style>
    </head>

        Ein leeres style-Element kannst du auch weglassen, dafür aber die Zeichencodierung dazunehmen.

        	<form> 
	<label for="vname">Vorname: 
		<input id="vname" name="vname" value="Vorname"> 
	</label> <label for="zname">Zuname: 
		<input id="zname" name="zname" value="Nachname"> 
	</label>
	<button type="button" id="tauschen">Tausche Elemente</button>
	</form>
	<script type="text/javascript">
	$(document).ready(function(){	  
        $("#tauschen").click(function() {
		$('#vname').val('Nachname');
		$('#zname').val('Vorname');
			});
		});
	</script>

        Wenn du ein input in ein label schachtelst, brauchst du kein for-Attribut.

        Das Problem ist nur, dass ich nicht Inhalte der Input-Elemente tauschen kann, sondern nur den Platzhalter Text...

        Du tauscht den Inhalt des input aus; deine inputs haben keinen Platzhalter definiert. Vermutlich möchtest du etwas unter Verwendung einer temporären Variablen zuweisen …

        Viele Grüße
        Robert

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln