Grundlagen der Programmierung: Basiswissen

Ereignisgesteuerte Programmierung

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Programme können während des Betriebs auf Benutzeraktionen reagieren und eine Funktion erst beim Eintreten einer zuvor definierten Aktion ausführen. Dies wird als ereignisgesteuerte Programmierung bezeichnet.

Transkript

Im Augenblick wird unser Code ausgeführt, sobald eine Webseite geladen wird. Der Code läuft so schnell durch wie möglich und dann ist er fertig. Aber das reicht mir mittlerweile nicht mehr. Ich möchte auf die Aktionen eines Nutzers reagieren. Und damit meine ich nicht nur, dass ein Pop-Up Fenster aufgeht und er seinen Namen eintragen kann. Ich möchte auch auf viele andere Aktionen reagieren. Klickt der Nutzer irgendwo hin, verändert er die Größe des Fensters, bewegt er die Maus, was macht er überhaupt? Was ich möchte ist, ich möchte darauf Antworten. Und das nennt man ereignisgesteuertes Programmieren. Und so etwas gibt es in den meisten Programmiersprachen, auch in JavaScript. Solche Ereignisse, man sagt eben auch "Events" dazu, gibt es ständig und überall. Wenn eine Webseite aufgerufen wird, dann ist das ein Event. Wenn der User irgendwo hinklickt, das ist ein Event. Wenn er seine Maus bewegt, dann sind das hunderte von Events pro Sekunde. Wenn die Webseite hoch- oder runtergescrollt wird, es ist ein Event. Sie haben es geahnt. Er klickt in ein Textfeld, Event. Er beginnt zu tippen, jeder Tastendruck ist ein eigenes Ereignis. Events gibt es überall und ständig. Und Ihr Job als Programmierer ist es, herauszufinden, welches Event davon Sie tatsächlich interessiert. Was wir tun ist, wir schreiben eine Funktion, und anstatt dass diese Funktion zu Beginn, also wenn die Seite geladen wird, automatisch ausgeführt wird, sagen wir dem Computer: "Führe diese Funktion erst aus, wenn der Nutzer die Maus bewegt oder wenn er auf einen Button klickt." Dabei hilft uns natürlich das verwendete Betriebssystem. Wir müssen nur sagen, welches Ereignis uns interessiert und müssen dann darauf reagieren. Und das bezeichnet man mit dem Begriff "Eventhandler" oder "Eventlistener". Das heißt auch in Deutsch so, da gibt es keine passende Übersetzung. Diese Teile sind nichts anderes als Funktionen, die auf irgend etwas warten. In JavaScript gibt es eine Vielzahl von Event Namen, schauen wir uns mal zwei, drei Beispiele an. Wir haben "onload", also wenn eine Seite geladen wird, dann wird eben dieses Ereignis hier aufgerufen. Wir haben "onclick", das ist ganz einfach, wenn ich irgendwo draufklicke, das kann ein Bild sein, das kann ein Button sein, das kann auch eine Überschrift sein, auf die ich draufklicke und wir haben z.B. "onmouseover", also wenn sich die Maus oder der Mauszeiger irgendwo drüber befindet. Und Sie sehen schon an diesem Beispiel, dass diese Namen immer gleich aufgebaut sind. Sie fangen immer mit den beiden Buchstaben ON, also on, an, dann wird direkt angeschlossen ohne Punkt, um was es eigentlich geht. Es gibt noch mehr als diese Beispiele, also z.B. "onblur", das bedeutet, wenn ein Element den Fokus verliert, wenn ich z.B. meinen Cursor aus einem Textfeld heraus bewege. Dann wird "onblur" aktiviert und das Gegenteil ist "onfocus", also wenn ich z.B. meinen Cursor in ein Texteingabefeld hineinbewege. Mit diesen Event Namen, da können wir verschiedene Funktionen aufrufen, wo dann unser eigentlicher Code drin steht. Also wenn wir eine Funktion haben, dann können wir immer dann diese Funktion aufrufen, wenn beispielsweise "onload" abgefeuert wird. Oder wenn gleichzeitig "onfocus" abgefeuert wird. Das bedeutet natürlich auch, wir können eine und dieselbe Funktion an verschiedenen Stellen aufrufen, also wenn z.B. der Fokus auf ein Textfeld gelegt wird oder wieder weggenommen wird, könnte das dieselbe Funktion aufrufen. Aber der Standardfall ist natürlich, dass unterschiedliche Events auch unterschiedliche Funktionen aufrufen, je nachdem, was natürlich Ihre spezielle Anforderung ist. Schauen wir uns mal an, wie solche Eventhandler direkt in JavaScript geschrieben werden. Wir brauchen zwei Arten von Informationen. Erstens das Element, um das es geht und zweitens das Event, um das es geht. Das Element könnte z.B. das gesamte Fenster sein. Wenn das komplett geladen wird, dann wird in dem Fall mit "window.onload" eben ein entsprechender Code ausgeführt werden. Oder wir nehmen den Namen eines Feldes, der heißt z.B. "nameField", also ein Texteingabefeld auf unserer Seite und wir möchten einen Code ausführen, der in dem Moment ausgeführt wird, in dem Nutzer dieses Texteingabefeld verlässt, also haben wir "nameField", der Name des Elementes und dann eben ".onblur". Und wir schreiben jetzt beides direkt hintereinander, "meinElement" in dem Fall ".onclick" und dann schreiben wir gleich zu Beginn hinter ein Gleichheitszeichen "function" und dann die runden Klammern. Das ist der Beginn einer sogenannten anonymen Funktion. Anonyme Funktion deswegen, weil wir ihr keinen Namen geben, sondern wir hängen sie mit einem Gleichheitszeichen direkt an unseren Eventhandler dran. Dann machen wir, wie sonst auch üblich, eine geschweifte Klammer auf, schreiben unseren gesamten Code, der ausgeführt werden soll in so einem Moment und machen die geschweifte Klammer wieder zu und fertig ist das Ding. Auf diese Art und Weise können wir einen Eventhandler erzeugen, ohne dass wir eine Funktion definieren und ihr einen Namen geben und sie dann aufrufen, sondern indem wir sie direkt an den Eventhandler anschließen. Manche Programmierer setzen hier ans Ende nochmal einen Strichpunkt und das liegt daran, dass dieser gesamte Eventhandler hier ein gemeinsamer Code Block ist und ein gemeinsamer Code Block bzw. ein gemeinsames Statement, das wird üblicherweise in JavaScript mit einem Strichpunkt abgeschlossen. Lassen Sie mich das Ganze mal anhand eines Beispieles nochmal zeigen. Ich hab hier zwei Dateien "container.html" und "script.js" wie in den anderen Beispiele auch, wenn man mal in den "container" hineingehen, dann sehen Sie, hab ich hier meine tolle Überschrift "h1" und die hat die id "mainHeading". Und wenn ich jetzt in das "script.js" hineingehe, dann hab ich hier zum einen meine "headline" in einer Variablen gespeichert und ich nutze ja hier das "Document Object Model" mit "document.getElementById" hol ich mir hier dieses "mainHeading" herein und dieser Code wie er hier ist, der ändert sofort, wenn die Seite geladen wird, die Überschrift in "Ha, das ist eine andere Überschrift". ich möchte jetzt, dass diese Überschrift erst dann gewechselt wird, wenn der Nutzer auf diese Überschrift drauf geklickt hat. Zunächst einmal schaffe ich mir hier ein bisschen Platz und dann schreibe ich "headline", das ist ja der Name der Variablen, in der mein "mainHeading" hier gespeichert ist und ich sage ".onclick", also wenn jemand draufklickt, dann soll etwas passieren. Ich fange hier mit einer anonymen Funktion an, also "= function", dann hab ich meine obligatorischen öffnenden Klammern und dann schreib ich die geschweifte Klammer und ich mach sie auch gleich wieder zu, damit ich das hier später nicht vergesse. Manche schreiben, weil das ja ein gesamtes Statement ist, hier noch einen Strichpunkt hinten dran, das können Sie machen wie sie wollen, wenn Sie ihn weglassen wird das Programm genauso ausgeführt. Und jetzt nehme ich den Code, der ursprünglich direkt beim Aufrufen der Seite ausgeführt worden ist, ich nehme ihn in den Zwischenspeicher, lösche ihn, und füge ihn hier oben wieder rein. Damit das Ganze schön ausschaut, mache ich hier nochmal ein Tab Stop. Ich möchte nicht, dass hier "eine andere Überschrift" steht, sondern die Meldung "Sie haben geklickt". Ich speichere das Ganze ab und jetzt schauen wir uns mal das Ergebnis an. Zunächst einmal hab ich hier eine "Tolle Überschrift" und es gibt hier eine ganze Reihe von Events, eine Reihe von Ereignissen, also ich kann ja die Seite vergrößern und verkleinern, kann mit der Maus rumfahren, überall hier auf der Seite klicken, aber wir warten ja auf ein ganz bestimmtes Ereignis, nämlich, dass ich auf die Headline draufklicke, und wenn ich das jetzt hier machen, dann sehen Sie "Sie haben geklickt". Und das ist eine sehr schöne Möglichkeit mit nur einer einzigen Zeile Code im Endeffekt auch auf unterschiedliche Benutzereingaben zu reagieren. Und Sie können in JavaScript nicht nur die Seite verändern, wie Sie möchten, sondern Sie können auch je nachdem was der User mit der Seite macht, auch unterschiedliche Reaktionen ausführen.

Grundlagen der Programmierung: Basiswissen

Steigen Sie ein in die Welt der Computerprogrammierung und verschaffen Sie sich das Grundwissen, um schon bald eigene Lösungen und Anwendungen zu schreiben.

5 Std. 38 min (64 Videos)
Derzeit sind keine Feedbacks vorhanden...

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!