mirror of
https://github.com/TheTaz25/denis.ergin.git
synced 2025-07-06 21:38:47 +00:00
feat(slides): add classes + errors slides
This commit is contained in:
Denis Ergin
parent
d301724f4e
commit
e61700405e
5 changed files with 277 additions and 0 deletions
157
src/components/slides/javascript/06-classes-errors/classes.astro
Normal file
157
src/components/slides/javascript/06-classes-errors/classes.astro
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
<section>
|
||||
<section>
|
||||
<h2>Klassen in JavaScript</h2>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Zuallererst: Klassen sind in JavaScript "nur" Syntactic Sugar, aufgebaut auf dem Konzept der Objekte.</p>
|
||||
<p>Syntactic Sugar bezieht sich hierbei in Programmiersprachen darauf, dass komplexe Sachverhalte durch neue Paradigmen/Syntax vereinfacht werden.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Klassen in JavaScript sind aber "nicht so mächtig" wie andere Klassenbasierte Sprachen. Aber fangen wir einmal leicht an und definieren eine Klasse:</p>
|
||||
<pre class="js"><code data-trim data-line-numbers is:raw>
|
||||
class MyClass {
|
||||
// Hier kommt alles zur Klasse rein
|
||||
}
|
||||
|
||||
// Wir initialisieren eine
|
||||
// neue Instanz dieser Klasse mit "new"
|
||||
const instanz = new MyClass();
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Felder / Properties einer Klasse können wir einfach in den Klassen-Body schreiben</p>
|
||||
<pre class="js"><code data-trim data-line-numbers is:raw>
|
||||
class MyClass {
|
||||
propA = "foo";
|
||||
propB = 42;
|
||||
}
|
||||
|
||||
const instanz = new MyClass();
|
||||
|
||||
// "foo", 42
|
||||
console.log(instanz.propA, instanz.propB);
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Wenn wir Felder beim initialisieren belegen wollen indem wir Parameter übergeben, nutzen wir die <code>constructor</code> Methode der Klasse</p>
|
||||
<pre class="js"><code data-trim data-line-numbers is:raw>
|
||||
class MyClass {
|
||||
propA = undefined;
|
||||
|
||||
constructor (paramA) {
|
||||
this.propA = paramA;
|
||||
}
|
||||
}
|
||||
|
||||
const instanz = new MyClass('bar');
|
||||
// "bar"
|
||||
console.log(instanz.propA);
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Und wir können Klassen-Spezifische Funktionen definieren (und später auch aufrufen)</p>
|
||||
<pre class="js"><code data-trim data-line-numbers is:raw>
|
||||
class MyClass {
|
||||
propA = undefined;
|
||||
|
||||
constructor (paramA) {
|
||||
this.propA = paramA;
|
||||
}
|
||||
|
||||
setPropA (param) {
|
||||
this.propA = param;
|
||||
}
|
||||
|
||||
getPropA () {
|
||||
return this.propA;
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Mit dem keyword <code>static</code> können wir Statische Properties definieren.</p>
|
||||
<p>Statische Properties hängen der Klasse direkt an und können ohne Instanz abgefragt / aufgerufen werden.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<pre class="js"><code data-trim data-line-numbers is:raw>
|
||||
class MyClass {
|
||||
static property = "foo";
|
||||
}
|
||||
|
||||
console.log(MyClass.property);
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Es können auch Methoden statisch deklariert werden. Dann muss man keine Instanz erstellen um auf diese Funktionen zuzugreifen.</p>
|
||||
<p>Nützlich bei z.B. Helper-Utilities.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Klassen und Sub-Klassen</h3>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Es ist uns möglich Spezialisierte Klassen von Grundklassen zu erstellen.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<pre class="js"><code data-trim data-line-numbers is:raw>
|
||||
class Animal {
|
||||
animalSound = undefined;
|
||||
|
||||
constructor (sound) {
|
||||
this.animalSound = sound;
|
||||
}
|
||||
|
||||
walk() {
|
||||
console.log(`I am walking... ${this.animalSound}!`);
|
||||
}
|
||||
|
||||
speak() {
|
||||
console.log(this.animalSound);
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<pre class="js"><code data-trim data-line-numbers is:raw style="max-height: 560px;">
|
||||
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!');
|
||||
}
|
||||
}
|
||||
|
||||
</code></pre>
|
||||
<pre class="js"><code data-trim data-line-numbers is:raw>
|
||||
class Cat extends Animal {
|
||||
constructor() {
|
||||
super('Meow');
|
||||
}
|
||||
|
||||
knockOfTable(thing) {
|
||||
console.log(`${thing} should not be on the table ...`);
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<section>
|
||||
<section>
|
||||
<h2>Errors</h2>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Natürlich gibt es auch Situationen in JavaScript die zu Fehlerzuständen führen können.</p>
|
||||
<p>Wie in vielen anderen Sprachen gibt es auch in JS das Konzept diese Fehlerzustände in Form von <code>Errors</code> abzubilden, die wiederum später "gefangen" werden können.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Erstellen wir zuerst einen Fehler. Hierzu gibt es die globale Klasse Error, die wir mit <code>new</code> instanziieren können:</p>
|
||||
<pre class="js"><code data-trim data-line-numbers is:raw>
|
||||
const myError = new Error("Da ist was schief gelaufen");
|
||||
</code></pre>
|
||||
<p>Bei der Ausführung geschieht aber erstmal nichts besonderes. Keine Fehlermeldung in der Konsole und weiterer Code würde einfach ausgeführt werden.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Um einen Fehler / Error zu werfen, müssen wir dies mit dem keyword <code>throw</code> machen:</p>
|
||||
<pre class="js"><code data-trim data-line-numbers is:raw>
|
||||
const myError = new Error("Da ist was schief gelaufen");
|
||||
|
||||
throw myError;
|
||||
</code></pre>
|
||||
<p>Nun sollte in der Konsole auch eine entsprechende Fehlermeldung auftauchen, mit der Nachricht die wir mitgegeben haben.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Fehler abfangen</h3>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Sobald ein Fehler durch <code>throw</code> geworfen wurde, wird die Abarbeitung des Codes in der aktuellen Funktion unterbrochen und der Fehler an die Aufrufende Funktion geschickt.</p>
|
||||
<p>Solange der Fehler nicht abgefangen wird, wird der Fehler in Funktion für Funktion nach oben geliefert bis zum (Call) Stack-Anfang</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Um Fehler abzufangen, können wir die fragliche Funktion in ein <code>try-catch</code> wrappen.</p>
|
||||
<pre class="js"><code data-trim data-line-numbers is:raw>
|
||||
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');
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Wir können auch auf die eigentliche Fehlermeldung zugreifen, indem wir nach dem catch ähnlich zu Parametern, einen Wert erwarten.</p>
|
||||
<pre class="js"><code data-trim data-line-numbers is:raw>
|
||||
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);
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Wir können neben dem Error-Text noch eine weitere Information angeben: Was der Grund des Fehlers gewesen ist</p>
|
||||
<pre class="js"><code data-trim data-line-numbers is:raw>
|
||||
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);
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Wir viel / Wie sehr sollte man nun Error nutzen?</p>
|
||||
<p>Aus eigener Erfahrung, lohnt es sich auf Fehler-Zustände direkt zu reagieren, anstatt den Fehler zu ignorieren / woanders abzuhandeln.</p>
|
||||
<p>Wichtigster Punkt ist aber: Wenn ein Fehler aufkommt, von dem der User wissen sollte, sollte man dem User auch einen Fehler anzeigen.</p>
|
||||
<p>Es gibt verschiedene Möglichkeiten dies zu tun. Welche Ideen habt ihr / Was habt ihr gesehen?</p>
|
||||
</section>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
import Title from './title.astro';
|
||||
import Errors from './errors.astro';
|
||||
import Classes from './classes.astro';
|
||||
---
|
||||
|
||||
<div class="slides">
|
||||
<Title />
|
||||
<Classes />
|
||||
<Errors />
|
||||
</div>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<section>
|
||||
<h1>Klassen und Fehler in JavaScript</h1>
|
||||
</section>
|
||||
8
src/pages/slides/javascript/06-classes-errors.astro
Normal file
8
src/pages/slides/javascript/06-classes-errors.astro
Normal file
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue