public/web-development/presentation.git

			@@ -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>
			@@ -3916,7 +3916,328 @@
			</section>
			<section>
			<h3>Aufgabe</h3>
			<p>Entwickle eine Tab-Komponente (Vorlage "tab-componenmt.html"), welche beim Click auf einen Registerreite / Tab ein Event feurt, welches die Außenwelt über das gerade aktivierte Tab (tab-id) informiert</p>
			<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>
			<p>Lösung</p>
			<pre>
			<code class="js" data-trim data-line-numbers>
			const word = Buffer.from("abcdef");
			const key = Buffer.from("xyz");
			const encrypted = Buffer.alloc(word.length, 0);

			// encrypt
			for (let i = 0; i < word.length; i++) {
			encrypted[i] = word[i] ^ key[i % key.length];
			}

			// decrypt
			for (let i = 0; i < word.length; i++) {
			word[i] = encrypted[i] ^ key[i % key.length];
			}

			console.log(word.toString()); // => "abcdef"
			</code>
			</pre>
			</section>
			<section>
			<h3>Streams</h3>
			<p>Konstanter Fluss von (meist) großen Datenmengen in kleinen Paketen</p>
			</section>
			<section>
			<p>Gängige Typen von Streams</p>
			<ul>
			<li>Standard In / Out</li>
			<li>HTTP-Requests / -Responses</li>
			<li>TCP-Sockets</li>
			<li>Lese- und Schreib-Streams auf Dateien</li>
			<li>Große Datenbank-Ergebnisse mittels Cursor</li>
			</ul>
			</section>
			<section>
			<pre>
			<code class="js" data-trim data-line-numbers>
			const readableStream = fs.createReadStream("./source.txt");
			const writableStream = fs.createWriteStream("./target.txt");

			readableStream.on("data", (data /* Buffer */) => {
			// process data here
			writableStream.write(data)
			});

			readableStream.on("end", (data) => {
			// stream has finished, e.g. EOF (end of file)
			});

			// alternatively pipe content
			readableStream.pipe(writableStream);
			</code>
			</pre>
			</section>
			<section>
			<p>Aufgabe</p>
			<p>Lese eine beliebige Datei als Readable Stream, verschlüssele den Inhalt mit der XOR-Methode und schreibe die verschlüsselten Bytes in eine Zieldatei</p>
			</section>
			<section>
			<p>Aufgabe</p>
			<p>Ändere das Programm, sodass auf Konsolenebene ein Pipe (\|) ermöglicht wird:</p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			echo "Hello World!" \| node index.js
			</code>
			</pre>
			<p>Nutze dafür die implizit vorhandenen Streams von Standard In / Out:</p>
			<pre>
			<code class="js" data-trim data-line-numbers>
			process.stdin; // Readable Stream
			process.stdout; // Writable Stream
			</code>
			</pre>
			</section>
			</section>
			</div>