Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

JavaScript Grundkurs

Dynamischer Inhalt auf Grund des Datums

Testen Sie unsere 2013 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Mit Datumsobjekten und den Methoden zum Zugriff auf Bestandteile eines Datums können Sie viele interessante dynamische Effekte in Webseiten programmieren. In diesem Film sehen Sie, wie Sie zeit- und datumsgesteuerte Inhalte anzeigen und Layouts ändern.
06:49

Transkript

Datumsobjekte werden intern als die Anzahl der Millisekunden seit dem 01.01.1970 gespeichert. Das ermöglicht es, mit diesen Datumsobjekten zu rechnen. Beispielsweise können Sie Differenzen bilden. Sie sehen in diesem Film eine sehr interessante Anwendung. Sie sehen, dass ich hier ein Datumsobjekt erzeuge, das den Beginn einer Schulung repräsentieren soll. Und Sie sehen hier ein weiteres Datumsobjekt, das das Ende der Schulung repräsentiert. Und hier, mit dem leeren Konstruktor, erzeuge ich ein Datumsobjekt mit dem aktuellen Zeitpunkt, also dem Systemdatum, das im Rechner des Besuchers aktuell eingestellt ist. Alle drei Datumsobjekte werden eine Zahl darstellen, nämlich die Anzahl der Millisekunden seit dem 01.01.1970. Diese Differenzen zwischen den einzelnen Datumsobjekten nutze ich in einer IF ELSE-Struktur, um bestimmte Inhalte der Webseite dynamisch zu schreiben. Das bedeutet, ich kann eine gewisse Art Ablaufdatum für gewisse Inhalte der Webseite damit festlegen. Schauen wir uns mal an, dass wir hier die Differenz zwischen dem Schulungsbeginn und dem aktuellen Besuchstermin des Besuchers auf der Webseite bilden. Wenn diese Differenz größer als null ist, kann ich ihm beispielsweise einen Link zur Verfügung stellen, über den er sich dann zur Schulung anmelden kann. Das ist natürlich nur ein Beispiel, was man hier machen kann. Wenn allerdings der Besuchstermin nach dem Beginn der Schulung liegt, aber noch vor dem Ende der Schulung, dann kann ich ihm hier eine andere Information darstellen. Ansonsten, das heißt, wenn ich hinter dem Endtermin bin, kann ich ihm noch eine dritte Information anzeigen. Also es geht effektiv darum, zeitgesteuert gewisse Informationen in der Website anzuzeigen. Momentan bin ich zu einem Zeitpunkt auf der Webseite, wo die Schulung noch nicht begonnen hat. Das heißt also: Die Differenz hier ist größer als null. Jetzt hab' ich die Systemzeit mal umgestellt, auf einen Zeitpunkt, der genau zwischen Beginn und Ende des Datumsobjektes liegt. Und Sie kriegen eine andere Information. Und nun sehen Sie, nachdem ich das Systemdatum wieder umgestellt hab', dass Sie von dieser Seite diese Information angezeigt bekommen. Ich denke, es ist klar, welches Potenzial diese Möglichkeiten bieten. Sie haben die Möglichkeit, das Datum des Besuchers Ihrer Webseite auszulesen und aufgrunddessen dynamisch irgendwelche Informationen der Website zu schreiben. Entweder in Kombination mit einem Ablaufdatum oder auch mit verschiedenen anderen Varianten, die man sich einfach aufgrund des Datums überlegen kann. So können Sie beispielsweise Inhalte in Abhängigkeit von Stunden, Minuten, Sekunden oder anderen Zeitangaben anzeigen. Ich hab' jetzt ein bisschen gezaubert und habe hier mal eine neue HTML-Seite aufgebaut. Diese referenziert dieses Mal auf eine externe JavaScript-Datei. Dort gibt es eine Funktion "Zitate", und die wird hier aufgerufen. Also innerhalb des Bodys wird sie aufgerufen. Sie wird dort gewisse Inhalte schreiben. Das ist die externe JavaScript-Datei. Was Sie hier sehen, ist ein Array mit gewissen Strings - berühmte Zitate. Interessanter ist für uns diese Funktion: Auch hier erzeuge ich ein Datumsobjekt. Datumsobjekte stellen gewisse Methoden zur Verfügung. "getHours" liefert die Stunden, "getMilliseconds" die Millisekunden, "getMinutes" die Minuten. "getMonth" würde den Monat liefern, "getDay" den Wochentag. Null ist Sonntag, sechs wäre Samstag. "getDate" würde den Tag des Monats liefern, entsprechend "getYear" das Jahr. Diese Methoden sind sehr sprechend, und vollkommen analog gibt es auch Methoden zum Setzen dieser Einzelkomponenten eines Datums. Zum Beispiel "setYear" oder "setMonth". Dabei beachten Sie, dass der Monat mit null anfängt und null der Januar ist. Genau so eine Methode nutzen wir hier. Ich erzeuge dieses Objekt und schreibe ".getHours". Es sollte auch auffallen, dass ich diese Variable die ich üblicherweise für die Referenz auf ein Objekt benutze, hier gar nicht habe. Aber wenn ich das Objekt erzeugt habe, kann ich direkt diesem Objekt sozusagen anonym eine Botschaft schicken und die entsprechende Methode benutzen. Nun ja, und die Stunde kann irgendein Wert zwischen 0 und 23 sein. Dann hab' ich hier eine einfache IF-ELSE-IF-Struktur und überprüfe jeweils, ob dieser Wert in einem bestimmten Rahmen liegt. Und dann wähle ich entsprechend aus dem Array - Sie sehen hier diese Indizierung -, eines dieser Zitate aus. Das sieht dann so aus: Zu einer ganz bestimmten Uhrzeit würden Sie DIESES Zitat auswählen. Mein Systemdatum muss also vor 12, aber größer als acht gewesen sein von den Stunden her. Nun hätten wir ein anderes Datum. Größer als 16, aber kleiner als 20. Oder Sie könnten auch in Abhängigkeit von einem Datum, einer Uhrzeit Stylesheet-Dateien dynamisch in eine Website einbinden. und so ein flexibles Layout gestalten. Ich habe hier eine weitere Webseite, wo ich eine Referenz auf eine externe JavaScript-Datei drin habe und hier eine Funktion aufrufe. Diese sieht so aus: Auch hier erzeuge ich wieder ein Datumsobjekt und frage die Stunden ab. Und je nachdem, ob die Stunden größer 12 sind oder nicht, schreibe ich dynamisch die Verlinkung zu einer externen Stylesheet-Datei. So würde die Datei, die Webseite, vor 12 aussehen. Und wenn Sie hier mit Firebug mal reinschauen, dann sehen Sie, dass diese Verlinkung von JavaScript zu dem Stylesheet wirklich in die Site geschrieben wurde, und zwar genau so, wie ich es in diesem document.write vorgesehen habe. Nach 12 würde die Seite ganz anders aussehen. Auch hier kann man mit Firebug überprüfen, dass jetzt eine andere Stylesheet-Datei hier in die Website eingebunden wurde. Es sollte Ihnen also klargeworden sein, welche Möglichkeiten Ihnen das Datumsobjekt bietet, um dynamische Inhalte in eine Webseite reinschreiben zu können, indem Sie entweder mit den Datumsobjekten direkt rechnen oder die entsprechenden Methoden dieses Datumsobjektes verwerten. Das haben Sie im Grunde alles in diesem Film gesehen.

JavaScript Grundkurs

Lernen Sie die Möglichkeiten der universellen Sprache JavaScript kennen und machen Sie sich mit der Syntax vertraut, um Ihre Web-Applikationen durch effektive Skripts zu ergänzen.

8 Std. 20 min (134 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!