--- title: Ein erstes Beispiel type: book toc: true summary: "" weight: 100 highlight: true --- ## Zufällige Daten zum Planetensystem Die Anwendung **Random Planet Facts** zeigt bei jedem Seitenaufruf einen anderen, zufällig ausgewählten Aussagesatz aus einer entsprechenden Sammlung von Sätzen. {{% callout info %}} Das folgende Beispiel **Random Planet Facts** stammt [aus einem Tutorial zum Webhosting mit dem Interplanetarischen File System (IPFS)](https://docs.ipfs.io/how-to/websites-on-ipfs/single-page-website/#add-your-site). Ich habe es hier übernommen und leicht abgewandelt, da es erfreulicherweise [unter der MIT-Lizenz steht](https://github.com/ipfs/ipfs-docs). {{% /callout %}} {{% callout warning %}} Bei dem folgenden Bild handelt es sich um eine Animation, die automatisiert erstellt wurde. Damit das Beispiel für Sie funktioniert, müssen Sie den Browser manuell aktualisieren! {{% /callout %}} {{
}} ## Quellcode Nachfolgend ist der gesamte Quellcode des Beispiels gelistet, weil hier eine Menge dran zu lernen ist. ```html Random Planet Facts

Random Planet Facts

``` {{% 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, wenn Sie die Seite aktualisieren. {{%/notice%}} ## Analyse Die relevanten Teile in diesem Quelltext werden nun nacheinander und im Zusammenhang vorgestellt. {{% callout info %}} **Ein Blick in die Referenz von JavaScript.** 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 macht die Liste der Aussagesätze aus, die zufällig angezeigt werden (hier gekürzt). ```javascript { linenostart=29 } const facts = [ 'Mars is home to the tallest mountain in our solar system.', 'Only 18 out of 40 missions to Mars have been successful.', 'With minimum atmospheric temperature of -224°C Uranus is nearly coldest planet in the solar system.', 'Only one spacecraft has flown by Uranus, the Voyager 2.', ] ``` 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 Zeile 76 bewirkt die zufällige Auswahl eines Satzes aus der Konstante `facts`. Der mathematische Ausdruck in den eckigen Klammern verstellt hier zunächst die Sicht auf ein sehr einfaches Prinzip beim Zugriff auf die Daten in einem Array: **Durch Angabe einer Ganzzahl in den eckigen Klammern des Arrays kann auf das Element an der angegebenen Stelle (Index) zugegriffen werden. Dabei beginnt die Zählung bei `0`.** Die Ganzzahl für den Zugriff auf das Array wird hier mit [`random`](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Math/random) ermittelt. `random` ergibt eine Dezimalzahl im Bereich von 0 bis 1, die mit der [Länge](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/length) der Konstante `facts`, also der Anzahl der Elemente darin, multipliziert wird. Die damit entstehende Dezimalzahl wird anschließend mit [`floor`](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) noch einmal auf ihren Ganzzahlanteil reduziert. {{% notice aufgabe "Zugriff auf ein bestimmtes Element" %}} 1. Um das Prinzip des Zugriffs auf Elemente eines Arrays besser zu verstehen, ersetzen Sie temporär den mathematischen Ausdruck in den eckigen Klammern durch eine beliebige Ganzzahl. 2. Aktualisieren Sie den Browser und stellen Sie fest, dass jetzt immer derselbe Satz angezeigt wird. 3. Setzen Sie auch die `0` ein, um zu sehen, dass die Zählung bei `0` beginnt. 4. Stellen Sie abschließend den mathematischen Ausdruck wieder her. {{%/notice%}} Zeile 75 sorgt nun dafür, dass das HTML-Element mit der ID `output_p` im Elementbaum des HTML (DOM) [ausgewählt](https://developer.mozilla.org/de/docs/Web/API/Document/querySelector) wird. Mit der Eigenschaft [`innerHTML`](https://developer.mozilla.org/de/docs/Web/API/Element/innerHTML) wird dessen Inhalt durch den zufällig ermittelten Satz überschrieben. ```javascript { linenostart=74, hl_lines=["2-3"] } ] document.querySelector('#output_p').innerHTML = facts[Math.floor(Math.random() * facts.length)] } ``` {{% 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 aus `facts` in den Absatz `

` geschrieben. ```javascript { linenostart=24 }

Random Planet Facts

``` ## Auftrag 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 `` 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