Antwort auf Ihre Fragen

Lieber Herr Hoover, mein Problem momentan ist, dass ich gar nicht adressieren kann, wo genau nun mein Verständnis aufhört. Die Mixins und Variablen sowie Vererbung verstehe ich. Ihr Erklärungsvideo zu Übungsblatt 3 hat sehr geholfen.

Ich denke, dass wir das doch schon mal als Erfolg ansehen können! Sehr schön! :-)

Bei Übungsblatt 4 hab ich - glaube ich zumindest - das Grundlegende auch verstanden, obwohl es nicht funktioniert.

Es funktioniert aber fast! :-)

Es gibt nur ein paar Kleinigkeiten.

Sollten Sie JavaScript Code ausführen (interpreter!) dann hat der Interpreter die Eigenschaft erst zur Laufzeit (d.h. wenn das Skript ausgeführt wird) zu überprüfen ob es irgendwelche syntaktischen Fehler und oder Dinge gibt die sich widersprechen. Gelangt der Interpreter an eine Fehlerhafte Stelle hört er mit der Interpretation des Skripts auf und gibt eine Fehlermeldung aus. Sollten Sie also eine Fehlermeldung in der console sehen, dann müssen Sie sich als erstes dieser annehmen.

Zunächst einmal gehen wir auf das Schlüsselwort this ein. this bedeutet ursprünglich im Falle von Objekten bzw. in Klassen, dass man die entsprechende Methode bzw. das entsprechende Attribut dieser Klasse meint. Nehmen wir mal folgende Klasse als Beispiel:

class Student {
    constructor(firstname,lastname,pkz) {
        this.firstname = firstname;
        this.lastname = lastname;
        this.pkz = pkz;
    }
}

Das Schlüsselwort this hilft in diesem Fall zwischen dem Parameter "firstname" und dem Attribut "firstname" der Klasse Student zu unterscheiden. firstname im obigen Beispiel ist der Parameter des Konstruktors und this.firstname ist das Attribut firstname der Klasse Student.

Das zu this im eigentlichen Sinn. Jetzt haben wir nur ein kleines Problem. this bedeutet bei JavaScript immer derjenige der mich ausgelöst hat. Also d.h. es ist stark "Kontextbezogen". Haben wir jetzt den Fall, dass ein Callback aufgerufen werden muss, dann ist this im Umfeld des Callbacks und nicht unbedingt im Umfeld der Klasse in der dieser Callback verwendet worden ist. Hier nehme ich einen Auszug des Quelltextes vom Übungsblatt 4. (passwordCheck.js)

function PasswordChecker(wrapperId, passwordInputFieldId, passwordSubmitButtonId) {
    //[...]

this.passwordField.onblur = function() {
        //the keyword "this" is always referring to its context.
        //onblur is an event which happens in "passwordField" -> so the keyword "this" would refer to the passwordField NOT to our class
        //therefore we previously saved "this" in a variable called "that"
        that.check();
    };

    // [...]

In der Zeile this.passwordField.onblur = function() {} übergeben wir dem passwordFeld einen Callback der ausgelöst werden soll sofern das Feld "passwordField" verlassen wird. (Event ist "blur") Jetzt befinden wir uns im Umfeld vom PasswordFeld und nicht in der Klasse. Wenn Sie ausprobieren würden mittels console.log(this) was auf der console ausgegeben wird, dann wird Ihnen nicht das aktuelle passwordCheck Objekt zurückgegeben sondern das passwordField HTML Element.

Probieren Sie doch einmal für Ihr Verständnis folgendes:

function PasswordChecker(wrapperId, passwordInputFieldId, passwordSubmitButtonId) {
    //[...]

this.passwordField.onblur = function() {
        console.log(this); //the HTML password Field Element
        console.log(that); //the passwordChecker Object
        //the keyword "this" is always referring to its context.
        //onblur is an event which happens in "passwordField" -> so the keyword "this" would refer to the passwordField NOT to our class
        //therefore we previously saved "this" in a variable called "that"
        that.check();
    };

    // [...]

Die Stellen die ich an Ihrer Stelle nochmal etwas genauer ansehen würde wären die folgenden:

https://github.com/fhkufstein-webdevelopment/ue04-wd2020-SabineAscher/blob/2ad1bdcb476a9536257bef1e8a1a45017f135af9/js/passwordCheck.js#L84 https://github.com/fhkufstein-webdevelopment/ue04-wd2020-SabineAscher/blob/2ad1bdcb476a9536257bef1e8a1a45017f135af9/js/passwordCheck.js#L85

In beiden Zeilen nutzen Sie "var". In einem Objekt dürfen Sie var nur in Methoden verwenden. Befinden Sie sich außerhalb einer Methode dürfen Sie Attribute definieren müssen aber dann mit this.attributname arbeiten.

Darüberhinaus benötigen Sie das nicht unbedingt so.

Vielleicht machen Sie in Zeile 91 in der passwordCheck.js folgendes

 if(this.passwordField.value.length >= this.minLength){

Oder falls es Ihnen wichtig ist mit anderen Variablen zu arbeiten können Sie auch das folgende machen:

var password = this.passwordField.value;
var length = password.length;

 if(length >= this.minLength){

Gleiches gilt für this.checkForSpecialCharacters.

Wo ich nun gänzlich nicht weiterweiß ist Übungsblatt 5, Aufgabe 2 mit jQuery. Warum wird hier immer mit this gearbeitet? Muss ich das? Warum funktioniert ein console.log nicht? Wohin werden die Benutzername-Eingaben gespeichert? Brauche ich hier auch Selektoren wie in CSS? Wie kann ich ein neues Element (Benutzer) erstellen, wenn dies doch nicht im Quelltext festgelegt werden soll, sondern der Benutzer im Browser eingibt?

Ein console.log funktioniert nur dann nicht, wenn die entsprechende Zeile nicht ausgeführt wird. Das kann zum Beispiel sein weil a) das JavaScript erst gar nicht eingebunden wird (über ) oder b) weil bei der Ausführung des Skripts an einer bestimmten Stelle ein Fehler aufgetreten ist (Syntaxfehler zum Beispiel) und dieser zum Abbruch der Ausführung geführt hat. (da hilft ein Blick auf Fehlermeldungen in den Entwicklertools auf die console)

Wohin werden die Benutzername-Eingaben gespeichert?

Gespeichert werden die Nutzereingaben erst mal noch gar nicht. Schließlich haben wir noch nicht über Datenbanken gesprochen. Wir manipulieren aktuell nur das DOM (also das HTML) des Browsers. Sie könnten es also so sehen, dass die Benutzereingaben im DOM gespeichert werden.

Brauche ich hier auch Selektoren wie in CSS?

Im Falle von jQuery auf jeden Fall. Im Falle von JavaScript nutzen Sie zum "traversieren" (also durchsuchen des HTML Quelltextes) die Methoden wie z.B. document.getElementById, document.getElementsByClassName etc.

Wie kann ich ein neues Element (Benutzer) erstellen, wenn dies doch nicht im Quelltext festgelegt werden soll, sondern der Benutzer im Browser eingibt?

Sie sollen die eingegebenen Sachen einfach nur der Tabelle hinzufügen. Suchen Sie mal zum Spaß z.B. bei google ob es die Möglichkeit gibt mittels JavaScript bzw. noch einfacher mittels jQuery HTML Tags hinzuzufügen.

Für was brauche ich Events?

Gute Frage! Stellen Sie sich vor Sie haben eine grafische Oberfläche. Auf dieser grafischen Oberfläche haben Sie zum Beispiel Buttons, Textfelder etc. Wie hilfreich wäre diese Oberfläche wenn diese auf keine Nutzerinteraktion (z.B. click) reagieren würde? Wahrscheinlich relativ nutzlos. Damit Sie eben von der grafischen Benutzeroberfläche über ein bestimmtes Ereignis auf einem Element informiert werden gibt es Events. Ein Beispiel für ein Event ist auf einen Button klicken. (bzw. etwas präziser "es wurde auf den Button geklickt") Ein anderes ist mit der Maus über den Button fahren. Muss kein Button sein, kann auch ein Textfeld sein oder eine Überschrift. Das ist ja das tolle, dass Sie sich mittels JavaScript bei so gut wie allen HTML Elementen über Events informieren lassen können die Sie als Entwickler eben interessiert.

Jetzt stellen Sie sich vor, dass es viele verschiedene Buttons gibt. Woher soll der Entwickler wissen auf welchen Button geklickt worden ist? Damit er das weiß hat er bei JavaScript den Kontext "this" der ihm sagt, dass "this" (referenziert zu dem Element dass dieses Event verursacht hat) das Element ist dass das Ereignis ausgelöst hat. Das ist natürlich nicht die einzige Idee wie man einen Entwickler über den "verursacher" des Events informiert. Das würde auch über einen Parameter gehen. (das wird in anderen Programmiersprachen zum Beispiel so gehandhabt)

Was bedeutet sowas: $('.needs-validation').submit(function(event)?

Zunächst einmal deutet das $ auf jQuery hin. Weil man als Entwickler nicht unnötig viel tippen will waren die Entwickler von jQuery so nett und nennen das "jQuery" Objekt unter anderem auch "$" - dann spart man sich Tipparbeit. $ gefolgt von der Klammer heißt, dass man selektiert. Die komfortable Sache die jQuery anbietet ist, dass Sie Elemente "suchen" bzw. "wählen" können die Sie über den Selektor angeben wie Sie es aus CSS kennen. In dem Fall heißt es, dass alle Elemente auf dem aktuellen Dokument ausgewählt werden sollen die eine CSS Klasse "needs-validation" haben. Ok. Das andere ist der zweite Teil - nämlich das .submit(). Auf all den gewählten Elementen (also dem Ergebnis der Selektion von Elementen mit dem Attribut class="need-validation") sollen auf das Event "submit" reagieren. Das einzige Element welches ein solches Event abfeuert ist ein Formular. Wenn Sie ein Formular abschicken, dann ist das Ereignis hierfür "submit". Mit function(event) { ... } übergeben Sie einen Callback der aufgerufen werden soll wenn das Ereignis "submit" eingetreten ist. Der erste Parameter ist das "event" Objekt. Können Sie auch "e" nennen. Oder "wasserhahn". In einem Callback für ein Event ist es aber immer das event - egal wie der Parameter jetzt nun heißt.

Kann ich in der .js Datei nicht jQuery, sondern auch "normales" JavaScript verwenden?

Können Sie! Können Sie wie es Ihnen gefällt. Sie werden allerdings feststellen, dass Sie mit jQuery weit weniger Quelltext schreiben müssen.

Kann ich dort "einfach so" if-Anweisungen implementieren, oder muss ich das mit einer function() machen?

Das können Sie machen wie Sie es für richtig erachten. Sie können in dem Quelltext einfach so eine Bedingung einfügen und auf beliebiges prüfen. Das können Sie auch in einer function machen. Da gibt es keine Beschränkung.

Ich hoffe diese Antwort hilft Ihnen beim Verständnis mancher Dinge.

Am Freitag früh gibt es noch ein Video zum Thema "Autosuggest / Autocomplete" und wie das mit jQuery, HTML und CSS funktioniert. Ich glaube, dass dort einige Fragen von Ihnen noch zusätzlich geklärt werden.

Auch bei der Besprechung der Lösung zu den Übungsblättern werde ich wieder den "Studentenmodus" anwenden.

Ich kann Ihnen nur raten einfach auszuprobieren. Irgendwann kommt der Punkt wo es bei Ihnen "klick" macht und dann werden Sie feststellen, dass das eigentlich gar nicht so dramatisch ist.

Die Praxis ist eine sehr anspruchsvolle Aufgabe für das Gehirn, da es alle Verständnisprobleme aufdeckt. Mir ging es nicht anders als ich als Werkstudent in einem Unternehmen das erste mal vor "echte" Probleme gestellt worden bin. Lassen Sie sich bitte nicht entmutigen. Das schaffen Sie schon!

Herzliche Grüße Daniel Hoover

fhkufstein-webdevelopment / ue04-wd2020-SabineAscher

Antwort auf Ihre Fragen #1