Ereignisse Auf Benutzereingaben reagieren

Transkript

1 Ereignisse Auf Benutzereingaben reagieren JavaScript ermöglicht es dem Entwickler auf Ereignisse (engl.: events) im Browser zu reagieren. Auf diese Weise kann der Benutzer mit den Anwendungen interagieren, über die einfachen Rückgabewerte der Funktion prompt() und confirm() hinaus. Bei diesen Ereignissen kann es sich um den Klick auf einen Button, die Auswahl eines Eintrags aus einer Liste, ein Drehen des Gerätes, eine bestimmte Bewegung mit der Maus, das Absenden eines Formulars und vieles mehr handeln. Damit das Programm auf ein Ereignis reagieren soll, muss man eine JavaScript-Funktion entwickeln. Diese enthält die Anweisungen, die im Falle des Ereignisses ausgeführt werden sollen. Dieser Mechanismus wird Eventhandler (Ereignisbehandler) genannt. Mittels der unterschiedlichen Eventhandler reagiert der JavaScript-Interpreter auf verschiedenartige Ereignisse, die der Eventhandler-Mechanismus über festgelegte Namen identifiziert. Ein Eventhandler ist ein Element zur Ereignisbehandlung. Eventhandler stellen damit eine Verbindung zwischen dem HTML-Element, bei dem das Ereignis ausgelöst wird, dem Ereignis selbst und der JavaScript-Funktion her. Neben Klicken gibt es eine ganze Reihe weiterer Standardevents in JavaScript. click: einfacher Mausklick dbclick: doppelter Mausklick mouseover: Mauszeigerbewegung über einem Element keypress: eine Taste auf der Tastatur wird gedrückt ToucheEvents: touchstart: ein Finger berührt den Bildschirm touchmove: ein Finger bewegt sich über den Bildschirm touchend: ein Finger wird vom Bildschirm heruntergenommen Überblick über Techniken der Ereignisbehandlung: 1) Die älteste Technik ist die Klassische Ereignisbehandlung. Dabei werden Eventhandler innerhalb von HTML-Elementen angeordnet. Typische Beispiele sind onclick und onload. 2) Event Listener: Bei der Neuentwicklung eines Programms sollte man damit arbeiten! Diese Listener (engl.: to listen = zuhören, horchen) horchen in den Anwendungen auf Ereignisse und sorgen für die Funktionsaufrufe. Eberhart 4.javascript_ereignisse.docx 1

2 1) klassische Ereignisbehandlung: Eventhandler sind das wichtigste Bindeglied zwischen HTML und JavaScript. Ein Eventhandler-Ereignis sieht aus wie jedes gewöhnliche HTML-Attribut. Eventhandler sind in JavaScript Eigenschaften eines Objekts. Gemeinhin beginnen die Namen von Ereignissen mit der Silbe on, gefolgt von einer sprechenden Beschreibung des Ereignisses. Beispiele: onmouseover, onload, onclick Ein Beispiel für den Aufruf einer Funktion mit einem HTML-Eventhandler onclick="meinefunktion()" 1a)onclick in einem Link Grundsätzlich gilt Folgendes: Ein Event-Handler beginnt stets mit on. Der Event-Handler, der zuständig ist, wenn auf einen Link geklickt wird, heißt onclick. Wenn folgender Link angeklickt wird, wird ein modales Fenster geöffnet: <a href="irgendwohin.html" onclick="alert('bitte Eingabe durchführen!')">text</a> Vom Prinzip her wunderbar Browser, die JavaScript unterstützen, führen den Code aus, folgen danach aber dem Link. Das href-attribut des Links muss gesetzt werden, sonst wird er nicht angezeigt. Wenn kein Link aufgerufen werden soll, gibt es eine Möglichkeit, einen Link anzugeben, der keine neue Seite lädt: <a href="#" onclick="alert(' Bitte Eingabe durchführen!')">text</a> Beispiel: Hier führt der Link auf eine neue einfache Seite 4.onclicktest.html, nur um die Funktionsweise zu zeigen. Diese enthält nur eine <h1> Überschrift. Eberhart 4.javascript_ereignisse.docx 2

3 Zuerst muss auf den Link geklickt werden Dann erscheint das Alert-Fenster. Nach dessen Bestätigung erscheint die angegebene Seite. 1b)Onclick mit einem Button Funktion mit onclick: mit dem onclick-ereignis auf den Button wird eine Funktion gestartet. Beispiel: erstelle 4.button.html Ergebnis: Eberhart 4.javascript_ereignisse.docx 3

4 2)Event Listener Ereignisse betreffen immer bestimmte Elemente, z.b. dass genau auf einen bestimmten Button getippt wird. Jedes Ereignis benötigt seinen eigenen EventListener. Ein EventListener wird an ein Element angefügt und horcht darauf, ob der Nutzer auf diesem Element ein Ereignis auslöst. Der Zugriff erfolgt mit Hilfe der DOM-Methode getelementbyid(). Es wird die folgenden Methoden genutzt: addeventlistener() bzw. removeeventlistener() Die Methode addeventlistener() hat drei Parameter: Der erste Parameter beschreibt das Ereignis, allerdings ohne on zu Beginn des Ereignisnamens. Der zweite Parameter verweist auf die auszuführende Funktion. Falls beim dritten Parameter der Wahrheitswert false steht, dann wird das Bubbling- Verfahren angewandt, bei true das Capturing-Verfahren. Stelle auf true. Beispiel: Ein Button, der auf einen Klick reagiert Im <head> steht im <script>-block die JavaScript-Funktion, die mit Hilfe der Event Listener aufgerufen wird. Im <body> sieht man, dass das HTML-Element nur wenig Platz beanspruchen, da hier nur die IDs stehen und nicht direkt der Eventhandler. Jedem Element, dem ein Eventhandler zugeordnet werden soll, erhält eine eigenen id mit speziellem Namen, z.b. idbutton oder idnachname. Eberhart 4.javascript_ereignisse.docx 4

5 Weiter unten im <body> steht im <script>-block dann die Zuweisung der Funktion zu den Eventhandler-Eigenschaften der HTML-Elemente. Der Zugriff erfolgt mit Hilfe der DOM- Methode getelementbyid() und mit addeventlistener(). getelementbyid() ist die häufigste Methode im HTML-DOM, um Manipulationen durchzuführen oder Informationen vom Element zu erhalten. Ergebnis: Eberhart 4.javascript_ereignisse.docx 5

6 Beispiel: Anzeige der gewählten Option in einer Dropdownliste Ereignis mit onclick und getelementbyid und Objektzugriff Zugriff auf Objekteigenschaften: 2 Möglichkeiten objectname.propertyname - Punktnotation objectname[ propertyname ] - mit eckigen Klammern Beispiel: person.nachname; person[ nachname ]; Code: <!DOCTYPE html> <html> <head> <script> function getoption() { var obj = document.getelementbyid("myselect"); Eberhart 4.javascript_ereignisse.docx 6

7 document.getelementbyid("demo").innerhtml = obj.options[obj.selectedindex].text; } </script> </head> <body> <form> Select your favorite fruit: <select id="myselect"> <option>apple</option> <option>orange</option> <option>pineapple</option> <option>banana</option> </select> <br><br> <input type="button" onclick="getoption()" value="click Me!"> </form> <p id="demo"></p> </body> </html> Ergebnis: Eberhart 4.javascript_ereignisse.docx 7

8 3)Objekte in JavaScript Objekte sind Datenelemente mit Eigenschaften und Methoden, also eine Ansammlung von thematisch zusammenpassenden Informationen und Funktionen. Diese lassen sich über eine Punktnotation abrufen. Objekte werden z.b. wie Variablen angelegt: var person = { firstname: "John", lastname : "Doe", id : 5566 }; Info: Die Zeile <p id= demo > </p> muss vor dem <script>-block stehen. Speicher die Datei unter 4_js_object.html Ergebnis: Eberhart 4.javascript_ereignisse.docx 8

9 4)JavaScript kann auf alle Elemente einer Website zugreifen. Am einfachsten geht das, wenn das gewünschte HTML-Element eine ID in Form eines Attributs bekommt: Die id ist das Element, über das JavaScript am einfachsten auf die Webseite zugreifen und die Inhalte eines Tags verändern kann. Zum Beispiel um den enthaltenen Text auszulesen oder ihn zu verändern. Beim Öffnen der Seite wird JavaScript sofort ausgeführt und der bestehende Text wird sofort überschrieben. Ergebnis: notiz.innerhtml ist so etwas wie die Kurzform von: document.getelementbyid( notiz ).innerhtml Damit greift man innerhalb des Dokuments document (also der Webseite) auf das Element mit der Id notiz zu. Genauer gesagt auf das, was sich innerhalb des Tags befindet, innerhtml. Eberhart 4.javascript_ereignisse.docx 9

10 Übung: Erstelle in dem obigen Dokument eine Prompt-Anweisung, mit der man einen beliebigen Satz eingeben kann, der dann auch angezeigt wird. Übung 2: Ändere mit Hilfe eines Buttons den Text in der <h1>: Eberhart 4.javascript_ereignisse.docx 10

11 5)DOM-Manipulation In Wirklichkeit will man, wenn man HTML5 und JavaScript gemeinsam nutzt, Veränderungen am Bildschirm erstellen. Der Inhalt am Display des Nutzers soll sich verändern. Dafür muss man Kenntnisse über die DOM-Manipulation haben. Um das Document Object Model (kurz DOM) zu begreifen, muss man zunächst verstehen, wie JavaScript ein HTML-Dokument überhaupt sieht. Wo man im Code spitze Klammern, Tags und Attribute sieht, versteht der Browser diese Elemente als einzelne Objekte, hierarchisch geordnet (wie bei einem Stammbaum). Die Baumwurzel ist das alles umschließende <html>-objekt, das sich in <head> und <body>- Objekte aufteilt. Diese können sich wiederum in Überschriften, Absätze, Divs, Hyperlinks und so weiter verästeln. Das nennt man daher auch DOM Tree. Ein Objekt innerhalb des Baumes nenne man Knoten. Mithilfe von JavaScript kann man nun einzelne Knoten des Dokumentenbaums auswählen, verändern oder sogar löschen Das Auswählen (Selektieren) geschieht dabei mit der Funktion queryselector() : var h1 = document.queryselector( h1 ); Die Funktion erwartet dabei einen Tag-Namen, eine Klasse oder eine ID als Parameter: var headline = document.queryselector( #headline ); var headline = document.queryselector(.headline ); Die Syntax ist die gleiche wie bei CSS. IDs bekommen eine vorangestellte Raute und Klassen einen Punkt. Diese Funktion liefert immer nur das erste passende Objekt zurück. Für mehrere Objekte gibt es die Funktion queryselectorall(). Dieses liefert kein Element, sondern ein Array von HTML-Elementen zurück. var headline = document.queryselectorall(.headline ); Somit wird ein Element selektiert, aber noch nicht manipuliert. Eine Manipulation kann z.b. mit dem Attribut innerhtml erfolgen. Dieses berührt dabei nur die Inhalte innerhalb der Tags, das Element selbst oder dessen Attribute bleiben unberührt. Eberhart 4.javascript_ereignisse.docx 11

12 Beispiel Überschrift ändern: Erstelle die Datei 4.javascript_dom.html : Es soll nach dem Klick auf einen Button der Text in der Überschrift <h1> geändert werden. Die Funktion textnew stellt eine Variable bereit, die einen neuen Text beinhaltet. var button selektiert den Button im EventListener wird dann er Wert aus der Funktion mit innerhtml getauscht. Ergebnis: Eberhart 4.javascript_ereignisse.docx 12

13 Übung Würfel mit Button neu würfeln Mit einem Klick soll jeweils neu gewürfelt werden und die neue Augenzahl in der <h1> angezeigt werden. Erstelle die Datei 4.javascript_wuerfel.html : es gibt eine <h1>, die man für die Ausgabe der Würfelaugen benötigt der Klick auf den Button soll neue Augen ergeben Verwendung von Math.random() und Math.round() Verwendung einer Selektion mit document.queryselector() Verwendung eines EventListeners Tipp: Damit nicht eine Augenzahl von 0 bis 6 generiert wird, sondern 1 bis 6, muss man den Zufall nicht mit 6 sondern mit 5 multiplizieren und 1 dazuzählen. Ergebnis: Eberhart 4.javascript_ereignisse.docx 13

14 Quellen: Eberhart 4.javascript_ereignisse.docx 14