43:["$","title",null,{"children":"Schleifen – Übung | CAS Datenvisualisierung | Observable"}] 4b:[] 47:{"id":"a6947e94013db32a","slug":"javascript-schleifen","title":"Schleifen – Übung","thumbnail":"ddacc2d62ab607eaf0d7ebb346d3bbededdd04c5424493e127d76415c7f14108","access_level":"public","create_time":"$D2022-03-06T19:28:08.142Z","update_time":"$D2022-03-10T15:56:41.607Z","view_time":null,"first_public_time":"$D2022-03-10T13:52:08.222Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"f6ac14d015cd81f5","login":"cas-datenvisualisierung","name":"CAS Datenvisualisierung","avatar_url":"https://avatars-next.observableusercontent.com/4797d88ca1d2799854ec174eb3b8719bdc3acd9dfdf473bd9105d591ef7440a8","tier":"pro_2024","bio":"","followed_by_you":false,"follows_you":false},"version":146,"publish_version":146,"role":null,"authored":false,"authors":[{"type":"individual","id":"6955dde3639cf543","login":"xeophin","name":"xeophin","avatar_url":"https://avatars-next.observableusercontent.com/10a77e12b3f5cd7251ec4b1e8d2bdfa60ab72843bc51c7c80a235701f9e6383c","tier":null,"bio":"Team Lead Graphics at NZZ Visuals","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"6955dde3639cf543","login":"xeophin","name":"xeophin","avatar_url":"https://avatars-next.observableusercontent.com/10a77e12b3f5cd7251ec4b1e8d2bdfa60ab72843bc51c7c80a235701f9e6383c","tier":null,"role":"editor"},{"type":"team","id":"f6ac14d015cd81f5","login":"cas-datenvisualisierung","name":"CAS Datenvisualisierung","avatar_url":"https://avatars-next.observableusercontent.com/4797d88ca1d2799854ec174eb3b8719bdc3acd9dfdf473bd9105d591ef7440a8","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"7cfeec1c8a99c46e","slug":"observable-und-javascript","title":"3 Observable und Javascript","owner":{"id":"f6ac14d015cd81f5","login":"cas-datenvisualisierung","name":"CAS Datenvisualisierung"}},"type":"notebook","body":{"titling":"auto","title":"Schleifen – Übung","cells":[{"id":0,"value":"# Schleifen – Übung","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"Programmieren wird dann besonders nützlich, wenn es darum geht, die selbe Arbeit wieder und wieder zu machen. Dafür kann man _Schleifen_ verwenden (_Loops_).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"## `for`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":115,"value":"Ü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.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"function drawIsotype(anzahl, image) {\n let icons = \"\";\n\n for (let index = 0; index < anzahl; index = index + 1) {\n icons = icons + image;\n }\n\n return icons;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"drawIsotype(4, \"🎃\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"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:","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"function drawIsotypeWithDivision(anzahl, image) {\n // Wir beginnen mit einem leeren String\n let icons = \"\";\n let scala = \"\";\n\n if (anzahl < 100) {\n for (let index = 0; index < anzahl; index = index + 1) {\n // Wir fügen dem bestehenden String ein zusätzliches Emoji hinzu\n icons = icons + image;\n }\n } else {\n // Wenn wir über 100 Icons wollen, teilen wir die Anzahl durch 100 …\n for (let index = 0; index < anzahl / 10; index = index + 1) {\n icons = icons + image;\n }\n\n // Wenn wir mit einem Icon mehrere Einheiten meinen, müssen wir das ausweisen\n scala = \"Ein \" + image + \" entspricht 10 \" + image;\n }\n\n return icons + scala;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"drawIsotypeWithDivision(250, \"🐍\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"// Alternative Lösung, die nicht zwei verschiedene Schleifen benötigt\nfunction drawIsotypeWithDivisionAlternative(anzahl, image) {\n // Start mit einem leeren String, zu dem wir später die Icons hinzufügen können.\n let icons = \"\";\n let scala = \"\";\n\n // Wenn wir über 100 sind, dividieren wir die Zahl der Icons:\n if (anzahl >= 100) {\n // ich kann auch einen Parameter überschreiben, wenn ich das möchte\n anzahl = anzahl / 10;\n\n // An derselben Stelle muss ich auch die Skala definieren,\n // danach ist ja `anzahl` überschrieben, und ich kann den Test nicht mehr machen\n scala = \" Ein \" + image + \" entspricht 10 \" + image;\n }\n\n // Da wir die Anzahl schon dividiert haben, reicht eine Schleife aus.\n for (let index = 0; index < anzahl; index = index + 1) {\n // Wir fügen dem bestehenden String ein zusätzliches Emoji hinzu\n icons = icons + image;\n }\n\n return icons + scala;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"drawIsotypeWithDivisionAlternative(120, \"🤌🏼\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"drawIsotypeWithDivisionAlternative(12, \"🤌🏼\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"Für was werden die `for`-Schleifen verwendet? \n\nFür unsere Zwecke reichen oft die Methoden von Arrays (die wir am Montag anschauen werden.)\n\nNü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.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"listeVonZahlen = {\n let array = [];\n for (let index = 0; index < 10; ++index) {\n array.push(index + 1);\n }\n return array;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"listeDerListe = {\n let array2 = [];\n for (let index = 0; index < listeVonZahlen.length; ++index) {\n array2.push(listeVonZahlen[index] * 10);\n }\n return array2;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"## Dokumentation und Links zu Schleifen (_loops_)\n\n- [Loops: while and for](https://javascript.info/while-for) (Modern JavaScript)\n- [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) (MDN)\n- [for - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) (Referenz MDN)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"##### Appendix","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"import { style } from \"@cas-datenvisualisierung/style\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"style","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 42:null

Lernziel