add nodejs intro

Sascha Schulz

2024-06-10 28563b57efe49cc9869ed3bc5d3fd3a6a73afcce

add nodejs intro

 assets/drawio/node-js.drawio

Neue Datei
@@ -0,0 +1 @@
<mxfile host="Electron" modified="2024-06-10T10:49:28.466Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="VYc41megkdlq9GIItywG" version="16.1.2" type="device"><diagram id="ERSdXdGp_mw-8WpFkcub" name="Page-1">5Zhdb9owFIZ/TaTtAim28wGXJbC11Vinpeuq3nmJm1hzYuaaAvv1O1kcIHWqMm1A1F1hv/48jw/n2HFIVKzeKzrPZzJlwsFuunLIxMEYeS6Cn0pZ14ofklrIFE9Np60Q85/MiK5RFzxlD62OWkqh+bwtJrIsWaJbGlVKLtvd7qVorzqnGbOEOKHCVr/yVOe1OsThVj9nPMublVEwqlsK2nQ2ljzkNJXLHYlMHRIpKXVdKlYRExW8hks97t0zrZuNKVbqfQbEK3ZzHRb8Dq8nF3fJ7Y/b8dXAzPJIxcIYbDar1w0BJRdlyqpJXIeMlznXLJ7TpGpdwpmDlutCQA1B0UzHlGarZ/eJNtaD2zBZMK3W0GW55YuGBlq+wxZ7RqTmTLPN2K3ZUDCW/wEFbFGIciULvigsGmCXbpv8oJX8ziIppAKllCX0HN9zIZ5IVPCshGoCHBjo44oSB087Mw0FT9NqmU7G7VP4G8xmQGBg7lAPOqCTQzEnFvPPDCxUg2mZcQCGA1GB/qaglFWlN+fXsw9O5eRgvhvF8dvTuWozwMAxsS3wLaSoi6nvH4ipZzH9ctE3SMT2u05I+FCO5/co5HUjQvsyQu6hIAUWpEv6SONE8bl+vTHR2+Mc3GP6amgdw83w5N46ekLJ3y+ThIeCNLQgTa5mg7NPpw99pGekRv0Lfdjt+I+Njnr7a6LvDpaP8I65jF9voOu6qhz19of69PBooCC/b2kY2S+T/yEPY2+PkzhqIkb2c6UHmRgPX04woX/EBIPsF0gVSnuRjDHxX4Tl/RtYUN1+1/ndtvN1jEx/AQ==</diagram></mxfile>

 assets/images/node-js.svg

Neue Datei
@@ -0,0 +1,3 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="802px" height="502px" viewBox="-0.5 -0.5 802 502"><defs/><g><rect x="10" y="10" width="360" height="480" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="2" pointer-events="all"/><rect x="130" y="10" width="120" height="60" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 20px; margin-left: 66px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Chromium</div></div></div></foreignObject><text x="95" y="24" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">Chromium</text></switch></g><rect x="30" y="140" width="320" height="110" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 98px; margin-left: 16px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Render-Engine<br />(HTML + CSS)</div></div></div></foreignObject><text x="95" y="101" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">Render-Engine...</text></switch></g><rect x="30" y="70" width="320" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 45px; margin-left: 16px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">UI</div></div></div></foreignObject><text x="95" y="49" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">UI</text></switch></g><rect x="30" y="270" width="320" height="200" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="2" pointer-events="all"/><rect x="90" y="270" width="200" height="40" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 145px; margin-left: 46px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">JavaScript</div></div></div></foreignObject><text x="95" y="149" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">JavaScript</text></switch></g><rect x="190" y="310" width="120" height="140" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 190px; margin-left: 96px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">V8</div></div></div></foreignObject><text x="125" y="194" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">V8</text></switch></g><rect x="70" y="310" width="120" height="140" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 190px; margin-left: 36px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">DOM-API</div></div></div></foreignObject><text x="65" y="194" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">DOM-API</text></switch></g><rect x="410" y="10" width="380" height="480" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="2" pointer-events="all"/><rect x="540" y="10" width="120" height="60" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 20px; margin-left: 271px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">NodeJS</div></div></div></foreignObject><text x="300" y="24" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">NodeJS</text></switch></g><rect x="440" y="270" width="320" height="200" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="2" pointer-events="all"/><rect x="500" y="270" width="200" height="40" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 145px; margin-left: 251px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">JavaScript</div></div></div></foreignObject><text x="300" y="149" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">JavaScript</text></switch></g><rect x="570" y="310" width="150" height="140" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 73px; height: 1px; padding-top: 190px; margin-left: 286px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">V8</div></div></div></foreignObject><text x="323" y="194" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">V8</text></switch></g><rect x="480" y="310" width="90" height="140" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 43px; height: 1px; padding-top: 190px; margin-left: 241px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Node-API</div></div></div></foreignObject><text x="263" y="194" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">Node-API</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>

 index.html

@@ -3965,7 +3965,162 @@
                </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>