Galileo Computing < openbook >
Galileo Computing - Professionelle Buecher. Auch fuer Einsteiger.
Galileo Computing - Professionelle Buecher. Auch fuer Einsteiger.


Kompendium der Informationstechnik
 von Sascha Kersken
EDV-Grundlagen, Programmierung, Mediengestaltung
Buch: Kompendium der Informationstechnik
gp Kapitel 19 JavaScript
  gp 19.1 JavaScript-Einführung
  gp 19.2 JavaScript im HTML-Dokument
    gp 19.2.1 Erstes Beispiel: Ausgabe ins Dokument
  gp 19.3 Formulare und Event-Handler
    gp 19.3.1 Zugriff auf Formulare und ihre Elemente
    gp 19.3.2 Neufassung des Rechners mit einem Formular
    gp 19.3.3 Die Hintergrundfarbe dynamisch ändern
    gp 19.3.4 Formularauswertung
  gp 19.4 Datums- und Uhrzeit-Funktionen
    gp 19.4.1 Datums- und Uhrzeit-Methoden
    gp 19.4.2 Das Timeout – die JavaScript-»Stoppuhr«
    gp 19.4.3 Ein ausführliches Beispiel
  gp 19.5 Manipulation von Bildern
    gp 19.5.1 Erstes Beispiel: Austauschen eines Bildes auf Knopfdruck
    gp 19.5.2 Vorausladen von Bildern
    gp 19.5.3 Eine gut funktionierende Rollover-Lösung
    gp 19.5.4 Weitere Beispiele
  gp 19.6 Browser- und Fenster-Optionen
    gp 19.6.1 Browser-Eigenschaften
    gp 19.6.2 Automatische Hyperlinks – History und Location
  gp 19.7 DHTML und die Objektmodelle der Browser
    gp 19.7.1 W3C-DOM
    gp 19.7.2 Das klassische Internet-Explorer-Modell
    gp 19.7.3 Das klassische Netscape-Modell
    gp 19.7.4 Browserübergreifende Lösungen
  gp 19.8 Zusammenfassung

gp

Prüfungsfragen zu diesem Kapitel (extern)


Galileo Computing

19.4 Datums- und Uhrzeit-Funktionen  downtop

Für viele Anwendungen ist es wichtig, mit Datum und Uhrzeit zu operieren. Erinnern Sie sich beispielsweise noch an die Jahr-2000-Countdowns auf jeder zweiten Website? Die meisten von ihnen wurden damals in JavaScript realisiert.

Die Klasse Date

Der Schlüssel zu Datum und Uhrzeit ist in JavaScript die Klasse Date: Sie definiert die Eigenschaften und Methoden für Datumsobjekte. Ein Datumsobjekt kapselt eine Zeitangabe sowie eine Reihe von Methoden, um diverse Aspekte von Datum und Uhrzeit zu extrahieren. Wie Sie sich bei einer Sprache aus dem erweiterten UNIX-Umfeld sicher denken können, werden Zeitangaben auch in JavaScript POSIX-konform als verstrichene Zeitspanne seit dem idealisierten UNIX-Erfindungsdatum EPOCH (01.01.1970, 00:00 Uhr UTC) gespeichert.

Ein Datumsobjekt wird über den folgenden Konstruktoraufruf erstellt:

RefVar = new Date ();

In RefVar wird ein Verweis auf ein neu erstelltes Date-Objekt gespeichert, das die aktuelle Systemzeit enthält.

Hier ein Beispiel:

var jetzt = new Date();
// in 'jetzt' befindet sich nun die akt. Systemzeit!

Bestimmtes Datum

Alternativ können Sie dem Konstruktor auch explizit eine Datums- und Uhrzeitangabe übergeben, um einen bestimmten Zeitpunkt zu codieren. Die Syntax für diese Zeitangabe ist folgende:

RefVar = new Date ("Monat Tag, Jahr Std:Min:Sek");

Hier ein Beispiel:

var gestern = new Date("03 05, 2003 21:31:00");

Eine weitere mögliche Schreibweise verwendet statt des Strings die einzelnen Zeitangaben als Liste numerischer Argumente:

RefVar = new Date 
     (Jahr, Monat, Tag, Stunden, Minuten, Sekunden);

Konkretes Beispiel:

var letztesJahr = new Date (2002, 3, 6, 21, 31, 0);

Wenn Sie keine konkrete Uhrzeit benötigen, können Sie die drei letzten Parameter auch weglassen; in diesem Fall wird einfach 00:00 Uhr eingetragen.


Galileo Computing

19.4.1 Datums- und Uhrzeit-Methoden  downtop

Nachdem das Datumsobjekt erstellt wurde, besteht die Möglichkeit, mit Hilfe einer Reihe von Methoden die einzelnen Felder des Datums und der Uhrzeit zu extrahieren (im Folgenden wird wieder das Beispiel jetzt für das Datumsobjekt verwendet):

gp  jetzt.getYear ()
Gibt das »kurze« (zweistellige) Jahr zurück. Die Verwendung dieser Methode ist nicht empfehlenswert: Beim Internet Explorer gibt sie für die Jahre bis 1999 die Werte 00-99 zurück und für die Jahre danach die vierstellige Jahresangabe 2000 usw. Bei Netscape geht es dagegen einfach weiter: 1999 ergibt 99, 2000 ergibt 100, 2001 führt zu dem Wert 101 und so weiter.
gp  jetzt.getFullYear ()
Gibt das vierstellige (und überall identische) Jahr zurück.
gp  jetzt.getMonth ()
Der numerische Monat. Er zählt allerdings anders als im normalen Kalender ab 0 (Januar hat den Wert 0, Februar die 1, und es geht weiter bis zum Dezember mit dem Wert 11). Auf diese Weise kann der Wert leicht auf ein Array mit Monatsnamen angewandt werden.
gp  jetzt.getDate ()
Gibt den Tag im Monat von 1 bis 31 zurück.
gp  jetzt.getDay ()
Gibt den Wochentag in numerischer Form zurück: 0 steht für Sonntag, 1 für Montag und schließlich 6 für Samstag.
gp  jetzt.getHours ()
Gibt die Stunde zwischen 0 und 23 zurück.
gp  jetzt.getMinutes ()
Gibt die Minute zwischen 0 und 59 zurück.
gp  jetzt.getSeconds ()
Gibt die Sekunde zwischen 0 und 59 zurück.

Ortszeit kontra UTC

Jede dieser Methoden besitzt auch noch eine Variante mit eingeschobenem UTC, beispielsweise getUTCHours() oder getUTCSeconds(). Während die normalen Versionen die Bestandteile von Datum und Uhrzeit in Ortszeit zurückgeben, liefern die UTC-Varianten die Bestandteile der ortsunabhängigen Universal-Zeit (GMT ohne Sommerzeit).

Neuere JavaScript-Versionen bieten zu jeder get*-Methode eine entsprechende set*-Methode, mit deren Hilfe Sie die einzelnen im Date-Objekt gespeicherten Werte nachträglich ändern können. Selbstverständlich ändert dies nicht die tatsächliche Systemzeit.

Einige weitere Methoden ermöglichen die Ausgabe von Datum und Uhrzeit als vollständigen String:

gp  jetzt.toString ()
Gibt Datum und Uhrzeit als String zurück.
gp  jetzt.toTimeString ()
Gibt nur die Uhrzeit als String zurück.
gp  jetzt.toUTCString ()
Gibt UTC-Datum und -Uhrzeit als String zurück.
gp  jetzt.toUTCTimeString ()
Gibt nur die UTC-Uhrzeit als String zurück.
gp  jetzt.toLocaleString ()
Gibt Datum und Uhrzeit in der Schreibweise als String zurück, die der aktuellen Ländereinstellung des Browsers/Betriebssystems entspricht.
gp  jetzt.toLocaleTimeString ()
Gibt nur die Uhrzeit in lokaler Schreibweise zurück.

Galileo Computing

19.4.2 Das Timeout – die JavaScript-»Stoppuhr«  downtop

Die window-Methode setTimeout() ermöglicht es, einzustellen, dass bestimmte Anweisungen nach Ablauf einer festgelegten Zeitspanne ausgeführt werden sollen. Auf diese Weise lässt sich beispielsweise eine automatisch laufende Uhr in einem Textfeld realisieren.

Die allgemeine Form sieht so aus:

setTimeout (Anw_String, Millisec);

Der Anw_String enthält die auszuführenden Anweisungen in Form eines Strings. Millisec gibt die Wartezeit in Millisekunden an, nach deren Verstreichen die Anweisungen ausgeführt werden sollen.

setTimeout() gibt eine Referenz auf das Timeout zurück, das Sie einer Variablen zuweisen können. Auf diese Weise können Sie es mit Hilfe der Methode clearTimeout() bei Bedarf vorzeitig abschalten.

In diesem kleinen Beispiel wird ein Timeout gesetzt, das nach einer Sekunde die Funktion wecken() aufruft:

var stoppuhr = setTimeout ("wecken();", 1000);

Falls Sie es sich anders überlegen und den einprogrammierten Aufruf von wecken() wieder löschen möchten, geht das folgendermaßen:

clearTimeout (stoppuhr);

Mit setTimeout() und clearTimeout() sind die Methoden setInterval() und clearInterval() eng verwandt. Die Methode setInterval() weist dieselbe Syntax auf wie setTimeout(). Allerdings ruft sie die Anweisungen im String nicht nur einmal nach Verstreichen der Wartezeit auf, sondern in regelmäßigen Abständen, die durch die Zeitangabe geregelt werden. Entsprechend ist clearInterval() für das Löschen einer solchen automatischen Wiederholung zuständig.


Galileo Computing

19.4.3 Ein ausführliches Beispiel  toptop

Das folgende komplexe Beispiel zeigt ein Textfeld und zwei Buttons mit der Beschriftung Zeit beziehungsweise Laufschrift. Wird auf den Button Zeit geklickt, dann erscheinen Datum und Uhrzeit (mit automatischer Aktualisierung) in dem Textfeld, bei Klick auf Laufschrift wird dagegen eine solche angezeigt. Listing 19.4 zeigt das gesamte HTML-Dokument.

Listing 19.5   Laufschrift und Uhr im Formularfeld

<html>
  <head>
    <title>Uhr oder Laufschrift?</title>
      <script language="JavaScript" 
      type="text/javascript">
      <!--
           // Die globalen Variablen:
        var zustand = "uhr";   // Zuerst Uhrzeit zeigen
        var lauftext = 
            "Dies ist eine kleine Laufschrift *** ";
 
        // Die allgemeine Ausgabe-Funktion:
        function feld()
        {
            // Uhrzeit oder Laufschrift?
            if (zustand == "uhr") {
               // Uhrzeit-Ermittlung und -Ausgabe:
               var jetzt = new Date();
               var jahr = jetzt.getFullYear();
               var monat = jetzt.getMonth();
               var tag = jetzt.getDate();
               var stunde = jetzt.getHours();
               var minute = jetzt.getMinutes();
               var sekunde = jetzt.getSeconds();
               monat++;   // Anpassen: 1-12 statt 0-11
               var ausgabe = tag < 10 ? "0" : "";
               ausgabe += tag;
               ausgabe += ".";
               ausgabe += monat < 10 ? "0" : "";
               ausgabe += monat;
               ausgabe += ".";
               ausgabe += jahr;
               ausgabe += "  ";
               ausgabe += stunde < 10 ? "0" : "";
               ausgabe += stunde;
               ausgabe += ":";
               ausgabe += minute < 10 ? "0" : "";
               ausgabe += minute;
               ausgabe += ":";
               ausgabe += sekunde < 10 ? "0" : "";
               ausgabe += sekunde;
               document.lauf.feld.value = ausgabe;
            } else {
               // Laufschrift umbauen:
               lauftext = lauftext.substring 
                   (1, lauftext.length) 
                   + lauftext.charAt (0);
               // Ausgabe:
               document.lauf.feld.value = lauftext;
            }
            // Timeout:
            setTimeout ("feld();", 100);
        }
 
    //-->
    </script>
  </head>
  <body onload="feld();">
    <div align="center">
      <form name="lauf">
        <input type="text" name="feld" size=50 
        readonly="true" />
        <br />
        <input type="button" value="Uhrzeit" 
        onclick="zustand = 'uhr';" />
        <input type="button" value="Laufschrift" 
        onclick="zustand = 'lauf';" />
      </form>
    </div>
  </body>
</html>

Der im <body>-Tag verwendete Event-Handler onload führt die als Attributwert übergebenen Anweisungen automatisch beim Laden des Dokuments aus. Die entsprechende Funktion feld() wird dadurch einmal in Gang gesetzt und fordert ihren eigenen Neuaufruf per setTimeout() an. Dies ist übrigens keine Rekursion: Die Funktion ruft sich nicht selbst erneut auf, sondern weist den »Timeout-Manager« des Browserfensters an, sie nach einer Wartezeit von einer Zehntelsekunde erneut aufzurufen.

Ein Klick auf einen der beiden Buttons ändert im Übrigen nur den Wert der Variablen zustand, die in der Funktion feld() abgefragt wird, um zu entscheiden, ob die Uhr oder die Laufschrift angezeigt wird.






  

Einstieg in PHP 5

Einstieg in Java

C von A bis Z

Einstieg in C++

Einstieg in Linux

Einstieg in XML

Apache 2




Copyright © Galileo Press GmbH 2004
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Galileo Computing]

Galileo Press GmbH, Gartenstraße 24, 53229 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de