From 3344773e6b2c7fc38ee160ddb8d1db1fcfaf8c4d Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Mo, 08 Jul 2024 16:18:09 +0200
Subject: [PATCH] update node figure
---
index.html | 249 ++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 241 insertions(+), 8 deletions(-)
diff --git a/index.html b/index.html
index c820332..a80829f 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>
@@ -3889,6 +3889,239 @@
<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>
</div>
</div>
--
Gitblit v1.9.3