add js demos for chapter 3: manipulate, classlist, create, events, preventdefault, todo, fetch, localstorage
This commit is contained in:
@@ -528,6 +528,8 @@ querySelectorAll = alle Treffer
|
||||
|
||||
# Elemente manipulieren
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
const element = document.querySelector("#meinElement");
|
||||
|
||||
@@ -556,6 +558,8 @@ style = Inline-Styles (camelCase!)
|
||||
|
||||
# Klassen manipulieren
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
const element = document.querySelector(".box");
|
||||
|
||||
@@ -584,6 +588,8 @@ toggle schaltet hin und her
|
||||
|
||||
# Elemente erstellen
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
// Neues Element erstellen
|
||||
const neuerAbsatz = document.createElement("p");
|
||||
@@ -652,6 +658,8 @@ Interaktive Webseiten durch Events
|
||||
|
||||
# Event Listener
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
const button = document.querySelector("#meinButton");
|
||||
|
||||
@@ -729,6 +737,8 @@ target = auslösendes Element
|
||||
|
||||
# Event.preventDefault()
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
// Link ohne Navigation
|
||||
const link = document.querySelector("a");
|
||||
@@ -845,6 +855,8 @@ HTML (Struktur) + CSS (Design) + JavaScript (Interaktivität)
|
||||
|
||||
# Beispiel: Todo-Liste
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
const form = document.querySelector("#todoForm");
|
||||
const input = document.querySelector("#todoInput");
|
||||
@@ -887,6 +899,8 @@ Node.js für Backend
|
||||
|
||||
# Fetch: Daten laden
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
// Mit async/await (modern)
|
||||
async function loadData() {
|
||||
@@ -908,6 +922,8 @@ APIs = Schnittstellen zu Daten, JSON = JavaScript Object Notation
|
||||
|
||||
# LocalStorage: Daten speichern
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
// Speichern
|
||||
localStorage.setItem("name", "Max");
|
||||
|
||||
34
slides/223015c/assets/demos/js-classlist-frame.html
Normal file
34
slides/223015c/assets/demos/js-classlist-frame.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: js-classlist</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/classlist.html</span>
|
||||
</div>
|
||||
<iframe src="./js-classlist.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
42
slides/223015c/assets/demos/js-classlist.html
Normal file
42
slides/223015c/assets/demos/js-classlist.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>classList</title>
|
||||
<style>
|
||||
body { font-family: system-ui, sans-serif; padding: 1.5rem; }
|
||||
h3 { margin: 0.5rem 0 0.4rem; font-size: 0.85rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
.box {
|
||||
padding: 16px 20px;
|
||||
border: 2px solid #9ca3af;
|
||||
border-radius: 6px;
|
||||
background: #f3f4f6;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.box.aktiv {
|
||||
border-color: #16a34a;
|
||||
background: #dcfce7;
|
||||
color: #14532d;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
|
||||
}
|
||||
button {
|
||||
font: inherit;
|
||||
padding: 8px 14px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #9ca3af;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h3>.box ohne Klasse</h3>
|
||||
<div class="box">inaktiv</div>
|
||||
|
||||
<h3>.box mit classList.add("aktiv")</h3>
|
||||
<div class="box aktiv">aktiv ✓</div>
|
||||
|
||||
<button>classList.toggle("aktiv")</button>
|
||||
</body>
|
||||
</html>
|
||||
BIN
slides/223015c/assets/demos/js-classlist.png
Normal file
BIN
slides/223015c/assets/demos/js-classlist.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
34
slides/223015c/assets/demos/js-create-frame.html
Normal file
34
slides/223015c/assets/demos/js-create-frame.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: js-create</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/create.html</span>
|
||||
</div>
|
||||
<iframe src="./js-create.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
40
slides/223015c/assets/demos/js-create.html
Normal file
40
slides/223015c/assets/demos/js-create.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>createElement</title>
|
||||
<style>
|
||||
body { font-family: system-ui, sans-serif; padding: 1.5rem; }
|
||||
h3 { margin: 0.5rem 0 0.4rem; font-size: 0.85rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
#container { border: 1px solid #e5e7eb; border-radius: 6px; padding: 14px; background: #f9fafb; }
|
||||
p { margin: 6px 0; padding: 6px 10px; background: #fff; border-radius: 4px; border: 1px solid #e5e7eb; }
|
||||
p.highlight {
|
||||
background: #fef3c7;
|
||||
border-color: #ca8a04;
|
||||
color: #713f12;
|
||||
font-weight: 600;
|
||||
animation: pulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
.badge {
|
||||
display: inline-block;
|
||||
background: #16a34a;
|
||||
color: #fff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-left: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h3>#container nach appendChild</h3>
|
||||
<div id="container">
|
||||
<p>Erster Absatz</p>
|
||||
<p>Zweiter Absatz</p>
|
||||
<p class="highlight">Ich bin neu!<span class="badge">createElement</span></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
slides/223015c/assets/demos/js-create.png
Normal file
BIN
slides/223015c/assets/demos/js-create.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
34
slides/223015c/assets/demos/js-event-listener-frame.html
Normal file
34
slides/223015c/assets/demos/js-event-listener-frame.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: js-event-listener</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/event-listener.html</span>
|
||||
</div>
|
||||
<iframe src="./js-event-listener.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
47
slides/223015c/assets/demos/js-event-listener.html
Normal file
47
slides/223015c/assets/demos/js-event-listener.html
Normal file
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Event Listener</title>
|
||||
<style>
|
||||
body { font-family: system-ui, sans-serif; padding: 1.5rem; text-align: center; }
|
||||
button {
|
||||
font: inherit;
|
||||
font-size: 1.2rem;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
border: 2px solid #1e40af;
|
||||
background: #dbeafe;
|
||||
color: #1e3a8a;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
.count {
|
||||
margin-top: 1.2rem;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
color: #d63384;
|
||||
}
|
||||
.console {
|
||||
margin-top: 1.2rem;
|
||||
background: #0f0f23;
|
||||
color: #d63384;
|
||||
padding: 10px 14px;
|
||||
border-radius: 6px;
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.85rem;
|
||||
text-align: left;
|
||||
}
|
||||
.console .prompt { color: #6b7280; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<button id="meinButton">Klick mich!</button>
|
||||
<div class="count">Klicks: 3</div>
|
||||
<div class="console">
|
||||
<div><span class="prompt">></span> Button wurde geklickt!</div>
|
||||
<div><span class="prompt">></span> Button wurde geklickt!</div>
|
||||
<div><span class="prompt">></span> Button wurde geklickt!</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
slides/223015c/assets/demos/js-event-listener.png
Normal file
BIN
slides/223015c/assets/demos/js-event-listener.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
34
slides/223015c/assets/demos/js-fetch-frame.html
Normal file
34
slides/223015c/assets/demos/js-fetch-frame.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: js-fetch</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/fetch.html</span>
|
||||
</div>
|
||||
<iframe src="./js-fetch.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
60
slides/223015c/assets/demos/js-fetch.html
Normal file
60
slides/223015c/assets/demos/js-fetch.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Fetch</title>
|
||||
<style>
|
||||
body { font-family: system-ui, sans-serif; padding: 1.5rem; }
|
||||
.url {
|
||||
font-family: ui-monospace, monospace;
|
||||
background: #f3f4f6;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
color: #4a4a6a;
|
||||
margin-bottom: 1rem;
|
||||
display: inline-block;
|
||||
}
|
||||
.arrow {
|
||||
margin: 0.6rem 0;
|
||||
color: #d63384;
|
||||
font-style: italic;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.json {
|
||||
background: #0f0f23;
|
||||
color: #d63384;
|
||||
padding: 14px;
|
||||
border-radius: 6px;
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.json .k { color: #86efac; }
|
||||
.json .s { color: #fde68a; }
|
||||
.json .n { color: #93c5fd; }
|
||||
.rendered {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 6px;
|
||||
padding: 14px;
|
||||
background: #f9fafb;
|
||||
}
|
||||
.rendered h3 { margin: 0 0 6px; }
|
||||
.rendered p { margin: 3px 0; color: #4a4a6a; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="url">GET https://api.example.com/user/1</div>
|
||||
<div class="json">{<br>
|
||||
<span class="k">"id"</span>: <span class="n">1</span>,<br>
|
||||
<span class="k">"name"</span>: <span class="s">"Max"</span>,<br>
|
||||
<span class="k">"email"</span>: <span class="s">"max@hdm.de"</span><br>
|
||||
}</div>
|
||||
<div class="arrow">↓ await response.json() → ins DOM rendern</div>
|
||||
<div class="rendered">
|
||||
<h3>Max</h3>
|
||||
<p>max@hdm.de</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
slides/223015c/assets/demos/js-fetch.png
Normal file
BIN
slides/223015c/assets/demos/js-fetch.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
34
slides/223015c/assets/demos/js-localstorage-frame.html
Normal file
34
slides/223015c/assets/demos/js-localstorage-frame.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: js-localstorage</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/localstorage.html</span>
|
||||
</div>
|
||||
<iframe src="./js-localstorage.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
46
slides/223015c/assets/demos/js-localstorage.html
Normal file
46
slides/223015c/assets/demos/js-localstorage.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>LocalStorage</title>
|
||||
<style>
|
||||
body { font-family: system-ui, sans-serif; padding: 1.5rem; }
|
||||
.card {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 6px;
|
||||
padding: 14px;
|
||||
margin-bottom: 1rem;
|
||||
background: #f9fafb;
|
||||
}
|
||||
h3 { margin: 0 0 0.4rem; font-size: 0.85rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
.kv {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 6px 14px;
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.k { color: #7c2d12; font-weight: 700; }
|
||||
.v { color: #14532d; }
|
||||
.reload {
|
||||
background: #dcfce7;
|
||||
border: 2px solid #16a34a;
|
||||
padding: 10px 14px;
|
||||
border-radius: 6px;
|
||||
color: #14532d;
|
||||
font-weight: 600;
|
||||
}
|
||||
.icon { font-size: 1.2em; margin-right: 6px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<h3>localStorage</h3>
|
||||
<div class="kv">
|
||||
<div class="k">"name"</div><div class="v">"Max"</div>
|
||||
<div class="k">"settings"</div><div class="v">{"darkMode":true}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reload"><span class="icon">💾</span>Bleibt nach Reload / Browser-Neustart erhalten</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
slides/223015c/assets/demos/js-localstorage.png
Normal file
BIN
slides/223015c/assets/demos/js-localstorage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
34
slides/223015c/assets/demos/js-manipulate-frame.html
Normal file
34
slides/223015c/assets/demos/js-manipulate-frame.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: js-manipulate</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/manipulate.html</span>
|
||||
</div>
|
||||
<iframe src="./js-manipulate.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
27
slides/223015c/assets/demos/js-manipulate.html
Normal file
27
slides/223015c/assets/demos/js-manipulate.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Element manipulieren</title>
|
||||
<style>
|
||||
body { font-family: system-ui, sans-serif; padding: 1.5rem; }
|
||||
h3 { margin: 0.5rem 0 0.4rem; font-size: 0.85rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
.demo { border: 1px solid #e5e7eb; border-radius: 6px; padding: 12px; margin-bottom: 14px; background: #f9fafb; }
|
||||
#meinElement { color: red; background: #fee2e2; padding: 8px 12px; border-radius: 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h3>Vorher</h3>
|
||||
<div class="demo"><p>Alter Text</p></div>
|
||||
|
||||
<h3>Nach JavaScript</h3>
|
||||
<div class="demo">
|
||||
<p id="meinElement">Neuer Text</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// element.textContent = "Neuer Text";
|
||||
// element.style.color = "red";
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
slides/223015c/assets/demos/js-manipulate.png
Normal file
BIN
slides/223015c/assets/demos/js-manipulate.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
34
slides/223015c/assets/demos/js-preventdefault-frame.html
Normal file
34
slides/223015c/assets/demos/js-preventdefault-frame.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: js-preventdefault</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/preventdefault.html</span>
|
||||
</div>
|
||||
<iframe src="./js-preventdefault.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
54
slides/223015c/assets/demos/js-preventdefault.html
Normal file
54
slides/223015c/assets/demos/js-preventdefault.html
Normal file
@@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>preventDefault</title>
|
||||
<style>
|
||||
body { font-family: system-ui, sans-serif; padding: 1.5rem; }
|
||||
form { display: flex; flex-direction: column; gap: 10px; max-width: 320px; }
|
||||
label { font-weight: 600; }
|
||||
input {
|
||||
font: inherit;
|
||||
padding: 8px 12px;
|
||||
border: 2px solid #d63384;
|
||||
border-radius: 4px;
|
||||
}
|
||||
button {
|
||||
font: inherit;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #1e40af;
|
||||
background: #dbeafe;
|
||||
color: #1e3a8a;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.status {
|
||||
margin-top: 1rem;
|
||||
padding: 10px 14px;
|
||||
border-radius: 6px;
|
||||
background: #dcfce7;
|
||||
border: 2px solid #16a34a;
|
||||
color: #14532d;
|
||||
font-weight: 600;
|
||||
max-width: 320px;
|
||||
}
|
||||
.no-reload {
|
||||
font-size: 0.8rem;
|
||||
color: #6b7280;
|
||||
font-style: italic;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<form>
|
||||
<label for="email">E-Mail</label>
|
||||
<input id="email" type="email" value="test@hdm.de">
|
||||
<button type="submit">Absenden</button>
|
||||
</form>
|
||||
<div class="status">✓ Formular verarbeitet (ohne Reload!)</div>
|
||||
<div class="no-reload">event.preventDefault() verhindert Seiten-Neuladen</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
slides/223015c/assets/demos/js-preventdefault.png
Normal file
BIN
slides/223015c/assets/demos/js-preventdefault.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
34
slides/223015c/assets/demos/js-todo-frame.html
Normal file
34
slides/223015c/assets/demos/js-todo-frame.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: js-todo</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/todo.html</span>
|
||||
</div>
|
||||
<iframe src="./js-todo.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
60
slides/223015c/assets/demos/js-todo.html
Normal file
60
slides/223015c/assets/demos/js-todo.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Todo-Liste</title>
|
||||
<style>
|
||||
body { font-family: system-ui, sans-serif; padding: 1.5rem; }
|
||||
h2 { margin: 0 0 1rem; }
|
||||
form { display: flex; gap: 8px; margin-bottom: 1rem; }
|
||||
input {
|
||||
flex: 1;
|
||||
font: inherit;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #9ca3af;
|
||||
border-radius: 4px;
|
||||
}
|
||||
button {
|
||||
font: inherit;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #1e40af;
|
||||
background: #1e40af;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
ul { list-style: none; padding: 0; margin: 0; }
|
||||
li {
|
||||
padding: 10px 14px;
|
||||
background: #f3f4f6;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 6px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
li::before {
|
||||
content: "○";
|
||||
color: #9ca3af;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.hint { font-size: 0.75rem; color: #6b7280; margin-top: 0.8rem; font-style: italic; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Meine Todos</h2>
|
||||
<form id="todoForm">
|
||||
<input id="todoInput" placeholder="Neue Aufgabe...">
|
||||
<button type="submit">+ Hinzufügen</button>
|
||||
</form>
|
||||
<ul id="todoList">
|
||||
<li>Folien vorbereiten</li>
|
||||
<li>Demo testen</li>
|
||||
<li>Kaffee holen</li>
|
||||
</ul>
|
||||
<div class="hint">Klick auf ein Todo = entfernt es</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
slides/223015c/assets/demos/js-todo.png
Normal file
BIN
slides/223015c/assets/demos/js-todo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Reference in New Issue
Block a user