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

This commit is contained in:
2026-04-20 13:25:09 +02:00
parent 7626852ac1
commit b6334035fc
13 changed files with 277 additions and 0 deletions

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>