From 1e2b79bfaabce7bfac9e1e9cd94536b19535e86c Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Di, 25 Apr 2023 16:12:32 +0200
Subject: [PATCH] add alternation, loops and inheritance
---
index.html | 147 +++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 130 insertions(+), 17 deletions(-)
diff --git a/index.html b/index.html
index 8aa6001..6f46a19 100644
--- a/index.html
+++ b/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>
--
Gitblit v1.9.3