diff --git a/slides/223015c/03-interaktivitaet-javascript.md b/slides/223015c/03-interaktivitaet-javascript.md index ddc6a53..2384b34 100644 --- a/slides/223015c/03-interaktivitaet-javascript.md +++ b/slides/223015c/03-interaktivitaet-javascript.md @@ -528,6 +528,8 @@ querySelectorAll = alle Treffer # Elemente manipulieren +![bg right:35%](./assets/demos/js-manipulate.png) + ```javascript const element = document.querySelector("#meinElement"); @@ -556,6 +558,8 @@ style = Inline-Styles (camelCase!) # Klassen manipulieren +![bg right:35%](./assets/demos/js-classlist.png) + ```javascript const element = document.querySelector(".box"); @@ -584,6 +588,8 @@ toggle schaltet hin und her # Elemente erstellen +![bg right:35%](./assets/demos/js-create.png) + ```javascript // Neues Element erstellen const neuerAbsatz = document.createElement("p"); @@ -652,6 +658,8 @@ Interaktive Webseiten durch Events # Event Listener +![bg right:35%](./assets/demos/js-event-listener.png) + ```javascript const button = document.querySelector("#meinButton"); @@ -729,6 +737,8 @@ target = auslösendes Element # Event.preventDefault() +![bg right:35%](./assets/demos/js-preventdefault.png) + ```javascript // Link ohne Navigation const link = document.querySelector("a"); @@ -845,6 +855,8 @@ HTML (Struktur) + CSS (Design) + JavaScript (Interaktivität) # Beispiel: Todo-Liste +![bg right:35%](./assets/demos/js-todo.png) + ```javascript const form = document.querySelector("#todoForm"); const input = document.querySelector("#todoInput"); @@ -887,6 +899,8 @@ Node.js für Backend # Fetch: Daten laden +![bg right:35%](./assets/demos/js-fetch.png) + ```javascript // Mit async/await (modern) async function loadData() { @@ -908,6 +922,8 @@ APIs = Schnittstellen zu Daten, JSON = JavaScript Object Notation # LocalStorage: Daten speichern +![bg right:35%](./assets/demos/js-localstorage.png) + ```javascript // Speichern localStorage.setItem("name", "Max"); diff --git a/slides/223015c/assets/demos/js-classlist-frame.html b/slides/223015c/assets/demos/js-classlist-frame.html new file mode 100644 index 0000000..d71810a --- /dev/null +++ b/slides/223015c/assets/demos/js-classlist-frame.html @@ -0,0 +1,34 @@ + + + + +Preview: js-classlist + + + +
+
+
+ + file:///beispiel/classlist.html +
+ +
+
+ + diff --git a/slides/223015c/assets/demos/js-classlist.html b/slides/223015c/assets/demos/js-classlist.html new file mode 100644 index 0000000..563c45f --- /dev/null +++ b/slides/223015c/assets/demos/js-classlist.html @@ -0,0 +1,42 @@ + + + + + classList + + + +

.box ohne Klasse

+
inaktiv
+ +

.box mit classList.add("aktiv")

+
aktiv ✓
+ + + + diff --git a/slides/223015c/assets/demos/js-classlist.png b/slides/223015c/assets/demos/js-classlist.png new file mode 100644 index 0000000..526a4a0 Binary files /dev/null and b/slides/223015c/assets/demos/js-classlist.png differ diff --git a/slides/223015c/assets/demos/js-create-frame.html b/slides/223015c/assets/demos/js-create-frame.html new file mode 100644 index 0000000..13e8131 --- /dev/null +++ b/slides/223015c/assets/demos/js-create-frame.html @@ -0,0 +1,34 @@ + + + + +Preview: js-create + + + +
+
+
+ + file:///beispiel/create.html +
+ +
+
+ + diff --git a/slides/223015c/assets/demos/js-create.html b/slides/223015c/assets/demos/js-create.html new file mode 100644 index 0000000..33762ba --- /dev/null +++ b/slides/223015c/assets/demos/js-create.html @@ -0,0 +1,40 @@ + + + + + createElement + + + +

#container nach appendChild

+
+

Erster Absatz

+

Zweiter Absatz

+

Ich bin neu!createElement

+
+ + diff --git a/slides/223015c/assets/demos/js-create.png b/slides/223015c/assets/demos/js-create.png new file mode 100644 index 0000000..668b438 Binary files /dev/null and b/slides/223015c/assets/demos/js-create.png differ diff --git a/slides/223015c/assets/demos/js-event-listener-frame.html b/slides/223015c/assets/demos/js-event-listener-frame.html new file mode 100644 index 0000000..c5644d5 --- /dev/null +++ b/slides/223015c/assets/demos/js-event-listener-frame.html @@ -0,0 +1,34 @@ + + + + +Preview: js-event-listener + + + +
+
+
+ + file:///beispiel/event-listener.html +
+ +
+
+ + diff --git a/slides/223015c/assets/demos/js-event-listener.html b/slides/223015c/assets/demos/js-event-listener.html new file mode 100644 index 0000000..797539c --- /dev/null +++ b/slides/223015c/assets/demos/js-event-listener.html @@ -0,0 +1,47 @@ + + + + + Event Listener + + + + +
Klicks: 3
+
+
> Button wurde geklickt!
+
> Button wurde geklickt!
+
> Button wurde geklickt!
+
+ + diff --git a/slides/223015c/assets/demos/js-event-listener.png b/slides/223015c/assets/demos/js-event-listener.png new file mode 100644 index 0000000..0445e78 Binary files /dev/null and b/slides/223015c/assets/demos/js-event-listener.png differ diff --git a/slides/223015c/assets/demos/js-fetch-frame.html b/slides/223015c/assets/demos/js-fetch-frame.html new file mode 100644 index 0000000..984ffd4 --- /dev/null +++ b/slides/223015c/assets/demos/js-fetch-frame.html @@ -0,0 +1,34 @@ + + + + +Preview: js-fetch + + + +
+
+
+ + file:///beispiel/fetch.html +
+ +
+
+ + diff --git a/slides/223015c/assets/demos/js-fetch.html b/slides/223015c/assets/demos/js-fetch.html new file mode 100644 index 0000000..da261e3 --- /dev/null +++ b/slides/223015c/assets/demos/js-fetch.html @@ -0,0 +1,60 @@ + + + + + Fetch + + + +
GET https://api.example.com/user/1
+
{
+   "id": 1,
+   "name": "Max",
+   "email": "max@hdm.de"
+}
+
↓ await response.json() → ins DOM rendern
+
+

Max

+

max@hdm.de

+
+ + diff --git a/slides/223015c/assets/demos/js-fetch.png b/slides/223015c/assets/demos/js-fetch.png new file mode 100644 index 0000000..ea1796e Binary files /dev/null and b/slides/223015c/assets/demos/js-fetch.png differ diff --git a/slides/223015c/assets/demos/js-localstorage-frame.html b/slides/223015c/assets/demos/js-localstorage-frame.html new file mode 100644 index 0000000..2e0ab75 --- /dev/null +++ b/slides/223015c/assets/demos/js-localstorage-frame.html @@ -0,0 +1,34 @@ + + + + +Preview: js-localstorage + + + +
+
+
+ + file:///beispiel/localstorage.html +
+ +
+
+ + diff --git a/slides/223015c/assets/demos/js-localstorage.html b/slides/223015c/assets/demos/js-localstorage.html new file mode 100644 index 0000000..c592368 --- /dev/null +++ b/slides/223015c/assets/demos/js-localstorage.html @@ -0,0 +1,46 @@ + + + + + LocalStorage + + + +
+

localStorage

+
+
"name"
"Max"
+
"settings"
{"darkMode":true}
+
+
+
💾Bleibt nach Reload / Browser-Neustart erhalten
+ + diff --git a/slides/223015c/assets/demos/js-localstorage.png b/slides/223015c/assets/demos/js-localstorage.png new file mode 100644 index 0000000..1f9a603 Binary files /dev/null and b/slides/223015c/assets/demos/js-localstorage.png differ diff --git a/slides/223015c/assets/demos/js-manipulate-frame.html b/slides/223015c/assets/demos/js-manipulate-frame.html new file mode 100644 index 0000000..170bbc3 --- /dev/null +++ b/slides/223015c/assets/demos/js-manipulate-frame.html @@ -0,0 +1,34 @@ + + + + +Preview: js-manipulate + + + +
+
+
+ + file:///beispiel/manipulate.html +
+ +
+
+ + diff --git a/slides/223015c/assets/demos/js-manipulate.html b/slides/223015c/assets/demos/js-manipulate.html new file mode 100644 index 0000000..6d83334 --- /dev/null +++ b/slides/223015c/assets/demos/js-manipulate.html @@ -0,0 +1,27 @@ + + + + + Element manipulieren + + + +

Vorher

+

Alter Text

+ +

Nach JavaScript

+
+

Neuer Text

+
+ + + + diff --git a/slides/223015c/assets/demos/js-manipulate.png b/slides/223015c/assets/demos/js-manipulate.png new file mode 100644 index 0000000..0f2e5a5 Binary files /dev/null and b/slides/223015c/assets/demos/js-manipulate.png differ diff --git a/slides/223015c/assets/demos/js-preventdefault-frame.html b/slides/223015c/assets/demos/js-preventdefault-frame.html new file mode 100644 index 0000000..af513f5 --- /dev/null +++ b/slides/223015c/assets/demos/js-preventdefault-frame.html @@ -0,0 +1,34 @@ + + + + +Preview: js-preventdefault + + + +
+
+
+ + file:///beispiel/preventdefault.html +
+ +
+
+ + diff --git a/slides/223015c/assets/demos/js-preventdefault.html b/slides/223015c/assets/demos/js-preventdefault.html new file mode 100644 index 0000000..062adde --- /dev/null +++ b/slides/223015c/assets/demos/js-preventdefault.html @@ -0,0 +1,54 @@ + + + + + preventDefault + + + +
+ + + +
+
✓ Formular verarbeitet (ohne Reload!)
+
event.preventDefault() verhindert Seiten-Neuladen
+ + diff --git a/slides/223015c/assets/demos/js-preventdefault.png b/slides/223015c/assets/demos/js-preventdefault.png new file mode 100644 index 0000000..143b917 Binary files /dev/null and b/slides/223015c/assets/demos/js-preventdefault.png differ diff --git a/slides/223015c/assets/demos/js-todo-frame.html b/slides/223015c/assets/demos/js-todo-frame.html new file mode 100644 index 0000000..3675667 --- /dev/null +++ b/slides/223015c/assets/demos/js-todo-frame.html @@ -0,0 +1,34 @@ + + + + +Preview: js-todo + + + +
+
+
+ + file:///beispiel/todo.html +
+ +
+
+ + diff --git a/slides/223015c/assets/demos/js-todo.html b/slides/223015c/assets/demos/js-todo.html new file mode 100644 index 0000000..8078687 --- /dev/null +++ b/slides/223015c/assets/demos/js-todo.html @@ -0,0 +1,60 @@ + + + + + Todo-Liste + + + +

Meine Todos

+
+ + +
+ +
Klick auf ein Todo = entfernt es
+ + diff --git a/slides/223015c/assets/demos/js-todo.png b/slides/223015c/assets/demos/js-todo.png new file mode 100644 index 0000000..e4501f9 Binary files /dev/null and b/slides/223015c/assets/demos/js-todo.png differ