FragenInhalteÜbungen



11.3.9) Objektmodell

Hierarchie der JavaScript-Objekte

js-88-1.jpgIn 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.

Weitergehende Informationen zu allen JavaScript-Objekten finden sich hier.

Objekt navigator

Um die Eigenschaften eines Browsers auszulesen, wird das Objekt navigator angewendet.

js-89-1.jpg

js-89-2.jpg

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: objekt_navigator.html

Dieses Beispiel liefert Angaben zu allen Eigenschaften des navigator-Objekts des verwendeten Browsers und den Rückgabewert der Methode javaEnabled().

objekt_navigator.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Das Objekt navigator</title>
</head>
<body>
  <h3>Eigenschaften des navigator-Objekts</h3>
  <script type="text/javascript">
    for(eig in navigator)
      document.write("<b>" + eig + ":<\/b> " + navigator[eig] + "<br>");
    document.write("<b>javaEnabled() :<\/b> " + navigator.javaEnabled());
  </script>
</body>
</html>

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: 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.

objekt_navigator_weiche.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">  
<head>
  <title>Browserweiche</title>
</head>
<body>
  <h3>Browserweiche</h3>
  <p>Dieses Skript dient zum Ermitteln des vom Nutzer verwendeten Browsers.</p>
  <script type="text/javascript">
 
    if(parseInt(navigator.appVersion)>= 4)
    {
      if(navigator.appName == "Netscape") 
      {
         alert("Sie verwenden den Mozilla Firefox.");
         document.write("Sie verwenden den Mozilla Firefox.");
      }
      else if(navigator.appName.indexOf("Internet Explorer") != -1)
      {
         alert("Sie verwenden den Internet Explorer.");
         document.write("Sie verwenden den Internet Explorer.");
 
      }
      else if(navigator.appName == "Opera") 
      {
         alert("Sie verwenden den Opera-Browser.");
         document.write("Sie verwenden den Opera-Browser.");
      }
      else
      {
         alert("Sie verwenden einen anderen Browser.");
         document.write("Sie verwenden einen anderen Browser.");
      }
    }
    else
    {
      alert("Sie verwenden einen älteren Browser.");
    }
  </script>
 
</body>
</html>



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. js-90-1.jpg

Methoden des window-Objekts

js-90-2.jpgjs-91-1.jpgjs-91-2.jpg

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: 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).

objekt_window_status.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Statusanzeige beeinflussen</title>
  <script type="text/javascript">
 
    window.defaultStatus="Willkommen auf meiner Homepage";
 
  </script>
</head>
<body>
  <h3>Statusanzeige &auml;ndern</h3>
  F&uuml;hren Sie die Maus über den Link und beobachten Sie die Statuszeile.<br>
 
  <a href="#" onMouseOver="window.status='Statuszeile wurde überschrieben'; return true;">
  &Auml;ndern der Statuszeile</a>
</body>
</html>



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: objekt_window_back.html

objekt_window_back.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Objekt:window, Methode:back()</title>
</head>
<body>
  <a href="javascript:window.back()">Zur vorherigen Seite</a>
</body>
</html>

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: 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_open.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">  
<head>
  <title>Objekt:window, Methode:open()</title>
</head>
<body>
  <h3>Das Hauptfenster</h3>
  <script type="text/javascript">
 
    Fenster1 = window.open("objekt_window_status.html", "FensterEins");
    Fenster2 = window.open("about:blank", "FensterZwei");
 
  </script>
</body>
</html>

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.

js-93-1.jpg

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. 

<script   type="text/JavaScript">
  Fenster =  window.open("","Individuell",
                         "menubar=no,locationbar=no,resizable=no,
                          status=no,height=300,width=300"); 
</script>

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. 

<a href="JavaScript:window.close();">Aktuelles  Fenster  schließen</a>
//   oder
<a href="JavaScript:seif.close();">Aktuelles Fenster schließen</a>

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: 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_settimeout.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Objekt:window, Methode:setTimeout()</title>
</head>
<body>
  <h3>Bitte warten, der Countdown läuft</h3>
  <script type="text/javascript">
 
    function Zeitvorbei()
    {
      window.alert("Die Zeit ist abgelaufen...");
      return;
    }
    window.setTimeout("Zeitvorbei()", 5000);
 
  </script>
</body>
</html>

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: interaktion_alert.html

interaktion_alert.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Interaktion - Dialogfenster</title>
</head>
<body>
  <script type="text/javascript">
 
    alert("Dies ist kein Fehler, \nsondern nur ein Test!");
 
  </script>
</body>
</html>



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: interaktion_prompt.html

interaktion_prompt.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Interaktion</title>
</head>
<body>
  <script type="text/javascript">
      name = prompt("Bitte geben Sie Ihren Namen an:", "");
      alert("Ihr Name ist '" + name + "'.");
  </script>
</body>
</html>



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: interaktion_confirm.html

In Abhängigkeit von der Beantwortung der Frage soll eine entsprechende Meldung angezeigt werden.

interaktion_confirm.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Interaktion</title>
</head>
<body>
  <script type="text/javascript">
 
      wahl = confirm("Sind Sie das erste Mal hier?");
      if(wahl == true)
        alert("Sie haben die Frage mit OK bestätigt!")
      else
        alert("Sie haben die Frage mit NEIN beantwortet!");
 
  </script>
</body>
</html>

Beispiel: 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_komplett.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Interaktion</title>
</head>
<body>
  <h3>Meine Homepage</h3>
  <script type="text/javascript">
 
      var name = "";
      janein = confirm("Möchten Sie mir Ihren Namen verraten?");
      if (janein == true)
        name = prompt("Wie ist Ihr Name?", "");
 
      if ((name == "") || (name == null))
      {
        alert("Name unbekannt.");
        name = "";
      }
 
      document.write("Hallo " + name + ",<br>willkommen auf meiner Webseite.");
  </script>
</body>
</html>

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.

js-98-1.jpg

Beispiel: objekt_screen.html

Es werden die ermittelten Bildschirmwerte ausgegeben.

objekt_screen.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Objekt: screen</title>
</head>
<body>
  <h3>Eigenschaften des screen-Objekts</h3>
  <script type="text/javascript">
    document.write("<p><b>H&ouml;he & Breite des Bildschirms mit screen.height & screen.width:<\/b><br>" + screen.height + " x " + screen.width + "<br>");
    document.write("<b>Sichtbare H&ouml;he & Breite mit screen.availHeight & screen.availWidth:<\/b><br>" + screen.availHeight + " x " + screen.availWidth + "<br>");
    document.write("<b>Verwendete Farbtiefe mit screen.colorDepth:<\/b><br>" + screen.colorDepth + "Bit");
  </script>
</body>
</html>

Beispiel: 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_screen2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Objekt: screen</title>
  <script type="text/javascript">
    function openCentered(URL, breite, hoehe)
    {
      var PopupX = (screen.availWidth / 2) - (breite / 2);
      var PopupY = (screen.availHeight / 2) - (hoehe / 2);
 
      window.open(URL, "", "resizable=no, locationbar=no, width=" + breite + ", height=" + hoehe + ", left=" + PopupX + ", top=" + PopupY);
    }
  </script>
</head>
<body>
  <h3>Fenster zentriert in folgenden Gr&ouml;&szlig;en &ouml;ffnen</h3>
  <p><a href="javascript:openCentered('about:blank', 300, 300);">300 x 300</a>
 
  <p><a href="javascript:openCentered('about:blank', 640, 480);">640 x 480</a>
  <p><a href="javascript:openCentered('about:blank', 800, 600);">800 x 600</a>
  <p><a href="javascript:openCentered('about:blank', 200, 600);">200 x 600</a>
</body>
</html>

js-99-1.jpg
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 <form>…</form> 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

js-100-1.jpg

Beispiel: 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.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Objekt: document</title>
</head>
<body>
  <h3>Eigenschaften des document-Objekts</h3>
  <script type="text/javascript">
    document.write("<b>Titel der Webseite:<\/b> mit document.title =" + document.title + "<br>");
    document.write("<b>Adresse der Webseite:<\/b> mit document.location = " + document.location + "<br>");
    document.write("<b>Adresse der Webseite:<\/b> mit document.URL = " + document.URL + "<br>");
    document.write("<b>Farbe des Hintergrunds:<\/b> mit document.bgColor = " + document.bgColor + "<br>");
    document.write("<b>Farbe der Schrift:<\/b> mit document.fgColor = " + document.fgColor + "<br>");
 
    document.write("<b>Farbe der Verweise:<\/b> mit document.linkColor = " + document.linkColor + "<br>");
    document.write("<b>Farbe der aktivierten Verweise:<\/b> mit document.alinkColor = " + document.alinkColor + "<br>");
    document.write("<b>Farbe der besuchten Verweise:<\/b> mit document.vlinkColor = " + document.vlinkColor + "<br>");
    document.write("<b>Seite wurde von Adresse aufgerufen:<\/b> mit document.referrer = " + document.referrer + "<br>");
    document.write("<b>Letzte Änderung der Seite:<\/b> mit document.lastModified = " + document.lastModified + "<br>");
 
    document.write("<b>anchors-Objekt:<\/b> mit document.anchors = " + document.anchors + "<br>");
    document.write("<b>applets-Objekt:<\/b> mit document.applets = " + document.applets + "<br>");
    document.write("<b>embeds-Objekt:<\/b> mit document.embeds = " + document.embeds + "<br>");
    document.write("<b>forms-Objekt:<\/b> mit document.forms = " + document.forms + "<br>");
    document.write("<b>images-Objekt:<\/b> mit document.images = " + document.images + "<br>");
    document.write("<b>all-Objekt:<\/b> mit document.all = " + document.all + " (nur IE)<br>");
    document.write("<b>links-Objekt:<\/b> mit document.links = " + document.links + "<br>");
    document.write("<b>plugins-Objekt:<\/b> mit document.plugins = " + document.plugins + "<br>");
  </script>
</body>
</html>

js-101-1.jpg

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.

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.

js-102-1.jpg

Wird back() beim ersten und forward() beim letzten Eintrag in der History aufgerufen, haben diese Methoden keine Auswirkung.

Beispiel: 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.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Objekt: history</title>
</head>
<body>
  <h3>Eigenschaften des history-Objekts</h3>
  <p>&lt; <a href="javascript:history.back();">Eine Seite zurückblättern</a> (<code>back()</code>)<br>
  <p>&gt; <a href="javascript:history.forward();">Eine Seite vorwärtsblättern</a> (<code>forward()</code>)<br>
  <p>&lt;&lt; <a href="javascript:history.go(-2);">Zwei Seiten zurückblättern</a> (<code>go(-2)</code>)<br>
  <p>&gt;&gt; <a href="javascript:history.go(2);">Zwei Seiten vorwärtsblättern</a> (<code>go(2)</code>)
</body>
</html>

js-103-1.jpg

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.

js-103-2.jpg
js-103-3.jpg


Beispiel: 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. 

<h3>Eigenschaften des  Iocation-0bjekts</h3> 
<script type="text/JavaScript"> 
for(eig in location)
  document.write("<b>" + eig + ":</b>" + location[eig]+"<\/br>"); </script>


Beispiel: 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. 

<html> 
<head>
  <title>Objekt: location</title>
</head>
<body onLoad="window.location.href='objekt_location_mit_js.html'"> 
  <h3>Bei Ihnen ist JavaScript deaktiviert.</h3>
</body>
</html>



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, location enthalten kann. Auf die einzelnen Unterframes können wird über das frames-Feld zugreifen.

js-105-1.jpg

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.

js-105-2.jpg
Aufteilung eines Framesets in vier Frames


Beispiel: objekt_frames.html

Zuerst erstellen wir eine Webseite mit einem Frameset, das wiederum zwei Frames beinhaltet:

objekt_history.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
            "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="de">
<head>
  <title>Objekt: frames</title>
</head>
<frameset cols="50%,*">
  <frame name="FLinks" src="flinks.html">   <!-- Frame 1 -->
  <frame name="FRechts" src="frechts.html"> <!-- Frame 2 -->
</frameset>
</html>


Beispiel: frechts.html

Wir erstellen den rechten Frame(2), der als Frameset für weitere drei Frames genutzt wird.

frechts.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
            "http://www.w3.org/TR/html4/frameset.dtd">
<head>
  <title>Objekt: frames</title>
</head>
<frameset rows="1,1,1">
  <frame name="FOben" src="foben.html">       <!-- Frame 2.1 -->
  <frame name="FZentrum" src="fzentrum.html"> <!-- Frame 2.2 -->
  <frame name="FUnten" src="funten.html">     <!-- Frame 2.3 -->
</frameset>
</html>


Beispiel: fzentrum.html, foben.html, funten.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_history.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Objekt: frames</title>
  <script type="text/javascript">
      function ausgabe()
      {
        document.write("Frame 2.2<br>");
        document.write("Das &uuml;bergeordnete Dokument hei&szlig;t: " + parent.name + "<br>");
        document.write("Frames im &uuml;bergeordneten Dokument: " + parent.length + "<br>");
        document.write("Diese lauten: ");
        for(i = 0; i < parent.frames.length; ++i)
           document.write(parent.frames[i].name + "&nbsp;");
        document.write("<br>");
        document.write("Dieses Frame hei&szlig;t: " + self.name + "<br>");
        document.write("Frames im Hauptdokument: " + top.length + "<br>");
      }
  </script>
</head>
<body onLoad="ausgabe();">
  <noscript>Aktivieren Sie JavaScript, um dieses Beispiel anzuzeigen.
  </noscript>
</body>
</html>

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.

js-107-1.jpg

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.

js-107-2.jpg

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.

js-108-1.jpg

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. 

<script  type="text/javascript"> 
  function klick()
  {alert('Dies war ein einfacher Mausklick!');
  }
  window.onclick=klick; 
</script>

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:

js-108-2.jpg

js-109-1.jpg

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:

js-109-2.jpg


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.

js-109-3.jpg

js-110-1.jpg

Um z.B. das automatische Weitergeben des Ereignisses zu stoppen, muss der Event-Handler die Eigenschaft cancelBubble auf den Wahrheitswert true setzen: 

<input type="button" onClick="klick(); window.event.cancelBubble=true" >

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: objekt_event.html

Zum Kennenlernen der event-Eigenschaften entwickeln wir ein Skript, das in den Browsern das Betätigen der Maustasten überwacht.

objekt_event.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>document: event</title>
  <script type="text/javascript">
      var message_lm="Ja, die linke Maustaste funktioniert!";
      var message_rm="Ja, die rechte Maustaste funktioniert!";
 
      function wache(e) {
        if (window.navigator.appName == "Microsoft Internet Explorer")
        {
          if(window.event.button == 2)
          {
            alert(message_rm);
            return false;
          }
          if(window.event.button == 1)
            alert(message_lm);
 
          return true;
        }
 
        if ((window.navigator.appName == "Netscape") || (window.navigator.appName == "Opera"))
        {
          if(e.which == 3)
          {
            alert(message_rm);
            return false;
          }
          if(e.which == 1)
            alert(message_lm);
 
          return true;
        }
      }
 
      document.onmousedown = wache;
  </script>
</head>
<body>
  <h3>&Uuml;berwachen der Maustasten</h3>
  <p>Drücken Sie eine Maustaste, um das Ereignis auszul&ouml;sen.
 
</body>
</html>


ASCII-Codes betätigter Tasten ausgeben

Beispiel: objekt_event2.html

In einem mehrzeiligen Eingabefeld werden die Tastatureingaben abgefangen, und der entsprechende ASCII-Code wird in der Statuszeile des Browsers ausgegeben.

objekt_event2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>ASCII-Code ermitteln</title>
  <script type="text/javascript">
    var isNav, isIE = false;
    if (parseInt(navigator.appVersion) >= 4)
    {
      if ((navigator.appName == "Netscape") || (navigator.appName == "Opera"))
        isNav = true
      else
        isIE = true;
    }
 
    function ZeigeTaste(evt)
    {
      if (isNav) window.status = evt.which
      else       window.status = window.event.keyCode;
      return false;
    }
  </script>
</head>
<body>
  <h3>event: Tastaturcodes</h3>
  <p>Geben Sie etwas in das Textfeld ein, um den entsprechenden Tastaturcode in der Statuszeile anzeigen zu lassen.</p>
 
  <form action="">
    <textarea cols="30" rows="4" onKeyPress="ZeigeTaste(event)"></textarea>
  </form>
</body>
</html>