| | |
|---|
| | | <li>HTML/CSS/JS</li> |
|---|
| | | <li>HTTP-Protokoll</li> |
|---|
| | | <li>JSON</li> |
|---|
| | | <li>Debugger</li> |
|---|
| | | </ul> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | <h3>Fortgeschrittenes</h3> |
|---|
| | | <ul> |
|---|
| | | <li>JavaScript</li> |
|---|
| | | <li>NodeJS</li> |
|---|
| | | <li>Responsive Design</li> |
|---|
| | | <li>CSS-Animationen</li> |
|---|
| | | <li>NodeJS</li> |
|---|
| | | <li>WebComponents / lit</li> |
|---|
| | | <li>Canvas-Element</li> |
|---|
| | | <li>Datenbank</li> |
|---|
| | | </ul> |
|---|
| | | </section> |
|---|
| | |
|---|
| | | <section> |
|---|
| | | <h3>Interessante Technologien</h3> |
|---|
| | | <ul> |
|---|
| | | <li>Canvas-Element</li> |
|---|
| | | <li>CSS-Animationen</li> |
|---|
| | | <li>WebSockets</li> |
|---|
| | | <li>WebWorker</li> |
|---|
| | | <li>ServiceWorker</li> |
|---|
| | |
|---|
| | | </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>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> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | <h3>Ausgaben</h3> |
|---|
| | | <pre> |
|---|
| | | <code class="js" data-trim data-line-numbers> |
|---|
| | | console.log("Hello World!"); |
|---|
| | | </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>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> |
|---|
| | | 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["a"] = 1; // alternativ |
|---|
| | | |
|---|
| | | 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', '$ !', 'true' ] |
|---|
| | | </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> |
|---|
| | | <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> |
|---|
| | | <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; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // jede Funktion besitzt einen Prototypen |
|---|
| | | 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> |
|---|
| | | <pre> |
|---|
| | | <code class="bash" data-trim data-line-numbers> |
|---|
| | | 6 |
|---|
| | | 20 |
|---|
| | | </code> |
|---|
| | | </pre> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | <img data-src="/assets/images/constructor-and-its-prototype.svg"> |
|---|
| | | </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> |
|---|
| | | <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>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-13|15-18|20-29"> |
|---|
| | | // Oberklasse |
|---|
| | | function Shape() { |
|---|
| | | } |
|---|
| | | |
|---|
| | | Shape.prototype.getType = function() { |
|---|
| | | 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"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | 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> |
|---|
| | | <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> |
|---|
| | | Lösung: |
|---|
| | | <pre> |
|---|
| | | <code class="js" data-trim data-line-numbers> |
|---|
| | | const delay = function(ms) { |
|---|
| | | return new Promise(function(resolve, reject) { |
|---|
| | | setTimeout(function() { |
|---|
| | | resolve(); |
|---|
| | | }, ms); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 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> |
|---|
| | | Rückgabewerte mit Promises |
|---|
| | | <pre> |
|---|
| | | <code class="js" data-trim data-line-numbers> |
|---|
| | | const p = new Promise(function(resolve, reject) { |
|---|
| | | resolve("ok"); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | p.then(function(value) { |
|---|
| | | console.log(value); |
|---|
| | | }); |
|---|
| | | </code> |
|---|
| | | </pre> |
|---|
| | | <pre> |
|---|
| | | <code class="bash" data-trim data-line-numbers> |
|---|
| | | ok |
|---|
| | | </code> |
|---|
| | | </pre> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | Fehlerbehandlung mit Promises |
|---|
| | | <pre> |
|---|
| | | <code class="js" data-trim data-line-numbers> |
|---|
| | | const p = new Promise(function(resolve, reject) { |
|---|
| | | reject(new Error("Fehler")); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | p |
|---|
| | | .then(function() { |
|---|
| | | console.log("Ich werde nicht aufgerufen") |
|---|
| | | }) |
|---|
| | | .catch(function(e) { |
|---|
| | | console.log(e.message); |
|---|
| | | }); |
|---|
| | | </code> |
|---|
| | | </pre> |
|---|
| | | <pre> |
|---|
| | | <code class="bash" data-trim data-line-numbers> |
|---|
| | | Fehler |
|---|
| | | </code> |
|---|
| | | </pre> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | Datei lesen mit NodeJS |
|---|
| | | <pre> |
|---|
| | | <code class="js" data-trim data-line-numbers> |
|---|
| | | const fs = require("fs"); |
|---|
| | | |
|---|
| | | fs.readFile("./hello.txt", {encoding: "utf8"}, function(data) { |
|---|
| | | console.log(data); |
|---|
| | | }); |
|---|
| | | </code> |
|---|
| | | </pre> |
|---|
| | | <pre> |
|---|
| | | <code class="bash" data-trim data-line-numbers> |
|---|
| | | Hello World! |
|---|
| | | |
|---|
| | | </code> |
|---|
| | | </pre> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | Aufgabe: "Promisifiziere" analog zu "delay" in der letzten Aufgabe den Aufruf von fs.readFile() |
|---|
| | | <pre> |
|---|
| | | <code class="js" data-trim data-line-numbers> |
|---|
| | | const fs = require("fs"); |
|---|
| | | |
|---|
| | | function readFile() { |
|---|
| | | // implementieren |
|---|
| | | } |
|---|
| | | |
|---|
| | | readFile.then(function(content) { |
|---|
| | | console.log(content); |
|---|
| | | }); |
|---|
| | | </code> |
|---|
| | | </pre> |
|---|
| | | <pre> |
|---|
| | | <code class="bash" data-trim data-line-numbers> |
|---|
| | | Hello World! |
|---|
| | | </code> |
|---|
| | | </pre> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | Aufgabe: Nutze die vorherige Lösung nun für eine Promise-Kette, sodass die Inhalte der zwei Dateien "hello.txt" und "hallo.txt" nacheinander ausgegeben werden: |
|---|
| | | <pre> |
|---|
| | | <code class="bash" data-trim data-line-numbers> |
|---|
| | | Hello World! |
|---|
| | | |
|---|
| | | Hallo Welt! |
|---|
| | | |
|---|
| | | </code> |
|---|
| | | </pre> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | <h3>Async - Await</h3> |
|---|
| | | <ul> |
|---|
| | | <li>Syntaktischer Zucker für Promises</li> |
|---|
| | | <li>Nutzung von <code>await</code> nur im Kontext einer <code>async</code>-Funktion möglich</li> |
|---|
| | | </ul> |
|---|
| | | <pre> |
|---|
| | | <code class="js" data-trim data-line-numbers> |
|---|
| | | async function wrapper() { |
|---|
| | | const p = new Promise(function(resolve, reject) { |
|---|
| | | resolve("Hello from Promise!"); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | const result = await p; |
|---|
| | | |
|---|
| | | console.log(result); |
|---|
| | | } |
|---|
| | | |
|---|
| | | wrapper(); |
|---|
| | | </code> |
|---|
| | | </pre> |
|---|
| | | <pre> |
|---|
| | | <code class="bash" data-trim data-line-numbers> |
|---|
| | | Hello from Promise! |
|---|
| | | </code> |
|---|
| | | </pre> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | Aufgabe: Schreibe die Lösung der vorherigen Aufgabe nach Async - Await um |
|---|
| | | </section> |
|---|
| | | </section> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
