index.md 10.8 KB
Newer Older
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114
---
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 %}}

{{<figure src="animation-rpf.gif" title="Screenshot der Anwendung \"Random Planet Facts\".">}}

## Quellcode

Nachfolgend ist der gesamte Quellcode des Beispiels gelistet, weil hier eine Menge dran zu lernen ist.

```html
<!DOCTYPE html>
<html lang="en">

<!-- Quelle: https://docs.ipfs.io/how-to/websites-on-ipfs/single-page-website/#add-your-site -->

<head>
  <meta charset="utf-8" />
  <title>Random Planet Facts</title>
  <meta name="description" content="Get a random fact about a planet in our solar system." />
  <meta name="author" content="The IPFS Docs team." />
  <style>
    body {
      margin: 15px auto;
      max-width: 650px;
      line-height: 1.2;
      font-family: sans-serif;
      font-size: 2em;
      color: #fff;
      background: #444;
    }
  </style>
</head>

<body onload="main()">
  <h1>Random Planet Facts</h1>
  <p id="output_p"></p>
  <script>
    function main() {
      const facts = [
        'Mars is home to the tallest mountain in our solar system.',
        'Only 18 out of 40 missions to Mars have been successful.',
        'Pieces of Mars have fallen to Earth.',
        'One year on Mars is 687 Earth days.',
        'The temperature on Mars ranges from -153 to 20 °C.',
        'One year on Mercury is about 88 Earth days.',
        'The surface temperature of Mercury ranges from -173 to 427°C.',
        'Mercury was first discovered in 14th century by Assyrian astronomers.',
        'Your weight on Mercury would be 38% of your weight on Earth.',
        'A day on the surface of Mercury lasts 176 Earth days.',
        'The surface temperature of Venus is about 462 °C.',
        'It takes Venus 225 days to orbit the sun.',
        'Venus was first discovered by 17th century Babylonian astronomers.',
        'Venus is nearly as big as the Earth with a diameter of 12,104 km.',
        "The Earth's rotation is gradually slowing.",
        'There is only one natural satellite of the planet Earth, the moon.',
        'Earth is the only planet in our solar system not named after a god.',
        'The Earth is the densest planet in the solar system.',
        'A year on Jupiter lasts around 4333 earth days.',
        'The surface temperature of Jupiter is around -108°C.',
        'Jupiter was first discovered by 7th or 8th century Babylonian astronomers.',
        'Jupiter has 4 rings.',
        'A day on Jupiter lasts 9 hours and 55 minutes.',
        'Saturn was first discovered by 8th century Assyrians.',
        'Saturn takes 10756 days to orbit the Sun.',
        'Saturn can be seen with the naked eye.',
        'Saturn is the flattest planet.',
        'Saturn is made mostly of hydrogen.',
        'Four spacecraft have visited Saturn.',
        'Uranus was discovered by William Herschel in 1781.',
        'A year on Uranus takes 30687 earth days.',
        'Uranus turns on its axis once every 17 hours, 14 minutes.',
        '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.',
        'Neptune was discovered in 1846 by Urbain Le Verrier and Johann Galle.',
        'Neptune has 14 moons.',
        'The average temperatue of Neptune is about -201 °C.',
        'There is a 1:20 million scale model of the solar system in Sweden.',
        'The gap between the Earth and our moon is bigger than the diameters of all the planets combined.',
        "The first accurate calculation of the speed of light was using Jupiter's moons",
        "Jupiter's magnetic field is believed to be a result of rapidly spinning metallic hydrogen at the core, and is ~10x stronger than the Earth's.",
        'Venus spins backwards.',
        'Uranus spins sideways, relative to the ecliptic plane of the solar system.',
        'It is easier to reach Pluto or escape the solar system from Earth than being able to <i>land</i> on the Sun.'
      ]
      document.querySelector('#output_p').innerHTML =
        facts[Math.floor(Math.random() * facts.length)]
    }
  </script>
</body>

</html>
```

{{% notice aufgabe "Markup im Browser anzeigen" %}}
1. Kopieren Sie das gezeigte Markup in eine Datei, bspw. im Beaker Browser.
Axel Dürkop's avatar
Fixes  
Axel Dürkop committed
115
2. Zeigen Sie die Datei im Browser an. Sie sollte sich wie beschrieben verhalten, wenn Sie die Seite aktualisieren.
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
116 117 118 119 120 121
{{%/notice%}}

## Analyse

Die relevanten Teile in diesem Quelltext werden nun nacheinander und im Zusammenhang vorgestellt.

Axel Dürkop's avatar
Fixes  
Axel Dürkop committed
122 123
{{% callout info %}}
**Ein Blick in die Referenz von JavaScript.**  
Axel Dürkop's avatar
Fixes  
Axel Dürkop committed
124
Sie finden im Fließtext Links zu den entsprechenden Seiten der [JavaScript-Referenz](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference) von Mozilla.
Axel Dürkop's avatar
Fixes  
Axel Dürkop committed
125 126
{{% /callout %}}

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
127 128
### Die Daten

Axel Dürkop's avatar
Fixes  
Axel Dürkop committed
129
Einen großen Teil des Codes macht die Liste der Aussagesätze aus, die zufällig angezeigt werden (hier gekürzt).
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
130 131 132 133 134 135 136 137 138 139

```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.',
]
```

Axel Dürkop's avatar
Fixes  
Axel Dürkop committed
140
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.
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165

### 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)]
    }
```

Axel Dürkop's avatar
Fixes  
Axel Dürkop committed
166 167 168 169
{{% 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 %}}

Axel Dürkop's avatar
Updates  
Axel Dürkop committed
170 171 172 173 174 175
### 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.

Axel Dürkop's avatar
Fixes  
Axel Dürkop committed
176
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.
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198


```javascript { linenostart=24 }
<body onload="main()">
  <h1>Random Planet Facts</h1>
  <p id="output_p"></p>
  <script>
    function main() {
      const facts = [
        'Mars is home to the tallest mountain in our solar system.',
        '[...]',
        'It is easier to reach Pluto or escape the solar system from Earth than being able to <i>land</i> on the Sun.'
      ]
      document.querySelector('#output_p').innerHTML =
        facts[Math.floor(Math.random() * facts.length)]
    }
  </script>
</body>
```

## Auftrag

Axel Dürkop's avatar
Fixes  
Axel Dürkop committed
199
Machen Sie sich Markup und Code nun zu eigen. Spielen Sie damit herum und wandeln Sie es für Ihre Zwecke ab.
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
200 201

{{% notice aufgabe "Abwandeln und spielen" %}}
Axel Dürkop's avatar
Fixes  
Axel Dürkop committed
202 203
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.
Axel Dürkop's avatar
Updates  
Axel Dürkop committed
204
{{%/notice%}}
Axel Dürkop's avatar
Fixes  
Axel Dürkop committed
205 206

[^1]: asdf