Vorlesung 2026-10-22

Hong-Phuc Bui

2026-10-24 35c96453b34ceca79e45cc39647f851653ee8f87

Vorlesung 2026-10-22

 02-1-dom-io/division.html

New file
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM-output</title>
</head>
<body>
<div id="result"></div>
<script src="division.js"></script>
</body>
</html>

 02-1-dom-io/division.js

New file
@@ -0,0 +1,3 @@
const rest = -11 % 7;
const resultEl = document.getElementById("result");


 02-1-dom-io/hallo.html

New file
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hallo</title>
</head>
<body>
<label>Name:<input type="text" id="name" /></label>
<button type="button" id="ok">Ok</button>
<script src="hallo.js"></script>
</body>
</html>

 02-1-dom-io/hallo.js

New file
@@ -0,0 +1,5 @@
document.getElementById("ok").addEventListener("click", () => {
    const nameInput = document.getElementById("name");
    const name = nameInput.value;
    console.log(`Hallo ${name}`);
});

 02-1-dom-io/interactive-elements.html

New file
@@ -0,0 +1,217 @@
<!DOCTYPE html>
<!-- generated by Claude -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Interactive HTML elements</title>
<style>
:root{
  --bg:#eef1f6; --panel:#ffffff; --ink:#1b2433; --muted:#5b6578; --line:#ccd3e0;
  --accent:#2f5bff; --accent-ink:#ffffff; --warn:#d8431c; --ok:#17794a;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#10141d; --panel:#181e2b; --ink:#e7ebf3; --muted:#9aa5ba; --line:#2d3649;
    --accent:#7d9bff; --accent-ink:#0b1020; --warn:#ff7a55; --ok:#4cc58a; color-scheme:dark;
  }
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}
main{max-width:920px;margin:0 auto;padding:32px 20px 64px}
h1{font-size:2.2rem;line-height:1.1;margin:0 0 8px;font-weight:600;letter-spacing:-.02em}
h2{font-size:1.15rem;margin:0 0 4px;font-weight:600}
p.lead{color:var(--muted);max-width:60ch;margin:0 0 24px}
header.top{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
section{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px;margin:0 0 16px}
section>p{color:var(--muted);margin:0 0 14px;font-size:.92rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
label.f{display:flex;flex-direction:column;gap:4px;font-size:.88rem;font-weight:500}
label.f small{color:var(--muted);font-weight:400}
label code{font:500 .85rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--accent);overflow-wrap:anywhere}
input,select,textarea,button{font:inherit;color:inherit}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=tel],input[type=url],input[type=search],input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week],input[type=file],select,textarea{
  width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
textarea{min-height:90px;resize:vertical}
input[type=color]{width:56px;height:36px;padding:2px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
input[type=range]{width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input:user-invalid{border-color:var(--warn)}
.row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.row label{display:inline-flex;gap:8px;align-items:center;cursor:pointer}
input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:var(--accent)}
fieldset{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:0}
legend{padding:0 6px;font-size:.88rem;font-weight:500}
button,.btn{padding:8px 16px;border-radius:6px;border:1px solid var(--line);background:var(--panel);cursor:pointer;font-weight:500}
button:hover{border-color:var(--accent)}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
button.danger{color:var(--warn);border-color:var(--warn)}
button:disabled{opacity:.45;cursor:not-allowed}
progress,meter{width:100%;height:18px}
details{border:1px solid var(--line);border-radius:8px;padding:10px 14px;background:var(--bg)}
details+details{margin-top:8px}
summary{cursor:pointer;font-weight:500}
dialog{border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);max-width:420px;padding:20px}
dialog::backdrop{background:rgba(10,14,24,.55)}
[contenteditable]{border:1px dashed var(--line);border-radius:6px;padding:10px;min-height:48px}
a.demo{color:var(--accent)}
pre{margin:0;padding:14px;border-radius:8px;background:var(--bg);border:1px solid var(--line);overflow-x:auto;font-size:.82rem;max-height:320px}
output{font-weight:600;color:var(--accent)}
</style>
</head>
<body>
<main>
<header class="top">
  <div>
    <h1>Interactive HTML elements</h1>
    <p class="lead">Every native control in one place.</p>
  </div>
</header>

<form id="demo" autocomplete="off">

<section>
  <h2>Text inputs</h2>
  <p>Each type brings its own keyboard, validation or picker.</p>
  <div class="grid">
    <label class="f"><code>&lt;input type="text"&gt;</code><input type="text" name="text" placeholder="Your name"></label>
    <label class="f"><code>&lt;input type="password" minlength="6"&gt;</code><input type="password" name="password" minlength="6" placeholder="At least 6 characters"></label>
    <label class="f"><code>&lt;input type="email"&gt;</code><input type="email" name="email" placeholder="you@example.com"></label>
    <label class="f"><code>&lt;input type="tel"&gt;</code><input type="tel" name="tel" placeholder="+49 681 123456"></label>
    <label class="f"><code>&lt;input type="url"&gt;</code><input type="url" name="url" placeholder="https://example.com"></label>
    <label class="f"><code>&lt;input type="search"&gt;</code><input type="search" name="search" placeholder="Search…"></label>
    <label class="f"><code>&lt;input type="number" min="0" max="100" step="5"&gt;</code><input type="number" name="number" min="0" max="100" step="5" value="10"></label>
    <label class="f"><code>&lt;input list="browsers"&gt;</code>
      <input type="text" name="browser" list="browsers" placeholder="Pick or type a browser">
      <datalist id="browsers"><option value="Firefox"><option value="Chrome"><option value="Safari"><option value="Edge"></datalist>
    </label>
  </div>
  <label class="f" style="margin-top:14px"><code>&lt;textarea&gt;</code><textarea name="message" placeholder="Write a longer message…"></textarea></label>
</section>

<section>
  <h2>Date and time</h2>
  <p>Browsers show a native picker for each of these.</p>
  <div class="grid">
    <label class="f"><code>&lt;input type="date"&gt;</code><input type="date" name="date"></label>
    <label class="f"><code>&lt;input type="time"&gt;</code><input type="time" name="time"></label>
    <label class="f"><code>&lt;input type="datetime-local"&gt;</code><input type="datetime-local" name="datetime"></label>
    <label class="f"><code>&lt;input type="month"&gt;</code><input type="month" name="month"></label>
    <label class="f"><code>&lt;input type="week"&gt;</code><input type="week" name="week"></label>
  </div>
</section>

<section>
  <h2>Choices</h2>
  <p>Checkboxes allow several answers, radio buttons exactly one, and a select works as either.</p>
  <div class="grid">
    <fieldset>
      <legend>Checkboxes</legend>
      <div class="row" style="flex-direction:column;align-items:flex-start;gap:8px">
        <label><input type="checkbox" id="all"> <code>&lt;input type="checkbox"&gt;</code></label>
        <label><input type="checkbox" class="opt" name="topics" value="news"> <code>&lt;input type="checkbox" value="news"&gt;</code></label>
        <label><input type="checkbox" class="opt" name="topics" value="tips" checked> <code>&lt;input type="checkbox" value="tips" checked&gt;</code></label>
        <label><input type="checkbox" class="opt" name="topics" value="offers"> <code>&lt;input type="checkbox" value="offers"&gt;</code></label>
      </div>
    </fieldset>
    <fieldset>
      <legend>Radio buttons</legend>
      <div class="row" style="flex-direction:column;align-items:flex-start;gap:8px">
        <label><input type="radio" name="plan" value="free" checked> <code>&lt;input type="radio" value="free" checked&gt;</code></label>
        <label><input type="radio" name="plan" value="plus"> <code>&lt;input type="radio" value="plus"&gt;</code></label>
        <label><input type="radio" name="plan" value="team"> <code>&lt;input type="radio" value="team"&gt;</code></label>
        <label><input type="radio" name="plan" value="legacy" disabled> <code>&lt;input type="radio" value="legacy" disabled&gt;</code></label>
      </div>
    </fieldset>
    <div style="display:flex;flex-direction:column;gap:14px">
      <label class="f"><code>&lt;select&gt;</code>
        <select name="country">
          <option value="">Choose a country</option>
          <optgroup label="Europe"><option>Germany</option><option>France</option><option>Spain</option></optgroup>
          <optgroup label="Americas"><option>Canada</option><option>Brazil</option></optgroup>
        </select>
      </label>
      <label class="f"><code>&lt;select multiple&gt;</code><small>Hold Ctrl or Cmd to pick several</small>
        <select name="langs" multiple size="4"><option>German</option><option>English</option><option>French</option><option>Spanish</option></select>
      </label>
    </div>
  </div>
</section>

<section>
  <h2>Sliders, colors and files</h2>
  <p>Values update as you drag, pick or choose.</p>
  <div class="grid">
    <label class="f"><span><code>&lt;input type="range"&gt;</code> <output id="volOut">40</output></span>
      <input type="range" name="volume" min="0" max="100" value="40">
    </label>
    <label class="f"><code>&lt;input type="color"&gt;</code><span><input type="color" name="color" value="#2f5bff"> <output id="colOut">#2f5bff</output></span></label>
    <label class="f"><code>&lt;input type="file" multiple&gt;</code><input type="file" name="file" multiple></label>
    <input type="hidden" name="hidden" value="secret-token-42">
  </div>
</section>

<section>
  <h2>Progress and meter</h2>
  <p>Read-only indicators that you drive from script.</p>
  <div class="grid">
    <div>
      <label class="f"><span><code>&lt;progress&gt;</code> <output id="progOut">35%</output></span><progress id="prog" max="100" value="35"></progress></label>
      <div class="row" style="margin-top:10px">
        <button type="button" id="less">−10</button><button type="button" id="more">+10</button>
      </div>
    </div>
    <label class="f"><code>&lt;meter&gt;</code>
      <meter id="meter" min="0" max="100" low="30" high="70" optimum="90" value="55"></meter>
    </label>
  </div>
</section>

<section>
  <h2>Buttons</h2>
  <p>Submit validates and sends, reset restores defaults, plain buttons only run script.</p>
  <div class="row">
    <button type="submit" class="primary">Submit form</button>
    <button type="reset">Reset form</button>
    <button type="button" id="toast">Plain button</button>
    <button type="button" class="danger">Danger</button>
    <button type="button" disabled>Disabled</button>
    <input type="button" value="Input button" id="inputBtn">
  </div>
  <p id="msg" role="status" style="margin:12px 0 0;color:var(--ok)"></p>
</section>

</form>

<section>
  <h2>Disclosure, dialog and links</h2>
  <p>Elements that open, expand or navigate without a form.</p>
  <details open><summary>Details and summary</summary><p style="margin:8px 0 0">This content is hidden or shown by the browser, no JavaScript needed.</p></details>
  <details><summary>Another panel</summary><p style="margin:8px 0 0">Panels can be grouped with a shared <code>name</code> attribute so only one stays open.</p></details>
  <div class="row" style="margin-top:14px">
    <button type="button" id="openDlg">Open dialog</button>
    <a class="demo" href="#top" id="lnk">Anchor link</a>
  </div>
  <dialog id="dlg">
    <form method="dialog">
      <h2>Dialog element</h2>
      <p>This modal traps focus and closes with the Escape key.</p>
      <div class="row" style="justify-content:flex-end"><button value="cancel">Cancel</button><button value="ok" class="primary">Confirm</button></div>
    </form>
  </dialog>
</section>

<section>
  <h2>Editable content</h2>
  <p>Any element becomes editable with the <code>contenteditable</code> attribute.</p>
  <div contenteditable="true" spellcheck="true">Click here and type to edit this paragraph.</div>
</section>

</main>

</body>
</html>

 02-1-dom-io/string_interpolation.py

New file
@@ -0,0 +1,6 @@
title = "The TeX book"
author = "Donald Knuth"
book_html = f'''
<span class="title">{title}</span>
<span class="author">{author}</span>'''
print(book_html)

 02-2-toRadians/index.html

New file
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>toRandians</title>
</head>
<body>

<input id="x1">
<input id="y1">
<input id="x2">
<input id="y2">

<!--
<p>Geben Sie die Koordinaten in Reihenfolge x1;y1;x2;y2 ein!</p>
<input id="coordinaten">
-->
<button type="button" id="ok">OK</button>
<p id="output"></p>
<script src="winkel.js"></script>
</body>
</html>

 02-2-toRadians/winkel.js

New file
@@ -0,0 +1,28 @@
const toRadians = (degrees) => degrees * Math.PI / 180;

const distance = (x1, y1, x2, y2) => {
    const deltaX = x2 - x1;
    const deltaY = y2 - y1;
    return Math.hypot(deltaX, deltaY);
}

document.getElementById("ok").addEventListener("click", () => {
    const x1 = document.getElementById("x1").value;
    const y1 = document.getElementById("y1").value;
    const x2 = document.getElementById("x2").value;
    const y2 = document.getElementById("y2").value;

    /*const inputValue = document.getElementById("coordinaten").value;
    const coordinates = inputValue.split(";");
    const x1 = coordinates[0];
    const y1 = coordinates[1];
    const x2 = coordinates[2];
    const y2 = coordinates[3];

     */
    const h = distance(
        Number.parseFloat(x1), Number.parseFloat(y1),
        Number.parseFloat(x2), Number.parseFloat(y2)
    )
    document.getElementById("output").textContent = `${h}`;
})

 02-3-laptop/index.html

New file
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Laptop</title>
</head>
<body>

<input id="diagonal" type="number">
<input id="ratio" type="text">
<button id="ok" type="button">OK</button>

<p id="output"></p>

<script src="laptop.js"></script>
</body>
</html>

 02-3-laptop/laptop.js

New file
@@ -0,0 +1,21 @@
const convertRatioInNumber = (r) => {
    const fraction = r.split(":");
    return Number.parseInt(fraction[0]) / Number.parseInt(fraction[1]);
}

const calDimension = (d, r) => {
    const h = d/(Math.sqrt(r**2 + 1));
    const b = r * h;
    return [b, h];
}

document.getElementById("ok").addEventListener("click", () => {
    const diagonal = document.getElementById("diagonal").value;
    const ratio = document.getElementById("ratio").value;
    //console.log({diagonal, ratio});
    const r = convertRatioInNumber(ratio);
    const d = Number.parseInt(diagonal);
    const result = calDimension(d, r);
    const output = document.getElementById("output");
    output.textContent = `${result[0].toFixed(2)} x ${result[1].toFixed(2)}`;
});