Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- javascript [2022-01-10 00:15:54] – [table auto full colspan] david
+++ javascript [2023-01-18 15:43:23] (aktuell) – [test api] david
@@ Zeile 3: / Zeile 3: @@
 JavaScript (JS) ist eine dynamisch typisierte Programmiersprache (Skriptsprache), die von Netscape für dynamisches HTML in Webbrowsern entwickelt wurde. Der Sprachkern ist als ECMAScript standardisiert. JavaScript ermöglicht vor allem clientseitige Manipulation des HTML DOMs, wird aber immer mehr auch außerhalb des Browsers benutzt (wie z.B. in Node oder Deno, Laufzeitumgebungen für Java- bzw. TypeScript). JavaScript ist zusammen mit [[html|HTML]] und [[css|CSS]] eine der Kernsprachen des World Wide Webs (WWW).
-===== Beispielprogramme =====
+JS kann auch als Sprache für das backend genutzt werden. Dazu gibt es die JS runtime [[https://nodejs.org/|NodeJS]], welche auf Chromium's V8 JavaScript engine aufbaut. Eine neuere Alternative vom gleichen Erfinder ist [[https://deno.land/|Deno]] (Anagram von Node). Deno setzt auf eingebauten TypeScript Support und keine Paketverwaltung (sondern Import von Modulen mit URLs), unterstützt aber auch klassisches JS.
+  * [[https://google.github.io/styleguide/jsguide.html|Google JavaScript Style Guide]]
-==== table auto full colspan ====
-Dieses Programm setzt automatisch (nachdem das DOM geladen ist) die Spannbreite (colspan) jeder Tabellenzelle, welche die definierte Klasse (hier "**.colspan-full**") hat, auf den richtigen Wert, damit die Zelle die Breite der vollen Tabelle einnimmt. Diese Funktion wird von HTML 5 leider noch nicht unterstützt.
+===== ECMAScript modules (ESM) =====
-<code javascript>
+  * [[https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules]]
+JavaScript Module (auch ES6 Module genannt) ermöglichen das Aufteilen des Codes und exportieren bzw. importieren von Funktionen, Klassen, Objekten usw.
+==== Beispiel ====
+<code html index.html>
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Test</title>
+    </head>
+    <body>
+        <h1>Test</h1>
+        <script src="./script.js" type="module"></script>
+        <script src="./object.js" type="module"></script>
+    </body>
+</html>
+</code>
+<code javascript script.js>
 "use strict";
-window.addEventListener("DOMContentLoaded", () => {
-    let class = ".colspan-full";
-    let span = document.querySelectorAll(class);
-    for (let e of span) {
-        let table = e.parentElement;
-        while (table.tagName.toLowerCase() !== "table") {
-            table = table.parentElement;
-        }
-        if (table !== undefined) {
+import { obj as object } from "./object.js";
-            let columnCount = table
-                .querySelector("thead")
+const x = object(42);
-                .querySelector("tr")
+const child = document.createElement("p");
-                .querySelectorAll("th, td").length;
+child.innerText = x.value;
-            e.setAttribute("colspan", columnCount);
-        } else {
+document.querySelector("body").appendChild(child);
-            console.warn("couldn't find the table!");
+</code>
-        }
+<code javascript object.js>
+"use strict";
+const object = (x) => {
+    return {
+        value: x,
+    };
+};
+export { object as obj };
+</code>
+===== AJAX/AJAJ (fetch) =====
+  * __AJAX__ steht für //Asynchronous JavaScript and XML//. Man spricht heutzutage zwar immer noch oft von AJAX und nicht von AJAJ, obwohl die meisten APIs mittlerweile das kompaktere und weniger komplexe JSON nutzen.
+  * __fetch__ ist eine moderne Alternative zu __XMLHttpRequest__ (XHR). fetch arbeitet komplett **asynchron** und gibt ein **Promise** zurück, während XHR **synchron** und **asynchron** verwendet werden kann und mit **callbacks** arbeitet.
+<code javascript>
+const response = await fetch("/api/test", {
+    method: "get",
+    headers: {
+      "Content-Type": "application/json"
     }
 });
+console.info(`status: ${response.status}`);
+let json;
+try {
+    json = await response.json();
+} catch (e) {
+    console.error(e);
+    json = JSON.stringify({});
+} finally {
+    console.info(json);
+}
 </code>
-Beispiel:
+===== Beispielprogramme =====
+==== backend ====
+=== test api ===
+API zum testen: Alle Anfragen werden geloggt und mit "Hello World!" und dem Status Code 418 (I'm a teapot) beantwortet.
+<code javascript test.js>
+"use strict";
+import express from "express";
+const app = express();
+const port = process.env.PORT || 3000;
+app.use(express.json());
+app.use((req, res, next) => {
+    const payload = {
+        body: req.body ?? null,
+        headers: req.headers ?? null,
+        url: req.url ?? null,
+    };
+    console.log(payload);
+    res.status(418);
+    res.send("Hello World!");
+    next();
+});
+app.listen(port);
+console.info(`Express started on port ${port}`);
+</code>
+<code json package.json>
+{
+  "name": "test",
+  "version": "1.0.0",
+  "license": "MIT",
+  "type": "module",
+  "main": "test.js",
+  "dependencies": {
+    "express": "^4.18.2"
+  },
+}
+</code>
+=== hello world webserver (deno) ===
+<code javascript hello-world.ts>
+import { serve } from "https://deno.land/std@0.126.0/http/server.ts";
+const port = 80;
+const handler = (): Response => {
+    return new Response("Hello World!");
+};
+serve(handler, { port });
+console.log(`Listening on http://localhost:${port}`);
+</code>
+==== frontend ====
+=== table auto full colspan ===
+Dieses Programm setzt automatisch (nachdem das DOM geladen ist) die Spannbreite (colspan) jeder Tabellenzelle, welche durch den definierten Selektor (hier die Klasse "**.colspan-full**") erfasst wird, auf den richtigen Wert, damit die Zelle die Breite der vollen Tabelle einnimmt. Diese Funktion wird von HTML 5 leider noch nicht unterstützt, weshalb dieses Skript eine einfache Lösung darstellt.
 <code html>
 <!DOCTYPE html>
@@ Zeile 91: / Zeile 212: @@
 </code>
-<code javascript scripts.js>
+<code javascript scripts.ts>
-"use strict";
+globalThis.addEventListener("DOMContentLoaded", () => {
-window.addEventListener("DOMContentLoaded", () => {
+    const selector = ".colspan-full";
-    let className = "colspan-full";
+    const elements = document.querySelectorAll(selector);
-    let span = document.querySelectorAll(`.${className}`);
+    for (const e of elements) {
-    for (let e of span) {
         let table = e.parentElement;
-        while (table.tagName.toLowerCase() !== "table") {
+        if (table == null) continue;
-            table = table.parentElement;
+        while (table?.tagName.toLowerCase() !== "table") {
+            table = table?.parentElement ?? null;
         }
-        if (table !== undefined) {
+        if (table == null) console.error("couldn't find the table!");
-            let columnCount = table
-                .querySelector("thead")
+        const columnCount = table
-                .querySelector("tr")
+            .querySelector("thead")
-                .querySelectorAll("th, td").length;
+            ?.querySelector("tr")
-            e.setAttribute("colspan", columnCount);
+            ?.querySelectorAll("th, td").length ?? 0;
-        } else {
+        e.setAttribute("colspan", columnCount.toString());
-            console.warn("couldn't find the table!");
-        }
     }
 });
 </code>