Commit f10b98f9 authored by Axel Dürkop's avatar Axel Dürkop
Browse files

Fixes

parent 3f73f33c
......@@ -112,7 +112,7 @@ Nachfolgend ist der gesamte Quellcode des Beispiels gelistet, weil hier eine Men
{{% notice aufgabe "Markup im Browser anzeigen" %}}
1. Kopieren Sie das gezeigte Markup in eine Datei, bspw. im Beaker Browser.
2. Zeigen Sie die Datei im Browser an. Sie sollte sich wie beschrieben verhalten.
2. Zeigen Sie die Datei im Browser an. Sie sollte sich wie beschrieben verhalten, wenn Sie die Seite aktualisieren.
{{%/notice%}}
## Analyse
......@@ -121,12 +121,12 @@ Die relevanten Teile in diesem Quelltext werden nun nacheinander und im Zusammen
{{% callout info %}}
**Ein Blick in die Referenz von JavaScript.**
Sie finden im Fließtext Links zu den entsprechenden Seiten der JavaScript-Referenz.
Sie finden im Fließtext Links zu den entsprechenden Seiten der [JavaScript-Referenz](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference) von Mozilla.
{{% /callout %}}
### Die Daten
Einen großen Teil des Codes mach die Liste der Aussagesätze aus, die zufällig angezeigt werden (hier gekürzt).
Einen großen Teil des Codes macht die Liste der Aussagesätze aus, die zufällig angezeigt werden (hier gekürzt).
```javascript { linenostart=29 }
const facts = [
......@@ -137,7 +137,7 @@ const facts = [
]
```
In Zeile 29 wird die [Konstante](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/const) `facts` definiert, die ein [Array](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array) von [Strings](https://developer.mozilla.org/de/docs/Glossary/String) enthält, die Aussagesätze. Aus diesem Pool von Daten wird im Folgenden immer ein Satz zufällig ausgewählt. Solche Arrays können ganz unterschiedliche [Datentypen](https://developer.mozilla.org/de/docs/Web/JavaScript/Data_structures#datentypen) enthalten.
In Zeile 29 wird die [Konstante](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/const) `facts` definiert, die ein [Array](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array) von [Strings](https://developer.mozilla.org/de/docs/Glossary/String) enthält, nämlich die Aussagesätze. Aus diesem Pool von Daten wird im Folgenden immer ein Satz zufällig ausgewählt. Solche Arrays können ganz unterschiedliche [Datentypen](https://developer.mozilla.org/de/docs/Web/JavaScript/Data_structures#datentypen) enthalten und auch ineinander verschachtelt sein.
### Der Zufall
......@@ -163,13 +163,17 @@ Zeile 75 sorgt nun dafür, dass das HTML-Element mit der ID `output_p` im Elemen
}
```
{{% callout info %}}
An dieser Stelle wird deutlich, dass JavaScript das HTML im Browser beeinflussen kann, *nachdem* es geladen wurde. Darin liegt die besondere Bedeutung von JavaScript im Zusammenspiel mit HTML und CSS begründet.
{{% /callout %}}
### Definition und Aufruf der Funktion
Abschließend ist noch die Funktion `main` zu besprechen, in der Daten und Zufallsgenerator gekapselt sind. Sie wird in Zeile 28ff. definiert und steht anschließend unter dem Namen `main()` zur Verfügung. Das heißt, immer wenn `main()` aufgerufen wird, wird der Code darin ausgeführt.
In Zeile 24 wird auf das Ereignis gewartet, dass die HTML-Seite komplett im Browser geladen wurde (`onload`). Sobald das der Fall ist, soll die Funktion `main()` aufgerufen werden.
Wenn Sie den Browser aktualisieren, wird nun immer wieder eine Zufallszahl generiert und ein neuer Satz in den Absatz `<p id="output_p"></p>` geschrieben.
Wenn Sie den Browser aktualisieren, wird nun immer wieder eine Zufallszahl generiert und ein neuer Satz aus `facts` in den Absatz `<p id="output_p"></p>` geschrieben.
```javascript { linenostart=24 }
......@@ -192,9 +196,11 @@ Wenn Sie den Browser aktualisieren, wird nun immer wieder eine Zufallszahl gener
## Auftrag
Machen Sie sich das Markup nun zu eigen. Spielen Sie damit herum und wandeln Sie es für Ihre Zwecke ab.
Machen Sie sich Markup und Code nun zu eigen. Spielen Sie damit herum und wandeln Sie es für Ihre Zwecke ab.
{{% notice aufgabe "Abwandeln und spielen" %}}
1. Ersetzen Sie nun die Daten in `facts` mit anderen Strings Ihrer Wahl, z.B. Namen oder Tieren.
2. Fügen Sie im `head` der Seite `<meta http-equiv="refresh" content="5"/>` ein, um eine automatische Aktualisierung der Website zu erreichen. Die `5` steht dabei für 5 Sekunden.
1. Ersetzen Sie nun die Daten in `facts` mit anderen Strings Ihrer Wahl, z. B. Namen oder Tieren.
2. Fügen Sie im `head` der Seite `<meta http-equiv="refresh" content="5"/>` ein, um [eine automatische Aktualisierung der Website](https://en.wikipedia.org/wiki/Meta_refresh) zu erreichen. Die `5` steht dabei für 5 Sekunden. Diese Methode wird heute nicht mehr eingesetzt, weil es bessere gibt, um eine Seite aktuell zu halten. Für den Moment ist sie aber vollkommend ausreichend, um das Testen des Skripts zu automatisieren.
{{%/notice%}}
[^1]: asdf
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment