Aus dem Kurs: Grundlagen der Programmierung: Basiswissen

Ereignisgesteuerte Programmierung

Aus dem Kurs: Grundlagen der Programmierung: Basiswissen

Ereignisgesteuerte Programmierung

“

Im Augenblick wird unser Code ausgeführt, sobald eine Webseite geladen wird. Der Code läuft so schnell durch, wie es möglich ist. Dann ist die Bearbeitung abgeschlossen. Ein solches Vorgehen reicht heutzutage häufig nicht aus, vielmehr soll der Code auf die Aktionen eines Nutzers bzw. einer Nutzerin reagieren. Dazu zählt bspw., dass der Nutzer irgendwo hinklickt und die Größe des Fensters verändert, die Maus bewegt usw. Wenn das Programm auf solche Nutzereingaben oder ähnliche Ereignisse reagiert, nennt man das ereignisgesteuerte Programmierung. Solche Ereignisse gibt es in vielen Programmiersprachen. Man nennt sie basierend auf dem englischen Begriff auch Events. Klickt der Nutzer irgendwo hin, ist dies ein Event. Bewegt er seine Maus, dann sind das Hunderte Events pro Sekunde. Scrollt er auf der Webseite hoch und runter, ist auch das wieder ein Event. Nun müssen Sie überlegen, auf welche Events Sie wie reagieren wollen. Sie können z.B. eine Funktion für ein bestimmtes Event schreiben. Die Funktion soll dann z.B. nur ausgeführt werden, wenn der Nutzer die Maus bewegt oder auf einen Button klickt. Dabei hilft Ihnen natürlich das verwendete Betriebssystem bzw. im Fall von JavaScript der Browser. Sie müssen nur sagen, welches Ereignis Sie interessiert und müssen dann darauf reagieren. Das Element, das auf die Ereignisse reagiert bzw. auf sie lauscht, werden EventHandler oder EventListener genannt. Diese Elemente sind nichts anderes als Funktionen, die auf irgendetwas warten. In JavaScript gibt es eine Vielzahl von Event-Namen. Schauen wir uns mal zwei, drei Beispiele an. Mit onLoad wird das Ereignis "Seite laden" aufgerufen. Befindet sich der Mauszeiger des Nutzers bzw. der Nutzerin über einem Bild oder einer Überschrift, kann das Ereignis onMouseOver ausgeführt werden. Dadurch färbt sich z.B. die Überschrift von Blau in Rot. Wenn der Nutzer z.B. auf ein Bild, einen Button oder eine Überschrift klickt, wird mit onClick das Ereignis "Draufklicken" aktiviert. An diesen Beispielen sehen Sie, dass diese Namen gleich aufgebaut sind. Sie fangen mit den beiden Buchstaben "on" an und dann wird direkt und ohne Punkt das Ereignis angeschlossen, um das es eigentlich geht und das ausgeführt werden soll. Weitere Beispiele sind onBlur und onFocus. Sie können Ihre Webseite bspw. so programmieren, dass alle Buchstaben eines Textfeldes großgeschrieben werden, sobald der Nutzer ein Eingabefeld verlässt. Dazu nutzen Sie das Ereignis onBlur. Das Gegenteil davon ist das Event onFocus, das direkt im Textfeld passiert. Beispielsweise können Sie die Hintergrundfarbe des Eingabefeldes von Weiß in Orange wechseln, sobald der Nutzer mit der Maus auf das Eingabefeld klickt. Sie können also ein und dieselbe Funktion durch unterschiedliche Ereignisse aufrufen lassen. Aber der Standardfall ist natürlich, dass unterschiedliche Events auch unterschiedliche Funktionen aufrufen, je nachdem, was Ihre Anforderungen sind. Ich möchte Ihnen nun zeigen, wie solche EventHandler direkt in JavaScript geschrieben werden. Dazu brauche ich zwei Arten von Informationen, ein Element und ein passendes Event. Hier sind die zwei Dateien container.html und script.js. Ich öffne die HTML-Datei mit dem Editor und lade Sie ein, mitzumachen. Halten Sie dazu dieses Video an. Sie finden in den einleitenden Kapiteln die Informationen zu den beiden Dateien. Da ist meine tolle Überschrift h1 mit der id "mainHeading". Nun möchte ich, dass sich die Überschrift ändert, sobald der Nutzer bzw. die Nutzerin darauf klickt. Dafür öffne ich zusätzlich die JavaScript-Datei script.js. Hier wurde die Variable headline mit dem Befehl document.getElementById() erzeugt. In dieser Datei verweise ich auf die id "mainHeading" im HTML-Dokument. Anschließend wird headline aufgerufen. Punkt, mit dem Event onClick() und ihm eine anonyme Funktion, Klammer auf und Klammer zu, mit dem Befehl innerHTML = "Sie haben geklickt" übergeben. Diese Befehle kommen in geschweifte Klammer. Nun speichere ich die Datei ab und führe das Programm aus. Jetzt öffne ich die HTML-Datei im Browser. Wenn ich nun auf die Überschrift klicke, verändert sich diese. Ich habe meine Webseite also ereignisgesteuert programmiert. Probieren Sie es einmal selbst mit onClick oder einem anderen Event aus.

Inhalt