add js basics demos: console, arrays, objects, loops
This commit is contained in:
39
slides/223015c/assets/demos/js-objects.html
Normal file
39
slides/223015c/assets/demos/js-objects.html
Normal 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">></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">></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">></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>
|
||||
Reference in New Issue
Block a user