Animationen in JavaScript

Unter einer „Animation“ verstehen wir hier jede Veränderung einer Webseite, die nach einer gewissen Zeit ohne Benutzereingriff vonstatten geht. Die Animation erweckt so den Eindruck die Webseite sei lebendig.

Funktionsaktivierungen mit »`setTimeout`«

Das folgende Programmbeispiel illustriert die Verwendung der Browser-Funktion »this.setTimeout«.

Diese Funktion aktiviert die als erstes Argument angegebene Funktion, nachdem so viele Millisekunden vergangen sind, wie das zweite Argument angibt. (Die Aktivierung kann dabei allerdings auch später erfolgen, da es nicht möglich ist, die angegebene Zeit immer genau einzuhalten. Insbesondere bei kurzen Zeiten, wie bei einer Millisekunde, kann die tatsächliche Aktivierung erst viel später erfolgen.)

In dem folgenden Programm wird damit nach drei Sekunden die Funktion »f« aktiviert, die dann ihrerseits den Text „Die Funktion "f" wurde aufgerufen.“ ausgibt.

main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<title>Main</title><style type="text/css">
h1
{ font-family: sans-serif; font-weight: bold; color: darkgray;
  font-size: 16vmin; }
p
{ font-family: cursive; font-weight: bold; color: darkslategray;
  font-size: 8vmin; text-indent: 16vmin; text-decoration: underline; }
</style></head><body>
<h1>Aufruf einer Funktion</h1>
<p><span id="info"></span></p>
<pre><code><script>/*<![CDATA[*/
f = () =>
window.document.getElementById( "info" ).innerHTML 
= 'Die Funktion wurde aufgerufen.'; 
setTimeout( f, 3000 );
/*]]>*/</script></code></pre></body></html>

Durch die Verzögerung haben wir eine einfache „Animation“ realisiert: Zuerst erscheint der Titel „Aufruf von f“ und später erscheint darunter der Absatz „Die Funktion "f" wurde aufgerufen.“

Main (zunächst): Aufruf einer Funktion
Main (nach drei Sekunden): Aufruf einer Funktion; Die Funktion "f" wurde aufgerufen.

Die Aktivierung der mit »setTimeout« zur Aktivierung bestimmten Funktionen beginnt frühestens nach der Beendigung des aktuellen Programms. (Wenn nach »setTimeout( f, 3000 );« noch weitere Anweisungen folgen, so werden also diese vorher alle noch ausgewertet.)

(Es ist auch möglich, an die Funktion »setTimeout« eine Zeichenfolge an Stelle einer Funktion zu übergeben, doch wird von dieser Technik abgeraten. Sie findet sich noch in einigen Quellen, weil sie in den 90er Jahren nötig war. Heute gilt sie als unsicher und veraltet.)

Aktualisierung mit Revaluierung

In dem folgenden Program ruft die Funktion »f« selber die Funktion »setTimeout« auf. Deswegen wird »f« eine Sekunde danach erneut aktiviert. Es handelt sich hierbei aber nicht um eine sogenannte „Rekursion“, da diese erneute Aktivierung in der Regel erfolgt, nachdem die vorige Aktivierung bereits beendet wurde. Deswegen sprechen wir hier von einer „Revaluierung “ (von „Re“ [erneut] und „Evaluierung“ [Auswertung]).

Durch die Revaluierung erreichen wir eine Sekundenanzeige, die jede Sekunde aktualisiert wird. (Da sich bei dieser Vorgehensweise kleine Fehler summieren können, ist sie nicht geeignet, wenn eine Sekundenanzeige benötigt wird, die über einen längeren Zeitraum aktuell ist.)

main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<title>Main</title><style type="text/css">
html 
{ background-color: Wheat;  }
h1 
{ font-family: Sans-Serif; font-size: 10vh; color: Maroon; }
p 
{ background-color: Burlywood; text-align: right; }
#Zeit 
{ font-family: Consolas, 'Lucida Sans Console', monospace; 
  font-size: 50vh; line-height: 45vh; color: SaddleBrown; }
</style></head><body>
<h1>Sekundenanzeige</h1>
<p><span id="Zeit">0</span></p>
<pre><code><script>/*<![CDATA[*/
f = () =>
{ setTimeout( f, 1000 );
  zeit.innerHTML = sekunden;
  sekunden = sekunden + 1; }
zeit = document.getElementById( "Zeit" );
sekunden = 1;
setTimeout( f, 1000 );
/*]]>*/</script></code></pre></body></html>

Falls eine mit »setTimeout« aktivierte Funktionen ihrerseits einen Aufruf mit »setTimeout« zur Auswertung bestimmt, so wird die dabei angegebene Wartezeit auf einen bestimmten Minimalwert erhöht, falls sie kleiner ist als dieser Minimalwert. Dieser Minimalwert kann beispielsweise »4« (vier Millisekunden) betragen.

Neuerdings kann auch einfach »setInterval( f, 1 )« verwendet werden, um »f« jede Millisekunde aufzurufen.

Sekundenanzeige mit Aussagesatz ⃗

Das folgende Beispiel zeigt wie ein Aussagesatz über die Anzahl der Sekunden so ausgegeben werden kann, daß für den Spezialfall von einer Sekunde der Singular des Verbes „sein“ verwendet wird.

(Die Zeitangaben stimmen nicht, da das Programm zur besseren Lesbarkeit einen Takt von neun Sekunden an Stelle eines Taktes von einer Sekunden verwendet.)

main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<title>Main</title><style type="text/css">
html { background-color: white; }
div
{ font-family: Sans-Serif; border-radius: 3vmin;
  background-color: CornflowerBlue; text-align: center;
  margin: 10vmin; padding: 3vmin;
  box-shadow:
  0.2vmax 0.2vmax 20vmax Black,
  0.2vmax 0.2vmax 0.2vmax Black,
  inset 0.2vw 0.2vh 0.2vmax White; }
h1
{ font-family: monospace; color: RoyalBlue; font-weight: bold;
  text-decoration: underline;
  text-shadow:
  -0.2vmax -0.2vmax 0.2vmax rgba( 255, 255, 255, 0.3 ),
  0.2vmax 0.2vmax 0.2vmax rgba( 0, 0, 0, 0.8 ); }
p
{ font-family: Sans-Serif; font-weight: bold; }
#text
{ background-color: DodgerBlue;
  padding-left: 1em; padding-right: 1em;
  padding-top: 1ex; padding-bottom: 1ex;
  box-shadow:         0.1vmax 0.1vmax 0.1vmax SkyBlue,
  inset 0.1vmax 0.05vmax 0.2vmax Black; }
/* 83 pt = 10 pt * 100 vw / 12 vw */
@media screen and (min-width:83pt){ h1 { font-size: 12vw; }}
@media screen and (max-width:83pt){ h1 { font-size: 10pt; }}
/* 500 pt = 10 pt * 100 vw / 2 vw */
@media screen and (min-width:500pt){ p { font-size:  2vw; }}
@media screen and (max-width:500pt)
{ p { font-size: 10pt; }
  #text
  { box-shadow: none; background-color: inherit; }}
</style></head><body>
<div>
  <h1>Ladedauer</h1>
  <p><span id="text">Seit dem Ende des Ladens der Seite 
    <span id="Zeit">sind 0 Sekunden</span> vergangen.</span></p>
</div>
<pre><code><script>/*<![CDATA[*/
h = () =>
{ zeit.innerHTML = 'sind ' + sekunden + ' Sekunden';
  sekunden = sekunden + 1;
  setTimeout( h, 9000 ); }
g = () =>
{ zeit.innerHTML = 'ist eine Sekunde';
  sekunden = sekunden + 1;
  setTimeout( h, 9000 ); }
f = () =>
{ zeit = document.getElementById( "Zeit" );
  sekunden = 1;
  setTimeout( g, 9000 ); }
f();
/*]]>*/</script></code></pre></body></html>

Main (zunächst)

Ladedauer

Seit dem Ende des Ladens der Seite sind 0 Sekunden vergangen.

Main (nach neun Sekunden)

Ladedauer

Seit dem Ende des Ladens der Seite ist eine Sekunde vergangen.

Main (nach achtzehn Sekunden)

Ladedauer

Seit dem Ende des Ladens der Seite sind 2 Sekunden vergangen.

Aus der freien Wildbahn Dateiübertragung

Wenn ein Anker direkt auf eine Datei zeigt, so kann eine Kopie der Datei durch den Browser abgerufen werden. Dies ist die Weise, auf die traditionell Dateien (wie beispielsweise Zip-Archive ) im Web zum Abspeichern angeboten werden.

Manchmal ist es von den Anbietern einer Datei jedoch gewünscht, beim Abruf einer Datei stattdessen Werbung oder Ähnliches anzuzeigen. Dazu wird dem Benutzer statt der Datei eine Webseite präsentiert, deren Name oft irreführenderweise wie die Datei lautet (also beispielsweise mit ».zip« statt ».html« endet).

Quelltext

<a href="http://example.com/file.zip">Download</a>

Oben ist die Adresse »http://example.com/file.zip« aber wieder die Adresse einer Webseite (in HTML ) und nicht die Adresse eine Zip-Archivs! (Die Adressen von Webseiten dürfen auch mit ».zip« enden.) Der Benutzer sieht dann wieder eine Webseite und erhält zunächst kein Zip-Archiv.

Es wird jedoch dafür gesorgt, daß dem Benutzer beim Abruf des vermeintlichen Zip-Archivs kurze Zeit später tatsächlich die richtige Datei zum Abspeichern angeboten wird. Hierfür befindet sich eine JavaScript -Anweisung wie die folgende auf der Seite.

Quelltext

setTimeout( 'window.location.href="http://example.com/hidden/file.zip"', 3000 );

Auf diese Weise wird auch die eigentliche Adresse der Datei (oben »http://example.com/hidden/file.zip«) vor normalen Benutzern verborgen.

Die Adressen sehen auch manchmal wie »http://example.com/YrTY3YQ2/file.zip« aus. Dann sind es Adressen, die beim Abruf der Webseite erzeugt werden und nur für kurze Zeit gültig sind.

Solch ein Stück JavaScript könnte gleichzeitig auch noch auf mehr oder weniger komplizierte Weise verborgen oder verschlüsselt sein, so daß es dann schwierig wird, die Datei zu erhalten, ohne JavaScript im Browser zu aktivieren.

Übungsaufgaben

Zur Erleichterung der Bearbeitung können Sie an Stelle von »document.getElementById« auch weiterhin NAOTWO zum Elementzugriff verwenden, oder erst zum Schluß – nachdem die Aufgabe gelöst ist – NAOTWO durch den Einsatz von »document.getElementById« ersetzen.

Zur Erleichterung der Bearbeitung können Sie an Stelle von »addEventListener« auch weiterhin on-Attribute verwenden, also beispielsweise an Stelle von »span.addEventListener( "click", () => span.innerHTML = 1 );« in einem Skript-Element »onclick="span.innerHTML=1"« als Attribut des span-Elements.

Durch NAOTWO (“named access on the window object ”, NAOTWO, sprich “now two ”) werden die im HTML-Quelltext mit »id=« festgelegten Elementkennungen, falls möglich, in JavaScript als globale Namen zur Verfügung gestellt. (Siehe auch: https://www.w3.org/TR/html5/browsers.html#named-access-on-the-window-object).

Unter HTML-Quelltext versteht man Text, der in HTML geschrieben wurde – also beispielsweise »id=« enthält. – Etwa im Gegensatz zu der von einem Browser angezeigten Webseite.

Zur Erleichterung der Bearbeitung können Sie bei Übungsaufgaben in den folgenden Lektionen an Stelle von polyglottem HTML auch weiterhin SIL verwenden. Dabei kann vor den SIL-Code ein style-Element gesetzt werden und hinter den SIL-Code ein script-Element. Die drei leeren Zeilen in dem folgenden SIL-Dokument können jeweils mit CSS -Code, HTML-Code beziehungsweise JavaScript -Code befüllt werden.

/ Aus der freien Wildbahn Übungsaufgabe

Diese Übungsaufgabe wurde durch ein so beobachtetes Verhalten einer Web-Seite inspiriert. Dieses Verhalten wird hier für die Praxis nicht unbedingt zur Nachahmung empfohlen, aber es ist zu Übungszwecken dienlich.

Auf der folgenden Webseite befindet sich eine interessante Information. Drei Sekunden nach dem Laden der Seite soll die interessante Information durch den folgenden Text ersetzt werden: „Ihre Sitzung wurde beendet, da über längere Zeit keine Aktivitäten festgestellt wurden.“.

main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<title>Main</title><style type="text/css">
</style></head><body>
<div>
  <h1>Information</h1>
  <p>Hier befindet sich eine interessante Information</p>
</div>
<pre><code><script>/*<![CDATA[*/
/*]]>*/</script></code></pre></body></html>

/ Selbstaktualisierende Zeitanzeige

Die Funktion »this.Date« ergibt einen aktuellen „Zeitstempel“ (vom Typ »string«).

Schreiben Sie ein Programm, welches diesen Zeitstempel anzeigt und fortlaufend aktualisiert. Hierfür können Sie sich an dem Beispielprogramm aus dem Abschnitt „Aktualisierung mit Revaluierung “ orientieren.

/ Selbstaktualisierende Zeitanzeige (1)

Die Funktion »this.Date.now« ergibt die aktuelle Zeit als Anzahl der Millisekunden, die seit dem 31. Dezember 1969 (24 Uhr in westeuropäischer Zeit) vergangen sind.

Schreiben Sie ein Programm, welches aus dieser Zahl die seit dem 31. Dezember 1969 (24 Uhr in westeuropäischer Zeit) vergangenen Sekunden berechnet und mit dem Text „Seit dem 31. Dezember 1969 sind … Sekunden vergangen.“ anzeigt und fortlaufend aktualisiert. Hierfür können Sie sich an dem Beispielprogramm aus dem Abschnitt „Aktualisierung mit Revaluierung “ orientieren.

(Die Anzeige stimmt dann nur für Orte mit Westeuropäischer Zeit, was aber hier akzeptabel ist oder auch – als Zusatzaufgabe – noch durch Umrechnung auf eine andere gewünschte Zeitzone korrigiert werden könnte. [Die westeuropäische Zeit wird auch als „mittlere Greenwich-Zeit“ bezeichnet. Eine mögliche Aussprache von “Greenwich ” ist /ˈgrɛnɪtʃ/.])

/ Alarm-Blinken

Kombinieren Sie die in dieser Lektion behandelte Technik der Animation mit »setTimeout« und die in einer früheren Lektion behandelte Technik des Umschaltens mit »classList.toggle«, so daß das Wort »NOTFALL« auf der folgenden Webseite blinkt. Es soll nur JavaScript -Quelltext unter die Zeile mit »CDATA« geschrieben werden. Der Rest des Programms soll nicht verändert werden!

main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<title>Main</title><style type="text/css">
html { background-color: wheat; color: black; }
div
{ font-family: Sans-Serif; border-radius: 3vmin;
  background-color: red; text-align: center;
  margin: 10vmin; padding: 3vmin; border-style: solid;
  border-width: 1vmin; border-color: black; }
h1
{ font-family: monospace; font-weight: bold; font-size: 10vmin;
  letter-spacing: 1vmin; text-transform: uppercase; }
p { font-size: 3vmin; }
.off { visibility: hidden }
</style></head><body>
<div class="emergency">
  <h1 id="h1">Notfall</h1>
  <p>Die Kaffeemaschine im Raum 503 mu&#223; <em>unverzüglich</em>
    ausser Betrieb genommen werden!</p></div>
<pre><code><script>/*<![CDATA[*/
/*]]>*/</script></code></pre></body></html>

Zusatzanforderungen Das Blinken soll mit zwei Zyklen pro Sekunde erfolgen, und in jedem Zyklus soll das Wort 75 % der Zeit (also eine 3/8 Sekunde) lang sichtbar sein.

Zusatzanforderungen Das Wort „unverzüglich“ soll auch noch zwischen betonter und normaler Schrift wechseln - und zwar mit einer anderen Frequenz als „Notfall“. Ein Anwendungsfall für »outerHTML«?

Zusatzanforderungen Fügen Sie eine Tastfläche hinzu, welche der Anwender anklicken kann, um das Blicken auszuschalten. Um ein Timeout zu deaktivieren, muß »clearTimeout« mit dem Ergebnis des setTimeout-Aufrufs, der deaktiviert werden soll, aufgerufen werden.

/ Gefälschter Seitenzähler

Erstellen Sie eine Seite, die einen „Besucherzähler“ enthält, der zunächst „32768 Besucher“ anzeigen sollte. Nach einer zufälligen Verzögerung von zirka 10 Sekunden (mal mehr und mal weniger), soll sich der Zähler dann um Eins erhöhen.

Solche „Besucherzähler“ waren in den 90er bei Seiten von Amateuren beliegt.

/ Eieruhr *

Die Bearbeitung dieser Übungsaufgabe ist eher etwas für Tüftler und könnte etwas länger dauern.

Programmieren Sie eine Eieruhr mit einem Formular mit vier Tastflächen und einem Textfeld.

In dem Textfeld sollen Minuten und Sekunden durch ein Semikolon getrennt angezeigt werden, beispielsweise als „2:30“ (zwei Minuten und 30 Sekunden).
Durch Anklicken zweier Tastflächen soll die Zeit in dem Textfeld in Schritten von ½ Minute vergrößert oder verkleinert werden. Dabei soll aber immer zum nächsten ganzzahligen Vielfachen einer halben Minute gerundet werden, daß heißt, am Ende des Textfeldes soll danach immer „:00“ oder „:30“ stehen. Die Zeit darf nie negativ werden.
Die Eieruhr soll mit einem Start- und eine Stopptastfläche gesteuert werden können.
Falls die Stopptastfläche gedrückt wird, wenn die Eieruhr schon steht, soll die Zeit im Textfeld dadurch auf 0 zurückgesetzt werden.
Die Eieruhr vermindert die Zahl im Textfeld in jeder Sekunde um 1 (bis minimal „0:00“), wenn sie läuft.

Animationen in JavaScript

Funktionsaktivierungen mit »setTimeout«

Aktualisierung mit Revaluierung

Sekundenanzeige mit Aussagesatz ⃗

Aus der freien Wildbahn Dateiübertragung

Übungsaufgaben

/ Aus der freien Wildbahn Übungsaufgabe

/ Selbstaktualisierende Zeitanzeige

/ Selbstaktualisierende Zeitanzeige (1)

/ Alarm-Blinken

/ Gefälschter Seitenzähler

/ Eieruhr *

Funktionsaktivierungen mit »`setTimeout`«