Die Zuweisung im Browser in JavaScript

Variablen und Dokumente

Die globalen Variablen sind ein Teil der aktuellen Anzeige eines Dokuments. Sobald ein anderes Dokument geladen wird oder auch nur dasselbe Dokument erneut (mit Strg-F5) geladen wird, gehen alle Variablen verloren. Wenn allerdings F5 alleine (ohne Strg) verwendet wird, um ein Dokument mit derselbe Adresse erneut zu laden, so wird nur das Dokument neu geladen, die Werte der Variablen bleiben erhalten.

Wir können diesen Effekt aber auch gezielt einsetzen, um alle Variablen zu löschen.

Bindungen an Dokumentteile

Ein Teil des folgenden SIL-Dokuments wird als »Zustand« bezeichnet.

Main.html

<span id="all">Es ist zur Zeit <span id=Zustand>(unbekannt)</span>.</span>

mögliche Anzeige in Web-Browser

Es ist zur Zeit (unbekannt).

Nun können wir Zuweisungen an Dokumentvariablen vornehmen, um so das angezeigte Dokument zu verändern.

Auswertung

Zustand.outerHTML = '<span id=Zustand>bewoelkt</span>'

"<span id=Zustand>bewoelkt</span>"

Willkommen in der Welt von DHTML ! (dynamic HTML )

Anwendungsbeispiele: DeepL oder Google.

Beim dynamischen HTML (der Begriff wurde wohl 1997 eingeführt) wird ein HTML-Dokument nach dem Laden mit JavaScript verändert.

Das im Browser sichtbare Dokument verändert sich dabei sofort entsprechend.

Wenn man sich den Quelltext mit der üblichen Browser-Funktion (beispielsweise über Strg-U) anzeigen läßt, sieht man weiterhin den alten, unveränderten Quelltext.

Greift man aber über das DOM auf das Dokument zu, sieht man den veränderten Quelltext.

Auswertung

Zustand.outerHTML

"<span id=\"Zustand\">bewoelkt</span>"

Manchmal wird auch beim Zugriff über das veränderte Element noch der alte Zustand angezeigt. Dann erscheint der neue aber auf jeden Fall, wenn man sich den Quelltext eines umgebenden Elements anzeigen läßt.

Auswertung

all.outerHTML

"<span id=\"all\">Es ist zur Zeit <span id=\"Zustand\">bewoelkt</span>.</span>"

Eine Möglichkeit, um den neuen, veränderten Quelltext zu sehen besteht auch darin, die Seite abzuspeichern. Der Quelltext findet sich dann in der Datei mit der abgespeicherten Seite.

Übungsaufgaben

/ Ändern des Dokuments

Quelltext des Beipieldokuments

<span>
  <span id="Anton">Anton</span>
  <span id="Berta">Berta</span>
  <span id="Dora">Dora</span>
  </span>

Ändern Sie das im Browser angezeigte Wort „Anton“ in „Anna“, indem Sie bei geladenem Beispieldokument eine (möglichst kurze) Zuweisung eingeben. Das innere span-Element sollte dabei seine Kennung »Anton« aber möglichst beibehalten.

Reserveaufgaben

Hinweis für den Dozenten ► Diese Reserveaufgabe werden in Kursen nur bearbeitet, wenn es noch Schwierigkeiten bei der Bearbeitung der voranstehenden Übungsaufgabe gab.

/ Ändern des Dokuments (1)

Hinweis für den Dozenten ► Diese Reserveaufgabe sollte in Kursen erst nach der Nachbesprechung der vorigen Reserveaufgabe bearbeitet werden.

Ändern Sie das im Browser angezeigte Wort „Berta“ in „Bravo“, indem Sie bei geladenem Beispieldokument eine (möglichst kurze) Zuweisung eingeben. Das innere span-Element sollte dabei seine Kennung »Berta« aber möglichst beibehalten.

/ Ändern des Dokuments (2)

Hinweis für den Dozenten ► Diese Reserveaufgabe sollte in Kursen erst nach der Nachbesprechung der vorigen Übungsaufgabe bearbeitet werden.

Ändern Sie das im Browser angezeigte Wort „Dora“ in „Daniel“, indem Sie bei geladenem Beispieldokument eine (möglichst kurze) Zuweisung eingeben. Das innere span-Element sollte dabei seine Kennung »Dora« aber möglichst beibehalten.