25:["$","title",null,{"children":"Data-Driven Web Engineering: Einführung JavaScript (Part 2) | pmeschenmoser-hslu | Observable"}] 49:[] 29:{"id":"7c892b93cd6d162f","slug":null,"title":"Data-Driven Web Engineering: Einführung JavaScript (Part 2)","thumbnail":"50748f9a9363bf14eeacdd38e1d0fbc7e03650b20e1cfd2d1f91196b8f606116","access_level":"public","create_time":"$D2023-02-14T16:34:32.533Z","update_time":"$D2023-02-14T16:34:32.533Z","view_time":null,"first_public_time":"$D2023-02-14T16:34:32.533Z","has_unpublished_edits":null,"fork":{"id":"23b4cf3bdf3ee520","slug":"intro-js-part2","title":"Data-Driven Web Engineering: Einführung JavaScript (Part 2)","owner":{"id":"d453c31c6f30f58d","login":"pmeschenmoser-hslu","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"d453c31c6f30f58d","login":"pmeschenmoser-hslu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/63655b833b666ab4131690b92aedce308446ed9468293aec56b2ee71db090aaa","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":469,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5a3b6ff689928461","login":"pmeschenmoser-hslu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/63655b833b666ab4131690b92aedce308446ed9468293aec56b2ee71db090aaa","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5a3b6ff689928461","login":"pmeschenmoser-hslu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/63655b833b666ab4131690b92aedce308446ed9468293aec56b2ee71db090aaa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Data-Driven Web Engineering: Einführung JavaScript (Part 2)","cells":[{"id":0,"value":"# Data-Driven Web Engineering: Einführung JavaScript (Part 2)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"- Im Part 1 der JavaScript Einführung haben wir u.a. primitive Datentypen sowie Möglichkeiten zur Deklaration von Variablen und Konstanten betrachtet.\n- Im Part 2 werden wir JavaScript *Arrays* und *Objekte* (Objects) kennenlernen. Zudem werden *Funktionen* und *Kontrollstrukturen* behandelt, mit denen der Skriptfluss gesteuert werden kann.\n- Im Folgenden: Funktionen, Arrays, Objekte und Kontrollstrukturen; siehe auch Ackermann Kapitel 4.3-4.5 und JavaScript Referenzen.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"## 1. Funktionen","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"- Codesegmente, die funktional zusammenhängen oder wiederholt aufgerufen werden, können in JavaScript Funktionen (vergleichbar mit Python Funktionen) gepackt werden.\n- Der Funktionskopf besteht i.d.R. aus dem Schlüsselwort *function*, dem Funktionsnamen und optionalen Parametern. Der Funktionsrumpf wird dann von zwei geschweiften Klammern umgeben. Die Funktionsrückgabe wird mit dem Schlüsselwort *return* innerhalb des Funktionsrumpf angegeben. Der Funktionsaufruf erfolgt analog zu dem aus Python. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"{\n function meinFunktionsname(einzigerParameter){\n console.log('Ich nehme das Argument ', einzigerParameter, ' entgegen und multipliziere es mit einer Zufallszahl in [0,1].') \n return Math.random()*einzigerParameter; \n }\n //Funktionsaufruf und Wertzuweisung\n let meinErgebnis = meinFunktionsname(12);\n //damit es im Notebook angezeigt wird:\n return meinErgebnis;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"- **Aufgabe 1.1**: Schreiben Sie eine Funktion, die die Summe von zwei mitgegebenen (numerischen) Argumenten zurückliefert.\n- **Aufgabe 1.2**: Fügen Sie diese Funktion in Ihre Skriptdatei *main.js* aus dem *linking*-Projekt (vom letzten Mal) ein und rufen Sie sie dort auf. Gerne können Sie die nachfolgenden Aufgaben auch innerhalb dieser Skriptdatei umsetzen. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":425,"value":"{\n function meineSumme(par1, par2){\n return par1 + par2; \n }\n\n let meinErgebnis = meineSumme(10, 2); \n return meinErgebnis; \n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"- Auch in JavaScript gibt es anonyme Funktionen, die also mit keinem Funktionsnamen gekennzeichnet werden.\n- Jedoch kann die Funktion an sich in einer Variablen oder Konstanten gespeichert werden und der Aufruf entsprechend erfolgen:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"{\n let meineAnonymeFunktion = function(einzigerParameter){\n console.log('Ich nehme das Argument ', einzigerParameter, ' entgegen und gebe in diesem Fall aber nichts zurück.') \n }\n meineAnonymeFunktion(42)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"- JavaScript bietet mit *(Fat) Arrow Functions* noch Kurzschreibweisen für anonyme Funktionen an, siehe unten. Mehr Details und Möglichkeiten finden Sie in der Mozilla Dokumentation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"{\n //Anonyme Fat Arrow Funktion ohne Rückgabewert:\n let meineAnonymeFunktion = (parameter1, parameter2) => {\n console.log(parameter1, parameter2);\n }\n\n //Anonyme und einzeilige Fat Arrow Funktion mit Rückgabewert:\n let meineIdentitätsfunktion = parameter => parameter; \n\n //Aufruf erfolgt wie gehabt:\n return meineIdentitätsfunktion(2);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"- Und wie in Python können Funktionen auch als Argumente und Rückgabewerte für andere Funktionen dienen. Somit sind Funktionen höherer Ordnung möglich. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"{\n //Beliebige Funktion f wird als erstes Argument mitgegeben: \n function hoehereOrdnung(f, zahl){\n //Zurückgegeben wird eine Funktion, die um die folgende Addition erweitert ist: \n return () => f(zahl) + Math.random();\n }\n //Wir führen das Ergebnis der Funktion höherer Ordnung aus (-> eine Funktion) und liefern das Ausführungsergebnis (hier: Zahl) an das Notebook.\n return hoehereOrdnung(x => x/2, 10)()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"- **Aufgabe 1.3**: Schreiben Sie die Additionsfunktion dreimal in eine anonyme Funktion um. Nutzen Sie im ersten Fall 1) das function-Schlüsselwort, dann 2) eine mehrzeilige Fat Arrow Notation und schliesslich eine einzeilige Fat Arrow Notation.\n- **Sehr einfache Aufgaben auf w3Schools**: 1-3 ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"## 2. Arrays","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"- JavaScript Arrays sind vergleichbar mit Python Listen. Die Elemente eines Arrays können dabei divers sein: Variablen, Konstanten, Funktionen, uvm.\n- Arrays können am einfachsten über die Array-Literal-Schreibweise angegeben werden. Die einzelnen Elemente befinden sich zwischen eckigen Klammern und sind je durch ein Komma voneinander getrennt.\n- Der Zugriff auf ein Element erfolgt über die Angabe der nullbasierten Indexnummer in eckigen Klammern. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":96,"value":"{\n let meinArray = ['meinString', 42, x=>x*2, [1,2,3]]\n //Arrays haben die Eigenschaft length, siehe Konsole:\n console.log(meinArray.length); \n //natürlich können Elemente auch einfach ersetzt werden, hier z.B. das 1.:\n meinArray[1] = Math.random();\n //greife auf das 3. Array-Element zu und liefere davon wiederum das 1. zurück an das Notebook:\n return meinArray[3][1]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"- Natürlich können Arrays auch stark verschachtelt sein:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":147,"value":"[[1], [[2]], [[[3]]], [[[[4]], 5]]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"- Nun gibt es noch zahlreiche Methoden, mit denen Arrays be- und verarbeitet werden können. **Im Folgenden nur ein paar dieser Methoden-- können Sie beschreiben, welchen Effekt jede Zeile hat?**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"{\n let meinArray = ['Apfel', 'Banane', 'Orange']\n meinArray.push('Kiwi'); \n //console.log(meinArray); \n meinArray.splice(1,0,'Mango');\n //console.log(meinArray); \n meinArray.slice(1,2); //Obacht\n //console.log(meinArray); \n meinArray.sort().reverse();\n //console.log(meinArray); \n meinArray = meinArray.map(x => 'Yummy ' + x)\n //console.log(meinArray); \n meinArray = meinArray.filter(x => x.length > 11);\n //console.log(meinArray); \n meinArray.forEach((x,i) => console.log(x,' an Stelle ', i));\n console.log(meinArray); \n return meinArray.join(' und dann ');\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"## 3. Objekte","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":157,"value":"- Das grundsätzliche Prinzip von JavaScript Objekten ist vergleichbar mit dem von Python Dictionaries. Ein Objekt ist eine Sammlung von Eigenschaften, dabei verweisen Schlüssel (*keys* oder auch *property names* ) auf zugehörige Werte (*values*). Die Werte können bspw. Zahlen, Strings, Arrays, Funktionen oder wiederum Objekte sein.\n- Es gibt mehrere Möglichkeiten, um ein Objekt zu erzeugen; wir konzentrieren uns aber auf die nachfolgende Objekt-Literal-Schreibweise. Werte werden also den Schlüsseln innerhalb von geschweiften Klammern zugeordnet: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":167,"value":"{\n //Objekt-Literal-Schreibweise in einer Zeile:\n const oneline = {color:'blue', name:'Opel Corsa'};\n\n //Objekt-Literal-Schreibweise über mehrere Zeilen:\n const multiplelines = {color:'blue',\n name:'Opel Corsa'};\n return multiplelines\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"- Die Schlüssel müssen im Allgemeinen also nicht von Anführungszeichen umgeben sein (vgl. Python Dictionaries), in einigen Fällen jedoch schon. Siehe Beispiel mit Leerzeichen im Schlüssel: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":184,"value":"{\nreturn {mit leerzeichen:42};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"- Der Objektzugriff erfolgt mithilfe von eckigen Klammern oder einer Punktnotation. Mit der Punktnotation wird aber stets der exakte und fixe Name des Schlüssels angegeben, eine Variable/Konstante kann hier also nicht als Schlüssel wirken:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":194,"value":"{\n const meinObjekt = {color:'blue', name:'Opel Corsa'}; \n //die folgenden zwei Zugriffe erfolgen wie gewünscht, 'blue' wird geloggt:\n console.log(meinObjekt['color']);\n console.log(meinObjekt.color); //Punktnotation mit fixer color-Eigenschaft, natürlich auch nur ohne Leerzeichen\n let meineVariable = 'color';\n console.log(meinObjekt[meineVariable]);\n\n //Punktnotation mit Variable/Konstante geht schief:\n console.log(meinObjekt.meineVariable)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"- Sämtliche eigene Schlüssel des Objekts können mit der Methode *Object.keys(...)* abgefragt werden:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":204,"value":"{\n const meinObjekt = {color:'blue', name:'Opel Corsa'}; \n return Object.keys(meinObjekt);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"- Natürlich kann auch abgefragt werden, ob das Objekt einen bestimmte eigene Eigenschaft besitzt: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":216,"value":"{\n const meinObjekt = {color:'blue', name:'Opel Corsa'}; \n return meinObjekt.hasOwnProperty('gewicht');\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"- Und wir können auch Werte eines bestehenden Objekts anpassen oder ein ganzes (Schlüssel,Wert)-Paar mithilfe des Schlüsselworts *delete* entfernen: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":226,"value":"{\n let meinObjekt = {color:'blue', name:'Opel Corsa'}; \n meinObjekt.color = 'red';\n delete meinObjekt.name;\n return meinObjekt;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"- **Aufgabe 3.1:** Gegeben ist das folgende Objekt *a*. Erstellen Sie ein zweites Objekt *b*, in denen Schlüssel und Werte von *a* miteinander vertauscht sind.\n- **Aufgabe 3.2:** Können Sie dieses Objekt *b* auch erstellen, indem Sie Variablen/Konstanten für die Schlüssel nutzen - also ohne *blue* und *Opel Corsa* explizit/fix als Schlüssel für Objekt *b* anzugeben?\n- **Aufgabe 3.3:** Oben im Objekt hat die Gewichtsangabe für den Opel Corsa noch gefehlt. Fügen Sie Ihrem Objekt *b* die Eigenschaft *gewicht* mit dem Wert 1173 hinzu.\n- **Einfache Aufgaben auf w3Schools:** 1-3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":445,"value":"{\n let a = {color:'blue', name:'Opel Corsa'}; \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"## 4. Kontrollstrukturen","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":242,"value":"- Im Folgenden konzentrieren wir uns auf if-Abfragen und for-Schleifen, mit denen der Ablauf bzw. Fluss eines Skript gesteuert werden kann. Weitere Kontrollstrukturen sind z.B. while-Schleifen, do-while-Schleifen und switch-case-Mehrfachverzweigungen.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"### 4.1 If-Abfragen","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":251,"value":"- Das Prinzip ist genauso wie in Python: falls die Abfragebedingung erfüllt wird, werden die im nachfolgenden Block enthaltenen Anweisungen ausgeführt. Minimalbeispiel: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":255,"value":"{\n const meineKonstante = Math.random();\n if (meineKonstante < 0.5){ //Bedingung in runden Klammern wird zu true oder false evaluiert\n //Anweisungen zwischen den geschweiften Klammern werden nur bei true ausgeführt:\n console.log('Zufallszahl kleiner als 0.5');\n } //schliessende Klammer des If-Blocks\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"- Mit *else if* können wir eine alternative Bedingung hinzufügen, die geprüft wird, falls die vorherigen Bedingungen nicht erfüllt wurden (vgl. Python's *elif*):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":266,"value":"{\n const meineKonstante = Math.random();\n if (meineKonstante < 0.5){\n console.log('Zufallszahl kleiner als 0.5');\n } else if (meineKonstante > 0.5){ //wird nur geprüft, wenn die erste Bedingung nicht erfüllt wurde\n console.log('Zufallszahl grösser als 0.5');\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"- Und wenn gar nichts mehr hilft: Falls keine der oberen Bedingungen erfüllt wurde, können wir das Schlüsselwort *else* verwenden:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":279,"value":"{\n const meineKonstante = Math.random();\n if (meineKonstante < 0.5){\n console.log('Zufallszahl kleiner als 0.5');\n } else if (meineKonstante > 0.5){ \n console.log('Zufallszahl grösser als 0.5');\n } else {\n console.log('Das war ein ziemlicher Glückstreffer.');\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"- Es gibt auch ein paar Syntaxvarianten, mit denen bspw. einzeilige bedingte Anweisungen (*conditional statements*) umgesetzt werden können, diese werden einfachheitshalber jedoch nicht weiter betrachtet.\n- **Aufgabe 4.1:** Schreiben Sie eine Funktion, die ein Objekt als Argument erwartet. Nutzen Sie if-Bedingungen: Falls das Objekt den Schlüssel *gewicht* besitzt, erhöhen Sie den zugehörigen numerischen Wert um 100. Falls es einen solchen Schlüssel noch nicht gibt, fügen Sie den Schlüssel *gewicht* mit einem beliebigen numerischen Wert in das Objekt ein.\n- **Einfache Aufgaben auf w3Schools:** 1-2 ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":465,"value":"{\n function meineFunc(o){\n if (o.hasOwnProperty('gewicht')){\n o.gewicht = o.gewicht + 100; \n } else {\n o.gewicht = Math.random() * 100;\n }\n console.log(o);\n return o; \n } \n\n \n meineFunc({name:'Opel'});\n meineFunc({name:'Opel', gewicht:1000});\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"## 4.2 For-Schleifen","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":302,"value":"- Prinzip: iteriere über diverse Werte und führe bei jeder Iteration die Anweisungen im Schleifenrumpf einmal aus. In JavaScript gibt es verschiedene Varianten, wir schauen uns zwei genauer an.\n- Mit for-of-Schleifen kann über die Werte eines Arrays oder anderer Iterables (z.B. Mengen) iteriert werden: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":310,"value":"{\n for (let meineVariable of ['hello', 'world']){ //iteriere über Array, das Element jeder Runde ist via meineVariable zu finden.\n console.log(meineVariable);\n }\n\n //Beispiel mit einer Menge\n let meineMenge = new Set(['wir', 'sind', 'alle', 'alle', 'einzigartig'])\n for (let meineVariable of meineMenge){\n console.log(meineVariable);\n }\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"- Bei For-Schleifen mit Zählvariable wird eine numerische Variable *i* gemäss der Angabe im Schleifenkopf angepasst, bis *i* eine Bedingung erfüllt. Pro Anpassung wird der Schleifenrumpf einmal ausgeführt.\n- Im folgenden Beispiel erhält die Zählvariable *i* einen anfänglichen Wert 0. Falls *i* die Bedingung *i<10* erfüllt, wird der Schleifenrumpf einmal ausgeführt. Nach Ausführung wird *i* um 1 erhöht. Falls *i* danach die Bedingung *i<10* erfüllt, wird der Schleifenrumpf einmal ausgeführt. Und so weiter, bis die Bedingung nicht mehr erfüllt wird (*i*=10) und die Schleife verlassen wird. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":330,"value":"{\n for (let i = 0; i < 10; i= i+1){\n console.log(i + '.te Iteration');\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"- Der Schleifenkopf kann selbstverständlich auch anderweitig gesetzt werden, z.B. für eine rückwärts laufende Schleife mit einer anders benannten Zählvariablen:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":339,"value":"{\n for (let j = 50; j > -50; j= j-1){\n console.log('j:', j);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"- Und abschliessend bilden wir noch die Brücke zum ersten Teil der Einführung: Wie unterscheidet sich der Geltungsbereich einer Variablen, wenn diese mit dem Schlüsselwort *var* anstatt mit *let* deklariert wurde? Das sieht man ganz gut an einem Beispiel: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":347,"value":"{\n function test(){\n for (var i = 0; i <10; i= i+1){ //Deklaration der Zählvariable i mit Schlüsselwort var\n //Anweisungen\n }\n console.log(i); //i hat hier den Wert den 10\n \n for (let j = 0; j <10; j= j+1){ //Deklaration der Zählvariable j mit Schlüsselwort let\n //Anweisungen\n }\n //Was passiert, wenn Sie die folgende Zeile auskommentieren und die Zelle ausführen?\n console.log(j); \n }\n\n test();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"- Nach der Deklaration mit *var* ist die Variable für die nachfolgenden Anweisungen in der umgebenden Funktion sichtbar. Die Variable ist also *function scoped*.\n- Nach der Deklaration mit *let* ist die Variable nur im entsprechenden Block (z.B. der for-Schleife, der if-Abfrage) sichtbar. Die Variable ist also *block scoped*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null