public/uni
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add js basics demos: console, arrays, objects, loops

Browse Source
This commit is contained in:
Michael Czechowski
2026-04-20 13:25:09 +02:00
parent 7626852ac1
commit b6334035fc
13 changed files with 277 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
slides/223015c/03-interaktivitaet-javascript.md
View File

@@ -208,6 +208,8 @@ Fehler werden hier auch angezeigt
# Variablen: Daten speichern # Variablen: Daten speichern
![bg right:35%](./assets/demos/js-console.png)
```javascript ```javascript
// Modern (empfohlen) // Modern (empfohlen)
let age = 25; // Kann geändert werden let age = 25; // Kann geändert werden
@@ -260,6 +262,8 @@ Template Literals mit Backticks!
# Arrays: Listen # Arrays: Listen
![bg right:35%](./assets/demos/js-arrays.png)
```javascript ```javascript
const colors = ["red", "green", "blue"]; const colors = ["red", "green", "blue"];
@@ -284,6 +288,8 @@ Arrays sind veränderbar auch bei const
# Objects: Strukturierte Daten # Objects: Strukturierte Daten
![bg right:35%](./assets/demos/js-objects.png)
```javascript ```javascript
const person = { const person = {
firstName: "Max", firstName: "Max",
@@ -413,6 +419,8 @@ Code-Block in geschweiften Klammern
# Schleifen: Wiederholen # Schleifen: Wiederholen
![bg right:35%](./assets/demos/js-loops.png)
```javascript ```javascript
// for-Schleife // for-Schleife
for (let i = 0; i < 5; i++) { for (let i = 0; i < 5; i++) {

34
slides/223015c/assets/demos/js-arrays-frame.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: js-arrays</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/arrays.html</span>
</div>
<iframe src="./js-arrays.html"></iframe>
</div>
</div>
</body>
</html>

39
slides/223015c/assets/demos/js-arrays.html Normal file
View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Arrays</title>
<style>
body { margin: 0; padding: 14px 16px; font-family: ui-monospace, monospace; background: #fff; font-size: 0.95rem; }
.row { padding: 4px 0; border-bottom: 1px solid #f3f4f6; display: flex; gap: 8px; }
.prompt { color: #9ca3af; }
.num { color: #1e40af; }
.str { color: #15803d; }
.out { color: #6b7280; font-style: italic; }
.arr { display: inline-flex; gap: 2px; }
.cell {
border: 1px solid #d1d5db;
padding: 2px 8px;
border-radius: 3px;
background: #f9fafb;
}
.idx { font-size: 0.65rem; color: #9ca3af; text-align: center; }
</style>
</head>
<body>
<div class="row"><span class="prompt">&gt;</span><span>const f = [<span class="str">"🍎"</span>, <span class="str">"🍌"</span>, <span class="str">"🍒"</span>];</span></div>
<div style="margin: 8px 0 10px;">
<div class="arr">
<div><div class="cell">🍎</div><div class="idx">0</div></div>
<div><div class="cell">🍌</div><div class="idx">1</div></div>
<div><div class="cell">🍒</div><div class="idx">2</div></div>
</div>
</div>
<div class="row"><span class="prompt">&gt;</span><span>f[<span class="num">0</span>];</span></div>
<div class="row"><span class="prompt">←</span><span class="out"><span class="str">"🍎"</span></span></div>
<div class="row"><span class="prompt">&gt;</span><span>f.length;</span></div>
<div class="row"><span class="prompt">←</span><span class="out"><span class="num">3</span></span></div>
<div class="row"><span class="prompt">&gt;</span><span>f.push(<span class="str">"🍇"</span>);</span></div>
<div class="row"><span class="prompt">←</span><span class="out"><span class="num">4</span></span></div>
</body>
</html>

BIN
slides/223015c/assets/demos/js-arrays.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

34
slides/223015c/assets/demos/js-console-frame.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: js-console</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/console.html</span>
</div>
<iframe src="./js-console.html"></iframe>
</div>
</div>
</body>
</html>

28
slides/223015c/assets/demos/js-console.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>DevTools Console</title>
<style>
body { margin: 0; padding: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; background: #fff; }
.console { padding: 14px 16px; font-size: 0.95rem; }
.row { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px solid #f3f4f6; }
.prompt { color: #9ca3af; user-select: none; }
.input { color: #1a1a2e; flex: 1; }
.output { color: #6b7280; font-style: italic; flex: 1; }
.num { color: #1e40af; }
.str { color: #15803d; }
.key { color: #7c2d12; }
</style>
</head>
<body>
<div class="console">
<div class="row"><span class="prompt">&gt;</span><span class="input">let alter = <span class="num">25</span>;</span></div>
<div class="row"><span class="prompt">&gt;</span><span class="input">const name = <span class="str">"Max"</span>;</span></div>
<div class="row"><span class="prompt">&gt;</span><span class="input">console.log(name, alter);</span></div>
<div class="row"><span class="prompt">←</span><span class="output"><span class="str">"Max"</span> <span class="num">25</span></span></div>
<div class="row"><span class="prompt">&gt;</span><span class="input">typeof alter;</span></div>
<div class="row"><span class="prompt">←</span><span class="output"><span class="str">"number"</span></span></div>
</div>
</body>
</html>

BIN
slides/223015c/assets/demos/js-console.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

34
slides/223015c/assets/demos/js-loops-frame.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: js-loops</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/loops.html</span>
</div>
<iframe src="./js-loops.html"></iframe>
</div>
</div>
</body>
</html>

27
slides/223015c/assets/demos/js-loops.html Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Schleifen</title>
<style>
body { margin: 0; padding: 14px 16px; font-family: ui-monospace, monospace; background: #fff; font-size: 0.95rem; }
.row { padding: 4px 0; display: flex; gap: 8px; }
.prompt { color: #9ca3af; }
.out { color: #6b7280; font-style: italic; }
.num { color: #1e40af; }
.str { color: #15803d; }
.code { background: #0f0f23; color: #d63384; padding: 10px; border-radius: 4px; margin: 8px 0; }
.code pre { margin: 0; color: inherit; font-family: inherit; font-size: 0.85rem; }
</style>
</head>
<body>
<div class="code">
<pre>for (let i = 0; i < 3; i++) {
console.log("Runde", i);
}</pre>
</div>
<div class="row"><span class="prompt">←</span><span class="out"><span class="str">"Runde"</span> <span class="num">0</span></span></div>
<div class="row"><span class="prompt">←</span><span class="out"><span class="str">"Runde"</span> <span class="num">1</span></span></div>
<div class="row"><span class="prompt">←</span><span class="out"><span class="str">"Runde"</span> <span class="num">2</span></span></div>
</body>
</html>

BIN
slides/223015c/assets/demos/js-loops.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

34
slides/223015c/assets/demos/js-objects-frame.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: js-objects</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/objects.html</span>
</div>
<iframe src="./js-objects.html"></iframe>
</div>
</div>
</body>
</html>

39
slides/223015c/assets/demos/js-objects.html Normal file
View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Objects</title>
<style>
body { margin: 0; padding: 14px 16px; font-family: ui-monospace, monospace; background: #fff; font-size: 0.9rem; }
.card {
border: 2px solid #4f46e5;
border-radius: 6px;
padding: 12px 14px;
background: #eef2ff;
margin: 10px 0;
}
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
.k { color: #7c2d12; font-weight: 700; }
.v { color: #14532d; }
.row { padding: 4px 0; display: flex; gap: 8px; }
.prompt { color: #9ca3af; }
.out { color: #6b7280; font-style: italic; }
.str { color: #15803d; }
.num { color: #1e40af; }
</style>
</head>
<body>
<div class="row"><span class="prompt">&gt;</span><span>const user = { name: <span class="str">"Max"</span>, alter: <span class="num">25</span> };</span></div>
<div class="card">
<div class="kv">
<div class="k">name:</div><div class="v str">"Max"</div>
<div class="k">alter:</div><div class="v num">25</div>
<div class="k">studiert:</div><div class="v str">"DMW"</div>
</div>
</div>
<div class="row"><span class="prompt">&gt;</span><span>user.name;</span></div>
<div class="row"><span class="prompt">←</span><span class="out str">"Max"</span></div>
<div class="row"><span class="prompt">&gt;</span><span>user[<span class="str">"alter"</span>];</span></div>
<div class="row"><span class="prompt">←</span><span class="out num">25</span></div>
</body>
</html>

BIN
slides/223015c/assets/demos/js-objects.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB