diff --git a/src/components/slides/javascript/01-control-flow/if-else.astro b/src/components/slides/javascript/01-control-flow/if-else.astro new file mode 100644 index 0000000..d21730b --- /dev/null +++ b/src/components/slides/javascript/01-control-flow/if-else.astro @@ -0,0 +1,110 @@ +
+
+

If - Else Statements

+
+ +
+

In JS ist das if-else Konstrukt das gleiche wie in vielen anderen Sprachen

+

+      if (/* Condition */) {
+
+      } else if (/* Condition */) {
+        // Es können weitere else-if cases hinzugefügt werden
+      } else {
+        // "Everything else"
+      }
+    
+
+ +
+

Die Conditionals müssen natürlich einem wahren oder falschen Wert (Boolean) entsprechen.

+

Hier kommt nun zum ersten mal einer der Features von JS zu tragen, die manchmal zu skurillen Ergebnissen führt: Implicit Type Conversion

+
+ +
+

In bestimmten Fällen erwartet JavaScript einen bestimmten Datentyp. Wird ein anderer Datentyp angefunden, so versucht JavaScript den Wert in den benötigten Datentyp zu konvertieren ohne dass der Entwickler explizit eine Konversion durchführen muss.

+

Die Konversion geschieht nahtlos zwischen verschiedenen Typen

+
+ +
+

+      let num = 5;
+      if (num) {
+        console.log('Num ist true!');
+      }
+      num = 0;
+      if (num) {
+        console.log('Num ist immernoch true?');
+      } else {
+        console.log('Num ist false!');
+      }
+    
+
+ +
+

Im Fall einer Boolean-Conversion sprechen wir darüber, ob ein Wert/Datentyp einen truthy oder falsy Wert hat.

+
+ +
+

Falsy Werte

+ +
+ +
+

Wir können eine Variable "explizit" zu einem Boolean konvertieren, indem wir ein doppeltes Ausrufezeichen ( !! ) vor die Variable stellen

+

+      let num = 5;
+      const isTruthyNum = !!num;
+    
+

Ein einfaches Ausrufezeichen konvertiert den Wert auch in ein Boolean, führt aber eine Not-Operation aus. (Im Grunde wenden wir ein Not-Not mit dem doppelten Ausrufezeichen an)

+
+ +
+

Werte miteinander Vergleichen

+

Eine weitere Besonderheit in JS: Es gibt 2 "Arten" um eine Gleicheit festzustellen.

+

Hierfür gibt es den "einfach" Vergleichsoperator == und einen sicheren Vergleichsoperator ===

+

Der Unterschied zwischen == & === liegt darin, dass beim einfachen Vergleich, JavaScript unter Umständen den Datentypen konvertiert um Gleichheit zu testen.

+
+ +
+

Ein Beispiel

+

+      const theAnswer = 42;
+      if ("42" == theAnswer) {
+        console.log('Yay');
+      }
+      if ("42" === theAnswer) {
+        // Wird nicht gelogged
+        console.log('No Yay');
+      }
+    
+
+ +
+

Der Richtige Ansatz hierbei ist: Verwenden sie den Typ-Sicheren Vergleichsoperator "==="

+
+ +
+

Weitere Vergleichsoperationen

+ +
+ +
+

Es können mehrere Vergleiche durchgeführt werden und mit UND / ODER verknüpft werden:

+ +
+
\ No newline at end of file diff --git a/src/components/slides/javascript/01-control-flow/index.astro b/src/components/slides/javascript/01-control-flow/index.astro new file mode 100644 index 0000000..10e1056 --- /dev/null +++ b/src/components/slides/javascript/01-control-flow/index.astro @@ -0,0 +1,13 @@ +--- +import Title from "./title.astro"; +import IfElse from './if-else.astro'; +import SwitchCase from './switch-case.astro'; +import Loops from './loops.astro'; +--- + +
+ + <IfElse /> + <SwitchCase /> + <Loops /> +</div> \ No newline at end of file diff --git a/src/components/slides/javascript/01-control-flow/loops.astro b/src/components/slides/javascript/01-control-flow/loops.astro new file mode 100644 index 0000000..6d76ec4 --- /dev/null +++ b/src/components/slides/javascript/01-control-flow/loops.astro @@ -0,0 +1,37 @@ +<section> + <section> + <h2>Loops / Schleifen</h2> + </section> + + <section> + <p>Alle bekannten Schleifen die man wahrscheinlich aus anderen Programmiersprachen kennt, gibt es auch in JS</p> + <ul> + <li>while</li> + <li>do-while</li> + <li>for</li> + </ul> + </section> + + <section> + <p>Die Syntax ist auch der zu C oder Java sehr ähnlich / gleich</p> + <pre class="js"><code data-trim data-line-numbers is:raw> + // Kopfgesteuert + while (/* Condition */) { /* Code to Execute */ } + + // Fußgesteuert + do { /* Code to Execute */} (/* Condition */) + + // Zählschleife + // for (init; condition; "afterthought") + for (let i = 0; i < 5; i++) { + /* Code to Execute */ + } + </code></pre> + </section> + + <section> + <p>Eine Realität aus meiner Sicht als Webentwickler:</p> + <p>Ich verwende Schleifen in dieser Form nur noch sehr selten.</p> + <p>Wenn wir mit Arrays und dergleichen Arbeiten, gibt es bereits eine Menge an "Convenience"-Features, die wir verwenden können um über alle Inhalte eines Arrays zu iterrieren / manipulieren / testen.</p> + </section> +</section> \ No newline at end of file diff --git a/src/components/slides/javascript/01-control-flow/switch-case.astro b/src/components/slides/javascript/01-control-flow/switch-case.astro new file mode 100644 index 0000000..06efd9f --- /dev/null +++ b/src/components/slides/javascript/01-control-flow/switch-case.astro @@ -0,0 +1,25 @@ +<section> + <section> + <h2>Switch-Case</h2> + </section> + + <section> + <p>Auch in JavaScript haben wir die Möglichkeit mehrere Möglichkeiten einer Variable abzufragen.</p> + <pre class="js"><code data-trim data-line-numbers is:raw> + const num = 42; + switch (num) { + case 1: + break; + case 42: + // Code hier wird ausgeführt + break; + default: + // Falls kein 'case' matched + } + </code></pre> + </section> + + <section> + <p>Es gibt leider keine Möglichkeit Funktionsaufrufe zum testen zu machen, hierfür müssen andere Optionen in Erwägung gezogen werden.</p> + </section> +</section> \ No newline at end of file diff --git a/src/components/slides/javascript/01-control-flow/ternary.astro b/src/components/slides/javascript/01-control-flow/ternary.astro new file mode 100644 index 0000000..e69de29 diff --git a/src/components/slides/javascript/01-control-flow/title.astro b/src/components/slides/javascript/01-control-flow/title.astro new file mode 100644 index 0000000..5cf3a60 --- /dev/null +++ b/src/components/slides/javascript/01-control-flow/title.astro @@ -0,0 +1,3 @@ +<section> + <h1>JavaScript - Control Flow</h1> +</section> \ No newline at end of file diff --git a/src/pages/slides/javascript/01-control-flow.astro b/src/pages/slides/javascript/01-control-flow.astro new file mode 100644 index 0000000..047a7dd --- /dev/null +++ b/src/pages/slides/javascript/01-control-flow.astro @@ -0,0 +1,15 @@ +--- +import Reveal from "../../../layouts/Reveal.astro"; +import Slides from "../../../components/slides/javascript/01-control-flow/index.astro"; +--- + +<Reveal title="Javascript - Control Flow"> + <Slides /> +</Reveal> + +<!-- IF-ELSE --> + <!-- SWITCH-CASE --> + <!-- WHILE --> + <!-- FOR LOOPS --> + +<!-- Conditionals, Comparisons, INcrement/Decrement, While Loops, For Loops, Switch Statement, Ternary --> \ No newline at end of file