JavaScript in HTML -Dokumenten

Skripte können in an verschiedenen Stellen in HTML -Dokumenten eingebettet werden und werden dann beim Laden des Dokuments ausgewertet.

Zur Vereinfachung verwenden wir in diesem Kurs zunächst ein Gerüst, das drei Stellen enthält:

eine Stelle zum Einfügen von CSS -Code,
eine Stelle zum Einfügen von HTML-Block-Elementen und
eine Stelle zum Einfügen einer JavaScript -Quelltexteinheit (ECMAScript source text unit ).

Eine JavaScript -Quelltexteinheit ist eine Folge von JavaScript -Eingaben, wie wir sie bisher in die Konsole eingegeben haben.

In dem folgenden HTML-Dokument sind diese drei Stellen erkennbar.

Wir rücken dabei den Anfang dieser drei Stellen nicht nach rechts ein, weil ihre genau Position in der Hierarchie des umgebenden HTML-Dokumentes im Hintergrund steht.

Main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">
.CSS { }
</style></head><body>
<h1>HTML</h1>
<pre><code><script>/*<![CDATA[*/
"JavaScript-Quelltexteinheit";
/*]]>*/</script></code></pre></body></html>

Das Skriptelement steht am Ende des Rumpfes, weil

die Verarbeitung von Skripten die Anzeige einer Seite bremst und der Leser den Eindruck eines schnelleren Ladens der Seite hat, wenn den größte Teil der Seite schon angezeigt ist, bevor die Anzeige durch die Auswertung eines Skripts verlangsamt wird, und
das Skript sich so auf alle Bestandteile des HTML-Dokumentes beziehen kann, die schon dargestellt wurden.

Weil ein HTML-Dokument mit Skripten und Stilregeln in diesem Kurs diesselbe Rolle spielt, wie ein Programm in Kursen über andere Programmiersprachen, nennen wir solch ein HTML-Dokument (das ECMAScript -Quelltexteinheiten und Stilregeln enthalten kann) in diesem Kurs oft auch ein Programm oder ein JavaScript-Programm – auch, wenn diese Bezeichnung so nicht allgemein üblich ist.

Die JavaScript -Kommentare sind nur für XHTML5 notwendig, nicht für HTML5.

Die Quelltexteinheit wird nicht ausgewertet, wenn sie in den Inspektor kopiert wird, es muß einer externen Quelle geladen werden.

Das `script`-Element

Ein script-Element muß nicht unbedingt immer so kompliziert aussehen wie in dem folgenden Beispiel.

Ein „kompliziertes“ script-Element

<pre><code><script>/*<![CDATA[*/
"JavaScript-Quelltexteinheit";
/*]]>*/</script></code></pre>

In vielen Fällen reichen einfach zwei Element-Marken.

Ein „einfaches“ script-Element

<script>
"JavaScript-Quelltexteinheit";
</script>

Falls Sie die komplizierte Schreibweise des script-Elements als zu unübersichtlich empfinden, verwenden Sie ruhig die einfache Schreibweise.

Die Umrahmung unseres Scripts mit »/*<![CDATA[*/« und »/*]]>*/« soll es nur sicherstellen, daß Sonderzeichen in dem Skript auch dann verwendet werden können, wenn das enthaltende Dokument als XHTML-Dokument ausgeliefert wird. Da viele Web-Autoren ihre Dokumente nicht als XHTML-Dokumente ausliefern, kann diese Umrahmung aber meist entfallen.

Die Umrahmung unseres Scripts mit »<pre><code>« und »</code></pre>« soll es nur sicherstellen, daß Ausgaben des Skriptes, die mit »document.write« (wurde bis zu dieser Stelle noch nicht im Kurs behandelt) und ähnlichen Funktionen geschrieben werden, so erscheinen, daß Zeilenenden und Schriftzeichen gut erkennbar sind. Falls diese Technik der Ausgabe nicht verwendet wird oder diese Art der Darstellung nicht gewünscht wird, kann diese Umrahmung ebenfalls entfallen.

Das `type`-Attribut des Skript-Elements ⃗

Das Skript-Element benötigt normalerweise kein type-Attribut, wenn darin die Sprache JavaScript verwendet wird.

In der Version dieses Kurses von 2014 wurde das type-Attribut »type="application/javascript;version=1.8"« in Skript-Elementen verwendet, um auszudrücken, daß diese Skripte eine moderne JavaScript -Version von Mozilla Firefox voraussetzen. Im Jahre 2017 ist dies nicht mehr nötig. Deswegen wird jenes type-Attribut nun wieder aus den Skripten dieses Kurses entfernt.

Ein type-Attribut

type="application/javascript;version=1.8"

Sonderzeichen in Skripten

Auch wenn unser Programm so geschrieben wurde, daß in den Skripten möglichst alle Sonderzeichen verwendet werden können, kommt es doch manchmal vor, daß die Verwendung bestimmter Zeichen, die in HTML eine besondere Bedeutung haben, in einem Skript zu Problemen führt, weil diese Sonderzeichen von HTML interpretiert werden.

Es ist aber möglich, ein Zeichen durch eine Aufruf von Funktionen zu erzeugen, ohne daß dieses Zeichen selber in dem Skript vorkommen muß, wie das folgende Programmbeispiel zeigt.

Main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">
</style></head><body>
<pre><code><script>/*<![CDATA[*/
console.log
( String.fromCharCode( 38, 60, 62 ));
/*]]>*/</script></code></pre></body></html>

Konsole

"&<>"

Ein fehlerhaftes Skript

Warum erscheinen die Ausgaben des Skripts aus dem Kopf des Dokumentes nicht?

Main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<script>/*<![CDATA[*/
ausgabe.innerHTML = "Diese Ausgabe erscheint nicht! Warum nicht?";
alert( "Diese Ausgabe erscheint auch nicht! Warum nicht?" );
/*]]>*/</script>
<meta charset="UTF-8" /><title>Main</title><style type="text/css">
.CSS { }
</style></head><body>
<h1>HTML</h1>
<div id="ausgabe">Hier stehen alle künftigen Ausgaben!</div>
<pre><code><script>/*<![CDATA[*/
"JavaScript";
/*]]>*/</script></code></pre></body></html>

Skript aus dem Kopf eines Dokumentes werden grundsätzlich schon ausgewertet, so daß es grundsätzlich möglich ist, dort etwas auszugeben.

Das Skript versucht auf das Element »ausgabe« zuzugreifen. Das Skript wird aber bereits beim Laden der Seite ausgewertet, sobald es geladen wurde. Zu diesem Zeitpunkt ist aber das weiter hinten kommende Element »ausgabe« noch gar nicht geladen worden und existiert noch gar nicht.

Durch diesen Fehler wird das Skript abgebrochen, so daß das »alert« nicht ausgewertet wird. Wenn man aber die erste Anweisung des Skriptes löscht und die Seite dann neu lädt, wird das »alert« ausgewertet.

Wenn man das ganze Skript an das Ende des Rumpfs der Seite verschiebt, arbeitet es dann aber wie beabsichtigt.

Mehrere `script`-Elemente in einem Programm

In einem Programm können auch mehrere script-Elemente enthalten sein. Wir behandeln mehrere script-Elemente in einem Programm hier noch nicht ausführlich, halten aber fest:

Wenn einem Eintrag in einem script-Elemente ein Wert zugewiesen wird, kann dieser Wert in anderen, folgenden script-Elemente desselben HTML-Dokumentes ausgelesen werden, aber nicht in script-Elementen, die in anderen HTML-Dokumenten enthalten sind.
Wenn das Dokument neu geladen wird, gehen aber alle von Zuweisungen angelegten Einträge wieder verloren.

Aus der Sicht von JavaScript, ist die Verkettung der Inhalte aller Skript-Elemente, die JavaScript -Sequenzen enthalten, das Skript – nicht der Inhalt eines einzelnen script-Elementes, da am Anfang der Auswertung eines Skripts eine neue Umgebung initialisiert wird (ECMAScript 2016, 15.1.10).

Main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<script>/*<![CDATA[*/
a = 7;
/*]]>*/</script>
<meta charset="UTF-8" /><title>Main</title><style type="text/css">
.CSS { }
</style></head><body>
<h1>HTML</h1>
<div id="ausgabe">Hier stehen alle künftigen Ausgaben!</div>
<pre><code><script>/*<![CDATA[*/
console.log( a );
/*]]>*/</script></code></pre></body></html>

Konsole

Die Fachbezeichnung für die JavaScript -Bestandteile der einzelnen Skript-Elemente (also für »a = 7;« und »console.log( a );«) ist „[syntaktische ]Quelltexteinheit“ (“[syntactic ]source text unit ”) (man lese beispielsweise Absatz 2 von 4.2.2 in ECMAScript 2016 ). Das gesamte Skript kann also aus mehreren Quelltexteinheiten bestehen. Während die Werte der globalen Eigenschaften vom ganzen Skript geteilt werden, gibt es auch einige Einstellungen, die sich immer nur auf eine Quelltexteinheit auswirken (wie später behandelt werden wird).

Die Konsole

Es ist hilfreich, beim Ausführen von Webseiten mit Skripten, immer einen Blick auf die Konsole zu werfen, da dort wichtige Fehlermeldungen erscheinen können!

Auch die einzelnen Zeilen, die in der Konsole von Mozilla Firefox eingegeben werden sind jeweils „[syntaktische ]Quelltexteinheiten“ (“[syntactic ]source text units ”). Zusammen bilden sie ein Skript. Durch Strg-F5 wird ein neues Skript in der Konsole begonnen.

Unterschiede zur Auswertung in der Konsole

Bisher haben wir Skripte immer in die Konsole eingegeben.

Werte von Auswertungsanweisungen

Wird in der Firefox -Konsole eine Auswertungsanweisung, wie »"4";« ausgewertet, so wird der Wert des Ausdrucks jener Anweisung in der Konsole ausgegeben.

Wenn eine Auswertungsanweisung in einem Skript innerhalb eines Programmes ausgewertet wird, so wird der Wert des Ausdrucks jener Anweisung nicht ausgegeben. Um etwas aus einem Skript heraus auszugeben, muß stets eine Funktion, wie beispielsweise »window.console.log« aufgerufen werden.

Das Dollarzeichen ⃗

In ECMAScript ist das Dollarzeichen ein Zeichen, das in Namen verwendet werden darf.

Wird in der Firefox -Konsole dem Namen »$« ein Wert zugewiesen, so ergibt sich jedoch nicht die normale Wirkung einer Zuweisung, da dieser Name in der Firefox -Konsole schon eine feststehende Bedeutung (nämlich »function JSTH_$()«) hat.

Auswertung

$ = 2;

Auswertung

console.log( $ );

undefined
function JSTH_$()

In einem JavaScript -Programm kann dem Namen »$« aber wirksam ein Wert zugewiesen werden.

Main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">
</style></head><body>
<pre><code><script>/*<![CDATA[*/
$ = 2;
console.log( $ );
/*]]>*/</script></code></pre></body></html>

Konsole

Übungsaufgaben

/ Einbauen eines Skripts ⃖

Fügen Sie das folgende Skript an der richtigen Stelle in das Beispieldokument ein und öffnen Sie das Dokument dann in einem Browser.

Skript

Zustand.innerHTML = "bewölkt"

Quelltext des Beipieldokuments

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">
</style></head><body>
<p>Hallo, Welt</p>
<h1>Vornamen</h1>
<ul id="erste">
  <li class="m a"   id="Anton">Anton</li>
  <li class="w b"   id="Berta">Berta</li></ul>
<ul id="zweite">
  <li class="c m"   id="Cäsar">Cäsar</li>
  <li class="d e w" id="Dora">Dora</li></ul>
<p>Es ist zur Zeit <span id="Zustand">(unbekannt)</span>.</p>
<pre><code><script>/*<![CDATA[*/
/*]]>*/</script></code></pre></body></html>

/ Entwickeln eines Skripts ⃖

Zeigen Sie das folgende Beispieldokument im Browser an und schreiben Sie dann eine Quelltexteinheit in die Konsole, welche das Wort »Berta« auf der angezeigten Seite durch das Wort »Bravo« ersetzt. Falls dies beim ersten Versuch nicht gelingt, verändern Sie die Quelltexteinheit bis zum Erfolg. Danach soll die Quelltexteinheit dann in das Beispieldokument eingebaut werden. Nun sollte das Beispieldokument nach dem Öffnen »Bravo« an Stelle von »Berta« anzeigen.

Quelltext des Beipieldokuments

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">
</style></head><body>
<p>Hallo, Welt</p>
<h1>Vornamen</h1>
<ul id="erste">
  <li class="m a"   id="Anton">Anton</li>
  <li class="w b"   id="Berta">Berta</li></ul>
<ul id="zweite">
  <li class="c m"   id="Cäsar">Cäsar</li>
  <li class="d e w" id="Dora">Dora</li></ul>
<p>Es ist zur Zeit <span id="Zustand">(unbekannt)</span>.</p>
<pre><code><script>/*<![CDATA[*/
/*]]>*/</script></code></pre></body></html>

/ Übungsaufgabe

Erstellen Sie ein Dokument, das nach dem Öffnen im Browser eine Zufallszahl mit »alert« anzeigt.

/ Übungsaufgabe

Erstellen Sie eine Webseite, die den Wert eines Aufrufs der Funktion »this.Date« anzeigt (auf der Seite selber, nicht in einem extra Dialog-Fenster). Wenn die Webseite mit F5 neu geladen wird, sollte dabei in der Regel ein neuer Text erscheinen.

/ Übungsaufgabe

Erstellen Sie eine Webseite, die eine Zufallszahl anzeigt (auf der Seite selber, nicht in einem extra Dialog-Fenster). Wenn die Webseite mit F5 neu geladen wird, soll dabei in der Regel eine neue Zufallszahl erscheinen.

/ Übungsaufgabe

Erstellen Sie eine Webseite, die beim Laden mit »window.prompt« nach einem Text fragt und diesen dann auf der Seite anzeigt. (Diese Art der Verarbeitung von Benutzereingaben ist nicht besonders empfehlenswert, weil sie das Laden blockiert. Später werden wir andere Möglichkeiten kennenlernen.)

/ Übungsaufgabe ⃖

Main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">
</style></head><body>
<div><p><span id="numerale">7</span></p></div>
<pre><code><script>/*<![CDATA[*/
/*]]>*/</script></code></pre></body></html>

Laden Sie das obenstehende Dokument und schreiben Sie dann eine Funktion »inc«, deren Aufruf den Wert des Numerales im span-Element um Eins erhöht.

Die Definition dieser Funktion »inc« darf dabei nach Ihrer Wahl entweder in das Dokument hineingeschrieben werden oder über die Konsole eingegeben werden.

Rufen Sie dann (nach dem eventuellen erneuten Laden des Dokuments) diese Funktion mehrfach von der Konsole aus auf, um das Numerale mehrfach zu erhöhen.

Durch erneutes Laden des Dokument kann das Numerale auch wieder auf seinen Anfangswert zurückgesetzt werden.

/ Übungsaufgabe *

Erstellen Sie eine Webseite, auf welcher der Text „Aktivieren Sie Javascript für mehr Features und höhere Geschwindigkeit beim Abfragen.“ erscheint, aber nur falls JavaScript deaktiviert ist.

(Auf der Seite »about:config« kann die Einstellung »javascript.enabled« »false« gesetzt werden, um JavaScript zu deaktivieren. Dies kann manchmal durch Doppelklicken auf diese Einstellung geschehen. Später kann sie wieder auf »true« gesetzt werden, um JavaScript wieder zu aktivieren.)

Zusatzanforderung: Können Sie diese Aufgabe auch ohne Verwendung von »noscript« erledigen?

Fragmente

heise.de/-4399767?seite=all

“Key points for creating polyglot documents: … Do not use the noscript element.” – en.wikibooks.org/wiki/Polyglot_markup,_how_to

Ein Hinweis zum Debugger *

Die Zeile mit »holder« bindet einen Teil des Dokuments an einen Namen in Verzeichnis »window«. Dies bewirkt, daß der Quelltext im Firefox -Debugger erscheint, auch wenn die Abarbeitung des Skriptes bereits beendet ist.

main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Hallo</title><style type="text/css">
h1 { text-align: center; }
</style></head><body>
<h1>Vornamen</h1>
<ul id="erste">
  <li class="m a"   id="Anton">Anton</li>
  <li class="w b"   id="Berta">Berta</li></ul>
<ul id="zweite">
  <li class="c m"   id="Cäsar">Cäsar</li>
  <li class="d e w" id="Dora">Dora</li></ul>
<p>Es ist zur Zeit <span id="Zustand">(unbekannt)</span>.</p>
<pre><code><script>/*<![CDATA[*/
window.holder = document.documentElement.firstChildElement; /* debugger */
console.log( 'example' );
console.log( 'example1' );
/*]]>*/</script></code></pre></body></html>

JavaScript in HTML -Dokumenten

Das script-Element

Das type-Attribut des Skript-Elements ⃗

Sonderzeichen in Skripten

Ein fehlerhaftes Skript

Mehrere script-Elemente in einem Programm

Die Konsole

Unterschiede zur Auswertung in der Konsole

Werte von Auswertungsanweisungen

Das Dollarzeichen ⃗

Übungsaufgaben

/ Einbauen eines Skripts ⃖

/ Entwickeln eines Skripts ⃖

/ Übungsaufgabe

/ Übungsaufgabe

/ Übungsaufgabe

/ Übungsaufgabe

/ Übungsaufgabe ⃖

/ Übungsaufgabe *

Ein Hinweis zum Debugger *

Das `script`-Element

Das `type`-Attribut des Skript-Elements ⃗

Mehrere `script`-Elemente in einem Programm