add js

Sascha Schulz

2023-04-18 29d40266e843e5985aa99c9179d1c972ddab183c

add js

 dist/theme/night-custom.css

@@ -374,3 +374,7 @@
  transform: translateX(-50%);
  width: 100%;
}

.italic {
  font-style: italic;
}

 index.html

@@ -895,6 +895,398 @@
                        </pre>
                    </section>
                </section>
                <section>
                    <section>
                        <h2>JavaScript</h2>
                    </section>
                    <section>
                        <style>
                            table.my-table td:not(:first-child) {
                                text-align: center;
                            }
							
                            table.my-table td:not(:last-child), table.my-table th:not(:last-child) {
                                border-right: 1px solid white;
                            }
							
                            table.my-table td {
                                vertical-align: middle;
                            }
                        </style>
                        <table class="my-table">
                            <tr>
                                <th></th>
                                <th>c / c++</th>
                                <th>Java</th>
                                <th>C#</th>
                                <th>JS</th>
                            </tr>
                            <tr>
                                <td>Formale Spezifikation</td>
                                <td colspan="4" class="fragment">ja</td>
                            </tr>
                            <tr>
                                <td>Übersetzung</td>
                                <td class="fragment">Nativ kompiliert</td>
                                <td class="fragment" colspan="2">Bytecode</td>
                                <td class="fragment">Interpretiert / kompiliert (JIT)</td>
                            </tr>
                            <tr>
                                <td>Typisierung</td>
                                <td colspan="3" class="fragment">statisch</td>
                                <td class="fragment">dynamisch</td>
                            </tr>
                            <tr>
                                <td>Speicher-Management</td>
                                <td class="fragment">Manuell</td>
                                <td class="fragment" colspan="3">Garbage Collector</td>
                            </tr>
                        </table>
                    </section>
                    <section>
                        <h3>Begrifflichkeiten</h3>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                function add(x, y) {
                                    return x + y;
                                }
								
                                const a = 5;
                                const b = add(a, 6);
                                const c = [];
                            </code>
                        </pre>
                        <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>Ausführung</h3>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                node index.js
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Ausgaben</h3>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                console.log("Hello World!");
                            </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>
                            <code class="js" data-trim data-line-numbers>
                                //  < es6
                                var x = 1;
								
                                // >= es6
                                let y = 2;
                                const z = 3;
                            </code>
                        </pre>
                    </section>
                    <section>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                var yes = false;

                                if (yes) {
                                    var a = 1;
                                }
								
                                console.log(a);
                            </code>
                        </pre>
                        <pre class="fragment">
                            <code class="bash" data-trim data-line-numbers>
                                undefined
                            </code>
                        </pre>
                    </section>
                    <section>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                var yes = false;

                                if (yes) {
                                    let a = 1;
                                }
								
                                console.log(a);
                            </code>
                        </pre>
                        <pre class="fragment">
                            <code class="bash" data-trim data-line-numbers>
                                ReferenceError: a is not defined
                            </code>
                        </pre>
                    </section>
                    <section>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                function foo() {
                                    var yes = false;
								
                                    if (yes) {
                                        var a = 1;
                                    }
                                }
								
                                foo();
								
                                console.log(a);
                            </code>
                        </pre>
                        <pre class="fragment">
                            <code class="bash" data-trim data-line-numbers>
                                ReferenceError: a is not defined
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3><code>var</code></h3>
                        <ul>
                            <li>hat <code>function</code>-Scope</li>
                            <li>wird durch <span class="italic">hoisting</span> ("hochziehen") aus dem Block heraus an den Start der Funktion gezogen</li>
                        </ul>
                    </section>
                    <section>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                var yes = false;
                                var a;

                                if (yes) {
                                    a = 1;
                                }
								
                                console.log(a);
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3><code>let</code>, <code>const</code></h3>
                        <ul>
                            <li>haben intuitiven Block-Scope (wie viele andere Programmiersprachen auch)</li>
                            <li>daher nur an Ort und Stelle gültig in der angegebenen Reihenfolge</li>
                        </ul>
                    </section>
                    <section>
                        <h3>Datentypen</h3>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                let x = 5; // Number (Integer)
                                let f = 1.25; // Number (Float)
                                let b = true; // Boolean
                                let s = "hallo"; // String
                                let a = []; // Array
                                let o = {}; // Objekt
                                let nan = NaN; // Not a Number
                                let n = null; // Null
                                let u = undefined; // Undefiniert
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Arrays</h3>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                let a = [1, 2, 3];
								
                                a.push(4);
                                a.push(5);
								
                                a.pop();
								
                                console.log(a);
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                [1, 2, 3, 4]
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Objekte</h3>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                let o = {x: 1, y: 2};
								
                                console.log(o.z);
								
                                console.log(o);
								
                                o.z = 3;
								
                                console.log(o);
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                undefined
                                { x: 1, y: 2 }
                                { x: 1, y: 2, z: 3 }
                            </code>
                        </pre>
                    </section>
                    <section>
                        <div>Objekte funktionieren intern wie Hash-Maps</div>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                let o = {};
								
                                o.a = 1;
								
                                o["$ !"] = 2;
								
                                console.log(Object.keys(o));
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                ['a', '$ !']
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Funktionen</h3>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                function foo() {
                                    console.log("foo");
                                }
								
                                function bar(a) {
                                    return a;
                                }
								
                                foo();
								
                                const a = bar(1);
								
                                console.log(a);
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                foo
                                1
                            </code>
                        </pre>
                    </section>
                    <section>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                let sum = function(a, b) {
                                    return a + b;
                                }
								
                                let subtract = function() {
                                    console.log(arguments);
								
                                    return arguments[0] - arguments[1];
                                }
								
                                console.log(sum(1, 2));
                                console.log(subtract(1, 2));
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Funktionen als Konstruktor</h3>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                function Rectangle(a, b) {
                                    this.a = a;
                                    this.b = b;
                                }
								
                                const r = new Rectangle(2, 3);
								
                                console.log(r.a);
                            </code>
                        </pre>
                        <pre>
                            <code class="bash" data-trim data-line-numbers>
                                2
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Objektorientierung</h3>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                function Rectangle(a, b) {
                                    this.a = a;
                                    this.b = b;
                                }
								
                                Rectangle.prototype.getArea = function() {
                                    return this.a * this.b;
                                }
								
                                const r1 = new Rectangle(2, 3);
                                const r2 = new Rectangle(4, 5);
								
                                console.log(r1.getArea());
                                console.log(r2.getArea());
                            </code>
                        </pre>
                    </section>
                    <section>
                        <div>Dynamische Änderung des Prototypen</div>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                function Rectangle(a, b) {
                                    this.a = a;
                                    this.b = b;
                                }
								
                                const r = new Rectangle(2, 3);
								
                                console.log(r.getArea);
								
                                Rectangle.prototype.getArea = function() {
                                    return this.a * this.b;
                                }
								
                                console.log(r.getArea);
                            </code>
                        </pre>
                    </section>
                    <section>
                        <pre>
                            <code class="js" data-trim data-line-numbers>
                                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;
                                }
								
                                const r = new Rectangle(2, 3);
								
                                console.log(Object.keys(r));
                            </code>
                        </pre>
                    </section>
                </section>
            </div>
        </div>