+ + Suman Kunwar + +
|
+
+
+ + Suman Kunwar + + |
+
Click me to activate the handler.
+ +``` + +Hier wird `addEventListener` am `window`-Objekt (ein vom Browser bereitgestelltes eingebautes Objekt) aufgerufen, um einen Handler für das gesamte `window` zu registrieren. Der Aufruf der Methode `addEventListener` registriert das zweite Argument als Funktion, die aufgerufen wird, sobald das durch das erste Argument beschriebene Ereignis eintritt. + +{% hint style="info" %} +Ereignis-Listener werden nur aufgerufen, wenn das Ereignis im Kontext des Objekts passiert, auf dem sie registriert wurden. +{% endhint %} + +Einige der häufigen HTML-Ereignisse sind hier aufgeführt: + +| Ereignis | Beschreibung | +| ------------- |---------------------------------------------------------| +| `onclick` | Wenn der Benutzer auf das Element klickt | +| `onchange` | Wenn der Benutzer den Wert einer Formulareingabe ändert | +| `onkeydown` | Wenn der Benutzer eine Taste drückt | +| `onload` | Wenn der Browser das Laden abgeschlossen hat | +| `onmouseout` | Wenn der Mauszeiger das Element verlässt | +| `onmouseover` | Wenn der Mauszeiger über das Element bewegt wird | + + +Es ist üblich, dass Handler, die auf Knoten mit Kindelementen registriert sind, auch Ereignisse von diesen Kindknoten empfangen. Wenn beispielsweise ein Button innerhalb eines Absatzes geklickt wird, empfängt auch der Handler des Absatzes das Klick-Ereignis. Wenn in beiden ein Handler vorhanden ist, wird der innere zuerst ausgeführt. Man sagt, das Ereignis *propagiert* nach außen – vom auslösenden Knoten über dessen Eltern bis hin zur Wurzel des Dokuments. + +Der Ereignis-Handler kann die Methode `stopPropagation` am Ereignisobjekt aufrufen, um zu verhindern, dass weiter oben liegende Handler das Ereignis ebenfalls erhalten. Das ist nützlich, wenn du zum Beispiel einen Button in einem klickbaren Element hast und vermeiden möchtest, dass ein Klick auf den Button das äußere Element ebenfalls auslöst. + +```javascript +A paragraph with a .
+ +``` + +Hier sind sowohl am Absatz als auch am Button *`mousedown`*-Handler registriert. Beim Klick auf den Button ruft der Handler des Buttons `stopPropagation` auf, wodurch verhindert wird, dass der Handler des Absatzes ausgeführt wird. + +Ereignisse können ein Standardverhalten haben. Zum Beispiel: Ein Link navigiert beim Anklicken zur Zieladresse, beim Drücken der Abwärtstaste wird zum unteren Seitenbereich navigiert usw. Dieses Standardverhalten kann durch Aufruf der Methode `preventDefault` am Ereignisobjekt verhindert werden. + +```javascript +MDN + +``` + +Hier wird das Standardverhalten des Links beim Klick verhindert – also das Navigieren zur Zieladresse des Links. + diff --git a/de/json.md b/de/json.md new file mode 100644 index 00000000..8761a6e2 --- /dev/null +++ b/de/json.md @@ -0,0 +1,50 @@ +--- +layout: editorial +Kapitel: 11 +Seite: 82 +Beschreibung: JSON (JavaScript Object Notation) ist ein leichtgewichtiges Datenformat zum Austausch von Daten zwischen verschiedenen Systemen und Plattformen. Es wird häufig zur Datenübertragung und -speicherung verwendet, insbesondere in der Webentwicklung. +----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- + +# Kapitel 11 +# JSON + +**J**ava**S**cript **O**bject **N**otation (JSON) ist ein textbasiertes Format zum Speichern und Übertragen von Daten. JavaScript-Objekte lassen sich leicht in JSON umwandeln und wieder zurück. Zum Beispiel: + +```javascript +// ein JavaScript-Objekt +let myObj = { name:"Ryan", age:30, city:"Austin" }; + +// in JSON konvertiert: +let myJSON = JSON.stringify(myObj); +console.log(myJSON); +// Ergebnis: '{"name":"Ryan","age":30,"city":"Austin"}' + +// zurückkonvertiert in ein JavaScript-Objekt +let originalJSON = JSON.parse(myJSON); +console.log(originalJSON); + +// Ergebnis: {name: 'Ryan', age: 30, city: 'Austin'} +``` + + + +`stringify` und `parse` sind die beiden Methoden, die von JSON unterstützt werden. + +| Methode | Beschreibung | +| ------------- | --------------------------------------------------------------- | +| `parse()` | Gibt ein JavaScript-Objekt aus dem geparsten JSON-String zurück | +| `stringify()` | Gibt einen JSON-String aus einem JavaScript-Objekt zurück | + + + +Die folgenden Datentypen werden von JSON unterstützt: + +* [string](./strings/README.md) +* [number](./numbers/README.md) +* [array](./arrays/README.md) +* [boolean](./basics/types.md#Boolean) +* [object](./basics/types.md#Object) mit gültigen JSON-Werten +* [null](./basics/types.md#NULL) + +JSON kann **keine** `function`, `date` oder `undefined` enthalten. + diff --git a/de/modules.md b/de/modules.md new file mode 100644 index 00000000..0259af5f --- /dev/null +++ b/de/modules.md @@ -0,0 +1,78 @@ +--- +layout: editorial +Kapitel: 13 +Seite: 87 +Beschreibung: Module sind eine Möglichkeit, Code in separate, wiederverwendbare und gekapselte Komponenten zu organisieren. Sie ermöglichen es Entwicklern, große und komplexe Codebasen in kleinere, handhabbare Teile zu zerlegen, was das Verständnis, die Wartung und die Zusammenarbeit erleichtert. +-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- + +# Kapitel 13 +# Module + +In der realen Welt wächst ein Programm organisch mit den Anforderungen neuer Funktionalitäten. Mit wachsendem Codeumfang erfordert die Strukturierung und Wartung des Codes zusätzlichen Aufwand. Auch wenn sich dieser Aufwand langfristig auszahlt, ist es verlockend, ihn zu vernachlässigen und zuzulassen, dass Programme stark miteinander verflochten werden. In Wirklichkeit erhöht das jedoch die Komplexität der Anwendung, da man gezwungen ist, ein ganzheitliches Verständnis des Systems zu entwickeln und Schwierigkeiten hat, einzelne Teile isoliert zu betrachten. Außerdem muss man mehr Zeit investieren, um Funktionen aus einem stark verflochtenen Code herauszulösen. + +*Module* helfen dabei, diese Probleme zu vermeiden. Ein `Modul` gibt an, von welchen Codeteilen es abhängt, und welche Funktionalität es anderen Modulen zur Verfügung stellt. Module, die von anderen Modulen abhängen, nennt man *Abhängigkeiten*. Es gibt verschiedene Bibliotheken zur Modulverwaltung, die Code in Module organisieren und bei Bedarf laden können: + +* **AMD** – eines der ältesten Modulsysteme, ursprünglich verwendet von [require.js](https://requirejs.org/) +* **CommonJS** – Modulsystem, das für den Node.js-Server entwickelt wurde +* **UMD** – Modulsystem, das mit [AMD](https://requirejs.org/docs/whyamd.html#amd) und [CommonJS](https://requirejs.org/docs/whyamd.html#commonjs) kompatibel ist + +Module können andere Module laden und sich gegenseitig verwenden. Dazu nutzen sie spezielle Direktiven wie `import` und `export`, um Funktionalität auszutauschen und Funktionen aufzurufen: + +* `export` – markiert Funktionen und Variablen, die von außerhalb des aktuellen Moduls zugänglich sein sollen +* `import` – importiert Funktionalität aus einem externen Modul + +Sehen wir uns den Mechanismus von `import` und `export` in Modulen an. Die Funktion `sayHi` wird aus der Datei `sayHi.js` exportiert: + +```javascript +// 📁 sayHi.js +export const sayHi = (user) => { + alert(`Hello, ${user}!`); +} +``` + +Die Funktion `sayHi` wird in der Datei `main.js` mithilfe der Direktive `import` verwendet: + +```javascript +// 📁 main.js +import {sayHi} from './sayHi.js'; + +alert(sayHi); // function... +sayHi('Kelvin'); // Hello, Kelvin! +``` + +Hier lädt die `import`-Direktive das Modul über den relativen Pfad und weist die Variable `sayHi` zu. + +Module können auf zwei Arten exportiert werden: **Named** (benannter Export) und **Default** (Standardexport). Zudem können benannte Exporte inline oder gesammelt angegeben werden: + +```javascript +// 📁 person.js + +// inline benannte Exporte +export const name = "Kelvin"; +export const age = 30; + +// gesammelt +const name = "Kelvin"; +const age = 30; +export {name, age}; +``` + +{% hint style="warning" %} +Eine Datei darf nur einen einzigen Standard-`export` enthalten. +{% endhint %} + +// 📁 message.js
+const message = (name, age) => {
+ return `${name} is ${age} years old.`;
+};
+export default message;
+