ibwgr · marcorensch · May 6, 2022 · May 18, 2022 · May 19, 2022 · May 19, 2022
diff --git a/meineLoesungen/closures.js b/meineLoesungen/closures.js
@@ -0,0 +1,10 @@
+// 1
+// a. Was gibt folgender Code aus?
+
+for (var i = 0; i < 4; i++) {
+  setTimeout(() => {
+    console.log(i)
+  }, 2000)
+}
+
+// b. Wie kann ich das Programm ändern, damit es tut was es tun sollte.
diff --git a/meineLoesungen/flow-control-funktional.js b/meineLoesungen/flow-control-funktional.js
@@ -0,0 +1,34 @@
+// Soll die Quersumme 13 ergeben
+const a = [1,34,5, 0, -4]
+// let b = a.reduce((a,sum) => sum + a)
+// console.log(b) // 40 => Falsch
+
+
+// https://bobbyhadz.com/blog/javascript-split-number-into-array
+let b = a.reduce((sum,a) => {
+    if(a > 0 && a < 10){
+        return sum + a
+    }
+    if(a >= 10){
+        let digits = Array.from(String(a), Number)
+        return sum + digits.reduce((d,s) => d+s)
+    }
+    return sum
+})
+console.log(b)
+
+// Funktional:
+function quersumme(arrayOfDigits){
+    console.log(arrayOfDigits)
+    return arrayOfDigits.reduce((sum, n)=>{
+        if(n > 0 && n < 10){
+            return sum + n
+        }
+        if(n >= 10){
+            return sum + Array.from(String(n), Number).reduce((s,d) => d+s)
+        }
+        return sum
+    })
+}
+console.log(quersumme(a))
+
diff --git a/meineLoesungen/fn-objects-callbacks.js b/meineLoesungen/fn-objects-callbacks.js
@@ -0,0 +1,18 @@
+// 1
+// gegeben
+// function add(a, b){
+//     return a + b
+// }
+//
+// Erstelle eine Funktion namens aPlusb welche einen Parameter p entgegen nimmt,
+// und intern immer add mit a=20 aufruft, b soll mit p belegt werden.
+// Gib das Ergebnis der Berechnung zurück.
+// Versuche zwei Lösungs-Varianten zu finden (Hint: bind).
+
+
+
+// 2
+// Die gegebene Funktion add aus Aufgabe 1 soll geändert werden.
+// Neu möchten wir, dass immer alle Argumente geloggt werden (bevor die Berechnung gemacht wird).
+// Der Aufrufer kann selbst entscheiden was für einen Logger er verwenden möchte.
+// z.B. console.log oder console.warn wären mögliche Logger.
diff --git a/meineLoesungen/functional.js b/meineLoesungen/functional.js
@@ -0,0 +1,55 @@
+let zahlen = [5,6,7,8]
+
+// 1
+{
+    // Funktional
+    function sum(array){
+        // Startwert || vorangegangener Wert:sum
+        // Aktuelle Zahl im Array:val
+        return array.reduce((sum,val) =>sum + val, 0);
+    }
+    console.log(sum(zahlen))
+
+    // Imperativ
+    let summe = zahlen.reduce((sum, val) =>sum + val)
+    console.log(summe)
+}
+
+//2
+{
+    //Funktional
+    function even(array){
+        // Current number in iteration:value
+        return array.map(value => value%2 === 0 )
+    }
+
+    console.log(even(zahlen))
+
+    // Imperativ
+    // Current number in iteration:v
+    let isEvenArr = zahlen.map(v => v%2 === 0)
+    console.log(isEvenArr)
+}
+
+// 3.1
+{
+    /**
+     *
+     * @param arr   Array das gefiltert werden soll
+     * @param fn    Funktion die mitgegeben wird um zu prüfen ob Kriterium erfüllt wird
+     */
+
+    function myFilter(arr,fn){
+        let ret = []
+        arr.forEach(v =>{
+            if(fn(v)) ret.push(v)
+        })
+        return ret
+    }
+
+    let filtered = myFilter(zahlen,(n)=>n>6)
+    console.log(filtered)
+}
+
+
+
diff --git a/meineLoesungen/modules/app.mjs b/meineLoesungen/modules/app.mjs
@@ -0,0 +1,13 @@
+// 'use strict'  // optional, weil im Browser via <script type="module" ...> geladen
+
+// import named export
+import {Logger} from './logger.module.mjs'
+import {PI} from './logger.module.mjs'
+// rename import
+import {PI as pii} from './logger.module.mjs'
+
+let l = new Logger(console.log)
+l.warn('hi')
+l.log('du')
+l.log([pii, PI, Logger.PI])
+console.log(document.getElementsByTagName('p'))
diff --git a/meineLoesungen/modules/index.html b/meineLoesungen/modules/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Modules</title>
+    <script type="module" src="app.mjs"></script>
+</head>
+<body>
+<p></p>
+</body>
+</html>
diff --git a/src/modules/logger.module.js → meineLoesungen/modules/logger.module.mjs b/src/modules/logger.module.js → meineLoesungen/modules/logger.module.mjs
diff --git a/meineLoesungen/modules/modules-es5.js b/meineLoesungen/modules/modules-es5.js
@@ -0,0 +1,40 @@
+'use strict'
+
+// Namespacing
+// Datei1
+let ProjectX = ProjectX || {}
+ProjectX.TodoList = ProjectX.TodoList || {}
+ProjectX.TodoList.items = [
+    {
+        text: 'Einkaufen',
+        done: false
+    }
+]
+
+// Datei2
+let ProjectX = ProjectX || {}
+ProjectX.TodoList = ProjectX.TodoList || {}
+ProjectX.TodoList.create = function(text){
+    this.items.push({
+        text,
+        done: false
+    })
+}
+ProjectX.TodoList.create('Abwaschen')
+
+// IIFE
+// loose module augmentation pattern
+let TodoList = (function(modul){
+    let items = []
+    modul.create = function(text){
+        items.push({ text: text, done: false})
+    }
+    modul.getItems = function(){
+        return items;
+    }
+    return modul
+
+})(TodoList || {})
+
+TodoList.create('Einkaufen')
+TodoList
diff --git a/meineLoesungen/objects-js-vs-json.js b/meineLoesungen/objects-js-vs-json.js
@@ -0,0 +1,144 @@
+class User{
+    name; punkte;
+
+    constructor(name, punkte) {
+        this.name = name;
+        this.punkte = punkte;
+    }
+}
+const users = [
+    new User('Marco', 42),
+    new User('Nicole', 94),
+    new User('Esther', 12),
+    new User('Rolf', 34),
+    new User('Cornelia', 62),
+    new User('Beat', 10),
+    new User('Elay', 92),
+    new User('Ladina', 2),
+    new User('Tino', 1),
+]
+
+// 1 Sortiere den Array anhand der Punktezahl aufsteigend.
+
+// {
+//     // Array klonen
+//     let u = [...users]
+//     u.sort((a, b) => (a.punkte > b.punkte) ? 1 : -1)
+//     console.log(u)
+// }
+
+// 2 Erstelle einen JSON String der 3 top Scorer.
+
+// {
+//     // Array klonen
+//     let u = [...users]
+//
+//     function getTopScorerAsJson(scorers) {
+//         scorers.sort((a, b) => (a.punkte < b.punkte) ? 1 : -1)
+//         let top3 = scorers.slice(0, 3)
+//         return JSON.stringify(top3)
+//     }
+//
+//     function getTopNScorers(scorers, n) {
+//         scorers.sort((a, b) => (a.punkte < b.punkte) ? 1 : -1)
+//         return scorers.slice(0, n)
+//     }
+//
+//     function getNScorersPopped(scorers, n) {
+//         if(n>scorers.length) n = scorers.length
+//         scorers.sort((a, b) => (a.punkte > b.punkte) ? 1 : -1)
+//         let topN = []
+//         for (let i = 0; i < n; i++) {
+//             topN.push(scorers.pop())
+//         }
+//         return topN
+//     }
+//
+//     let top3Json = getTopScorerAsJson(u)
+//     console.log(top3Json)
+//     let topNPopped = getNScorersPopped(u, 22)
+//     console.log("getTopNPopped")
+//     console.log(topNPopped)
+//     // Array klonen
+//     u = [...users]
+//     console.log("get Top n Scorers")
+//     console.log(getTopNScorers(u,12))
+// }
+
+// 3 Wandle den Array der User in ein Array von Objekten in der Form: { content: String, length: Number } um.
+
+// {
+//     function UserToObj(user){
+//         return {content: user.name, length: user.name.length}
+//     }
+//     let u = [...users]
+//     let arrayOfObj = u.map(user => UserToObj(user)).sort((a,b) => (a.length > b.length ? 1 : -1))
+//     console.log(arrayOfObj)
+// }
+
+// 4 Erstelle eine tabellarisch korrekt ausgerichtete Rangliste der 3 top Scorer, im ASCII Format :).
+{
+    function getLengthOfLongest(arrayOfUserObj, key, columnHeader, settings){
+        let length = 0
+        for (let user of arrayOfUserObj){
+            length = user[key].toString().length > length ? user[key].toString().length : length;
+        }
+        length = length < columnHeader.length ? columnHeader.length : length;
+        return length + settings.offsetBefore + settings.offsetAfter
+    }
+    // Klone das Array
+    let u = [...users]
+    function getTopNScorers(scorers, n) {
+        scorers.sort((a, b) => (a.punkte < b.punkte) ? 1 : -1)
+        return scorers.slice(0, n)
+    }
+    let top3 = getTopNScorers(u,12)
+    let columns = ["Name","Punkte"]
+    let settings = {
+        offsetBefore : 0,       // Funktioniert "noch" nicht (ich hasse es wenn die Tabellenrahmen am content kleben)
+        offsetAfter: 0          // Funktioniert "noch" nicht (ich hasse es wenn die Tabellenrahmen am content kleben)
+    }
+    let colLengths = []
+    colLengths.push( getLengthOfLongest(top3, "name", columns[0], settings) )
+    colLengths.push( getLengthOfLongest(top3, "punkte", columns[1], settings) )
+
+    // überschriften
+    let spacers = ""
+    let nameSpacers = Math.abs(columns[0].length - colLengths[0]);
+    if(nameSpacers){
+        for (let i = 0; i < nameSpacers; i++) {
+            spacers += " ";
+        }
+    }
+    // Headers:
+    let header = "|"
+    header += buildColumn(columns[0],colLengths[0],true)
+    header += buildColumn(columns[1],colLengths[1],false)
+    console.log(header)
+
+    // Trenner
+    let divider = "|"
+    for (let i = 0; i < colLengths[0]; i++) {
+        divider+="-"
+    }
+    divider += "|"
+    for (let i = 0; i < colLengths[1]; i++) {
+        divider+="-"
+    }
+    divider += "|"
+    console.log(divider)
+    // Rows:
+    for (let user of top3){
+        let name = buildColumn(user.name, colLengths[0], true)
+        let pts = buildColumn(user.punkte, colLengths[1], false)
+        console.log(`|${name}${pts}`)
+    }
+    function buildColumn(colValue, maxLength, append = true){
+        let spacers = ""
+        let spacerCount = Math.abs(colValue.toString().length - maxLength)
+        for (let i = 0; i < spacerCount; i++) {
+            spacers += " ";
+        }
+        return append ? colValue + spacers + "|" : spacers + colValue + "|"
+    }
+}
diff --git a/meineLoesungen/simple.js b/meineLoesungen/simple.js
@@ -0,0 +1,57 @@
+'use strict'
+
+// Closure
+function add(a){
+    return function(b){
+        return a+b
+    }
+}
+var addTo10 = add(10)(42)
+console.log(addTo10)
+
+// Callback
+{
+    function loooad(imgPath,onloadCallback){
+        console.log(`loading ${imgPath} ...`)
+
+        onloadCallback()
+    }
+
+    loooad('src/img.jpg', function () {
+        console.log('fertig geladen')
+    })
+}
+
+
+// Context ( this )
+// {
+//     let x = 1
+//     let y = 2
+//
+//     function meineFn() {
+//         let y = 20
+//         console.log(this)
+//         console.log(x)
+//         console.log(this.x)
+//     }
+//
+//     meineFn()                                    // Aufruf im globalen Kontext
+// // new meineFn()                                   // Neue Funktion mit eigenem Scope
+// // let obj = { scope: meineFn, x: 2}            // Funktion in Object eingebunden mit eigenem Scope
+// // obj.scope()
+// }
+
+
+// Logger - Context ändern
+
+function logIt(...it){
+    console.log(this, it)
+}
+
+logIt.call(1,'Hello There')
+logIt.apply(1, ['General Kenobi'])
+
+let scopeWith1 = logIt.bind(2, 'foo')
+scopeWith1('huhu')
+
+console.log