index.html

@@ -2125,6 +2125,267 @@
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>this</h3>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                class MyClass {
                                    constructor(a) {
                                        this.a = a;
                                    }
								
                                    getA() {
                                        return this.a;
                                    }
                                }
								
                                const x = new MyClass(5);
                                const y = new MyClass(10);
								
                                console.log(x.getA());
                                console.log(y.getA());
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                5
                                10
                            </code>
                        </pre>
                    </section>
                    <section>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                global.a = 5;

                                function foo() {
                                    this.a += 10;
                                }
								
                                foo();
								
                                console.log(a);
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                15
                            </code>
                        </pre>
                    </section>
                    <section>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                class MyClass {
                                    /* ... */
                                    setA() {
                                        function f() {
                                            this.a += 100;
                                        }
                                        f();
                                    }
                                }
								
                                const x = new MyClass(5);
								
                                x.setA();
								
                                console.log(x.getA());
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                TypeError: Cannot read property 'a' of undefined
                            </code>
                        </pre>
                    </section>
                    <section>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                class MyClass {
                                    /* ... */
                                    setA() {
                                        const me = this;
                                        function f() {
                                            me.a += 100;
                                        }
                                        f();
                                    }
                                }
								
                                const x = new MyClass(5);
								
                                x.setA();
								
                                console.log(x.getA());
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                105
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Arrow-Funktionen</h3>
                        <ul>
                            <li>Kompakte Schreibweise einer normalen Funktion</li>
                            <li>Bei Einzeilern ist das <code>return</code> nicht notwendig</li>
                            <li>this-Pointer des aktuellen Kontextes wird beibehalten</li>
                        </ul>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                // Einzeiler
                                const f1 = _ => 1;
                                const f2 = () => 1;
                                const f3 = (x) => x * x;
                                const f4 = (x, y) => x + y;
								
                                // Mehrzeiler
                                const f5 = (x, y) => {
                                    return x * y;
                                };
                            </code>
                        </pre>
                    </section>
                    <section>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                class MyClass {
                                    /* ... */
                                    setA() {
                                        const f = () => {
                                            this.a += 100;
                                        }
                                        f();
                                    }
                                }
								
                                const x = new MyClass(5);
								
                                x.setA();
								
                                console.log(x.getA());
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                105
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Generator-Funktionen</h3>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                function* generator() {
                                    let i = 0;
								
                                    while(true) {
                                        yield i;
                                        i++;
                                    }
                                }
								
                                const g = generator();
								
                                console.log(g.next().value);
                                console.log(g.next().value);
                                console.log(g.next().value);
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                1
                                2
                                3
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Generator-Funktionen</h3>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                function* generator() {
                                    yield 1;
                                    yield 2;
                                    yield 3;
                                }
								
                                const g = generator();
								
                                for (const i of g) {
                                    console.log(i);
                                }
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                1
                                2
                                3
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Nützliche Array-Funktionen</h3>
                    </section>
                    <section>
                        Aufgabe: Schreibe ein Programm, das den Gesamtumsatz aus dem ersten Halbjahr berechnet
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                const revenues = [
                                    {month: 0, revenue: 1000},
                                    {month: 1, revenue: 2000},
                                    {month: 2, revenue: 3000},
                                    {month: 3, revenue: 4000},
                                    {month: 4, revenue: 5000},
                                    {month: 5, revenue: 6000},
                                    {month: 6, revenue: 6000},
                                    {month: 7, revenue: 5000},
                                    {month: 8, revenue: 4000},
                                    {month: 9, revenue: 3000},
                                    {month: 10, revenue: 2000},
                                    {month: 11, revenue: 1000}
                                ];
								
                                let totalRevenue = 0;
								
                                /* ... */
								
                                console.log(totalRevenue);
                            </code>
                        </pre>
                    </section>
                    <section>
                        Lösung
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                totalRevenue = revenues
                                    .filter((revenue) => revenue.month < 6)
                                    .map((revenue) => revenue.amount)
                                    .reduce((sum, amount) => sum + amount, 0);
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                21000
                            </code>
                        </pre>
                    </section>
                    <section>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                const a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
								
                                a.filter((e) => e > 2); // Filterung
                                a.map((e) => e * 2); // Umformung
                                a.reduce((p, e) => p + e, 0); // Zusammenrechnung / Reduzierung
                                a.some((e) => e > 5); // true wenn min. ein Element die Bedingung erfüllt
                                a.every((e) => e > 5); // true wenn alle Elemente die Bedingung erfüllen
                            </code>
                        </pre>
                    </section>
                </section>
            </div>
        </div>