Merge branch 'draft'

Sascha Schulz

2023-05-09 d83a22e9d87ae129f4277a35a61e82d6d7c1837b

Merge branch 'draft'

 assets/images/mdn-prototype.jpg

 index.html

@@ -1363,9 +1363,26 @@
                        </pre>
                    </section>
                    <section>
                        <h3>Lösung</h3>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                Array.prototype.sum = function() {
                                    let sum = 0;
								
                                    for (let number of this) {
                                        sum += number;
                                    }
								
                                    return sum;
                                }
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Vererbung</h3>
                        <pre>
                            <code class="js" data-trim data-line-numbers="1-11|13-14|16-24">
                            <code class="js" data-trim data-line-numbers="1-13|15-18|20-29">
                                // Oberklasse
                                function Shape() {
                                }
                                
@@ -1373,18 +1390,22 @@
                                    return "Shape";
                                }
                                
                                // Unterklasse
                                function Rectangle(a, b) {
                                    this.a = a;
                                    this.b = b;
                                }
                                
                                // Prototype der Oberklasse in die Unterklasse kopieren
                                Rectangle.prototype = Object.create(Shape.prototype);
                                // Konstruktor der Oberklasse am Prototypen durch den eigenen ersetzen
                                Rectangle.prototype.constructor = Rectangle;
                                
                                const r = new Rectangle(2, 3);
                                
                                console.log(r.getType());
                                
                                // .getType() selber implementieren
                                Rectangle.prototype.getType = function() {
                                    return "Rectangle";
                                }
@@ -1402,6 +1423,225 @@
                    <section>
                        <img data-src="/assets/images/inheritance-es5.svg">
                    </section>
                    <section>
                        <div>
                            <img width="800" height="500" data-src="/assets/images/mdn-prototype.jpg">
                        </div>
                        <p>
                            <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push" style="font-size: 16px">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push</a>
                        </p>
                    </section>
                    <section>
                        <h3>Objektorientierung in es6</h3>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                class Rectangle {
                                    constructor(a, b) {
                                        this.a = a;
                                        this.b = b;
                                    }
								
                                    getArea() {
                                        return this.a * this.b;
                                    }
                                }
								
                                const r = new Rectangle(2, 3);
								
                                console.log(r.getArea());
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                6
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Vererbung in es6</h3>
                        <pre>
                            <code class="js" data-trim data-line-numbers="1-6|8-16|18-27">
                                // Oberklasse
                                class Shape {
                                    getType() {
                                        return "Shape";
                                    }
                                }
								
                                // Unterklasse erbt von Oberklasse
                                class Rectangle extends Shape {
                                    constructor(a, b) {
                                        super();
								
                                        this.a = a;
                                        this.b = b;
                                    }
                                }
								
                                const r = new Rectangle(2, 3);
								
                                console.log(r.getType());
								
                                // Implementierung per Prototype weiterhin möglich, falls man so will
                                Rectangle.prototype.getType = function() {
                                    return "Rectangle";
                                }
								
                                console.log(r.getType());
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                Shape
                                Rectangle
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Asynchronität</h3>
                        <p>Asynchron: Es wird nicht auf die Beendigung des Befehls gewartet, sondern mit dem Programm fortgefahren. Die Vollendung des asynchronen Befehls tritt <i style="font-style: italic">irgendwann</i> in der Zukunft ein.</p>
                    </section>
                    <section>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                setTimeout(callback, time); // Ausführung nach [time] Millisekunden
                                setInterval(callback, interval); // Ausführung alle [interval] Millisekunden
                            </code>
                        </pre>
                    </section>
                    <section>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                setTimeout(function() {
                                    // Code, der nach 2 Sekunden ausgeführt wird
                                    console.log("zweiter");
                                }, 2000);
								
                                console.log("erster");
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                erster
                                zweiter
                            </code>
                        </pre>
                    </section>
                    <section>
                        <p>Aufgabe: Schreibe ein Programm, das zwei weitere beliebige Texte mit jeweils 2 Sekunden Verzögerung von einander ausgibt, d.h.</p>
                        <p>"erster" -> 2s -> "zweiter" -> 2s -> "Text A" -> 2s -> "Text B"</p>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                setTimeout(function() {
                                    console.log("zweiter");
								
                                    // weiterer Code
                                }, 2000);
								
                                console.log("erster");
                            </code>
                        </pre>
                    </section>
                    <section>
                        Lösung: Callback-Hell oder Pyramide des Todes
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                setTimeout(function() {
                                    console.log("zweiter");
								
                                    setTimeout(function() {
                                        console.log("Text A");
								
                                        setTimeout(function() {
                                            console.log("Text B");
										
											
                                        }, 2000);
                                    }, 2000);
                                }, 2000);
								
                                console.log("erster");
                            </code>
                        </pre>
                    </section>
                    <section>
                        Hilfsmittel: Promises
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                new Promise(function (resolve, reject) {
                                    // ich bin fertig
                                    resolve();
								
                                    // es ist ein Fehler aufgetreten
                                    reject();
                                });
                            </code>
                        </pre>
                    </section>
                    <section>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                const p = new Promise(function (resolve, reject) {...});
                                const p2 = new Promise(function (resolve, reject) {...});
                                const p3 = new Promise(function (resolve, reject) {...});
                                const p4 = new Promise(function (resolve, reject) {...});
								
                                p
                                    .then(function() { return p2; })
                                    .then(function() { return p3; })
                                    .then(function() { return p4; });
                            </code>
                        </pre>
                    </section>
                    <section>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                console.log("erster");
								
                                delay(2000)
                                    .then(function () {
                                        console.log("zweiter");
								
                                        return delay(2000);
                                    })
                                    .then(function() {
                                        console.log("Text A");
								
                                        return delay(2000);
                                    })
                                    .then(function() {
                                        console.log("Text B");
                                    })
                            </code>
                        </pre>
                    </section>
                    <section>
                        Aufgabe: Implementiere die Funktion "delay"
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                const delay = function() {
                                    // implementieren
                                }
								
                                console.log("erster");
								
                                delay(2000)
                                    .then(function () {
                                        console.log("zweiter");
								
                                        return delay(2000);
                                    })
                                    .then(function() {
                                        console.log("Text A");
								
                                        return delay(2000);
                                    })
                                    .then(function() {
                                        console.log("Text B");
                                    })
                            </code>
                        </pre>
                    </section>
                </section>
            </div>
        </div>