JavaScript lernen

Funktionsreferenzen und anonyme Funktionen

Testen Sie unsere 1931 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Funktionsreferenzen und anonyme Funktionen werden in der Regel an JavaScript-Eventhandler gekoppelt, die bei einem bestimmten Ereignis die referenzierte Funktion aufrufen. Sie können damit die Ereignisbehandlung vollkommen von HTML lösen.
06:53

Transkript

In diesem Video wollen wir uns mit der Ereignisbehandlung unter JavaScript, beziehungsweise, dem DoModel beschäftigen, und dazu Funktionsreferenzen und anonyme Funktionen einführen. Schauen Sie sich bitte mal diesen Tag hier an. Das ist ein Bild, einem Alternativtext, einem Name-Attribut, einer ID und drei HTML Event-Handler. Bei "on Mouse over" soll eine Funktion aufgerufen werden, bei "bei on Mouse out und "on click". Wir haben eine extrem hohe Vermischung von Struktur und Funktionalität. Das heißt, die auslösenden Situationen für eine Funktion stecken in HTML drin. Das ist etwas, was man in der modernen Programmierung auf jeden Fall vermeiden möchte. Genauso, wie Sie ja auch CSS vollständig auslagern und mit externen CSS-Regeln arbeiten, sollten Sie auch niemals, wenn es irgendwie geht, Funktionalität in diese HTML-Welt reinbauen. Man möchte, wenn man wirklich konsequent komplexere Situationen beschreiben möchte, eine saubere Trennung zwischen der Struktur und der Funktionalität. Um das zu erreichen, muss man auf diese HTML Event-Handler verzichten, und stattdessen JavaScript Event-Handler nehmen, bzw. DOM- Eventhandler, es ist eigentlich ein Bestandteil des DOM-Konzeptes. Ich habe hier nun eine Seite, wo nur ein Bild ist. Der Einfachheit halber möchte ich hier nur mit einem einzigen Objekt arbeiten. Aber ich möchte auch hier drei Funktionen aufrufen, die beim "on Mouse over", "Mouse out" und beim "onclick" aufgerufen werden. Aber in der eigentlichen HTML-Seite soll nichts mehr stehen. Sämtliche Logik wird in die JavaScript Datei verlagert. Und ich mache jetzt Folgendes: Ich schreibe hier Document.get Element bei ID. Denn ich habe hier eine ID, damit kann ich dieses Objekt selektieren durch Angabe der ID. Nun gibt es für alle Attribute, die man bei einem HTML Tag setzen kann, eine entsprechende Eigenschaft beim selektierten Objekt. Ob es "value" ist, "source", "widths", "onclick", denn "onclick" ist ja auch ein Attribut. Also gibt es auch das hier. Sonst wäre die Aussage nicht richtig. Und das hier ist eine Eigenschaft von einem DOM-Objekt. Jetzt ist die Frage, was weist man einer solchen Eigenschaft zu? Einen Funktionsaufruf kann man nicht zuweisen. Aber man kann einen sogenannten "Zeiger" eine Referenz auf eine Funktion zuweisen. Das heißt, man kann hier z.B. einen Funktionsnamen zuweisen. Das werden wir gleich sehen. Aber gerade beim Eventhandling ist es sehr oft üblich, mit einer sogenannten "anonymen Funktion" zu arbeiten. Das heißt, man gibt überhaupt keinen Funktionsnamen an, sondern schreibt nur hin "Function()" und dann "{}". Die Funktionalität selbst, die ich hier haben möchte, die kann ich mir mal ganz schnell hier rauskopieren. Das ist das hier gewesen. Aber das Entscheidende ist, ich notiere als Wert eines JavaScript Element-Handlers eine Funktionsreferenz oder eine anonyme Funktion und vollkommen analog. Ich habe jetzt mal ein bisschen gezaubert, ich habe das aus der Zwischenablage geholt. Aber im Wesentlichen mache ich ja das Gleiche. Vollkommen analog können Sie auch bei "on Mouse over" und "on Mouse out" eine anonyme Funktion zuweisen und dann im Inneren das tun, was man bei diesem Effekt machen möchte. Ich muss jetzt noch, in Anbetracht der Tatsache, dass jetzt hier "Info" steht, nicht "Bild Info", das ein bisschen anpassen, aber das ist nur Nebensache. Und das heißt, wir können mit anonymen Funktionen das JavaScript Event-Handling nutzen und die gesamt HTML-Struktur von der Verschmutzung mit Funktionalität freihalten. Wir haben eine absolut saubere Trennung. Dennoch sind wir nicht ganz fertig. Denn dieses Zuordnen von diesen Event-Handlern, (Tippgeräusche) darf man nicht zu früh machen. "Zu früh" heißt, wenn man eine Webseite lädt kann es sein, dass der DOM noch nicht fertig aufgebaut ist, und wenn man zu früh versucht, diesen DOM-Elementen solche anonymen Funktionen zuzuordnen, dann klappt das nicht. Von daher packe ich das ganze Zeug in eine Init-Funktion und rufe diese bei einem Event-Handler "on load" auf. Und zwar in Form einer Funktionsreferenz. Ich könnte auch hier mit einer anonymen Funktion arbeiten und das, was hier steht, direkt über function Klammer auf, Klammer zu und dann diesen Block notieren, aber ich möchte ja auch die Funktionsreferenz zeigen. Das hier ist ein Zeiger auf diese Funktion. Beachten Sie, dass hier auf keinen Fall Klammern stehen. Der Event-Handler "on load" bei Windows sagt, sobald die Webseite im Browser fertig geladen und der DOM aufgebaut ist, dann rufe diese Funktion auf. Funktionsreferenzen können, genau wie anonyme Funktionen, an JavaScript Event-Handler gekoppelt werden. Sie sehen hier wirklich die Situation, wie Sie in der modernen Programmierung unbedingt arbeiten sollten. Von daher ist es wichtig, sich hier ein bisschen reinzudenken. Praktisch wird dieses Beispiel so aussehen. Das ist jetzt nichts Spannendes, aber es ist vom qualitativen Code um Welten besser, als ein Beispiel wie hier, wo die gesamten HTML Event-Handler noch benutzt werden, wo man mit Funktionsaufrufen arbeitet statt, wie hier, mit anonymen Funktionen und Funktionsreferenzen. In diesem Video haben Sie diese Funktionsreferenzen, anonymen Funktionen, sowie deren Sinn und Zweck kennengelernt, was wirklich nicht ganz trivial ist, aber aus meiner Sicht unglaublich wichtig.

JavaScript lernen

Legen Sie los mit der Programmierung von beeindruckenden Webseiten und machen Sie sich mit den Grundstrukturen von JavaScript, Objekten und insbesondere dem DOM-Konzept vertraut.

3 Std. 6 min (36 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Software:
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
ISBN-Nummer:978-3-99032-028-0
Erscheinungsdatum:11.09.2012
Laufzeit:3 Std. 6 min (36 Videos)

DVD oder Online-Training: Was ist der Unterschied?

 

Inhaltlich sind beide Trainings absolut gleich. Der Unterschied liegt bei den Nutzungsmöglichkeiten und im Vertriebsweg.

 

Beim Training auf DVD erhalten Sie eine Box mit allen Inhalten und einem gedruckten Bonusmagazin.

Die Bezahlung erfolgt bequem per Rechnung.

 

Das Online-Training ist sofort nach dem Kauf verfügbar, jederzeit und an jedem Ort. Sie brauchen nur eine Online-Verbindung und einen gängigen Webbrowser. Wenn Sie das Training herunterladen, steht es Ihnen auf Ihrem Computer auch offline zur Verfügung.

Die Bezahlung erfolgt per Kreditkarte, Paypal oder sofortüberweisung.de (nicht in allen Ländern verfügbar).

 

Wir wünschen Ihnen viel Freude mit dem Video-Training Ihrer Wahl – ob Online oder auf DVD.

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!