|[[:inf:js:objektmodell:Fragen]]|**Inhalte**|[[:inf:js:objektmodell:Übungen]]| ====== JavaScript - Objektmodell ====== ===== Hierarchie der JavaScript-Objekte ===== {{ :inf:js:js-88-1.jpg?direct&150}}In JavaScript werden dem Benutzer neben den vordefinierten Objekten wie stringund Arrayweitere Objekte zur Verfügung gestellt, über die wir beispielsweise auf ein Element eines Formulars zugreifen und dieses ändern können. Diese JavaScript-Objekte sind in einer Hierarchie geordnet. Die hierarchiehöchsten Objekte sind das Fensterobjekt window, das Navigatorobjekt navigator und das Bildschirmobjekt screen. Der Inhalt eines Fensters und somit das HTML-Dokument werden durch das document-Objekt repräsentiert. Dieses Objekt ist dem window-Objekt untergeordnet. Das HTML-Dokument enthält Elemente, wie zum Beispiel Grafiken, Verweise und Formulare. Für diese Elemente gibt es weitere Objekte, beispielsweise das Objekt ''forms'' für Formulare. Um auf die Elemente des Formulars (Eingabefelder, Auswahllisten oder Schaltflächen) zuzugreifen, existiert das Objekt ''elements'', mit dem wir einzelne Felder und andere Elemente innerhalb eines Formulars ansprechen können. Das ''navigator''-Objekt und das ''screen''-Objekt existieren unabhängig vom window-Objekt und geben Auskunft über den Browser, in dem das Skript läuft, bzw. über die Einstellungen des Computer-Bildschirms. Aufgrund der großen Menge an Objekten werden wir anhand von ausgesuchten Beispielen im Folgenden die wichtigsten Objekte und deren Eigenschaften und Methoden erläutert. [[http://de.selfhtml.org/javascript/objekte/index.htm|Weitergehende Informationen zu allen JavaScript-Objekten finden sich hier]]. ===== Objekt navigator ===== Um die Eigenschaften eines Browsers auszulesen, wird das Objekt navigator angewendet. {{:inf:js:js-89-1.jpg?direct&700}} {{:inf:js:js-89-2.jpg?direct&700}} Um zu ermitteln, welchen Browser der Besucher der Webseite verwendet, wird der Wert der Eigenschaft ''appName'' überprüft. Diese gibt den Namen des Browsers zurück. Eine weitere Spezifizierung kann mit der Nutzung von ''appVersion'' durchgeführt werden, da diese Eigenschaft die spezielle Versionsnummer des Browsers angibt. Die Browser besitzen meist noch weitere individuelle Eigenschaften, die wir durch das Ausführen des folgenden Beispiels anzeigen können. **Beispiel: [[http://elearn.bgamstetten.ac.at/wiki/addons/JS/objekt_navigator.html|objekt_navigator.html]]** Dieses Beispiel liefert Angaben zu allen Eigenschaften des ''navigator''-Objekts des verwendeten Browsers und den Rückgabewert der Methode ''javaEnabled()''. Das Objekt navigator

Eigenschaften des navigator-Objekts

 Zu beachten ist, dass in den verschiedenen Browsern nicht alle Eigenschaften gleich verhanden sind und daher unterschiedliche Ergebnisse angezeigt werden. Diese Informationen sind dann wichtig, wenn Verzweigungen für browserspezifische JavaScript-Anweisungen benötigt werden. Die weitverbreiteten Browser Internet Explorer und Mozilla Firefox weisen auch in den neuen Versionen Unterschiede in ihren Implementierungen der HTML- und JavaScript-Standards auf. Somit ist das Verzweigen in unterschiedliche Codesegmente nötig, um nicht eine Fehlermeldung in dem einen oder anderen Browser zu erhalten. Beispiel: {{http://elearn.bgamstetten.ac.at/infowpf/addons/JS/objekt_navigator_weiche.html|objekt_navigator_weiche.html}} Ein typischer Einsatzzweck für das Objekt ''navigator'' ist die sogenannte Browserweiche, in der die verwendeten Browser abgefragt und speziell für die verschiedenen Browser angepasste Funktionen ausgeführt werden. Statt der hier angegebenen Funktion ''alert()'' können andere Funktionen ausgeführt werden. Browserweiche

Browserweiche

Dieses Skript dient zum Ermitteln des vom Nutzer verwendeten Browsers.

 \\ \\ ===== Objekt window ===== Das Objekt ''window'' (Fenster) steht in der Objekthierarchie an oberster Stelle. Alle anderen Objekte, die das im Fenster geladene Dokument beschreiben, sind Eigenschaften des ''window''-Objekts. Es erlaubt uns somit die Abfragen zu den einzelnen Dokumentfenstern und ermöglicht uns, neue Fenster zu öffnen sowie deren Eigenschaften (Name, Höhe, Breite usw.) festzulegen. Auch das Schließen von Fenstern ist hiermit möglich. {{:inf:js:js-90-1.jpg?direct&100}} * Ist das Browserfenster in Frames unterteilt, befinden sich die Objekte der HTML-Dokumente in einer eigenen Hierarchie unterhalb eines frames-Objekts. * Das document-Objekt enthält alle wesentlichen HTML-Elemente wie Links, Anker, Bilder und Formulare des betreffenden HTML-Dokuments. * Das history-Objekt enthält die Liste der zuletzt geladenen URLs. * Das location-Objekt enthält Informationen über die URL des aktuellen Dokuments. ==== Methoden des window-Objekts ==== {{:inf:js:js-90-2.jpg?direct&700}}{{:inf:js:js-91-1.jpg?direct&700}}{{:inf:js:js-91-2.jpg?direct&700}} Standardmäßig müssen wir zum Aufruf einer Methode eines Objekts den Objektnamen voranstellen, z.B. ''window.alert()''. Im Falle des ''window''-Objekts können wir den Namen ''window'' weglassen. Dieser wird automatisch von JavaScript vorangesetzt. ==== Statusanzeige ==== Standardmäßig ist der Browser für die Textanzeige der Statuszeile verantwortlich. Nach dem Laden einer Webseite zeigt er z. B. den Text ''Fertig'' an oder beim Überfahren eines Hyperlinks mit der Maus die betreffende URL. Standardmäßig können wir den Statusleistentext im Mozilla Firefox nicht per JavaScript ändern. Hierzu müssen wir in den erweiterten JavaScript-Einstellungen des Browsers das Überschreiben des Statusleistentextes explizit erlauben. Beispiel: {{http://elearn.bgamstetten.ac.at/wiki/addons/JS/objekt_window_status.html|objekt_window_status.html}} Diese Statusanzeige soll von Ihnen mit einem individuellen Text überschrieben werden. Zusätzlich soll beim Überfahren eines Links mit der Maus eine spezielle Anzeige erfolgen. Um die Statusanzeige anzusprechen, bietet das Objekt ''window'' die Eigenschaften ''defaultstatus'' (standardmäßige Statusanzeige) und ''status'' (aktuelle Statusanzeige). Statusanzeige beeinflussen

Statusanzeige ändern

Führen Sie die Maus über den Link und beobachten Sie die Statuszeile.
Ändern der Statuszeile \\ \\ ==== Vorheriges Dokument aufrufen ==== Im Browser können wir mit der Schaltfläche Zurück zum vorherigen HTML-Dokument wechseln. Die entsprechende Methode nennt sich ''back()''. Sie wird sehr oft in Zusammenhang mit einem Verweis angewendet. Diese Methode funktioniert nur, wenn sich vor der Webseite im Browserverlauf eine weitere Webseite befindet. **Beispiel: {{http://elearn.bgamstetten.ac.at/wiki/addons/JS/objekt_window_back.html|objekt_window_back.html}} ** Objekt:window, Methode:back() Zur vorherigen Seite ==== Fenster öffnen und schließen ==== Beim Browsen im Internet werden bei vielen Webseiten automatisch weitere Fenster, meist Werbeeinblendungen, geöffnet. Dazu wird die Methode ''open()'' verwendet. window.open("URL","Fenstername",[Optionen]) **Beispiel: {{http://elearn.bgamstetten.ac.at/wiki/addons/JS/objekt_window_open.html|objekt_window_open.html}} ** Beim Laden der Webseite sollen zwei weitere Fenster per JavaScript geöffnet werden. Damit wir die geöffneten Fenster per JavaScript steuern können, werden die Referenzen auf die ''window''-Objekte der neuen Fenster in Variablen gespeichert. Objekt:window, Methode:open()

Das Hauptfenster

 Beim Öffnen eines neuen Fensters können wir weitere Optionen für die Anzeige des Fensters festlegen, z.B. ob im geöffneten Fenster die Statuszeile oder die Adresszeile angezeigt werden soll. {{:inf:js:js-93-1.jpg?direct&700}} **Beispiel** Wir öffnen ein Fenster, in dem die Anzeige aller Fensterelemente abgeschaltet ist. Die Höhe und die Breite des Fensters sollen dabei jeweils 300 Pixel betragen. Zu beachten ist, dass die Fensteroptionen in einer Zeichenkette angegeben werden. Die einzelnen Optionen werden jeweils durch ein Komma voneinander getrennt. Ein Fenster können wir über die Methode'' window.close()'' schließen. Beispielsweise lässt sich diese Funktion als Link im HTML-Dokument darstellen. Aktuelles Fenster schließen // oder Aktuelles Fenster schließen * [[http://openbook.galileocomputing.de/javascript_ajax/08_fenster_007.htm|Mehr zum Öffnen und Schließen von Fenstern im Browser]] ==== Zeitgeber verwenden ==== Mit der Methode ''setTimeout()'' haben wir die Möglichkeit, eine Anweisung oder Funktion nach einer bestimmten Verzögerungszeit auszuführen. Dazu geben wir innerhalb der Klammern den entsprechenden JavaScript-Code an. Als zweite Angabe folgt die Verzögerungszeit in Millisekunden. **Beispiel: {{http://elearn.bgamstetten.ac.at/wiki/addons/JS/objekt_window_settimeout.html|objekt_window_settimeout.html}} ** Durch die Anweisung ''setTimeout("Zeitvorbei()",5000)'' wird nach einer Zeit von 5 Sekunden (5.000 Millisekunden) die Funktion ''Zeitvorbei()'' aufgerufen. Objekt:window, Methode:setTimeout()

Bitte warten, der Countdown läuft

 ==== Meldungsfenster ==== Meldungsfenster zeigen eine Information an, die der Benutzer mit einem Klick auf die Schaltfläche Ok bestätigen muss. Die Methode ''alert()'' (Alarm) öffnet ein Dialogfenster. Innerhalb der Anführungszeichen können wir eine Zeichenkette angeben, die als Meldung angezeigt werden soll. Möchten wir einen Zeilenumbruch einfügen, geben wir die Escapesequenz ''\n'' innerhalb des Textes an. window.alert("Anzeige"); **Beispiel: {{http://elearn.bgamstetten.ac.at/wiki/addons/JS/interaktion_alert.html|interaktion_alert.html}} ** Interaktion - Dialogfenster \\ \\ ==== Eingabefenster ==== In einem Eingabefenster kann der Benutzer einen Text eingeben, der danach einer Variablen zugewiesen wird und weiterverarbeitet werden kann. Die Methode ''prompt()'' (Eingabe) öffnet ein Eingabefenster. Als ersten Wert geben wir den Text an, der beschreibt, was für ein Wert eingegeben werden soll. Mit dem zweiten Parameter legen wir fest, welcher Vorgabewert im Eingabefeld angezeigt wird. window.prompt("Anzeige", "Vorgabewert"); In einem Eingabefenster wird der Name des Benutzers eingegeben, der im darauf folgenden Meldungsfenster vom Programm wieder ausgegeben wird. **Beispiel: {{http://elearn.bgamstetten.ac.at/wiki/addons/JS/interaktion_prompt.html|interaktion_prompt.html}} ** Interaktion \\ \\ ==== Bestätigungsfenster ==== Über dieses Dialogfenster können wir eine Frage anzeigen, die der Benutzer über die Schaltflächen Ok und Abbrechen beantworten kann. Die Methode ''confirm()'' (Bestätigung) zeigt das Dialogfenster an. Als Parameter geben wir die anzuzeigende Frage an. window.confirm("Frage"); **Beispiel: {{http://elearn.bgamstetten.ac.at/wiki/addons/JS/interaktion_confirm.html|interaktion_confirm.html}} ** In Abhängigkeit von der Beantwortung der Frage soll eine entsprechende Meldung angezeigt werden. Interaktion **Beispiel: {{http://elearn.bgamstetten.ac.at/wiki/addons/JS/interaktion_komplett.html|interaktion_komplett.html}} ** Das folgende Beispiel verwendet alle bisher vorgestellten Dialogfenster. Dabei soll der Name des Besuchers erfragt und auf der Webseite ausgegeben werden. Gibt er keinen Namen ein, wird ihm der Name Herr Namenlos zugewiesen. Interaktion

Meine Homepage

 ===== Objekt screen ===== Nicht alle Eigenschaften des ''screen''-Objekts sind sowohl im Internet Explorer als auch in Firefox implementiert. Für die häufigste Anwendung des ''screen''-Objekts, das Öffnen neuer Fenster an der richtigen Position und in der richtigen Größe, sind Eigenschaften in beiden Browsern vorhanden. {{:inf:js:js-98-1.jpg?direct&700}} **Beispiel: {{http://elearn.bgamstetten.ac.at/wiki/addons/JS/objekt_screen.html|objekt_screen.html}} ** Es werden die ermittelten Bildschirmwerte ausgegeben. Objekt: screen

Eigenschaften des screen-Objekts

 **Beispiel: {{http://elearn.bgamstetten.ac.at/wiki/addons/JS/objekt_screen2.html|objekt_screen2.html}} ** Eine häufige Verwendung des ''screen''-Objekts ist die Zentrierung eines Fensters in Abhängigkeit der vom Besucher verwendeten Bildschirmauflösung. Durch das Betätigen eines der Links wird ein leeres Fenster in der angegebenen Auflösung zentriert auf dem Bildschirm angezeigt. Objekt: screen

Fenster zentriert in folgenden Größen öffnen

300 x 300

640 x 480

800 x 600

200 x 600 {{:inf:js:js-99-1.jpg?direct&500}} \\ Berechnung der Werte, um das Browserfenster zentriert darzustellen. ===== Objekt document ===== Das ''document''-Objekt ist das komplexeste Unterobjekt des ''window''-Objekts. Es enthält eine Vielzahl weiterer Eigenschaften, über die wir auf die Elemente eines HTML-Dokuments zugreifen. So enthält das ''document''-Objekt in der Eigenschaft ''forms'' weitere Objektreferenzen, sobald sich ein HTML-Formular ''

…
'' auf einer Webseite befindet. Weitere Eigenschaften sind ''anchors-'' (Verweisanker), ''applets-'' (Java-Applets), ''images-'' (Grafiken), ''layers-'' (Ebenen) und ''links-'' Objekte (Verweise). In diesem Abschnitt werden die Eigenschaften und Methoden erläutert, die sich nicht auf HTML-Elemente beziehen. ==== Eigenschaften ==== {{:inf:js:js-100-1.jpg?direct&700}} **Beispiel: {{http://elearn.bgamstetten.ac.at/wiki/addons/JS/objekt_document.html|objekt_document.html}} ** Die meisten der Eigenschaften entsprechen den Tags in HTML. Über diese Eigenschaften werden im Beispiel die Werte der Tags einer Webseite ausgelesen. Objekt: document

Eigenschaften des document-Objekts

 {{:inf:js:js-101-1.jpg?direct&700}} ==== HTML-Elemente als Objekte von document ==== Der Zugriff auf die Elemente der Dokumenthierarchie erfolgt in der Regel über die im HTML-Quelltext vergebenen Namen. Zusätzlich werden die Objekte der Elemente in Feldern angelegt. * ''window.document.images[]'' enthält alle Grafiken in der Reihenfolge, in der die ''''-Tags im HTML-Quelltext verwendet werden. * ''window.document.anchors[]'' enthält alle Anker entsprechend den Tags ''''. * ''window.document.links[]'' enthält alle Links entsprechend den Tags ''''. * ''window.document.forms[]'' enthält alle Formulare, die durch ''
''-Tags definiert wurden. Auf die einzelnen Unterobjekte des Objekts ''document'' wird im nächsten Abschnitt näher eingegangen. ===== Objekt history ===== Eine weitere Eigenschaft des ''window''-Objekts ist das ''history''-Objekt (history = Geschichte). Laden wir eine Webseite in den Browser, wird die URL im Verlauf des Browsers gespeichert (im Firefox als Chronik bezeichnet). Dies können wir überprüfen, indem wir mit der Maus auf den nach unten weisenden Pfeil neben den Navigationsschaltflächen des Browsers klicken. Es wird eine Liste der zuletzt besuchten Webseiten angezeigt. Mit diesem Objekt erhalten wir einen bedingten Zugriff auf diese gespeicherten URLs. Bedingt heißt, dass wir nur vorwärts und rückwärts auf die Einträge zugreifen können, jedoch nicht direkt. Dies dient dem Schutz der Privatsphare des Nutzers. {{:inf:js:js-102-1.jpg?700&direct}} Wird ''back()'' beim ersten und ''forward()'' beim letzten Eintrag in der History aufgerufen, haben diese Methoden keine Auswirkung. **Beispiel: {{http://elearn.bgamstetten.ac.at/wiki/addons/JS/objekt_history.html|objekt_history.html}}** Auf einer Webseite fügen wir vier Hyperlinks ein, mit denen wir in der History des Browsers navigieren können. Wir müssen dazu im Browserfenster bereits einige Webseiten besucht haben, um diese Funktionalität zu nutzen. Objekt: history

Eigenschaften des history-Objekts

< Eine Seite zurückblättern (back())

> Eine Seite vorwärtsblättern (forward())

<< Zwei Seiten zurückblättern (go(-2))

>> Zwei Seiten vorwärtsblättern (go(2)) {{:inf:js:js-103-1.jpg?direct&500}} Mit den Methoden des ''history''-Objekts können wir durch die History der besuchten Webseiten navigieren. Dies ist jedoch erst möglich, wenn wir bereits einige Webseiten mit dem Browser besucht haben und dann die betreffende Webseite im Browser laden. Zur Ausführung von ''history.go(2)'' müssen wir mindestens zwei weitere Webseiten besuchen und sich wieder zur Webseite des Beispiels in der ''History'' zurückbewegen. \\ ===== Objekt location ===== Das ''location''-Objekt (location = Ort) ist eine Eigenschaft des ''window''-Objekts. Mit diesem Objekt können wir auf die URL des aktuell dargestellten Dokuments lesend und schreibend zugreifen. Wir können dabei die gesamte URL oder auch einzelne Teile davon auslesen und verarbeiten. {{:inf:js:js-103-2.jpg?direct&700}} \\ {{:inf:js:js-103-3.jpg?direct&700}} \\ **Beispiel: {{http://elearn.bgamstetten.ac.at/wiki/addons/JS/objekt_location.html|objekt_location.html}}** In diesem Beispiel werden die Eigenschaften des ''location''-Objekts in einer Tabelle ausgegeben. Damit die meisten Eigenschaften des Objekts location einen Wert zurückliefern, laden wir die Webseite über einen Webserver und rufen wir diese dort auf. Zusätzlich geben wir in der URL einen Anker sowie Parameter an.

Eigenschaften des Iocation-0bjekts

\\ **Beispiel: {{http://elearn.bgamstetten.ac.at/wiki/addons/JS/objekt_location_redirect.html|objekt_location_redirect.html}}** Durch das Setzen der Eigenschaft ''href'' kann der Browser über JavaScript veranlasst werden, eine neue Seite zu laden. Ein Anwendungsbeispiel für das Objekt ''location'' findet sich in einer URL-Weiterleitung. Beispielsweise können wir den Besuchern eine bestimmte Webseite anzeigen, wenn kein JavaScript aktiviert ist. Den Benutzern mit aktiviertem JavaScript bieten wir eine separate Webseite an, auf die automatisch weitergeleitet wird, z.B. ''objekt_location_mit_js.html''. Objekt: location

Bei Ihnen ist JavaScript deaktiviert.

 \\ \\ ===== Objekt frames ===== In einem Fenster können mehrere Frames enthalten sein. In jeden Frame kann wiederum ein HTML-Dokument geladen werden, in dem erneut Frames definiert sind. Das ''frames''-Objekt ist eine Eigenschaft des ''window''-Objekts, das auch die Objekte ''document, history, locatio''n enthalten kann. Auf die einzelnen Unterframes können wird über das ''frames''-Feld zugreifen. {{:inf:js:js-105-1.jpg?700&direct}} Um einen Frame ansprechen zu können, geben wir entweder den Namen des Frames mit ''window.FrameName'' an oder verwenden wir einen Index. Zu beachten, dass der Zähler bei null beginnt, d. h., das erste Frame-Fenster sprechen wir mit ''frames[0]'' an, das zweite Frame-Fenster mit ''frames[1]'' usw. Beim Zählen gilt die Reihenfolge, in der die Frames im Frameset definiert sind. Die Ermittlung der Eigenschaften eines Framesets soll Ihnen anhand eines Beispiels verdeutlicht werden. {{:inf:js:js-105-2.jpg?500&direct}}\\ Aufteilung eines Framesets in vier Frames \\ **Beispiel: {{http://elearn.bgamstetten.ac.at/wiki/addons/JS/frames/objekt_frames.html|objekt_frames.html}}** Zuerst erstellen wir eine Webseite mit einem Frameset, das wiederum zwei Frames beinhaltet: Objekt: frames \\ **Beispiel: {{http://elearn.bgamstetten.ac.at/wiki/addons/JS/frames/frechts.html|frechts.html}}** Wir erstellen den rechten Frame(2), der als Frameset für weitere drei Frames genutzt wird. Objekt: frames \\ **Beispiel: {{http://elearn.bgamstetten.ac.at/wiki/addons/JS/frames/fzentrum.html|fzentrum.html}}, {{http://elearn.bgamstetten.ac.at/infowpf/addons/JS/frames/foben.html|foben.html}}, {{http://elearn.bgamstetten.ac.at/infowpf/addons/JS/frames/funten.html|funten.html}}, {{http://elearn.bgamstetten.ac.at/infowpf/addons/JS/frames/flinks.html|flinks.html}}** Nachfolgend wird der Code der HTML-Dokumente des rechten Frames näher betrachtet. Alle weiteren Frames ''foben.html'', ''funten.htm'' und ''flinks.html'' enthalten die gleichen Anweisungen. Objekt: frames Durch das Auslesen der Frames-Eigenschaften können wir gezielt auf die Frames zugreifen und den Inhalt verändern, ohne die Namen der einzelnen Frames zu kennen. Zwei weitere Beispiele sollen uns die Wirkungsweise des ''frames''-Objekts sowie des bereits erklärten location-Objekts erläutern. Beispielsweise kann ein anderer Autor von seiner Webseite auf unsere Webseite über einen Link verweisen. Verwendet die aufrufende Webseite Frames, kann es vorkommen, dass unsere Seite innerhalb seines Framesets aufgerufen wird. Ein Besucher kann dadurch den Eindruck gewinnen, dass unsere Webseite Bestandteil der fremden Homepage ist. Um dies zu verhindern, verwenden wir das ''location''-Objekt, um das oberste Frameset zu überladen. {{:inf:js:js-107-1.jpg?700&direct}} Das Skript kontrolliert, ob sich unsere Webseite in einem Frameset befindet (''frames.length >0''). Ist dies der Fall, wird die Seite in das oberste Frameset geladen (''top.location.href''). Die Adresse Ihrer Webseite erhalten wir durch die Abfrage ''self.location''. Ein weiteres Beispiel ist das Laden von Webseiten in einen Frame. Öffnen Besucher über den Link einer Suchmaschine eine Ihrer Webseiten, die eigentlich Teil eines Framesets ist, können wir das vollständige Frameset nachladen lassen. {{:inf:js:js-107-2.jpg?700&direct}} Dieses Skript überprüft, im Gegensatz zum vorherigen Skript, ob sich die Seite nicht in einem Frame befindet (''frames.length == 0''). Trifft dies zu, wird die Webseite mit der Frame-Definition geladen, in diesem Beispiel die Webseite ''frame.html''. \\ \\ ===== Objekt event ===== Eine Eigenschaft des ''window''-Objekts ist seit der JavaScript-Version 1.2 das ''event''-Objekt (event = Ereignis). Mit diesem Objekt können wir auf Ereignisse wie Mausklicks oder Tastatureingaben reagieren und JavaScript-Code ausführen. Beispielsweise können wir bei einem Mausklick ermitteln, ob die linke oder rechte Maustaste gedrückt wurde, oder bei einem Tastendruck die betätigte Taste ermitteln. Anwenderereignisse können wir überwachen, indem wir in einem HTML-Tag eine Ereignisabfrage hinzufügen (''onClick, onMouseOver, onKeyPress'' usw.). Die Browser ermöglichen die Abfrage der betätigten (Maus-)Tasten. Allerdings stellt der Internet Explorer andere Konstanten zur Verfügung als die beiden Browser Firefox und Opera. So sind wir gezwungen, die entsprechenden Anweisungen für jeden Browser separat anzugeben. Die folgende Tabelle listet die unterschiedlichen Eigenschaften des ''event''-Objekts für die Browser Internet Explorer, Firefox und Opera auf. Gleichbedeutende Eigenschaften sind auf einer Zeile gegenübergestellt. Das heißt, dass beispielsweise die Explorer-Eigenschaften ''altKey, ctrlKey, shiftKey'' der Eigenschaft ''modifiers'' in Firefox bzw. Opera entsprechen. {{:inf:js:js-108-1.jpg?700&direct}} ==== Firefox und Opera ==== Events können von ''window-'', ''frame-'' und ''document''-Objekten abgefangen werden. Wir legen die Funktion fest, die bei einem bestimmten Event ausgeführt werden soll, und weisen wir der entsprechenden Objekt-Methode zu. **Beispiel** Es wird der Klick mit der linken Maustaste in einen beliebigen Fensterbereich des Browsers abgefangen. Damit werden alle Klick-Ereignisse an die Funktion ''klick()'' übergeben. In der Funktion kann das Ereignis verarbeitet oder an das eigentliche Objekt, das angeklickt wurde, weitergegeben werden. Standardmäßig können wir im Browser Opera nicht die rechte Maustaste abfragen. Dies muss explizit in den Javascripteinstellungen zugelassen werden. Die weiteren Events für Firefox und Opera lauten: {{:inf:js:js-108-2.jpg?700&direct}} \\ {{:inf:js:js-109-1.jpg?700&direct}} Wird eine Event-Handler-Funktion aufgerufen, wird ihr immer ein ''event''-Objekt übergeben, dessen Eigenschaften das eingetretene Ereignis beschreiben. Das ''event''-Objekt kann folgende Eigenschaften besitzen: {{:inf:js:js-109-2.jpg?700&direct}} \\ ==== Internet Explorer ==== Der Internet Explorer benötigt keine spezielle Methode, um Ereignisse abzufangen. Jedes Ereignis wird entlang der Objekthierarchie abgeglichen. Das heißt beispielsweise, dass ein ''click''-Ereignis auf einer Formular-Schaltfläche nach seinem Event-Handler automatisch an den ''onClick''-Handler des Formulars und dann an den des Dokuments usw. weitergegeben wird. Praktisch jedes HTML-Element kann somit mit einem Event-Handler ausgestattet werden. Das ''event''-Objekt existiert im Internet Explorer nicht. Die Events sind im Internet Explorer eine Eigenschaft des window-Objekts. Die Eigenschaften von ''window.event'' werden bei jedem Ereignis überschrieben. {{:inf:js:js-109-3.jpg?700&direct}} \\ {{:inf:js:js-110-1.jpg?700&direct}} Um z.B. das automatische Weitergeben des Ereignisses zu stoppen, muss der Event-Handler die Eigenschaft ''cancelBubble'' auf den Wahrheitswert ''true'' setzen: Dadurch hört das Weiterleiten des Ereignisses auf, und der Handler der Schaltfläche war der letzte, der durch das Ereignis aufgerufen wurde. \\ ==== Maustasten überwachen ==== **Beispiel: {{http://elearn.bgamstetten.ac.at/wiki/addons/JS/objekt_event.html|objekt_event.html}}** Zum Kennenlernen der ''event''-Eigenschaften entwickeln wir ein Skript, das in den Browsern das Betätigen der Maustasten überwacht. document: event

Überwachen der Maustasten

Drücken Sie eine Maustaste, um das Ereignis auszulösen. \\ ==== ASCII-Codes betätigter Tasten ausgeben ==== **Beispiel: {{http://elearn.bgamstetten.ac.at/wiki/addons/JS/objekt_event2.html|objekt_event2.html}}** In einem mehrzeiligen Eingabefeld werden die Tastatureingaben abgefangen, und der entsprechende ASCII-Code wird in der Statuszeile des Browsers ausgegeben. ASCII-Code ermitteln

event: Tastaturcodes

Geben Sie etwas in das Textfeld ein, um den entsprechenden Tastaturcode in der Statuszeile anzeigen zu lassen.