add alternation, loops and inheritance

Sascha Schulz

2023-04-25 1e2b79bfaabce7bfac9e1e9cd94536b19535e86c

add alternation, loops and inheritance

 assets/drawio/inheritance-es5.drawio

Neue Datei
@@ -0,0 +1 @@
<mxfile host="Electron" modified="2023-04-25T14:10:31.752Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="JQ0l1Hrx9VWVQ7Cx1PCZ" version="16.1.2" type="device"><diagram id="Fgx6LVVXHmkwZpiPnsWe" name="Page-1">7Zhdk5owFIZ/jTPtxTqGiB+Xu7ptZzvt7NSLLpcZiJBpIEyMK/bXN5RECEGlFrXT9UryQkLynuecEHtwFmcfOUqjLyzAtOcMgqwH5z3HAXAC5E+ubAvFHcNCCDkJ1EOlsCA/sRIHSl2TAK+MBwVjVJDUFH2WJNgXhoY4ZxvzsSWj5ltTFGJLWPiI2up3EoioUCfOuNQ/YRJG+s1gNC3uxEg/rFayilDANhUJPvbgjDMmiqs4m2Gam6d9Kfp92HN3NzGOE9Gmw8Tznvw4ivk4evLuBmKJwPOdGuUV0bVa8CJCKVYzFlttA2frJMD5SIMefNhEROBFivz87kYGXmqRiKlsAXmpxsRc4GzvZMHOAskOZjEWfCsfUZho0zal50BrUcXvodKQCnO4G6l0Ql4oM/7AGKfZmH7KmWBi22CRHFRCic9rT6btaenP5Fz+DC1/vsn0Q0lIrw8PgNemx93vzr9GkPYMXJuokeVZiMVXFB/iCVzEq2HNK8dtZxU8l1VTyyqbpSS4z7c/2UpYgk1PzISULvDtS7Xh5Y2+q5vzrHpzvtWtjIgXNWJ+XeklW2WnvKH7FPPEgbXp1mIh18LW3MfHK7RAXHJyjCs7tpXguQ2x0xrHFAnyak63KaDqDc+MyIWUaTapoVNnolim6lXdvWsDQVjL13oeFj5YA/3ma7fs05HT5eFtM7enTlyGJTA0EajvXm1Rqpd+OO2PR5eFyf7sPASTT9FqRfx2PJUIeZqTFjyVDHlVhM7Nk9uyhjm3GtYFdvZH/V/VsBNq0al1r0Pmhi2Zc2/MdcEctJjjNnQX/PCHrmlsw0n7UFw7/5YF9knybe4FmpSjiTm8JWYXiWmf0RO8kcLupP7uvQWiTDthorcSnP3AM0YZL7eMJaG0JiFKwiTnV3KBpf6QJzHxEb1XN2ISBHRfCTAB76AKjGrmTxtO/6CBorMdaYF9/P/MUmIf/v+bEDhjMwYTOwSjbiIgm+XfzEX+lH/Ww8df</diagram></mxfile>

 assets/images/inheritance-es5.svg

Neue Datei
@@ -0,0 +1,3 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="542px" height="292px" viewBox="-0.5 -0.5 542 292"><defs/><g><rect x="10" y="30" width="120" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 50px; margin-left: 11px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Shape</div></div></div></foreignObject><text x="70" y="54" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">Shape</text></switch></g><ellipse cx="270" cy="50" rx="60" ry="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 50px; margin-left: 211px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Shape.prototype</div></div></div></foreignObject><text x="270" y="54" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">Shape.prototype</text></switch></g><rect x="10" y="140" width="120" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 160px; margin-left: 11px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Rectangle</div></div></div></foreignObject><text x="70" y="164" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">Rectangle</text></switch></g><ellipse cx="270" cy="160" rx="60" ry="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 160px; margin-left: 211px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Rectangle.prototype</div></div></div></foreignObject><text x="270" y="164" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">Rectangle.prototype</text></switch></g><rect x="410" y="35" width="120" height="30" rx="4.5" ry="4.5" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 50px; margin-left: 411px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">getName</div></div></div></foreignObject><text x="470" y="54" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">getName</text></switch></g><path d="M 330 50 L 410 50" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 130 50 L 210 49.76" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 270 120 L 270 96.37" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 270 91.12 L 273.5 98.12 L 270 96.37 L 266.5 98.12 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><path d="M 130 160 L 210 160" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="70" cy="255" rx="25" ry="25" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 48px; height: 1px; padding-top: 255px; margin-left: 46px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">r</div></div></div></foreignObject><text x="70" y="259" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">r</text></switch></g><path d="M 70 230 L 70 186.37" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 70 181.12 L 73.5 188.12 L 70 186.37 L 66.5 188.12 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><rect x="70" y="200" width="110" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 108px; height: 1px; padding-top: 215px; margin-left: 71px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">new Rectangle()</div></div></div></foreignObject><text x="125" y="219" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">new Rectangle()</text></switch></g><rect x="280" y="90" width="60" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 105px; margin-left: 281px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Kopie</div></div></div></foreignObject><text x="310" y="109" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">Kopie</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>

 index.html

@@ -959,9 +959,19 @@
                        <div><span class="fragment">Operator, </span><span class="fragment">Aufruf (Call), </span><span class="fragment">Ausdruck (Expression), </span><span class="fragment">Parameter, </span><span class="fragment">Argument, </span><span class="fragment">Literal, </span></div><div><span class="fragment">Zuweisung (Assignment), </span><span class="fragment">Linke Hand (Left hand), Rechte Hand (Right hand)</span></div>
                    </section>
                    <section>
                        <h3>Vorbereiten der Beispiele (bei Bedarf)</h3>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                # im Ordner 'examples/'
                                . hooks/post-checkout
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Ausführung</h3>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                # node [Script-Datei], z.B.
                                node index.js
                            </code>
                        </pre>
@@ -974,14 +984,7 @@
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Vorbereiten der Beispiele (bei Bedarf)</h3>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                . hooks/post-checkout
                            </code>
                        </pre>
                    </section>
					
                    <section>
                        <h3>Variablen</h3>
                        <pre>
@@ -1098,6 +1101,55 @@
                        </pre>
                    </section>
                    <section>
                        <h3>Alternation</h3>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                if (x == 1) {
                                    // Code
                                }
                                else if (x == 2) {
                                    // alternativer Code
                                }
                                else {
                                    // Fallback
                                }
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Schleifen</h3>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                for (let i = 0; i < 5; i++) {
                                    // Code
                                }
                            </code>
                        </pre>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                const a = [1, 2, 3];
								
                                for (const element of a) {
                                    // Code
                                }
                            </code>
                        </pre>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                while (i == 1) {
                                    // Code
                                }
                            </code>
                        </pre>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                do {
                                    // Code
                                } while (i == 1)
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Arrays</h3>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
@@ -1147,15 +1199,21 @@
                                let o = {};
                                
                                o.a = 1;
                                o["a"] = 1; // alternativ
                                
                                o["$ !"] = 2;
                                o["$ !"] = 2; // so sind auch komplexe Schlüssel möglich
								
                                // o."$ !" = 2; => Syntaxfehler
                                // o.$ ! = 2; => Syntaxfehler
								
                                o[true] = 3;
                                
                                console.log(Object.keys(o));
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                ['a', '$ !']
                                [ 'a', '$ !', 'true' ]
                            </code>
                        </pre>
                    </section>
@@ -1202,6 +1260,13 @@
                                console.log(subtract(1, 2));
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                3
                                [Arguments] { '0': 1, '1': 2 }
                                -1
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Funktionen als Konstruktor</h3>
@@ -1232,6 +1297,7 @@
                                    this.b = b;
                                }
                                
                                // jede Funktion besitzt einen Prototypen
                                Rectangle.prototype.getArea = function() {
                                    return this.a * this.b;
                                }
@@ -1241,6 +1307,12 @@
                                
                                console.log(r1.getArea());
                                console.log(r2.getArea());
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                6
                                20
                            </code>
                        </pre>
                    </section>
@@ -1264,27 +1336,68 @@
                                console.log(r.getArea);
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                undefined
                                [Function (anonymous)]
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Aufgabe</h3>
                        Bringe dem Array eine Methode bei, welche die Summe aller enthaltenen Zahlen zurückgibt
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                const a = [1, 2, 3];
								
                                console.log(a.sum());
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                6
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Vererbung</h3>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                function Shape() {
                                }
								
                                Shape.prototype.getType = function() {
                                    return "Shape";
                                }
								
                                function Rectangle(a, b) {
                                    this.a = a;
                                    this.b = b;
                                    this.getCircumference = function() {
                                        return 2 * a + 2 * b;
                                    };
                                }
                                
                                Rectangle.prototype.getArea = function() {
                                    return this.a * this.b;
                                }
                                Rectangle.prototype = Object.create(Shape.prototype);
                                Rectangle.prototype.constructor = Rectangle;
                                
                                const r = new Rectangle(2, 3);
                                
                                console.log(Object.keys(r));
                                console.log(r.getType());
								
                                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>
                        <img data-src="/assets/images/inheritance-es5.svg">
                    </section>
                </section>
            </div>