From e863fb9fc287ff7b9ad48b0715e8880b632c9435 Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Di, 09 Mai 2023 15:55:00 +0200
Subject: [PATCH] add es6 oop and asynchronicity
---
index.html | 240 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
assets/images/mdn-prototype.jpg | 0
2 files changed, 239 insertions(+), 1 deletions(-)
diff --git a/assets/images/mdn-prototype.jpg b/assets/images/mdn-prototype.jpg
new file mode 100644
index 0000000..47796c3
--- /dev/null
+++ b/assets/images/mdn-prototype.jpg
Binary files differ
diff --git a/index.html b/index.html
index 257b74d..622ff0d 100644
--- a/index.html
+++ b/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,223 @@
<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>
+ 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", um die Promise-Kette lauffähig zu bekommen
+ </section>
</section>
</div>
</div>
--
Gitblit v1.9.3