Ein erstes Beispiel
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.
Quellcode
Nachfolgend ist der gesamte Quellcode des Beispiels gelistet, weil hier eine Menge dran zu lernen ist.
1<!DOCTYPE html>
2<html lang="en">
3
4<!-- Quelle: https://docs.ipfs.io/how-to/websites-on-ipfs/single-page-website/#add-your-site -->
5
6<head>
7 <meta charset="utf-8" />
8 <title>Random Planet Facts</title>
9 <meta name="description" content="Get a random fact about a planet in our solar system." />
10 <meta name="author" content="The IPFS Docs team." />
11 <style>
12 body {
13 margin: 15px auto;
14 max-width: 650px;
15 line-height: 1.2;
16 font-family: sans-serif;
17 font-size: 2em;
18 color: #fff;
19 background: #444;
20 }
21 </style>
22</head>
23
24<body onload="main()">
25 <h1>Random Planet Facts</h1>
26 <p id="output_p"></p>
27 <script>
28 function main() {
29 const facts = [
30 'Mars is home to the tallest mountain in our solar system.',
31 'Only 18 out of 40 missions to Mars have been successful.',
32 'Pieces of Mars have fallen to Earth.',
33 'One year on Mars is 687 Earth days.',
34 'The temperature on Mars ranges from -153 to 20 °C.',
35 'One year on Mercury is about 88 Earth days.',
36 'The surface temperature of Mercury ranges from -173 to 427°C.',
37 'Mercury was first discovered in 14th century by Assyrian astronomers.',
38 'Your weight on Mercury would be 38% of your weight on Earth.',
39 'A day on the surface of Mercury lasts 176 Earth days.',
40 'The surface temperature of Venus is about 462 °C.',
41 'It takes Venus 225 days to orbit the sun.',
42 'Venus was first discovered by 17th century Babylonian astronomers.',
43 'Venus is nearly as big as the Earth with a diameter of 12,104 km.',
44 "The Earth's rotation is gradually slowing.",
45 'There is only one natural satellite of the planet Earth, the moon.',
46 'Earth is the only planet in our solar system not named after a god.',
47 'The Earth is the densest planet in the solar system.',
48 'A year on Jupiter lasts around 4333 earth days.',
49 'The surface temperature of Jupiter is around -108°C.',
50 'Jupiter was first discovered by 7th or 8th century Babylonian astronomers.',
51 'Jupiter has 4 rings.',
52 'A day on Jupiter lasts 9 hours and 55 minutes.',
53 'Saturn was first discovered by 8th century Assyrians.',
54 'Saturn takes 10756 days to orbit the Sun.',
55 'Saturn can be seen with the naked eye.',
56 'Saturn is the flattest planet.',
57 'Saturn is made mostly of hydrogen.',
58 'Four spacecraft have visited Saturn.',
59 'Uranus was discovered by William Herschel in 1781.',
60 'A year on Uranus takes 30687 earth days.',
61 'Uranus turns on its axis once every 17 hours, 14 minutes.',
62 'With minimum atmospheric temperature of -224°C Uranus is nearly coldest planet in the solar system.',
63 'Only one spacecraft has flown by Uranus, the Voyager 2.',
64 'Neptune was discovered in 1846 by Urbain Le Verrier and Johann Galle.',
65 'Neptune has 14 moons.',
66 'The average temperatue of Neptune is about -201 °C.',
67 'There is a 1:20 million scale model of the solar system in Sweden.',
68 'The gap between the Earth and our moon is bigger than the diameters of all the planets combined.',
69 "The first accurate calculation of the speed of light was using Jupiter's moons",
70 "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.",
71 'Venus spins backwards.',
72 'Uranus spins sideways, relative to the ecliptic plane of the solar system.',
73 'It is easier to reach Pluto or escape the solar system from Earth than being able to <i>land</i> on the Sun.'
74 ]
75 document.querySelector('#output_p').innerHTML =
76 facts[Math.floor(Math.random() * facts.length)]
77 }
78 </script>
79</body>
80
81</html>
- Kopieren Sie das gezeigte Markup in eine Datei, bspw. im Beaker Browser.
- Zeigen Sie die Datei im Browser an. Sie sollte sich wie beschrieben verhalten, wenn Sie die Seite aktualisieren.
Analyse
Die relevanten Teile in diesem Quelltext werden nun nacheinander und im Zusammenhang vorgestellt.
Sie finden im Fließtext Links zu den entsprechenden Seiten der JavaScript-Referenz von Mozilla.
Die Daten
Einen großen Teil des Codes macht die Liste der Aussagesätze aus, die zufällig angezeigt werden (hier gekürzt).
29const facts = [
30 'Mars is home to the tallest mountain in our solar system.',
31 'Only 18 out of 40 missions to Mars have been successful.',
32 'With minimum atmospheric temperature of -224°C Uranus is nearly coldest planet in the solar system.',
33 'Only one spacecraft has flown by Uranus, the Voyager 2.',
34]
In Zeile 29 wird die Konstante facts definiert, die ein Array von Strings 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 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 ermittelt. random ergibt eine Dezimalzahl im Bereich von 0 bis 1, die mit der Länge der Konstante facts, also der Anzahl der Elemente darin, multipliziert wird. Die damit entstehende Dezimalzahl wird anschließend mit floor noch einmal auf ihren Ganzzahlanteil reduziert.
- 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.
- Aktualisieren Sie den Browser und stellen Sie fest, dass jetzt immer derselbe Satz angezeigt wird.
- Setzen Sie auch die
0ein, um zu sehen, dass die Zählung bei0beginnt. - Stellen Sie abschließend den mathematischen Ausdruck wieder her.
Zeile 75 sorgt nun dafür, dass das HTML-Element mit der ID output_p im Elementbaum des HTML (DOM) ausgewählt wird. Mit der Eigenschaft innerHTML wird dessen Inhalt durch den zufällig ermittelten Satz überschrieben.
74 ]
75 document.querySelector('#output_p').innerHTML =
76 facts[Math.floor(Math.random() * facts.length)]
77 }
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 <p id="output_p"></p> geschrieben.
24<body onload="main()">
25 <h1>Random Planet Facts</h1>
26 <p id="output_p"></p>
27 <script>
28 function main() {
29 const facts = [
30 'Mars is home to the tallest mountain in our solar system.',
31 '[...]',
32 'It is easier to reach Pluto or escape the solar system from Earth than being able to <i>land</i> on the Sun.'
33 ]
34 document.querySelector('#output_p').innerHTML =
35 facts[Math.floor(Math.random() * facts.length)]
36 }
37 </script>
38</body>
Auftrag
Machen Sie sich Markup und Code nun zu eigen. Spielen Sie damit herum und wandeln Sie es für Ihre Zwecke ab.
- Ersetzen Sie nun die Daten in
factsmit anderen Strings Ihrer Wahl, z. B. Namen oder Tieren. - Fügen Sie im
headder Seite<meta http-equiv="refresh" content="5"/>ein, um eine automatische Aktualisierung der Website zu erreichen. Die5steht 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.