From e61700405ee3f77d64064ed662eac96bdb3d4d93 Mon Sep 17 00:00:00 2001 From: Denis Ergin Date: Sun, 5 Jan 2025 17:39:43 +0100 Subject: [PATCH] feat(slides): add classes + errors slides --- .../06-classes-errors/classes.astro | 157 ++++++++++++++++++ .../javascript/06-classes-errors/errors.astro | 98 +++++++++++ .../javascript/06-classes-errors/index.astro | 11 ++ .../javascript/06-classes-errors/title.astro | 3 + .../slides/javascript/06-classes-errors.astro | 8 + 5 files changed, 277 insertions(+) create mode 100644 src/components/slides/javascript/06-classes-errors/classes.astro create mode 100644 src/components/slides/javascript/06-classes-errors/errors.astro create mode 100644 src/components/slides/javascript/06-classes-errors/index.astro create mode 100644 src/components/slides/javascript/06-classes-errors/title.astro create mode 100644 src/pages/slides/javascript/06-classes-errors.astro diff --git a/src/components/slides/javascript/06-classes-errors/classes.astro b/src/components/slides/javascript/06-classes-errors/classes.astro new file mode 100644 index 0000000..6989d77 --- /dev/null +++ b/src/components/slides/javascript/06-classes-errors/classes.astro @@ -0,0 +1,157 @@ +
+
+

Klassen in JavaScript

+
+ +
+

Zuallererst: Klassen sind in JavaScript "nur" Syntactic Sugar, aufgebaut auf dem Konzept der Objekte.

+

Syntactic Sugar bezieht sich hierbei in Programmiersprachen darauf, dass komplexe Sachverhalte durch neue Paradigmen/Syntax vereinfacht werden.

+
+ +
+

Klassen in JavaScript sind aber "nicht so mächtig" wie andere Klassenbasierte Sprachen. Aber fangen wir einmal leicht an und definieren eine Klasse:

+

+      class MyClass {
+        // Hier kommt alles zur Klasse rein
+      }
+
+      // Wir initialisieren eine
+      // neue Instanz dieser Klasse mit "new"
+      const instanz = new MyClass();
+    
+
+ +
+

Felder / Properties einer Klasse können wir einfach in den Klassen-Body schreiben

+

+      class MyClass {
+        propA = "foo";
+        propB = 42;
+      }
+
+      const instanz = new MyClass();
+
+      // "foo", 42
+      console.log(instanz.propA, instanz.propB);
+    
+
+ +
+

Wenn wir Felder beim initialisieren belegen wollen indem wir Parameter übergeben, nutzen wir die constructor Methode der Klasse

+

+      class MyClass {
+        propA = undefined;
+
+        constructor (paramA) {
+          this.propA = paramA;
+        }
+      }
+
+      const instanz = new MyClass('bar');
+      // "bar"
+      console.log(instanz.propA);
+    
+
+ +
+

Und wir können Klassen-Spezifische Funktionen definieren (und später auch aufrufen)

+

+      class MyClass {
+        propA = undefined;
+
+        constructor (paramA) {
+          this.propA = paramA;
+        }
+
+        setPropA (param) {
+          this.propA = param;
+        }
+
+        getPropA () {
+          return this.propA;
+        }
+      }
+    
+
+ +
+

Mit dem keyword static können wir Statische Properties definieren.

+

Statische Properties hängen der Klasse direkt an und können ohne Instanz abgefragt / aufgerufen werden.

+
+ +
+

+      class MyClass {
+        static property = "foo";
+      }
+
+      console.log(MyClass.property);
+    
+
+ +
+

Es können auch Methoden statisch deklariert werden. Dann muss man keine Instanz erstellen um auf diese Funktionen zuzugreifen.

+

Nützlich bei z.B. Helper-Utilities.

+
+ +
+

Klassen und Sub-Klassen

+
+ +
+

Es ist uns möglich Spezialisierte Klassen von Grundklassen zu erstellen.

+
+ +
+

+      class Animal {
+        animalSound = undefined;
+
+        constructor (sound) {
+          this.animalSound = sound;
+        }
+
+        walk() {
+          console.log(`I am walking... ${this.animalSound}!`);
+        }
+
+        speak() {
+          console.log(this.animalSound);
+        }
+      }
+    
+ + +
+ +
+

+      class Dog extends Animal {
+        breed = undefined;
+        constructor (breed) {
+          super('Woof');
+          this.breed = breed;
+        }
+
+        waggleTail () {
+          if (this.breed === 'aussie') {
+            throw new Error('I dont have a tail to wag!');
+          }
+          console.log('Wagging Tail!');
+        }
+      }
+      
+    
+

+      class Cat extends Animal {
+        constructor() {
+          super('Meow');
+        }
+
+        knockOfTable(thing) {
+          console.log(`${thing} should not be on the table ...`);
+        }
+      }
+    
+
+
\ No newline at end of file diff --git a/src/components/slides/javascript/06-classes-errors/errors.astro b/src/components/slides/javascript/06-classes-errors/errors.astro new file mode 100644 index 0000000..005a9a6 --- /dev/null +++ b/src/components/slides/javascript/06-classes-errors/errors.astro @@ -0,0 +1,98 @@ +
+
+

Errors

+
+ +
+

Natürlich gibt es auch Situationen in JavaScript die zu Fehlerzuständen führen können.

+

Wie in vielen anderen Sprachen gibt es auch in JS das Konzept diese Fehlerzustände in Form von Errors abzubilden, die wiederum später "gefangen" werden können.

+
+ +
+

Erstellen wir zuerst einen Fehler. Hierzu gibt es die globale Klasse Error, die wir mit new instanziieren können:

+

+      const myError = new Error("Da ist was schief gelaufen");
+    
+

Bei der Ausführung geschieht aber erstmal nichts besonderes. Keine Fehlermeldung in der Konsole und weiterer Code würde einfach ausgeführt werden.

+
+ +
+

Um einen Fehler / Error zu werfen, müssen wir dies mit dem keyword throw machen:

+

+      const myError = new Error("Da ist was schief gelaufen");
+
+      throw myError;
+    
+

Nun sollte in der Konsole auch eine entsprechende Fehlermeldung auftauchen, mit der Nachricht die wir mitgegeben haben.

+
+ +
+

Fehler abfangen

+
+ +
+

Sobald ein Fehler durch throw geworfen wurde, wird die Abarbeitung des Codes in der aktuellen Funktion unterbrochen und der Fehler an die Aufrufende Funktion geschickt.

+

Solange der Fehler nicht abgefangen wird, wird der Fehler in Funktion für Funktion nach oben geliefert bis zum (Call) Stack-Anfang

+
+ +
+

Um Fehler abzufangen, können wir die fragliche Funktion in ein try-catch wrappen.

+

+      const failingFunction = function () {
+        throw new Error("Da lief was schief");
+      }
+
+      try {
+        failingFunction();
+        console.log('Alles Fertig');
+      } catch {
+        console.warn('Etwas lief schief, aber wir haben das abgefangen');
+      }
+    
+
+ +
+

Wir können auch auf die eigentliche Fehlermeldung zugreifen, indem wir nach dem catch ähnlich zu Parametern, einen Wert erwarten.

+

+      const failingFunction = function () {
+        throw new Error("Da lief was schief");
+      }
+
+      try {
+        failingFunction();
+        console.log('Alles Fertig');
+      } catch (err) {
+        console.warn('Etwas lief schief, aber wir haben das abgefangen');
+        // Der Angegebene text befindet
+        // sich in der prop "message"
+        console.log(err.message);
+      }
+    
+
+ +
+

Wir können neben dem Error-Text noch eine weitere Information angeben: Was der Grund des Fehlers gewesen ist

+

+      const failingFunction = function () {
+        throw new Error("Da lief was schief", { cause: "User Input wrong" });
+      }
+
+      try {
+        failingFunction();
+        console.log('Alles Fertig');
+      } catch (err) {
+        console.warn('Etwas lief schief, aber wir haben das abgefangen');
+
+        console.log(err.message);
+        console.log(err.cause);
+      }
+    
+
+ +
+

Wir viel / Wie sehr sollte man nun Error nutzen?

+

Aus eigener Erfahrung, lohnt es sich auf Fehler-Zustände direkt zu reagieren, anstatt den Fehler zu ignorieren / woanders abzuhandeln.

+

Wichtigster Punkt ist aber: Wenn ein Fehler aufkommt, von dem der User wissen sollte, sollte man dem User auch einen Fehler anzeigen.

+

Es gibt verschiedene Möglichkeiten dies zu tun. Welche Ideen habt ihr / Was habt ihr gesehen?

+
+
\ No newline at end of file diff --git a/src/components/slides/javascript/06-classes-errors/index.astro b/src/components/slides/javascript/06-classes-errors/index.astro new file mode 100644 index 0000000..44a053c --- /dev/null +++ b/src/components/slides/javascript/06-classes-errors/index.astro @@ -0,0 +1,11 @@ +--- +import Title from './title.astro'; +import Errors from './errors.astro'; +import Classes from './classes.astro'; +--- + +
+ + <Classes /> + <Errors /> +</div> \ No newline at end of file diff --git a/src/components/slides/javascript/06-classes-errors/title.astro b/src/components/slides/javascript/06-classes-errors/title.astro new file mode 100644 index 0000000..97fc117 --- /dev/null +++ b/src/components/slides/javascript/06-classes-errors/title.astro @@ -0,0 +1,3 @@ +<section> + <h1>Klassen und Fehler in JavaScript</h1> +</section> \ No newline at end of file diff --git a/src/pages/slides/javascript/06-classes-errors.astro b/src/pages/slides/javascript/06-classes-errors.astro new file mode 100644 index 0000000..0234b3f --- /dev/null +++ b/src/pages/slides/javascript/06-classes-errors.astro @@ -0,0 +1,8 @@ +--- +import Reveal from "../../../layouts/Reveal.astro"; +import Slides from "../../../components/slides/javascript/06-classes-errors/index.astro"; +--- + +<Reveal title="Klassen und Errors in JavaScript"> + <Slides /> +</Reveal> \ No newline at end of file