JavaScript

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 und CSS eine der Kernsprachen des World Wide Webs (WWW).

JS kann auch als Sprache für das backend genutzt werden. Dazu gibt es die JS runtime NodeJS, welche auf Chromium's V8 JavaScript engine aufbaut. Eine neuere Alternative vom gleichen Erfinder ist 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.

Google JavaScript Style Guide

ECMAScript modules (ESM)

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

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>

script.js

"use strict";
 
import { obj as object } from "./object.js";
 
const x = object(42);
const child = document.createElement("p");
child.innerText = x.value;
 
document.querySelector("body").appendChild(child);

object.js

"use strict";
 
const object = (x) => {
    return {
        value: x,
    };
};
 
export { object as obj };

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.

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);
}

Beispielprogramme

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.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./styles.css">
        <title></title>
    </head>
    <body>
        <table id="test" aria-label="example table">
            <thead>
                <tr>
                    <th scope="col">1</th>
                    <th scope="col">2</th>
                    <th scope="col">3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1.1</td>
                    <td>1.2</td>
                    <td>1.3</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td class="colspan-full">span</td>
                </tr>
            </tfoot>
        </table>
 
        <script type="module" src="./scripts.js"></script>
    </body>
</html>

styles.css

#test {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid black;
}
 
#test th,
#test td {
    text-align: left;
    border: 1px solid black;
    padding: 0.5rem;
}
 
.colspan-full {
    text-align: center !important;
}

scripts.ts

globalThis.addEventListener("DOMContentLoaded", () => {
    const selector = ".colspan-full";
    const elements = document.querySelectorAll(selector);
    for (const e of elements) {
        let table = e.parentElement;
        if (table == null) continue;
        while (table?.tagName.toLowerCase() !== "table") {
            table = table?.parentElement ?? null;
        }
 
        if (table == null) console.error("couldn't find the table!");
 
        const columnCount = table
            .querySelector("thead")
            ?.querySelector("tr")
            ?.querySelectorAll("th, td").length ?? 0;
        e.setAttribute("colspan", columnCount.toString());
    }
});

backend

hello world webserver (deno)

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}`);