Übung: Schreibe eine Funktion, die mit Emojis eine Isotype-Grafik macht. Du solltest der Funktion ein Emoji sowie die Anzahl, wie oft es angezeigt werden soll, übergeben können.
function drawIsotype(anzahl, image) {
let icons = "";
for (let index = 0; index < anzahl; index = index + 1) {
icons = icons + image;
}
return icons;
}
drawIsotype(4, "🎃")
Was ist, wenn sehr viele Icons gezeigt werden sollen? Ergänze die Funktion so, dass die Zahl dividiert wird, wenn über 100 Icons gezeigt werden:
function drawIsotypeWithDivision(anzahl, image) {
// Wir beginnen mit einem leeren String
let icons = "";
let scala = "";
if (anzahl < 100) {
for (let index = 0; index < anzahl; index = index + 1) {
// Wir fügen dem bestehenden String ein zusätzliches Emoji hinzu
icons = icons + image;
}
} else {
// Wenn wir über 100 Icons wollen, teilen wir die Anzahl durch 100 …
for (let index = 0; index < anzahl / 10; index = index + 1) {
icons = icons + image;
}
// Wenn wir mit einem Icon mehrere Einheiten meinen, müssen wir das ausweisen
scala = "Ein " + image + " entspricht 10 " + image;
}
return icons + scala;
}
drawIsotypeWithDivision(250, "🐍")
// Alternative Lösung, die nicht zwei verschiedene Schleifen benötigt
function drawIsotypeWithDivisionAlternative(anzahl, image) {
// Start mit einem leeren String, zu dem wir später die Icons hinzufügen können.
let icons = "";
let scala = "";
// Wenn wir über 100 sind, dividieren wir die Zahl der Icons:
if (anzahl >= 100) {
// ich kann auch einen Parameter überschreiben, wenn ich das möchte
anzahl = anzahl / 10;
// An derselben Stelle muss ich auch die Skala definieren,
// danach ist ja `anzahl` überschrieben, und ich kann den Test nicht mehr machen
scala = " Ein " + image + " entspricht 10 " + image;
}
// Da wir die Anzahl schon dividiert haben, reicht eine Schleife aus.
for (let index = 0; index < anzahl; index = index + 1) {
// Wir fügen dem bestehenden String ein zusätzliches Emoji hinzu
icons = icons + image;
}
return icons + scala;
}
drawIsotypeWithDivisionAlternative(120, "🤌🏼")
drawIsotypeWithDivisionAlternative(12, "🤌🏼")
Für was werden die for-Schleifen verwendet?
Für unsere Zwecke reichen oft die Methoden von Arrays (die wir am Montag anschauen werden.)
Nützlich sind diese Schleifen immer dann, wenn wir keine Liste haben, sondern einfach wissen, dass wir Code eine bestimmte Anzahl mal durchführen möchten.
listeVonZahlen = {
let array = [];
for (let index = 0; index < 10; ++index) {
array.push(index + 1);
}
return array;
}
listeDerListe = {
let array2 = [];
for (let index = 0; index < listeVonZahlen.length; ++index) {
array2.push(listeVonZahlen[index] * 10);
}
return array2;
}
Appendix
import { style } from "@cas-datenvisualisierung/style"
style
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
