diff --git a/slides/223015c/03-interaktivitaet-javascript.md b/slides/223015c/03-interaktivitaet-javascript.md index 2384b34..1469e33 100644 --- a/slides/223015c/03-interaktivitaet-javascript.md +++ b/slides/223015c/03-interaktivitaet-javascript.md @@ -208,6 +208,8 @@ Fehler werden hier auch angezeigt # Variablen: Daten speichern +![bg right:35%](./assets/demos/js-console.png) + ```javascript // Modern (empfohlen) let age = 25; // Kann geändert werden @@ -260,6 +262,8 @@ Template Literals mit Backticks! # Arrays: Listen +![bg right:35%](./assets/demos/js-arrays.png) + ```javascript const colors = ["red", "green", "blue"]; @@ -284,6 +288,8 @@ Arrays sind veränderbar auch bei const # Objects: Strukturierte Daten +![bg right:35%](./assets/demos/js-objects.png) + ```javascript const person = { firstName: "Max", @@ -413,6 +419,8 @@ Code-Block in geschweiften Klammern # Schleifen: Wiederholen +![bg right:35%](./assets/demos/js-loops.png) + ```javascript // for-Schleife for (let i = 0; i < 5; i++) { diff --git a/slides/223015c/assets/demos/js-arrays-frame.html b/slides/223015c/assets/demos/js-arrays-frame.html new file mode 100644 index 0000000..1bae208 --- /dev/null +++ b/slides/223015c/assets/demos/js-arrays-frame.html @@ -0,0 +1,34 @@ + + + + +Preview: js-arrays + + + +
+
+
+ + file:///beispiel/arrays.html +
+ +
+
+ + diff --git a/slides/223015c/assets/demos/js-arrays.html b/slides/223015c/assets/demos/js-arrays.html new file mode 100644 index 0000000..a9f877a --- /dev/null +++ b/slides/223015c/assets/demos/js-arrays.html @@ -0,0 +1,39 @@ + + + + + Arrays + + + +
>const f = ["🍎", "🍌", "🍒"];
+
+
+
🍎
0
+
🍌
1
+
🍒
2
+
+
+
>f[0];
+
←"🍎"
+
>f.length;
+
←3
+
>f.push("🍇");
+
←4
+ + diff --git a/slides/223015c/assets/demos/js-arrays.png b/slides/223015c/assets/demos/js-arrays.png new file mode 100644 index 0000000..e5568c1 Binary files /dev/null and b/slides/223015c/assets/demos/js-arrays.png differ diff --git a/slides/223015c/assets/demos/js-console-frame.html b/slides/223015c/assets/demos/js-console-frame.html new file mode 100644 index 0000000..f043fc9 --- /dev/null +++ b/slides/223015c/assets/demos/js-console-frame.html @@ -0,0 +1,34 @@ + + + + +Preview: js-console + + + +
+
+
+ + file:///beispiel/console.html +
+ +
+
+ + diff --git a/slides/223015c/assets/demos/js-console.html b/slides/223015c/assets/demos/js-console.html new file mode 100644 index 0000000..eaeac1d --- /dev/null +++ b/slides/223015c/assets/demos/js-console.html @@ -0,0 +1,28 @@ + + + + + DevTools Console + + + +
+
>let alter = 25;
+
>const name = "Max";
+
>console.log(name, alter);
+
←"Max" 25
+
>typeof alter;
+
←"number"
+
+ + diff --git a/slides/223015c/assets/demos/js-console.png b/slides/223015c/assets/demos/js-console.png new file mode 100644 index 0000000..d0f08f6 Binary files /dev/null and b/slides/223015c/assets/demos/js-console.png differ diff --git a/slides/223015c/assets/demos/js-loops-frame.html b/slides/223015c/assets/demos/js-loops-frame.html new file mode 100644 index 0000000..d6f33b0 --- /dev/null +++ b/slides/223015c/assets/demos/js-loops-frame.html @@ -0,0 +1,34 @@ + + + + +Preview: js-loops + + + +
+
+
+ + file:///beispiel/loops.html +
+ +
+
+ + diff --git a/slides/223015c/assets/demos/js-loops.html b/slides/223015c/assets/demos/js-loops.html new file mode 100644 index 0000000..28ead15 --- /dev/null +++ b/slides/223015c/assets/demos/js-loops.html @@ -0,0 +1,27 @@ + + + + + Schleifen + + + +
+ 
for (let i = 0; i < 3; i++) {
+  console.log("Runde", i);
+}
+
+
←"Runde" 0
+
←"Runde" 1
+
←"Runde" 2
+ + diff --git a/slides/223015c/assets/demos/js-loops.png b/slides/223015c/assets/demos/js-loops.png new file mode 100644 index 0000000..488cc4e Binary files /dev/null and b/slides/223015c/assets/demos/js-loops.png differ diff --git a/slides/223015c/assets/demos/js-objects-frame.html b/slides/223015c/assets/demos/js-objects-frame.html new file mode 100644 index 0000000..fccdddd --- /dev/null +++ b/slides/223015c/assets/demos/js-objects-frame.html @@ -0,0 +1,34 @@ + + + + +Preview: js-objects + + + +
+
+
+ + file:///beispiel/objects.html +
+ +
+
+ + diff --git a/slides/223015c/assets/demos/js-objects.html b/slides/223015c/assets/demos/js-objects.html new file mode 100644 index 0000000..74f310b --- /dev/null +++ b/slides/223015c/assets/demos/js-objects.html @@ -0,0 +1,39 @@ + + + + + Objects + + + +
>const user = { name: "Max", alter: 25 };
+
+
+
name:
"Max"
+
alter:
25
+
studiert:
"DMW"
+
+
+
>user.name;
+
←"Max"
+
>user["alter"];
+
←25
+ + diff --git a/slides/223015c/assets/demos/js-objects.png b/slides/223015c/assets/demos/js-objects.png new file mode 100644 index 0000000..4d7f7b2 Binary files /dev/null and b/slides/223015c/assets/demos/js-objects.png differ