dhbw slides: 1 file pro sitzung (issue #2)
01_web_eng.md (103 slides) aufgesplittet: - 01_intro.md: cover, ueber-mich, vorlesungsplan, pruefungsleistung, internet 101, onboarding - 02_html_css.md: html, a11y/wcag, css basics + css extended (aus 02_css_extended.md gemergt) - 03_js_frameworks.md: ecmascript, js, dom, fetch, async, frameworks, build tools, microfrontends renames (03-08 -> 04-09): - 03_nodejs_basics -> 04_nodejs_basics - 04_nodejs_advanced -> 05_express - 05_testing -> 06_testing - 06_typescript -> 07_typescript - 07_docker -> 08_docker - 08_best_practices -> 09_best_practices 02_css_extended.md geloescht (inhalte in 02_html_css.md) makefile: dhbw_KAPITEL + dhbw_NAME aktualisiert
This commit is contained in:
@@ -0,0 +1,284 @@
|
||||
---
|
||||
marp: true
|
||||
theme: gaia
|
||||
paginate: true
|
||||
backgroundColor: #fff
|
||||
header: "Web Engineering – DHBW Stuttgart"
|
||||
footer: "Michael Czechowski – SoSe 2026"
|
||||
---
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--color-foreground: #1a1a2e;
|
||||
--color-highlight: #d63384;
|
||||
--color-dimmed: #4a4a6a;
|
||||
}
|
||||
section.invert {
|
||||
--color-foreground: #fff;
|
||||
}
|
||||
section {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
h1 {
|
||||
color: #a02060;
|
||||
}
|
||||
section.invert h1 {
|
||||
color: #fff;
|
||||
}
|
||||
h2 {
|
||||
color: #1f2937;
|
||||
}
|
||||
section.invert h2 {
|
||||
color: #f48fb1;
|
||||
}
|
||||
pre {
|
||||
background: #0f0f23;
|
||||
color: #f48fb1;
|
||||
border-radius: 8px;
|
||||
border-left: 3px solid #d63384;
|
||||
}
|
||||
pre code {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
code {
|
||||
background: #1a1a2e;
|
||||
color: #f48fb1;
|
||||
padding: 0.15em 0.4em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
a {
|
||||
color: var(--color-highlight);
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- _class: invert -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _backgroundColor: #000 -->
|
||||
|
||||
# Web Engineering
|
||||
|
||||
**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
|
||||
|
||||
**Sommersemester 2026** · Sitzung 4 — Node.js: Scripting, Running and Building
|
||||
|
||||
---
|
||||
|
||||
# Ressourcen zum Selbstlernen
|
||||
|
||||
- **CODE CRISPIES** — [codecrispi.es](https://codecrispi.es/)
|
||||
- **Online Code-Editor** — [codepen.io](https://codepen.io/pen/)
|
||||
- **MDN** (Mozilla Developer Network) — [developer.mozilla.org/de/](https://developer.mozilla.org/de/)
|
||||
- **Flexbox-Spiel** — [flexboxfroggy.com](https://flexboxfroggy.com/)
|
||||
- **Grid-Spiel** — [cssgridgarden.com](https://cssgridgarden.com/)
|
||||
|
||||
---
|
||||
|
||||
# Inhalt
|
||||
|
||||
1. Node.js: was und warum
|
||||
2. `node --check`, `node -e` (One-Liner)
|
||||
3. Module: `require` / `import`, `__dirname` / `__filename`
|
||||
4. HTTP-Server (built-in)
|
||||
5. `fs` — Dateien lesen / schreiben
|
||||
6. `package.json` — Aufbau und Lifecycle
|
||||
7. npm Scripts
|
||||
8. Module exportieren
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: invert -->
|
||||
<!-- _backgroundColor: #000 -->
|
||||
|
||||
# Node.js – Scripting, Running and Building
|
||||
|
||||
---
|
||||
|
||||
# Node.js – Was ist das?
|
||||
|
||||
- JavaScript Runtime (V8 Engine)
|
||||
- Server-side JavaScript
|
||||
- npm Package Manager
|
||||
- Ideal für: APIs, CLI Tools, Automation
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# node --check und node -e
|
||||
|
||||
```bash
|
||||
# Syntax check only
|
||||
node --check script.js
|
||||
|
||||
# One-liner
|
||||
node -e "console.log('Hallo Welt')"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# node -e Beispiele
|
||||
|
||||
```bash
|
||||
# String
|
||||
node -e "console.log('Hello ' + process.argv[2])" Welt
|
||||
|
||||
# File reading (ESM via --input-type)
|
||||
node --input-type=module -e \
|
||||
"import { readFileSync } from 'node:fs'; \
|
||||
console.log(readFileSync('data.json', 'utf8'))"
|
||||
|
||||
# JSON parsen
|
||||
node -e "console.log(JSON.parse(process.argv[1]))" '{"a":1}'
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# Module laden – ESM (modern)
|
||||
|
||||
`"type": "module"` in `package.json` einschalten.
|
||||
|
||||
```javascript
|
||||
// Eigene Datei (Endung .js erforderlich!)
|
||||
import { add, greet } from "./utils.js";
|
||||
|
||||
// npm Modul (default + named import)
|
||||
import express from "express";
|
||||
import { Router } from "express";
|
||||
|
||||
// Built-in (mit "node:"-Präfix)
|
||||
import { readFileSync } from "node:fs";
|
||||
import { join } from "node:path";
|
||||
```
|
||||
|
||||
<small>**Legacy CJS:** `const express = require("express")` — funktioniert noch, aber ESM ist heute Standard.</small>
|
||||
|
||||
---
|
||||
|
||||
# Pfad-Auflösung in ESM
|
||||
|
||||
```javascript
|
||||
import { fileURLToPath } from "node:url";
|
||||
import { dirname, join } from "node:path";
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = dirname(__filename);
|
||||
|
||||
const configPath = join(__dirname, "..", "config.json");
|
||||
```
|
||||
|
||||
<small>In ESM gibt es **kein** automatisches `__dirname` / `__filename` (anders als CJS). Über `import.meta.url` rekonstruieren.</small>
|
||||
|
||||
---
|
||||
|
||||
# HTTP Server mit Node.js (Built-in)
|
||||
|
||||
**ESM** (modern, `"type": "module"` in `package.json`):
|
||||
```javascript
|
||||
import { createServer } from "node:http";
|
||||
|
||||
const server = createServer((req, res) => {
|
||||
res.writeHead(200, { "Content-Type": "text/html" });
|
||||
res.end("<h1>Hallo Welt!</h1>");
|
||||
});
|
||||
|
||||
server.listen(3000, () => {
|
||||
console.log("Server läuft auf Port 3000");
|
||||
});
|
||||
```
|
||||
|
||||
<small>**CommonJS** (legacy): `const http = require("http");` — funktioniert noch, aber neue Projekte nutzen ESM.</small>
|
||||
|
||||
---
|
||||
|
||||
# fs – Dateien lesen/schreiben
|
||||
|
||||
```javascript
|
||||
import { readFile, readFileSync, writeFile } from "node:fs";
|
||||
import { readFile as readFileAsync } from "node:fs/promises";
|
||||
|
||||
// Promise-API (empfohlen, modern)
|
||||
const data = await readFileAsync("data.json", "utf8");
|
||||
console.log(JSON.parse(data));
|
||||
|
||||
// Callback-API
|
||||
readFile("data.json", "utf8", (err, data) => {
|
||||
if (err) throw err;
|
||||
console.log(JSON.parse(data));
|
||||
});
|
||||
|
||||
// Sync (nur für Setup / Scripts)
|
||||
const content = readFileSync("data.json", "utf8");
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# package.json – Das Herzstück
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "mein-projekt",
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "node index.js",
|
||||
"dev": "node --watch index.js",
|
||||
"test": "node --test"
|
||||
},
|
||||
"dependencies": {
|
||||
"express": "^4.18.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^3.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# npm Scripts
|
||||
|
||||
```bash
|
||||
# npm run <script>
|
||||
npm run start
|
||||
npm run dev
|
||||
|
||||
# Mit Argumenten
|
||||
npm run build -- --production
|
||||
|
||||
# Lifecycle scripts
|
||||
npm install → postinstall
|
||||
npm start → start (direkt)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# Node.js Module – exports (ESM)
|
||||
|
||||
```javascript
|
||||
// utils.js — named exports
|
||||
export const add = (a, b) => a + b;
|
||||
export const greet = (name) => `Hallo ${name}!`;
|
||||
|
||||
// utils.js — default export
|
||||
export default {
|
||||
add,
|
||||
greet
|
||||
};
|
||||
```
|
||||
|
||||
```javascript
|
||||
// nutzen
|
||||
import { add, greet } from "./utils.js"; // named
|
||||
import utils from "./utils.js"; // default
|
||||
import utils, { add } from "./utils.js"; // beides
|
||||
```
|
||||
|
||||
<small>**Legacy CJS:** `module.exports = { add, greet }` + `const { add } = require("./utils")`.</small>
|
||||
|
||||
Reference in New Issue
Block a user