add alternation, loops and inheritance

Sascha Schulz

2023-04-25 1e2b79bfaabce7bfac9e1e9cd94536b19535e86c

 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>