From fc91ffd64c79a0fa8f35e7849e06fe2c825b8c81 Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Mo, 08 Jul 2024 16:18:21 +0200
Subject: [PATCH] add buffer section
---
index.html | 2781 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 2.771 insertions(+), 10 deletions(-)
diff --git a/index.html b/index.html
index 257b74d..31beec7 100644
--- a/index.html
+++ b/index.html
@@ -36,9 +36,16 @@
<ul>
<li>JavaScript</li>
<li>Responsive Design</li>
- <li>NodeJS</li>
<li>WebComponents / lit</li>
+ <li>NodeJS</li>
<li>Datenbank</li>
+ </ul>
+ </section>
+ <section>
+ <h3>Betrieb</h3>
+ <ul>
+ <li>Server einrichten</li>
+ <li>SSL- / TLS-Zertifikate</li>
</ul>
</section>
<section>
@@ -66,13 +73,6 @@
<li>Progressive Web Application</li>
<li>CEF / Electron</li>
<li>WebAssembly</li>
- </ul>
- </section>
- <section>
- <h3>Betrieb</h3>
- <ul>
- <li>Server einrichten</li>
- <li>SSL- / TLS-Zertifikate</li>
</ul>
</section>
<section>
@@ -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,2746 @@
<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(error, 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("./hello.txt").then(function(content) {
+ console.log(content);
+ });
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ Hello World!
+ </code>
+ </pre>
+ </section>
+ <section>
+ Lösung:
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ const fs = require("fs");
+
+ function readFile(path) {
+ return new Promise(function (resolve, reject) {
+ fs.readFile(path, {encoding: "utf8"}, function(error, data) {
+ resolve(data);
+ });
+ });
+ }
+
+ readFile("./hello.txt").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>
+ Lösung:
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ const fs = require("fs");
+
+ function readFile(path) {
+ return new Promise(function (resolve, reject) {
+ fs.readFile(path, {encoding: "utf8"}, function(error, data) {
+ resolve(data);
+ });
+ });
+ }
+
+ readFile("./hello.txt")
+ .then(function(content) {
+ console.log(content);
+
+ return readFile("./hallo.txt");
+ })
+ .then(function(content) {
+ console.log(content);
+ });
+ </code>
+ </pre>
+ <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>
+ Lösung:
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ const fs = require("fs");
+
+ function readFile(path) {
+ return new Promise(function (resolve, reject) {
+ fs.readFile(path, {encoding: "utf8"}, function(error, data) {
+ resolve(data);
+ });
+ });
+ }
+
+ async function wrapper() {
+ const content1 = await readFile("./hello.txt");
+ const content2 = await readFile("./hallo.txt");
+
+ console.log(content1);
+ console.log(content2);
+ }
+
+ wrapper();
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ Hello World!
+
+ Hallo Welt!
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Destructuring</h3>
+ <p>Auflösen von komplexen Strukturen</p>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ // Objekt destrukturieren (per Attribut-Namen)
+ const { a, b } = { a: 1, b: 2 };
+
+ console.log(a);
+ console.log(b);
+
+ // Array destrukturieren (per Position)
+ const [ c, d ] = [3, 4];
+
+ console.log(c);
+ console.log(d);
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ 1
+ 2
+ 3
+ 4
+ </code>
+ </pre>
+ </section>
+ <section>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ // Bei Objekten Elemente umbenennen oder auch auslassen
+ const { a: x, b: y } = { a: 1, b: 2, c: 3 };
+
+ console.log(x);
+ console.log(y);
+
+ // Bei Arrays Elemente auslassen
+ const [ , a, b, , c] = [3, 4, 5, 6, 7, 8];
+
+ console.log(a);
+ console.log(b);
+ console.log(c);
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ 1
+ 2
+ 4
+ 5
+ 7
+ </code>
+ </pre>
+ </section>
+ <section>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ // Verschachteltes Destructuring
+ const {a: [, x, ] } = { a: [0, 1, 2]};
+
+ console.log(x);
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ 1
+ </code>
+ </pre>
+ </section>
+ <section>
+ Aufgabe: x soll die 5 enthalten
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ const o = { a: [0, {b: [0, 5]}, 2]};
+
+ const { /* Destructuring-Ausdruck */ } = o;
+
+ console.log(x);
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ 5
+ </code>
+ </pre>
+ </section>
+ <section>
+ Lösung:
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ const o = { a: [0, { b: [0, 5] }, 2]};
+
+ const { a: [, { b: [, x] }]} = o;
+
+ console.log(x);
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ 5
+ </code>
+ </pre>
+ </section>
+ <section>
+ Aufgabe: x soll die 3 enthalten
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ const o = { a: [0, {b: [0, { c: [{ x: 5 }, { d: 3}] }]}, 2]};
+
+ const { /* Destructuring-Ausdruck */ } = o;
+
+ console.log(x);
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ 3
+ </code>
+ </pre>
+ </section>
+ <section>
+ Lösung:
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ const o = { a: [0, {b: [0, { c: [{ x: 5 }, { d: 3}] }]}, 2]};
+
+ const { a: [, {b: [, { c: [, { d: x}] }] }] } = o;
+
+ console.log(x);
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ 3
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>Destructuring zum parallelen Ausführen von mehreren Promises</p>
+ <pre>
+ <code class="js" data-trim data-line-numbers="1-10|11-21">
+ const fs = require("fs");
+
+ function readFile(path) {
+ return new Promise(function (resolve, reject) {
+ fs.readFile(path, {encoding: "utf8"}, function(error, data) {
+ resolve(data);
+ });
+ });
+ }
+
+ async function wrapper() {
+ const [ content1, content2 ] = await Promise.all([
+ readFile("./hello.txt"),
+ readFile("./hallo.txt")
+ ]);
+
+ console.log(content1);
+ console.log(content2);
+ }
+
+ wrapper();
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Try-Catch-Finally</h3>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ function throwError() {
+ try {
+ throw new Error("Fehler!");
+ return "Hello World!";
+ }
+ catch (e) {
+ return e.message;
+ }
+ finally {
+ console.log("Finally wird immer ausgeführt");
+ return "Finally!";
+ }
+ }
+
+ const result = throwError();
+ console.log(result);
+ </code>
+ </pre>
+ <pre class="fragment">
+ <code class="bash" data-trim data-line-numbers>
+ Finally wird immer ausgeführt
+ Finally!
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>Anwendungsbeispiel für Try-Catch-Finally</p>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ function readFromDatabase() {
+ try {
+ db.connect();
+ return db.read();
+ }
+ catch (e) {
+ console.log(e.stack);
+ return "";
+ }
+ finally {
+ if (db.open) {
+ db.close();
+ }
+ }
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Scope</h3>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ function a() {
+ const x = 5;
+
+ return function() {
+ return x * x;
+ };
+ }
+
+ const squareX = a();
+ const result = squareX();
+
+ console.log(result);
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ 25
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>this</h3>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ class MyClass {
+ constructor(a) {
+ this.a = a;
+ }
+
+ getA() {
+ return this.a;
+ }
+ }
+
+ const x = new MyClass(5);
+ const y = new MyClass(10);
+
+ console.log(x.getA());
+ console.log(y.getA());
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ 5
+ 10
+ </code>
+ </pre>
+ </section>
+ <section>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ global.a = 5;
+
+ function foo() {
+ this.a += 10;
+ }
+
+ foo();
+
+ console.log(a);
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ 15
+ </code>
+ </pre>
+ </section>
+ <section>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ class MyClass {
+ /* ... */
+ setA() {
+ function f() {
+ this.a += 100;
+ }
+ f();
+ }
+ }
+
+ const x = new MyClass(5);
+
+ x.setA();
+
+ console.log(x.getA());
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ TypeError: Cannot read property 'a' of undefined
+ </code>
+ </pre>
+ </section>
+ <section>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ class MyClass {
+ /* ... */
+ setA() {
+ const me = this;
+ function f() {
+ me.a += 100;
+ }
+ f();
+ }
+ }
+
+ const x = new MyClass(5);
+
+ x.setA();
+
+ console.log(x.getA());
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ 105
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Arrow-Funktionen</h3>
+ <ul>
+ <li>Kompakte Schreibweise einer normalen Funktion</li>
+ <li>Bei Einzeilern ist das <code>return</code> nicht notwendig</li>
+ <li>this-Pointer des aktuellen Kontextes wird beibehalten</li>
+ </ul>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ // Einzeiler
+ const f1 = _ => 1;
+ const f2 = () => 1;
+ const f3 = (x) => x * x;
+ const f4 = (x, y) => x + y;
+
+ // Mehrzeiler
+ const f5 = (x, y) => {
+ return x * y;
+ };
+ </code>
+ </pre>
+ </section>
+ <section>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ class MyClass {
+ /* ... */
+ setA() {
+ const f = () => {
+ this.a += 100;
+ }
+ f();
+ }
+ }
+
+ const x = new MyClass(5);
+
+ x.setA();
+
+ console.log(x.getA());
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ 105
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Generator-Funktionen</h3>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ function* generator() {
+ let i = 0;
+
+ while(true) {
+ yield i;
+ i++;
+ }
+ }
+
+ const g = generator();
+
+ console.log(g.next().value);
+ console.log(g.next().value);
+ console.log(g.next().value);
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ 1
+ 2
+ 3
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Generator-Funktionen</h3>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ function* generator() {
+ yield 1;
+ yield 2;
+ yield 3;
+ }
+
+ const g = generator();
+
+ for (const i of g) {
+ console.log(i);
+ }
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ 1
+ 2
+ 3
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Nützliche Array-Funktionen</h3>
+ </section>
+ <section>
+ Aufgabe: Schreibe ein Programm, das den Gesamtumsatz aus dem ersten Halbjahr berechnet
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ const revenues = [
+ {month: 0, revenue: 1000},
+ {month: 1, revenue: 2000},
+ {month: 2, revenue: 3000},
+ {month: 3, revenue: 4000},
+ {month: 4, revenue: 5000},
+ {month: 5, revenue: 6000},
+ {month: 6, revenue: 6000},
+ {month: 7, revenue: 5000},
+ {month: 8, revenue: 4000},
+ {month: 9, revenue: 3000},
+ {month: 10, revenue: 2000},
+ {month: 11, revenue: 1000}
+ ];
+
+ let totalRevenue = 0;
+
+ /* ... */
+
+ console.log(totalRevenue);
+ </code>
+ </pre>
+ </section>
+ <section>
+ Lösung
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ totalRevenue = revenues
+ .filter((revenue) => revenue.month < 6)
+ .map((revenue) => revenue.amount)
+ .reduce((sum, amount) => sum + amount, 0);
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ 21000
+ </code>
+ </pre>
+ </section>
+ <section>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ const a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+ a.filter((e) => e > 2); // Filterung
+ a.map((e) => e * 2); // Umformung
+ a.reduce((p, e) => p + e, 0); // Zusammenrechnung / Reduzierung
+ a.some((e) => e > 5); // true wenn min. ein Element die Bedingung erfüllt
+ a.every((e) => e > 5); // true wenn alle Elemente die Bedingung erfüllen
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Map</h3>
+ <ul>
+ <li>auch als "assoziatives Array" bezeichnet</li>
+ <li>iterierbare Liste</li>
+ <li>ideal zur Assoziation von z.B. Hashes zu Objekt-Instanzen o.ä.</li>
+ <li>nutzbar ab es6 / es2015</li>
+ <li>löst herkömmliche Objekte als Hash-Map ab</li>
+ </ul>
+ </section>
+ <section>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ const m = new Map();
+
+ m.set("a", 0);
+ m.set("a", 1);
+ m.set("b", 2);
+
+ m.has("c"); // => false
+
+ m.delete("b");
+
+ console.log(m.get("a")); // => 1
+ </code>
+ </pre>
+ </section>
+ <section>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ m.forEach((k, v) => console.log(k, v)) // => "a" 1 ...
+
+ for (const entry of m.entries()) {
+ console.log(entry); // => ["a", 1] ...
+ }
+
+ for (const key of m.keys()) {
+ console.log(key); // => "a" ...
+ }
+
+ for (const value of m.values()) {
+ console.log(value); // => "1" ...
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Set</h3>
+ <ul>
+ <li>enthält nur einzigartige Werte</li>
+ <li>iterierbare Liste</li>
+ <li>ideale Struktur, wenn einzelne Werte einzigartig sein sollen</li>
+ <li>nutzbar ab es6 / es2015</li>
+ <li>löst individuelle Lösungen mittels Arrays und Array.prototype.indexOf o.ä. ab</li>
+ </ul>
+ </section>
+ <section>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ const s = new Set();
+
+ s.add("a");
+ s.add("a");
+
+ s.has("c"); // => false
+
+ s.delete("a");
+
+ console.log(s.size); // => 0
+ </code>
+ </pre>
+ </section>
+ <section>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ s.forEach((k, v) => console.log(k, v)) // => "a" "a" ...
+
+ for (const entry of m.entries()) {
+ console.log(entry); // => ["a", "a"] ...
+ }
+
+ for (const key of m.keys()) {
+ console.log(key); // => "a"...
+ }
+
+ for (const value of s.values()) {
+ console.log(value); // => "a" ...
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>DOM-Events</h3>
+ <ul>
+ <li>funktionale Ausführung von Code</li>
+ <li>Trigger können Klicks, Scrollen, Tastendrücke, Änderungen der Fenstergröße usw. sein</li>
+ </ul>
+ </section>
+ <section>
+ <img data-src="/assets/images/dom-events.svg">
+ </section>
+ <section>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ function doSomething(e) {
+ console.log("capture");
+ }
+
+ function click(e) {
+ console.log("bubble");
+ }
+
+ div.addEventListener("click", doSomething, true);
+
+ button.addEventListener("click", click, false /* default */);
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ capturing
+ bubble
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>Aufgabe: Erweitere das vorherige Beispiel so, dass das div-Element einen weiteren Click-Handler bekommt,
+ der den Text "bubble2" anzeigt, nachdem "bubble" in der Konsole geloggt wurde.</p>
+
+ <p>Erwartete Ausgabe:</p>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ capturing
+ bubble
+ bubble2
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>Lösung:</p>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ function doSomething(e) {
+ console.log("capture");
+ }
+
+ // neu
+ function doSomething2(e) {
+ console.log("bubble2");
+ }
+
+ function click(e) {
+ console.log("bubble");
+ }
+
+ div.addEventListener("click", doSomething, true);
+ div.addEventListener("click", doSomething2, false); // neu
+
+ button.addEventListener("click", click, false /* default */);
+ </code>
+ </pre>
+ </section>
+ <section>
+ Die Bubble-Phase stoppen
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ function click(e) {
+ e.stopPropagation()
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>Aufgabe: Ändere das Ergebnis des vorherigen Beispiels, sodass die Bubble-Phase auf Ebene des button-Elements gestoppt wird. Was ändert sich in der Ausgabe?</p>
+ </section>
+ <section>
+ <p>Lösung:</p>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ function doSomething(e) {
+ console.log("capture");
+ }
+
+ function doSomething2(e) {
+ console.log("bubble2");
+ }
+
+ function click(e) {
+ e.stopPropagation();
+ console.log("bubble");
+ }
+
+ div.addEventListener("click", doSomething, true);
+ div.addEventListener("click", doSomething2, false);
+
+ button.addEventListener("click", click, false /* default */);
+ </code>
+ </pre>
+ </section>
+ <section>
+ Events programatisch triggern:
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ button.dispatchEvent(new Event("click"));
+ </code>
+ </pre>
+ </section>
+ <section>
+ Events sind synchron:
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ doSomethingElse();
+
+ button.dispatchEvent(new Event("click"));
+
+ doAnotherThing(); // wird erst ausgeführt, wenn zuvor alle Event-Handler fertig sind
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Strings</h3>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ const empty1 = "";
+ const empty1 = '';
+
+ const s1 = 'abc';
+ const s2 = "abc";
+
+ const s3 = 'a"b"c';
+ const s4 = "a\"b\"c";
+
+ const s5 = 'a\'b\'c';
+ const s6 = "a'b'c";
+
+ const s7 = `a'b'"c"`;
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h5>Strings zusammenfügen</h5>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ const age = 10;
+
+ // Konkatenation
+ const s = "My age is " + number + "!";
+
+ // Interpolation
+ const s = `My age is ${number}!`;
+
+ // => "My age is 10!"
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h5>Template Strings</h5>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ function sayHello() {
+ return "Hello";
+ }
+
+ let interpolation = `${sayHello()}`;
+
+ // => "Hello"
+
+ interpolation = `5 + 5 = ${5+5}`;
+
+ // => "5 + 5 = 10"
+ </code>
+ </pre>
+ </section>
+ <section>
+ lit
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ return html`<div>hello world!</div>`
+ </code>
+ </pre>
+ </section>
+ <section>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ function myTag() {
+ console.log(arguments);
+
+ // return 5;
+ // return true;
+ return "abc";
+ }
+
+ let interpolation = myTag`a ${5} b ${6} c`;
+
+ // => "abc"
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ Arguments(3) [Array(3), 5, 6]
+ 0 : (3) ['a ', ' b ', ' c', raw: Array(3)]
+ 1 : 5
+ 2 : 6
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h5>Aufgabe</h5>
+ <p>Schreibe ein Tag, welches die Zahlen aus den dynamischen Ausdrücken zusammenrechnet (<code>strings.js</code>)</p>
+ </section>
+ <section>
+ <h5>Lösung</h5>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ function add(parts, ...numbers) {
+ return numbers.reduce((p, c) => p + c, 0);
+ }
+
+ let sum = add`a ${5} b ${6} c`;
+
+ console.log(sum);
+
+ // => 11
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h5>Rest-Operator</h5>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ function add(...numbers) {
+ return numbers.reduce((p, c) => p + c, 0);
+ }
+
+ add(1, 2, 3); // => 6
+ </code>
+ </pre>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ const o1 = {a: 1, b: 2};
+ const o2 = {x: 5, y: 6, ...o1};
+ </code>
+ </pre>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ const a1 = [4, 5, 6];
+ const a2 = [1, 2, 3, ...a1];
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Relevante Browser-APIs</h3>
+ </section>
+ <section>
+ <h5>window</h5>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ window.innerWidth; // innere Auflösung des sichtbaren Fensters
+ window.innerHeight;
+ window.outerWidth; // äußere Auflösung des Browserfensters inklusive Adresszeile usw.
+ window.outerHeight;
+
+ window.addEventListener(); // Events an das äußerste "Dach"-Element hängen
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h5>location</h5>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ location.href; // aktuelle URL
+ location.host; // aktuelle Domain, z.B. "www.google.de"
+ location.protocol; // aktuelles Protokoll, z.B. "https:"
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h5>Navigator</h5>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ navigator.language; // bevorzugte Browsersprache, z.B. "de"
+ navigator.userAgent; // z.B. "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) [...]"
+ navigator
+ .mediaDevices
+ .getDisplayMedia(); // Fordere Erlaubis zum Streamen von Anwendungen oder Bildschirmen an
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h5>Document</h5>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ document.body; // <body>-Element der Seite
+ document.activeElement; // aktives Element der Seite, welche gerade den Fokus besitzt
+ document.cookie; // für die aktuelle Seite gesetzte Cookies
+ document.execCommand("copy"); // Texte in die Zwischenablage zu schreiben
+ document.createElement("div"); // erzeuge neues DOM-Element mit angegebenen Tag
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h5>LocalStorage</h5>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ // auf 5MB Daten pro Domain begrenzt
+ localStorage.getItem(key); // Element holen
+ localStorage.setItem(key, value); // Element setzen
+ localStorage.removeItem(key); // Element entfernen
+ </code>
+ </pre>
+ </section>
+ </section>
+ <section>
+ <section>
+ <h2>CSS</h2>
+ <img data-src="/assets/images/css-sucks.png">
+ </section>
+ <section>
+ <h3>Warum CSS?</h3>
+ <ul>
+ <li>Erhöhte Zugänglichkeit des Inhalts</li>
+ <li>Wiederverwendbarkeit</li>
+ </ul>
+ </section>
+ <section>
+ <h3>Syntax</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ selector [, selector2, selector3, ...] {
+ property1: value;
+ property2: value;
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Beispiel</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ html, body {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Selektoren</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ /* Elemente */
+ html, body {...}
+
+ /* IDs */
+ #my-id {...}
+
+ /* Klassen */
+ .my-class {...}
+
+ /* Pseudo-Klassen */
+ div:hover {...}
+
+ /* Attribute */
+ div[my-attribut="abc"] {...}
+
+ /* Kombinationen */
+ div.my-class#my-id {...}
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Variablen</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ html {
+ --my-background-color: #abcdef;
+ }
+
+ html div {
+ background-color: var(--my-background-color, white);
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Das <code>display</code>-Attribut</h3>
+ </section>
+ <section>
+ <p>block</p>
+ <img data-src="/assets/images/css-display-block.svg">
+ <ul>
+ <li>untereinander angeordnet</li>
+ <li>nehmen sich die volle Breite</li>
+ <li><code>width</code> und <code>height</code> möglich</li>
+ </ul>
+ </section>
+ <section>
+ <p>inline</p>
+ <img data-src="/assets/images/css-display-inline.svg">
+ <ul>
+ <li>Standard bei <code>Custom Elements</code></li>
+ <li>nur so groß wie der content</li>
+ <li><code>width</code> und <code>height</code> nicht möglich</li>
+ <li>nebeneinander angeordnet</li>
+ </ul>
+ </section>
+ <section>
+ <p>inline-block</p>
+ <img data-src="/assets/images/css-display-inline-block.svg">
+ <ul>
+ <li>Mischform von <code>block</code> und <code>inline</code></li>
+ <li>nur so groß wie der content</li>
+ <li><code>width</code> und <code>height</code> möglich</li>
+ <li>nebeneinander angeordnet</li>
+ </ul>
+ </section>
+ <section>
+ <p>none</p>
+ <img data-src="/assets/images/css-display-none.svg">
+ <ul>
+ <li>unsichtbar</li>
+ <li>Platz wird nicht länger beansprucht, so als wenn das Element nicht im DOM wäre</li>
+ </ul>
+ </section>
+ <section>
+ <h3>Das <code>position</code>-Attribut</h3>
+ </section>
+ <section>
+ <p>static</p>
+ <img data-src="/assets/images/css-position-static.svg">
+ <ul>
+ <li>Standard</li>
+ <li>Element wird am Ort der Verankerung im HTML dargestellt</li>
+ </ul>
+ </section>
+ <section>
+ <p>relative</p>
+ <img data-src="/assets/images/css-position-relative.svg">
+ <ul>
+ <li>Verschiebung zur eigentlichen <code>static</code>-Position, z.B. mittels <code>left: 20px</code></li>
+ </ul>
+ </section>
+ <section>
+ <p>absolut</p>
+ <img data-src="/assets/images/css-position-absolute.svg">
+ <ul>
+ <li>relative Verschiebung zum nächsten nicht-<code>static</code>-Parent (sonst <code>window</code>)</li>
+ </ul>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Implementiere folgendes Beispiel-Menü</p>
+ <iframe data-src="/assets/html/css-menu.html"></iframe>
+ </section>
+ <section>
+ <h3>Lösung</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ .menu-item {
+ display: inline-block;
+
+ position: relative;
+ }
+
+ .menu-item .children {
+ display: none;
+
+ position: absolute;
+ }
+
+ .menu-item:hover .children {
+ display: block;
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <pre>
+ <code class="html" data-trim data-line-numbers>
+ <script type="text/template">
+ <div class="menu">
+ <div class="menu-item">Eins</div>
+ <div class="menu-item">
+ Hover Me!
+ <div class="children">
+ <div>Item 1</div>
+ <div>Item 2</div>
+ </div>
+ </div>
+ <div class="menu-item">Drei</div>
+ </div>
+ </script>
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Viewport</h3>
+ <pre>
+ <code class="html" data-trim data-line-numbers>
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <meta charset="utf-8"></meta>
+ <meta
+ name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+ >
+ </head>
+ <body>
+ ...
+ </body>
+ </html>
+ </code>
+ </pre>
+ <p>Ein Muss für alle responsiven Seiten</p>
+ </section>
+ <section>
+ <pre>
+ <code class="bash" data-trim data-line-numbers="">
+ npm install -g http-server
+ cd pfad/zum/projekt
+ http-server --port 8080
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Einheiten</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers="">
+ div {
+ width: 1px; /* Pixel */
+ width: 1pt; /* Points */
+ width: 1em; /* Breite des "M" in der Schriftgröße des Elements */
+ width: 1rem; /* Breite des "M" in der Schriftgröße des HTML-Elements */
+ width: 1vw; /* Prozent der View Width */
+ width: 1%; /* Prozent des Elternelements */
+
+ width: 5fr; /* Fraction (nur im CSS Grid verfügbar) */
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Größeneinheiten in einer HTML-Datei ausprobieren</p>
+ </section>
+ <section>
+ <h3>CSS Flexbox</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers="">
+ .container {
+ display: flex; /* soll ein flexibler Container sein */
+ display: inline-flex;
+
+ flex-direction: column; /* Kinder spaltenweise anordnen */
+ flex-direction: row; /* Kinder zeilenweise anordnen */
+
+ align-items: center;
+ justify-content: center;
+
+ gap: 20px; /* Abstände zwischen den Achsen */
+ }
+
+ .child {
+ flex-grow: 1; /* Anteiliger Platz, wenn mehr als nötig da ist */
+ flex-shrink: 1; /* Anteiliger Platz, wenn weniger als nötig da ist */
+ flex-basis: 20px; /* Grundlage zur Berechnung der finalen Größe */
+ order: 1; /* Erlaubt die Darstellung in anderer Reihenfolge als durch das HTML vorgegeben */
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <img data-src="/assets/images/css-flexbox-axes.drawio.svg">
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Mit CSS Flexbox rumspielen</p>
+ </section>
+ <section>
+ <h3>CSS Grid</h3>
+ </section>
+ <section>
+ <h3>Terminologie</h3>
+ <img data-src="/assets/images/css-grid-terminology.drawio.svg">
+ </section>
+ <section>
+ <pre>
+ <code class="css" data-trim data-line-numbers="">
+ .grid {
+ display: grid; /* inline-grid; */
+
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-template-rows: 1fr 1fr;
+
+ gap: 5px 10px;
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <pre>
+ <code class="html" data-trim data-line-numbers="">
+ <div class="grid">
+ <span>A</span>
+ <span>B</span>
+ <span>C</span>
+ <span>D</span>
+ <span>E</span>
+ <span>F</span>
+ </div>
+ </code>
+ </pre>
+ </section>
+ <section>
+ <iframe data-src="/assets/html/css-grid-example-1.html"></iframe>
+ </section>
+ <section>
+ <pre>
+ <code class="css" data-trim data-line-numbers="">
+ .grid {
+ grid-template-columns: [left] 1fr [column1] 1fr [column2] 1fr [right];
+ grid-template-rows: [top] 1fr [row1] 1fr [bottom];
+ }
+
+ .a {
+ grid-column: 2 / span 2;
+ grid-row: 1;
+ }
+
+ .b {
+ grid-column: left / column2;
+ grid-row: 2;
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <pre>
+ <code class="html" data-trim data-line-numbers="">
+ <div class="grid">
+ <span class="a">A</span>
+ <span class="b">B</span>
+ </div>
+ </code>
+ </pre>
+ </section>
+ <section>
+ <iframe data-src="/assets/html/css-grid-example-2.html"></iframe>
+ </section>
+ <section>
+ <pre>
+ <code class="css" data-trim data-line-numbers="">
+ .grid {
+ grid-template-areas:
+ "header header header"
+ "content content content";
+ }
+
+ .a {
+ grid-area: header;
+ }
+
+ .b {
+ grid-area: 2 / 1 / 2 / 3; /* start-row / start-column / end-row / end-column */
+ /* alternativ auch Namen der Lines möglich */
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <iframe data-src="/assets/html/css-grid-example-3.html"></iframe>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Implementiere folgendes Design:</p>
+ <iframe data-src="/assets/html/css-grid-excercise.html"></iframe>
+ </section>
+ <section>
+ <h3>Lösung</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers="">
+ .grid {
+ display: grid;
+
+ grid-template-rows: 1fr 5fr 1fr;
+
+ gap: 2px;
+
+ grid-template-areas:
+ "navigation header header header"
+ "navigation content content content"
+ "footer footer footer footer"
+ }
+
+ .navigation {
+ grid-area: navigation;
+ }
+
+ .header {
+ grid-area: header;
+ }
+
+ .content {
+ grid-area: content;
+ }
+
+ .footer {
+ grid-area: footer;
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <pre>
+ <code class="html" data-trim data-line-numbers="">
+ <div class="grid">
+ <div class="area navigation">Navigation</div>
+ <div class="area header">Header</div>
+ <div class="area content">Content</div>
+ <div class="area footer">Footer</div>
+ </div>
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h4>Platzierug des Inhalts</h4>
+ <pre>
+ <code class="css" data-trim data-line-numbers="">
+ .grid {
+ align-items: center;
+ justify-items: center;
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <iframe data-src="/assets/html/css-grid-example-4.html"></iframe>
+ </section>
+ <section>
+ <h3>Media Queries</h3>
+ <ul>
+ <li>"Medienabfragen"</li>
+ <li>Styles auf Basis von Eigenschaften des Ausgabemediums</li>
+ <li>Große Bildschirme, kleine Bildschirme, Printmedien...</li>
+ <li>Hinweis: Sollten immer als letztes (unten) in einem Stylesheet sein</li>
+ </ul>
+ </section>
+ <section>
+ <h3>Syntax</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ @media screen and (min-width: 640px) and (max-width: 1024px) {
+ .navigation {
+ display: none;
+ }
+ }
+ </code>
+ </pre>
+ <p>Bedeutung: Wenn die Seite auf einem Display angezeigt wird, welches zwischen 640px und 1024px in der Breite anzeigen kann, dann blende die Navigation aus</p>
+ </section>
+ <section>
+ <h3>Werte für die Ausgabemedien (optional, Standard ist "all")</h3>
+ <ul>
+ <li>all</li>
+ <li>screen</li>
+ <li>print</li>
+ </ul>
+ </section>
+ <section>
+ <h3>Werte für die Eigenschaften mit Typ und Erklärung (kleiner Auszug)</h3>
+ <ul>
+ <li>width (Number, Breite)</li>
+ <li>height (Number, Höhe)</li>
+ <li>orientation (portrait | landscape, Quer- oder Hochformat)</li>
+ <li>hover (none | hover, Hat Zeiger zum Hovern)</li>
+ <li>forced-colors (none | active, erzwungene Farbpalette z.B. bei Sehbehinderung)</li>
+ </ul>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Entwerfe eine kleine Seite mit @media und zeige ein beliebiges Element ab einer bestimmten Höhe oder Breite an (die Größe des Displays kann dynamisch mit den Entwicklertools im Gerätesimulator geändert werden)</p>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Passe die Vorlage "media-queries-responsive-layout.html" mit @media-Queries so an, dass das Menü links ab einer maximalen Breite von 480 Pixel und kleiner nach links oben in die Ecke minimiert wird und nur per Hover wieder 50% Breite und 100% Höhe bekommt</p>
+ </section>
+ <section>
+ <img data-src="/assets/images/media-queries-excercise.png">
+ </section>
+ <section>
+ <h3>Lösung</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ @media screen and (max-width: 480px) {
+ .menu {
+ grid-area: unset;
+
+ position: absolute;
+ }
+
+ .menu:hover {
+ height: 100%;
+ width: 50%;
+ }
+
+ .grid {
+ grid-template-columns: 0fr 5fr;
+ }
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Transform</h3>
+ <ul>
+ <li>rein optisch, d.h. "physische" Größe bleibt erhalten</li>
+ <li>eine Art "Shader" auf Grafikebene</li>
+ <li>Effekte wie Drehung, Vergrößerung, Verschiebung usw.</li>
+ </ul>
+ </section>
+ <section>
+ <h3>Syntax</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ .foo {
+ transform: translateX(20px) translateY(20px);
+ transform-origin: left;
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Mögliche Effekte</h3>
+ <ul>
+ <li>translate</li>
+ <li>rotate</li>
+ <li>scale</li>
+ <li>scew</li>
+ </ul>
+ <p>Die meisten besitzen zusätzlich spezifischere X-, Y- oder 3D-Versionen</p>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Probiere die genannten Transform-Effekte in einer beliebigen Seite aus</p>
+ </section>
+ <section>
+ <h3>Transition</h3>
+ <ul>
+ <li>Elemente können "weich" verändert werden</li>
+ <li>Mögliche Attribute, deren Änderungen animiert werden können sind z.B. <code>width</code>, <code>height</code>, <code>transform</code>, <code>color</code> und viele weitere</li>
+ <li>Das Attribut <code>display</code> lässt sich jedoch nicht animieren</li>
+ </ul>
+ </section>
+ <section>
+ <h3>Syntax</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ .foo {
+ width: 100%;
+ background-color: red;
+ /* transition: [Attribut] [Dauer] [Zeitfunktion] */
+ transition: width 1s ease-out;
+ }
+
+ .foo:hover {
+ width: 50%;
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Beispiel</h3>
+ <iframe data-src="/assets/html/css-transition.html"></iframe>
+ </section>
+ <section>
+ <h3>Animation</h3>
+ <ul>
+ <li>Es können zusätzlich eigene Animationen entworfen werden</li>
+ <li>Definition per <code>Keyframes</code></li>
+ </ul>
+ </section>
+ <section>
+ <h3>Syntax</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ .foo {
+ animation-duration: 3s;
+ animation-name: slidein;
+ }
+
+ @keyframes slidein {
+ from {
+ margin-left: 100%;
+ width: 300%;
+ }
+
+ to {
+ margin-left: 0%;
+ width: 100%;
+ }
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Alternative Syntax</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ .foo {
+ /* ... */
+ }
+
+ @keyframes slidein {
+ 1% {
+ margin-left: 100%;
+ }
+
+ 100% {
+ margin-left: 0%;
+ }
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Beispiel</h3>
+ <iframe data-src="/assets/html/css-animation.html"></iframe>
+ </section>
+ <section>
+ <h3>3D Transform</h3>
+ <ul>
+ <li>Neben den gewohnten X- und Y-Achsen (Breite und Höhe) gibt es auch noch die Z-Achse</li>
+ <li>Bewegung entlang der Sichtachse, d.h. zum bzw. vom Betrachter weg</li>
+ <li>Perspektivische Effekte möglich</li>
+ </ul>
+ </section>
+ <section>
+ <h3>Beispiel</h3>
+ <iframe data-src="/assets/html/css-transform-3d.html"></iframe>
+ </section>
+ <section>
+ <h3>Bedingungen / Optionen</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ .container {
+ perspective: 1000px; /* "Entfernung" des Betrachters */
+
+ transform-style: preserve-3d; /* oder "flat" */
+ }
+
+ .element {
+ backface-visibility: hidden; /* oder "visible" */
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Beispiel</h3>
+ <iframe data-src="/assets/html/css-transform-3d-cube.html"></iframe>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Implementiere einen drehenden Würfel (Vorlage "templates/008-css/css-3d-cube.html")</p>
+ </section>
+ </section>
+ <section>
+ <section>
+ <h2>Web Components</h2>
+ </section>
+ <section>
+ <p>Was sind Web Components?</p>
+ <img data-src="/assets/images/web-components.svg">
+ </section>
+ <section>
+ <p>Vorteile</p>
+ <ul>
+ <li>Entwicklung eigener HTML-Elemente, welche sich nahtlos neben nativen Elementen nutzen lassen</li>
+ <li>Hohe Wiederverwendbarkeit in mehreren Projekten</li>
+ <li>Keine Libraries oder Frameworks notwendig, um eigene Elemente zu entwickeln</li>
+ <li>Kapselung des Scopes sowohl von JS (Variablen...) als auch CSS (id, class...)</li>
+ </ul>
+ </section>
+ <section>
+ <h3>Ansätze in der Vergangenheit und Alternativen heute</h3>
+ </section>
+ <section>
+ <h4>jQuery</h4>
+ <a href="https://api.jqueryui.com/accordion/#entry-examples" target="_blank">https://api.jqueryui.com/accordion/#entry-examples</a>
+ </section>
+ <section>
+ <pre>
+ <code class="html" data-trim data-line-numbers>
+ <script type="text/template">
+ <div id="accordion" class="ui-accordion ui-widget ui-helper-reset" role="tablist">
+ <h3 class="ui-accordion-header ui-corner-top ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active" role="tab" id="ui-id-1" aria-controls="ui-id-2" aria-selected="true" aria-expanded="true" tabindex="0">
+ <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>Section 1</h3>
+ <div class="ui-accordion-content ui-corner-bottom ui-helper-reset ui-widget-content ui-accordion-content-active" id="ui-id-2" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false" style="display: block; height: 166.8px;">
+ <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget.
+ Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,
+ condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros.
+ Nam mi. Proin viverra leo ut odio.</p>
+ </div>
+ <h3 class="ui-accordion-header ui-corner-top ui-state-default ui-accordion-icons ui-accordion-header-collapsed ui-corner-all" role="tab" id="ui-id-3" aria-controls="ui-id-4" aria-selected="false" aria-expanded="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>Section 2</h3>
+ <div class="ui-accordion-content ui-corner-bottom ui-helper-reset ui-widget-content" id="ui-id-4" aria-labelledby="ui-id-3" role="tabpanel" aria-hidden="true" style="display: none; height: 166.8px;">
+ <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus.
+ Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit,
+ faucibus interdum tellus libero ac justo.</p>
+ </div>
+ <h3 class="ui-accordion-header ui-corner-top ui-state-default ui-accordion-icons ui-accordion-header-collapsed ui-corner-all" role="tab" id="ui-id-5" aria-controls="ui-id-6" aria-selected="false" aria-expanded="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>Section 3</h3>
+ <div class="ui-accordion-content ui-corner-bottom ui-helper-reset ui-widget-content" id="ui-id-6" aria-labelledby="ui-id-5" role="tabpanel" aria-hidden="true" style="display: none; height: 166.8px;">
+ <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus.
+ Quisque lobortis.Phasellus pellentesque purus in massa.</p>
+ <ul>
+ <li>List item one</li>
+ <li>List item two</li>
+ <li>List item three</li>
+ </ul>
+ </div>
+ </div>
+ </script>
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h4>angular</h4>
+ <img data-src="/assets/images/web-components-angular.png">
+ </section>
+ <section>
+ <pre>
+ <code class="html" data-trim data-line-numbers>
+ <script type="text/template">
+ <app-root _nghost-ng-c3715250071="" ng-version="17.0.0"><app-top-bar _ngcontent-ng-c3715250071="" _nghost-ng-c3918259376=""><a _ngcontent-ng-c3918259376="" routerlink="/" ng-reflect-router-link="/" href="/"><h1 _ngcontent-ng-c3918259376="">My Store</h1></a><a _ngcontent-ng-c3918259376="" routerlink="/cart" class="button fancy-button" ng-reflect-router-link="/cart" href="/cart"><em _ngcontent-ng-c3918259376="" class="material-icons">shopping_cart</em>Checkout
+ </a></app-top-bar><div _ngcontent-ng-c3715250071="" class="container"><router-outlet _ngcontent-ng-c3715250071=""></router-outlet><app-product-list _nghost-ng-c2837874410=""><h2 _ngcontent-ng-c2837874410="">Products</h2><div _ngcontent-ng-c2837874410=""><h3 _ngcontent-ng-c2837874410=""><a _ngcontent-ng-c2837874410="" title="Phone XL details" ng-reflect-router-link="/products,1" href="/products/1"> Phone XL </a></h3><p _ngcontent-ng-c2837874410=""> Description: A large phone with one of the best screens </p><!--bindings={
+ "ng-reflect-ng-if": "A large phone with one of the "
+ }--><button _ngcontent-ng-c2837874410="" type="button"> Share </button><app-product-alerts _ngcontent-ng-c2837874410="" _nghost-ng-c869072018="" ng-reflect-product="[object Object]"><p _ngcontent-ng-c869072018=""><button _ngcontent-ng-c869072018="" type="button">Notify Me</button></p><!--bindings={
+ "ng-reflect-ng-if": "true"
+ }--></app-product-alerts></div><div _ngcontent-ng-c2837874410=""><h3 _ngcontent-ng-c2837874410=""><a _ngcontent-ng-c2837874410="" title="Phone Mini details" ng-reflect-router-link="/products,2" href="/products/2"> Phone Mini </a></h3><p _ngcontent-ng-c2837874410=""> Description: A great phone with one of the best cameras </p><!--bindings={
+ "ng-reflect-ng-if": "A great phone with one of the "
+ }--><button _ngcontent-ng-c2837874410="" type="button"> Share </button><app-product-alerts _ngcontent-ng-c2837874410="" _nghost-ng-c869072018="" ng-reflect-product="[object Object]"><!--bindings={
+ "ng-reflect-ng-if": "false"
+ }--></app-product-alerts></div><div _ngcontent-ng-c2837874410=""><h3 _ngcontent-ng-c2837874410=""><a _ngcontent-ng-c2837874410="" title="Phone Standard details" ng-reflect-router-link="/products,3" href="/products/3"> Phone Standard </a></h3><!--bindings={
+ "ng-reflect-ng-if": ""
+ }--><button _ngcontent-ng-c2837874410="" type="button"> Share </button><app-product-alerts _ngcontent-ng-c2837874410="" _nghost-ng-c869072018="" ng-reflect-product="[object Object]"><!--bindings={
+ "ng-reflect-ng-if": "false"
+ }--></app-product-alerts></div><!--bindings={
+ "ng-reflect-ng-for-of": "[object Object],[object Object"
+ }--></app-product-list><!--container--></div>
+ </app-root>
+ </script>
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Aufbau einer Web Component</h3>
+ <pre>
+ <code class="html" data-trim data-line-numbers>
+ <script type="text/template">
+ <!--
+ Hinweis: Der Name bzw. der Selektor muss immer einen Bindestrich enthalten,
+ damit keine Namens-Kollisionen mit nativen HTML-Tags entstehen können
+ -->
+ <hello-world></hello-world>
+ </script>
+ </code>
+ </pre>
+ </section>
+ <section>
+ <pre>
+ <code class="js" data-trim data-line-numbers="1-16|19">
+ <script type="text/template">
+ class HelloWorldComponent extends HTMLElement {
+ constructor() {
+ super();
+
+ const shadowRoot = this.attachShadow({mode: "open"});
+
+ shadowRoot.innerHTML = `
+ <style>
+ div {
+ background-color: coral;
+ color: white;
+ }
+ </style>
+ <div>Hello World!</div>
+ `;
+ }
+ }
+
+ window.customElements.define("hello-world", HelloWorldComponent);
+ </script>
+ </code>
+ </pre>
+ </section>
+ <section>
+ <iframe data-src="/assets/html/hello-world.html"></iframe>
+ </section>
+ <section>
+ <h4>Light DOM vs Shadow DOM</h4>
+ <img data-src="/assets/images/web-components-shadow-root.png" width="500px">
+ </section>
+ <section>
+ <h4>Suche von Elementen im Light- und Shadow DOM</h4>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ <script type="text/template">
+ // Light DOM
+ const span = document.querySelector("span"); // Hi!
+ const divs = document.querySelectorAll("div");
+
+ console.log(divs.length); // => 1
+
+ // Shadow DOM
+ const helloWorld = document.querySelector("hello-world");
+
+ helloWorld.shadowRoot.querySelector("div"); // Hello World!
+ </script>
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Auf Attribute reagieren</h3>
+ <pre>
+ <code class="html" data-trim data-line-numbers>
+ <script type="text/template">
+ <hello-world my-attribute="a"></hello-world>
+ </script>
+ </code>
+ </pre>
+ <pre>
+ <code class="js" data-trim data-line-numbers="2|8-10">
+ <script type="text/template">
+ class HelloWorldComponent extends HTMLElement {
+ static observedAttributes = ["my-attribute"];
+
+ constructor() {
+ // ...
+ }
+
+ attributeChangedCallback(name, oldValue, newValue) {
+ console.log(`${name}: changed from ${oldValue} to ${newValue}`);
+ }
+ }
+ </script>
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Lasse die eigene Komponente "hello-sayer" auf eine Änderung des "name"-Attributs reagieren, indem der dort eingetragene Name in der Komponente angezeigt wird (Beispiel: name="Joe" => Hello Joe!)</p>
+ <p>(/examples/templates/web-components/hello-sayer.html)</p>
+ </section>
+ <section>
+ <h3>Musterlösung</h3>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ <script type="text/template">
+ class HelloSayerComponent extends HTMLElement {
+ static observedAttributes = ["name"];
+
+ constructor() {
+ super();
+
+ this.root = this.attachShadow({mode: "open"});
+
+ this.root.innerHTML = `
+ <style>
+ div {
+ background-color: coral;
+ color: white;
+ }
+ </style>
+ <div>Hello!</div>
+ `;
+ }
+
+ attributeChangedCallback(name, oldValue, newValue) {
+ this.root.querySelector("div").innerHTML = `Hello ${newValue}!`;
+ }
+ }
+
+ window.customElements.define("hello-sayer", HelloSayerComponent);
+
+ const names = ["Joe", "Allie"];
+ let counter = 0;
+
+ setInterval(() => document.querySelector("hello-sayer").setAttribute("name", names[counter++ % 2]), 2000);
+ </script>
+ </code>
+ </pre>
+ </section>
+ <section>
+ <iframe data-src="/assets/html/hello-sayer.html"></iframe>
+ </section>
+ <section>
+ <h3>Elemente aus dem LightDOM platzieren mit <code><slot></code></h3>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ <script type="text/template">
+ this.root.innerHTML = `
+ <span>Hello <slot></slot>!</span>
+ `;
+ </script>
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h4>Beispiel</h4>
+ <pre>
+ <code class="html" data-trim data-line-numbers>
+ <script type="text/template">
+ <hello-sayer>Joe</hello-sayer>
+ <hello-sayer>Allie</hello-sayer>
+ </script>
+ </code>
+ </pre>
+ <iframe data-src="/assets/html/hello-sayer-2.html"></iframe>
+ </section>
+ <section>
+ <h3>Mehrfache benannte <code><slot></code>s</h3>
+ <pre>
+ <code class=js data-trim data-line-numbers>
+ <script type="text/template">
+ this.root.innerHTML = `
+ <span>
+ first name: <slot name="first"></slot> |
+ last name: <slot name="last"></slot>
+ </span>
+ `;
+ </script>
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h4>Beispiel</h4>
+ <pre>
+ <code class="html" data-trim data-line-numbers>
+ <script type="text/template">
+ <name-field>
+ <span slot="first">Leia</span>
+ <span slot="last">Organa</span>
+ </name-field>
+ </script>
+ </code>
+ </pre>
+ <iframe data-src="/assets/html/name-field.html"></iframe>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Entwerfe eine <code>CardComponent</code> (Vorlage "card-component.html") in folgendem Stil und nutze dabei sinnvolle <code><slot></code>s:</p>
+ <pre>
+ <code class="html" data-trim data-line-numbers>
+ <script type="text/template">
+ <card-component>
+ <span slot="title">This is a title</span>
+ <span slot="content">...Lorem ipsum dolor sit amet, consetetur sadipscing elitr...</span>
+ </card-component>
+ </script>
+ </code>
+ </pre>
+ <iframe data-src="/assets/html/exercise-card-component.html"></iframe>
+ </section>
+ <section>
+ <h3>Styling einer Web Component</h3>
+ <p>Ein <code>:host</code>-Block mit einem <code>display</code> gehört zum guten Ton!</p>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ <script type="text/template">
+ :host {
+ display: block; /* inline, inline-block, flex, grid etc... */
+
+ color: red;
+
+ font-family: Arial, Helvetica, sans-serif;
+ }
+ </script>
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>Innerhalb einer Komponente können beliebige Styles für verschiedene Selektoren verwendet werden</p>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ <script type="text/template">
+ :host {
+ display: block;
+ }
+
+ .info {
+ background-color: lightblue;
+ }
+
+ .warning {
+ background-color: yellow;
+ }
+ </script>
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Welche Wechselwirkungen haben Styles zueinander, die innerhalb und außerhalb einer Komponente definiert sind? (Vorlage "web-component-styles.html")</p>
+ </section>
+ <section>
+ <p>Einige globale Styles werden dennoch vererbt:</p>
+ <ul>
+ <li>Sämtliche Styles, die standardmäßig einen Wert von <code>inherit</code> besitzen (z.B. <code>color</code> oder <code>font-family</code>)</li>
+ <li>Eigene CSS-Variablen wie z.B. <code>--my-custom-color</code></li>
+ </ul>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Passe das vorherige Ergebnis (Vorlage "web-component-styles.html") so an, dass ein beliebiger Style per CSS-Variable von außen gesetzt werden kann (z.B. <code>color</code> oder <code>background-color</code>)</p>
+ <p>Erinnerung CSS-Variablen:</p>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ /* Definition */
+ html {
+ --my-variable: #abcdef;
+ }
+
+ /* Usage */
+ .my-class {
+ background-color: var(--my-variable, white);
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>In der Anfangszeit von Web Components wurde oft folgendes Muster zur Individualisierung verwendet:</p>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ /* Global Scope */
+ html {
+ --my-border-color: #abcdef;
+ --my-border-width: 1px;
+ --my-margin-top: 1rem;
+ --my-margin-bottom: 1rem;
+ }
+
+ /* Inside Web Component */
+ .container {
+ border-color: var(--my-border-color, white);
+ border-width: var(--my-border-width, 1px);
+ margin-top: var(--my-margin-top, 0.5rem);
+ margin-bottom: var(--my-margin-bottom, 0.5rem);
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>Eleganteres Stylen von Web Components mittels <code>part</code></p>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ /* Global Scope */
+ my-component::part(inner) {
+ border-color: yellow;
+ border-width: 2px;
+ }
+
+ /* Inside Web Component */
+ <div part="inner"></div>
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Passe die <code>CardComponent</code> aus einer vorherigen Übung an (Vorlage "card-component.html"), sodass man Titel und Inhalt einfach von außen per <code>part</code>s stylen kann.</p>
+ </section>
+ <section>
+ <p><code>part</code>s von eingebetteten Web Components exportieren und verfügbar machen</p>
+ <pre>
+ <code class="html" data-trim data-line-numbers>
+ <!-- Inner Component Html -->
+ <div part="inner">Inner Text</div>
+
+ <!-- Outer Component Html -->
+ <inner-component exportparts="inner"></inner-component>
+
+ <!-- Global Html -->
+ <outer-component></outer-component>
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Passe das Beispiel (Vorlage "exportparts.html") entsprechend an, sodass von außen sowohl der <code>Inner Text</code> als auch der <code>Outer Text</code> stylebar sind</p>
+ </section>
+ <section>
+ <h3>Stylen von LightDOM-Kindern</h3>
+ <p>Web Components können direkte Kinder, die via <code>slot</code> eingefügt werden, stylen. Hierfür gibt es den Pseudo-Elemente-Selektor <code>::slotted([selector])</code>, welcher Elemente selektiert, die in einem Slot stecken:</p>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ /* Inside Web Component */
+ ::slotted(*) { /* Selectors like elements, #id or .class */
+ font-style: italic;
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Definiere mit dem Pseudo-Elemente-Selektor <code>::slotted()</code> Styles, sodass per <code>slot</code> eingefügte Elemente mit der Klasse <code>red</code> einen roten und Elemente mit der Klasse <code>blue</code> einen blauen Hintergrund haben. Die Schriftart soll jeweils weiß sein (Vorlage "slotted.html")</p>
+ </section>
+ <section>
+ <h3>Events in Web Components</h3>
+ <img data-src="/assets/images/web-components-event-bubbling-shadow-dom.png">
+ <ul>
+ <li>Events können an einer Web Component selbst oder innerhalb des Shadow Dom <code>dispatcht</code> werden</li>
+ <li>Das Shadow Root der Komponente stellt eine Art "gläserne Decke" dar</li>
+ <li>Standard-Events der UI wie <code>click</code> bubbeln durch das Shadow Dom nach oben durch</li>
+ <li>Ein <code>CustomEvent</code> muss entsprechend konfiguriert werden</li>
+ </ul>
+ </section>
+ <section>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ button.dispatchEvent(new CustomEvent(
+ "tabactivated", // Name des Events, frei wählbar
+ {
+ detail: "any data", // beliebige Daten wie Strings, Zahlen, Booleans usw.
+ bubbles: true, // bestimmt, ob das Event durch alle Eltern nach oben steigt
+ cancelable: true, // Abbrechbar per event.preventDefault()
+ composed: true // durch eventuelle Shadow Root steigen, falls vorhanden.
+ }
+ ));
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Entwickle eine Tab-Komponente (Vorlage "tab-componenmt.html"), welche beim Click auf einen Registerreite / Tab ein Event feuert, welches die Außenwelt über das gerade aktivierte Tab (tab-id) informiert</p>
+ </section>
+ <section>
+ <h3>Lösung</h3>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ this.root.innerHTML = `
+ <style>
+ ::slotted(div) {
+ display: none;
+ }
+
+ ::slotted(div.active) {
+ display: block;
+ }
+ </style>
+
+ <div><slot name="tab"></slot></div>
+ <div><slot name="content"></slot></div>
+ `;
+ </code>
+ </pre>
+ </section>
+ <section>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ connectedCallback() {
+ const firstContent = this.querySelector("div");
+
+ firstContent.classList.add("active");
+
+ this.addEventListener("click", (e) => {
+ if (e.target.tagName === "SPAN" && e.target.hasAttribute("tab-id")) {
+ const oldContent = this.querySelector("div.active");
+ const newContent = this.querySelector(`[tab-id="${e.target.getAttribute("tab-id")}"]`);
+
+ oldContent.classList.remove("active");
+ newContent.classList.add("active");
+
+ this.dispatchEvent(new CustomEvent("tabclick", {composed: true, bubbles: true, detail: e.target.getAttribute("tab-id"), cancelable: true}));
+ }
+ });
+ }
+ </code>
+ </pre>
+ </section>
+ </section>
+ <section>
+ <section>
+ <h2>NodeJS</h2>
+ </section>
+ <section>
+ <h3>Was ist NodeJS?</h3>
+ <ul>
+ <li class="fragment">"JavaScript auf dem Server"</li>
+ <li class="fragment">basiert auf der V8-Engine von Google</li>
+ <li class="fragment">Laufzeitumgebung für JavaScript mit eigener API</li>
+ </ul>
+ </section>
+ <section>
+ <img data-src="/assets/images/node-js.svg">
+ </section>
+ <section>
+ <h3>Überblick über die Node-API</h3>
+ <p>Die API ist in viele verschiedene Module aufgeteilt</p>
+ <table>
+ <tr><td>fs</td><td>Dateisystem</td></tr>
+ <tr><td>crypto</td><td>Kryptografie</td></tr>
+ <tr><td>zlib</td><td>Datenkompression</td></tr>
+ <tr><td>http</td><td>Webserver</td></tr>
+ <tr><td>net</td><td>Netzwerk (TCP)</td></tr>
+ <tr><td>tls</td><td>Verschlüsseltes Netzwerk (TCP)</td></tr>
+ </table>
+ </section>
+ <section>
+ <p>Aufruf eines Programmes in der Kommandozeile</p>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ node [Node-Parameter] path/to/script.js [Anwendungsparameter]
+ </code>
+ </pre>
+ <p>z.B.</p>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ node --inspect index.js --port 3000
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>Einbinden von Modulen</p>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ const fs = require("fs");
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>Aufbau eines Moduls</p>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ module.exports = {
+ foo: 5,
+ sayHello: function(name) {
+ return "Hello " + name + "!";
+ }
+ }
+ </code>
+ </pre>
+ <p>oder</p>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ exports.foo = 5;
+ exports.sayHello = function(name) {
+ return "Hello " + name + "!";
+ };
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>Aufgabe</p>
+ <p>Schreibe ein Modul, welches eine <code>Square</code>-Klasse zur Verfügung stellt, mit welchem man den Umfang und den Flächeninhalt eines Rechtecks berechnen kann:</p>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ const Square = require("./square");
+
+ const square = new Square(2, 3);
+
+ console.log(square.getArea()); // => 6
+ console.log(square.getPerimeter()); // => 10
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Module für die Kommandozeile</h3>
+ <p>package.json</p>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ npm init -y
+ </code>
+ </pre>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ {
+ ...
+ "bin": {
+ "my-command": "./index.js"
+ }
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>index.js</p>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ #! /usr/bin/env node
+
+ console.log("Hello world from the command line!");
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>Installation</p>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ npm install -g path/to/project
+ </code>
+ </pre>
+ z.B.
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ npm install -g .
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>Ausführung</p>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ my-command
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>Kommandozeilenparameter</p>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ console.log(process.argv);
+ </code>
+ </pre>
+ <p>angelehnt an die Parameter aus der Programmiersprache <code>c</code>:</p>
+ <pre>
+ <code class="c" data-trim data-line-numbers>
+ int main(int argc, char *argv[])
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>Aufgabe</p>
+ <p>Mache das vorherige Programm für die Konsole aufrufbar, sodass die Länge und Breite für das Rechteck per Konsolenargumente übergeben werden können und der Flächeninhalt ausgegeben wird:</p>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ my-command 2 3
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Buffer</h3>
+ <p>Array-artige Struktur für rohe Bytes</p>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ const b1 = Buffer.from("abc"); // bevorzugt
+ const b2 = Buffer.alloc(100, 0); // Länge mit initialen Daten
+ const b3 = Buffer.allocUnsafe(100); // Länge ohne initiale Daten
+ const b4 = new Buffer("abc"); // offiziell nicht empfohlen
+
+ console.log(b1); // => <Buffer 61 62 63>
+ console.log(b1.toString("hex")); // => "616263"
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>Mit Buffern arbeiten:</p>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ const a = Buffer.from("a") + Buffer.from("b");
+ const b = Buffer.concat([Buffer.from("a"), Buffer.from([98])]);
+ const c = b.toString()
+
+ console.log(a); // => ab
+ console.log(b); // => <Buffer 61 62>
+ console.log(c); // => ab
+
+ for (const byte of a) {
+ console.log(byte); // => 97 98
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>Aufgabe</p>
+ <p>Implementiere eine XOR-Verschlüsselung (<code>^</code>-Operator), sodass jedes Byte einer Original-Nachricht der Reihe nach mit dem entsprechenden Byte eines Schlüsselwortes verschlüsselt wird und gebe die verschlüsselte Nachricht als Text aus.</p>
+ </section>
+ <section>
+ <p>Aufgabe</p>
+ <p>Implementiere zur vorherigen Verschlüsselung eine Entschlüsselung.</p>
+ </section>
</section>
</div>
</div>
@@ -1418,7 +4179,7 @@
hash: true,
slideNumber: "c/t",
transition: "fade",
-
+
// Learn about plugins: https://revealjs.com/plugins/
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
});
--
Gitblit v1.9.3