Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- javascript [2022-04-13 09:14:41] – manfred
+++ javascript [2023-01-18 15:43:23] (aktuell) – [test api] david
@@ Zeile 55: / Zeile 55: @@
 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>
 ===== 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>
@@ Zeile 123: / Zeile 212: @@
 </code>
-<code javascript scripts.js>
+<code javascript scripts.ts>
-"use strict";
+globalThis.addEventListener("DOMContentLoaded", () => {
-window.addEventListener("DOMContentLoaded", () => {
     const selector = ".colspan-full";
-    const  span = document.querySelectorAll(selector);
+    const elements = document.querySelectorAll(selector);
-    for (const e of span) {
+    for (const e of elements) {
         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!");
-            const 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.error("couldn't find the table!");
-        }
     }
 });
-</code>
-==== backend ====
-=== 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>