From a8c9a11369ccafb258864c17f5d811cf20f7f920 Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Fri, 14 Feb 2020 03:34:01 +0100 Subject: [PATCH 01/67] Zahlreiche Verbesserungen MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Korrektur von orthographischen wie grammatikalischen Fehlern. Zusätzlich Übersetzungen nicht übersetzter Teile. Teilweise wurden größere Teile umgeschrieben um verständlicher zu sein. Oft waren die Übersetzungen dem Englischen zu nah, was dazu geführt hat das diese Teile im Deutschen unverständlich wurden. Jeder Abkürzung wurde der nötige WZR (Weißzwischenraum) hinzugefügt wie bei "z. B." Zudem wurden englische Wörter die in der Programmiersprache unabdinglich sind der deutschen Übersetzung innerhalb von Klammern – in kursiv – nachgestellt. Wenn eine Übersetzung nicht nötig war wurde diese ausgelassen und das englische Wort in kursiv im Fließtext untergebracht. Ein *Issue* wird diesbezüglich noch eröffnet. --- 1-js/01-getting-started/1-intro/article.md | 100 ++++++++++----------- 1 file changed, 50 insertions(+), 50 deletions(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index b811830fc..fb83902a6 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -1,121 +1,121 @@ # Eine Einführung in JavaScript -Mal sehen, was das Besondere an JavaScript ist, was wir damit erreichen können und welche anderen Technologien gut damit umgehen. +Mal sehen was das Besondere an JavaScript ist, was wir damit alles anstellen können und welche anderen Technologien gut damit umgehen können. ## Was ist JavaScript? -*JavaScript* wurde ursprünglich entwickelt, um *"Webseiten lebendig zu machen "*. +JavaScript wurde ursprünglich entwickelt, um "Webseiten lebendig zu machen". -Die Programme dieser Sprache werden *scripts* genannt. Sie können direkt im HTML der Seite geschrieben werden und werden automatisch beim laden der Seite ausgeführt. +Die Programme dieser Sprache werden *scripts* genannt. Diese kann man direkt ins HTML einer Seite schreiben welche dann beim Laden der Seite automatisch ausgeführt werden. -Diese Scripts werden im Klartext bereitgestellt und ausgeführt. Sie benötigen keine spezielle Vorbereitung oder Kompilierung um zu funktionieren. +*Scripts* werden als reiner Text (*plain text*) bereitgestellt und ausgeführt, weshalb sie keine spezielle Aufbereitung oder Kompilierung benötigen. -In diesem Aspekt unterscheidet sich JavaScript sehr von einer anderen Sprache namens [Java](https://en.wikipedia.org/wiki/Java_(programming_language)). +In diesem Aspekt unterscheidet sich JavaScript einer ihr ihm Namen ähnlichen Sprache: [Java](https://en.wikipedia.org/wiki/Java_(programming_language)). -```smart header="Warum wird es JavaScript genannt?" -Als JavaScript erstellt wurde, hatte es zunächst einen anderen Namen: "LiveScript". Aber Java war damals sehr beliebt, so dass beschlossen wurde, dass die Positionierung einer neuen Sprache als "jüngerer Bruder" von Java helfen würde. +```smart header="Warum heißt es JavaScript?" +Während der anfänglichen Entwicklung von JavaScript trug dieses noch den Namen "LiveScript". Da Java damals aber eine sehr beliebte Programmiersprache war beschloß man, um die Bekanntheit der neuen Sprache zu steigern, diese als "jüngeren Bruder" von Java darzustellen. -Aber als es sich entwickelte, wurde JavaScript zu einer völlig unabhängigen Sprache mit einer eigenen Spezifikation namens [ECMAScript](http://en.wikipedia.org/wiki/ECMAScript), und jetzt hat es überhaupt keinen Bezug mehr zu Java. +In der weiteren Entwicklung wurde JavaScript zu einer völlig unabhängigen Sprache mit einer eigenen Spezifikation, [ECMAScript](http://en.wikipedia.org/wiki/ECMAScript), und hat darum überhaupt keinen Bezug mehr zu Java. ``` -Heute kann JavaScript nicht mehr nur im Browser ausgeführt werden. Es ist möglich JavaScript auch auf dem Server oder einem anderen beliebigen Geräte auszuführen, welches über ein Programm namens [JavaScript engine](https://en.wikipedia.org/wiki/JavaScript_engine) verfügt. +Heute kann JavaScript nicht nur im Browser ausgeführt werden. Es ist möglich JavaScript auch auf Servern oder einem anderen beliebigen Geräte auszuführen, welches über eine sogenannte [JavaScript engine](https://en.wikipedia.org/wiki/JavaScript_engine) verfügt. Der Browser verfügt über eine eingebettete Engine, die manchmal auch als "JavaScript Virtual Machine" bezeichnet wird. -Verschiedene Engines haben unterschiedliche "Kodnamen". Zum Beispiel: +Verschiedene Engines haben unterschiedliche Spitznamen (*codenames*). Zum Beispiel: - [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- in Chrome und Opera. - [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- in Firefox. -- ...Es existieren auch noch andere Kodnamen wie "Trident" und "Chakra" für verschiedene Versionen von IE, "ChakraCore" für Microsoft Edge, "Nitro" und "SquirrelFish" für Safari, usw. +- Es gibt noch weitere *codenames*, sprich Engines, wie "Trident" und "Chakra" für verschiedene Versionen von IE, oder "ChakraCore" für Microsoft Edge, "Nitro" und "SquirrelFish" für Safari usw. -Die obigen Begriffe sind gut zu merken, da sie in Entwicklerartikeln im Internet verwendet werden. Wir werden sie auch benutzen. Wenn zum Beispiel "ein Feature X von V8 unterstützt wird", dann funktioniert es wahrscheinlich in Chrome und Opera. +Es ist gut sich ein paar der obigen Begriffe zu merken, da sie oft in Artikeln von Entwicklern (*developers*) im Internet verwendet werden. Wir werden sie auch benutzen wenn bspw. "ein *Feature* X von V8 unterstützt wird". Dieses *Feature* funktioniert dann wahrscheinlich in Chrome und Opera. -```smart header="Wie funktioniert die Engine?" +```smart header="Wie funktioniert eine Engine?" Engines sind kompliziert. Aber die Grundlagen sind einfach. -1. Die Engine (eingebettet, wenn es sich um einen Browser handelt) liest ("parses") den Script. -2. Danach wird der Script in die Maschinensprache übersetzt ("Kompilieren"). -3. Und zum Schluss wird der Maschienen Code ausgeführt, was ziemlich schnell passiert. +1. Die Engine (eingebettet, wenn es sich um einen Browser handelt) liest ("parst") das Script. +2. Danach wird das Script in Maschinensprache konvertiert ("kompiliert"). +3. Und zum Schluss wird der Maschienencode ausgeführt, was ziemlich schnell passiert. -Die Engine wendet in jedem Schritt des Prozesses Optimierungen an. Es beobachtet sogar das kompilierte Skript, während es läuft, analysiert die Daten, die durch es fließen, und optimiert den Maschinencode basierend auf diesem Wissen weiter. +Die Engine wendet in jedem Schritt des Prozesses Optimierungen an. Es beobachtet sogar das kompilierte Skript während es läuft, analysiert die Daten welche sie verarbeitet, und optimiert den Maschinencode basierend auf diesem Wissen weiter. ``` -## Was kann in-browser JavaScript tun? +## Was kann im Browser ausgeführtes JavaScript? -Modernes JavaScript ist eine "sichere" Programmiersprache. Es bietet keinen Low-Level-Zugriff auf Speicher oder CPU, da es ursprünglich für Browser erstellt wurde. +Modernes JavaScript ist eine "sichere" Programmiersprache. Es bietet keinen *Low-Level*-Zugriff auf Speicher oder CPU, da es ursprünglich für Browser entwickelt wurde. -Die Funktionen von JavaScript hängen stark von der Umgebung ab, in der es ausgeführt wird. Beispielsweise unterstützt [Node.js](https://wikipedia.org/wiki/Node.js) Funktionen, die es JavaScript z.B. ermöglichen, beliebige Dateien zu lesen oder zu schreiben, sowie Netzwerkanfragen durchzuführen. +Die Funktionen von JavaScript hängen stark von der Umgebung ab in der es ausgeführt wird. Beispielsweise unterstützt [Node.js](https://wikipedia.org/wiki/Node.js) Funktionen die es JavaScript z. B. ermöglichen beliebige Dateien zu lesen oder zu schreiben, sowie Netzwerkanfragen durchzuführen. -In-Browser JavaScript kann alles, was mit der Manipulation von Webseiten, der Interaktion mit dem Benutzer und dem Webserver zu tun hat. +Im Browser ausgeführtes JavaScript kann alles was mit der Manipulation von Webseiten, der Interaktion mit dem Benutzer und dem Webserver zu tun hat. -So ist beispielsweise In-Browser JavaScript in der Lage: +So ist beispielsweise im Browser laufendes JavaScript in der Lage: -- Der Seite neues HTML zu addieren, den existierenden content zu modifizieren, oder die Stile anzupassen. +- Der Seite neues HTML hinzuzufügen, den existierenden Inhalt (*content*) zu modifizieren oder *styles* anzupassen. - Auf Benutzeraktionen zu reagieren, zum Beispiel Mausklicks, Mauszeigerbewegungen oder Tastenanschläge. -- Anfragen and entfernte Server über das Netzwerk zu versenden und Daten hoch und runter zu laden (diese technologien werden [AJAX](https://en.wikipedia.org/wiki/Ajax_(programming)) und [COMET](https://en.wikipedia.org/wiki/Comet_(programming)) genannt). -- Lesen und schreiben von cookies, sowie das abfragen des Benutzers oder das anzeigen von Nachrichten. -- Speichern der Daten auf der client-side ("local storage"), also im Browser des Benutzers. +- Anfragen über das Netzwerk an *remote server* zu schicken, Dateien herunter- und hochzuladen (mit Hilfe der sogenannten [AJAX](https://en.wikipedia.org/wiki/Ajax_(programming))- und [COMET](https://en.wikipedia.org/wiki/Comet_(programming))- Technologien). +- Cookies auszulesen und festzulegen, Fragen an Nutzer zu senden, Nachrichten anzuzeigen. +- Daten auf der *client-side* zu speichern ("lokaler Speicher"). Also im Browser des Benutzers. ## Was kann JavaScript im Browser nicht tun? -Die Fähigkeiten von JavaScript im Browser sind aus Gründen der Sicherheit des Benutzers eingeschränkt. Ziel ist es, zu verhindern, dass eine bösartige Webseite auf private Informationen zugreift oder die Daten des Benutzers schädigt. +Die Fähigkeiten von JavaScript im Browser sind aus Gründen der Sicherheit des Benutzers eingeschränkt. Ziel ist es zu verhindern, dass eine bösartige Webseite auf private Informationen zugreifen oder die Daten des Benutzers schädigen kann. Beispiele für solche Beschränkungen sind: -- JavaScript auf einer Webebsite darf keine Dateien auf dem Speichermedium lesen, schreiben oder kopieren. Zudem darf es keine Programme ausführen. Es hat keinen direkten Zugriff auf die Funktionen des Betriebsystems. +- JavaScript auf einer Webebsite kann keine Dateien auf dem Speichermedium lesen, schreiben oder kopieren. Zudem kann es keine Programme ausführen. Es hat keinen direkten Zugriff auf die Funktionen des Betriebssystems. - Moderne Browsers erlauben es mit Dateien zu arbeiten. Der Zugriff ist jedoch beschränkt und nur möglich wenn der Benutzer bestimmte Aktionen ausführt, z.B. die Datei in den Browser per "drag and drop" lädt oder sie via `` tag auswählt. + Moderne Browsers erlauben es mit Dateien zu arbeiten. Der Zugriff ist jedoch beschränkt und nur möglich wenn der Benutzer bestimmte Aktionen ausführt, z. B. eine Datei in den Browser per "drag and drop" lädt oder sie via ein `` tag auswählt. - Es gibt auch Möglichkeiten mit der Kamera oder dem Mikrofon des Geräts zu interagieren. Dies benötigt aber die explizite Zustimmung des Benutzers. Deshalb kann eine JavaScript-enabled Website nicht heimlich die Webcam aktivieren, die Umgebung beobachten und die Informationen and die [NSA](https://en.wikipedia.org/wiki/National_Security_Agency) übermitteln. -- Unterschiedliche Tabs und Fenster wissen in der Regel nicht voneinander. Es gibt jedoch Ausnahmen, bei welchen dies doch der Fall ist. Dies kann z.B. passieren, wenn durch JavaScript ein neues Fenster geöffnet wird. Aber selbst in diesem Fall kann es sein, dass JavaScript von einer Seite nicht auf die andere Seite zugreifen kann, wenn sie von verschiedenen Seiten (von einer anderen Domäne, einem anderen Protokoll oder Port) kommen. + Es gibt auch Möglichkeiten mit der Kamera oder Mikrofon sowie weiteren Geräten zu interagieren. Dies benötigt aber die explizite Zustimmung des Benutzers. Deshalb kann eine Webseite – auf der JavaScript aktiviert ist – nicht heimlich die Webcam aktivieren, die Umgebung beobachten und die Informationen and die [NSA](https://en.wikipedia.org/wiki/National_Security_Agency) übermitteln. +- Verschiedene *Tabs*/Fenster wissen in der Regel nicht voneinander. Es gibt jedoch Ausnahmen bei welchen dies doch der Fall sein kann. Z. B. dann wenn durch JavaScript ein neues Fenster geöffnet wird. Aber selbst in einem solchen Fall kann das auf der einen Seite laufende JavaScript nicht unbedingt auf die andere Seite zugreifen, sofern diese verschiedenen Ursprungs sind (unterschiedlichen Domänen entspringen, ein anderes Protokoll oder anderen Port haben). - Dies wird die "Same Origin Policy" genannt. Um das zu umgehen, müssen *beide Seiten* für den Datenaustausch übereinstimmen und einen speziellen JavaScript-Code enthalten, der dies behandelt. Wir werden das im Tutorial behandeln. + Das nennt man "Same Origin Policy". Um so etwas zu erreichen muss auf *beiden Seiten* ein Datenaustausch akzeptiert werden. Zudem müssen beide Seiten über einen speziellen JavaScript-Code verfügen der das händeln kann. Wir werden das im Tutorial behandeln. - Auch diese Einschränkung dient der Sicherheit des Benutzers. Eine Seite von `http://anysite.com`, die ein Benutzer geöffnet hat, darf nicht in der Lage sein, auf einen anderen Browser-Tab mit der URL `http://gmail.com` zuzugreifen und Informationen von dort zu stehlen. -- JavaScript kann leicht über das Netz mit dem Server kommunizieren, von dem die aktuelle Seite stammt. Aber seine Fähigkeit, Daten von anderen Seiten/Domains zu empfangen, ist eingeschränkt. -Obwohl es möglich ist, erfordert es eine ausdrückliche Zustimmung (ausgedrückt in HTTP-Headern) von der entfernten Seite. Auch dies ist eine Sicherheitseinschränkung. + Auch diese Einschränkung dient der Sicherheit des Benutzers. Eine Seite von `http://anysite.com`, die ein Benutzer geöffnet hat, darf nicht in der Lage sein auf ein anderes Browser-Tab mit der URL `http://gmail.com` zuzugreifen und Informationen von dort zu stehlen. +- JavaScript kann mit Leichtigkeit über das Netz mit dem Server kommunizieren von dem die aktuelle Seite abgerufen wurde. Aber seine Fähigkeit Daten von anderen Seiten/Domains zu empfangen ist eingeschränkt. +Auch wenn es möglich ist erfordert es eine ausdrückliche Zustimmung (ausgedrückt in *HTTP-Headern*) von der anderen Seite. Auch dies ist eine sicherheitsbedingte Einschränkung. ![](limitations.svg) -Solche Einschränkungen bestehen nicht, wenn JavaScript außerhalb des Browsers, z.B. auf einem Server, verwendet wird. Moderne Browser erlauben auch Plugins/Erweiterungen, die unter Umständen nach erweiterten Rechten fragen. +Solche Einschränkungen bestehen nicht wenn JavaScript außerhalb des Browsers, z. B. auf einem Server, ausgeführt wird. Moderne Browser erlauben auch Plugins/Erweiterungen, die unter Umständen nach erweiterten Rechten fragen. -## What makes JavaScript unique? +## Was macht JavaScript einzigartig? -Es gibt mindestens *drei* großartige Dinge über JavaScript: +Es gibt mindestens *drei* großartige Dinge welche JavaScript auszeichnen: ```compare -+ Volle integration in HTML und CSS. ++ Volle Integration in HTML und CSS. + Einfache Dinge werden einfach gemacht. -+ Unterstützung von allen gängigen Browsern und standardmäßig aktiviert. ++ Unterstützung von allen gängigen Browsern die JavaScript standardmäßig aktiviert haben. ``` JavaScript ist die einzige Browser-Technologie, die diese drei Dinge vereint. Das macht JavaScript einzigartig. Deshalb ist es das am weitesten verbreitete Werkzeug zur Erstellung von Browser-Oberflächen. -Trotzdem erlaubt JavaScript auch die Erstellung von Servern, mobilen Anwendungen, etc. +Außerdem können mit JavaScript auch Server, mobile Anwendungen, usw. erstellt werden. ## Sprachen "über" JavaScript -Die Syntax von JavaScript ist nicht für jeden geeignet. Verschiedene Menschen wollen unterschiedliche Funktionen. +Die Syntax von JavaScript entspricht nicht jedem. Verschiedene Individuen bevorzugen verschiedene Funktionen. Das ist zu erwarten, denn Projekte und Anforderungen sind für jeden anders. -So sind vor kurzem eine Fülle neuer Sprachen erschienen, die in JavaScript *transpiled* (konvertiert) werden, bevor sie im Browser laufen. +So haben sich vor kurzem eine Fülle neuer Sprachen entwickelt, die in JavaScript *transpiled* (konvertiert) werden, bevor sie im Browser laufen. -Moderne Werkzeuge machen die Transpilation sehr schnell und transparent und erlauben es den Entwicklern tatsächlich, in einer anderen Sprache zu programmieren und diese "unter der Haube" automatisch zu konvertieren. +Moderne Werkzeuge erledigen die Konvertierung sehr schnell und transparent was es Entwicklern erlaubt in einer anderen Sprache zu programmieren und diese automatisch zu konvertieren – ohne unbedingt ein genaueres Verständnis davon zu haben wie JavaScript im Kern funktioniert. Beispiele für solche Sprachen sind: -- [CoffeeScript](http://coffeescript.org/) ist ein "syntactic sugar" für JavaScript. Es führt eine kürzere Syntax ein, was uns erlaubt, klareren und präziseren Code zu schreiben. Usually, Ruby devs like it. -- [TypeScript](http://www.typescriptlang.org/) ist darauf konzentriert "strict data typing" hinzuzufügen. TypeScript verfolg das Ziel den Entwicklungsprozess und den Support für komplexe Systeme zu vereinfachen. Die Sprache wurde von Microsoft entwickelt. -- [Flow](http://flow.org/) fügt auch "data typing" hinzu, aber auf eine andere Art und Weise. Sie wurde von Facebook entwickelt. -- [Dart](https://www.dartlang.org/) ist eine eigenständige Sprache, die eine eigene Engine hat, die in Nicht-Browser-Umgebungen (wie z.B. mobilen Anwendungen) läuft, aber auch in JavaScript umgesetzt werden kann. Sie wurde von Google entwickelt. +- [CoffeeScript](http://coffeescript.org/): Es verfügt über eine kürzere Syntax was einen erlaubt klareren und präziseren Code zu schreiben. *Ruby devs* fungiert auf ähnliche Art und Weiße. +- [TypeScript](http://www.typescriptlang.org/) ist darauf ausgelegt strikteren Schreibregeln zu folgen. D.h. der Code ist anfälliger für Fehler, ermöglicht im Gegenzug den Entwicklungsprozess und den Support für komplexe Systeme zu vereinfachen. Die Sprache wurde von Microsoft entwickelt. +- [Flow](http://flow.org/) ist auch auf striktere Schreibregeln ausgelegt, jedoch auf eine andere Art und Weise. Sie wurde von Facebook entwickelt. +- [Dart](https://www.dartlang.org/) ist eine eigenständige Sprache die eine eigene Engine besitzt, welche in Nicht-Browser-Umgebungen (wie z. B. mobilen Anwendungen) läuft, die aber auch in JavaScript konvertiert werden kann. Sie wurde von Google entwickelt. -Es gibt noch mehr. Auch wenn wir eine der transpilierten Sprachen verwenden sollten wir auch JavaScript trozdem kennen. Es ist wichtig zu verstehen, was im Hintergrund passiert und was wir eigentlich tun. +Es gibt noch mehr. Auch wenn wir eine der kompremierten Sprachen verwenden, sollten wir auch JavaScript näher kennen um zu verstehen was im Hintergrund passiert und was wir eigentlich tun. ## Zusammenfassung - JavaScript wurde ursprünglich als reine Browser-Sprache entwickelt, wird aber mittlerweile auch in vielen anderen Umgebungen eingesetzt. - Heute hat JavaScript eine einzigartige Position als die am weitesten verbreitete Browsersprache mit voller Integration in HTML/CSS. -- Es gibt viele Sprachen, die auf JavaScript "transponiert" werden und bestimmte Funktionen bieten. Es wird empfohlen, sich diese zumindest kurz anzuschauen, nachdem man JavaScript beherrscht. +- Es gibt viele Sprachen die auf JavaScript "transponiert" werden und bestimmte Funktionen bieten. Es ist empfehlenswert sich diese zumindest kurz anzuschauen wenn man JavaScript beherrscht. From 292e0bf3c1a3b232ab86ee581709336af41bc3c3 Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 09:23:27 +0200 Subject: [PATCH 02/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index fb83902a6..957784de6 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -8,7 +8,7 @@ JavaScript wurde ursprünglich entwickelt, um "Webseiten lebendig zu machen". Die Programme dieser Sprache werden *scripts* genannt. Diese kann man direkt ins HTML einer Seite schreiben welche dann beim Laden der Seite automatisch ausgeführt werden. -*Scripts* werden als reiner Text (*plain text*) bereitgestellt und ausgeführt, weshalb sie keine spezielle Aufbereitung oder Kompilierung benötigen. +Skripte werden als reiner Text bereitgestellt und ausgeführt. Sie benötigen keine spezielle Vorbereitung oder Kompilierung, um ausgeführt zu werden. In diesem Aspekt unterscheidet sich JavaScript einer ihr ihm Namen ähnlichen Sprache: [Java](https://en.wikipedia.org/wiki/Java_(programming_language)). From 0ef455e7b579711b0c2c8bcadda4d4bd892f786a Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 09:26:37 +0200 Subject: [PATCH 03/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index 957784de6..c9c4fe0cb 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -10,7 +10,7 @@ Die Programme dieser Sprache werden *scripts* genannt. Diese kann man direkt ins Skripte werden als reiner Text bereitgestellt und ausgeführt. Sie benötigen keine spezielle Vorbereitung oder Kompilierung, um ausgeführt zu werden. -In diesem Aspekt unterscheidet sich JavaScript einer ihr ihm Namen ähnlichen Sprache: [Java](https://en.wikipedia.org/wiki/Java_(programming_language)). +In diesem Aspekt unterscheidet sich JavaScript sehr von einer anderen Sprache namens [Java]https://de.wikipedia.org/wiki/Java_(Programmiersprache)). ```smart header="Warum heißt es JavaScript?" Während der anfänglichen Entwicklung von JavaScript trug dieses noch den Namen "LiveScript". Da Java damals aber eine sehr beliebte Programmiersprache war beschloß man, um die Bekanntheit der neuen Sprache zu steigern, diese als "jüngeren Bruder" von Java darzustellen. From b48051955c41cd9023af4ba4fc64e5882def0518 Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 09:27:35 +0200 Subject: [PATCH 04/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index c9c4fe0cb..d0a9c8ff2 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -13,7 +13,7 @@ Skripte werden als reiner Text bereitgestellt und ausgeführt. Sie benötigen ke In diesem Aspekt unterscheidet sich JavaScript sehr von einer anderen Sprache namens [Java]https://de.wikipedia.org/wiki/Java_(Programmiersprache)). ```smart header="Warum heißt es JavaScript?" -Während der anfänglichen Entwicklung von JavaScript trug dieses noch den Namen "LiveScript". Da Java damals aber eine sehr beliebte Programmiersprache war beschloß man, um die Bekanntheit der neuen Sprache zu steigern, diese als "jüngeren Bruder" von Java darzustellen. +Als JavaScript entwickelt wurde, hatte es zunächst einen anderen Namen: "LiveScript". Aber Java war zu dieser Zeit sehr verbreitet, so dass beschlossen wurde, dass die Etablierung einer neuen Sprache als "kleiner Bruder" von Java helfen würde. In der weiteren Entwicklung wurde JavaScript zu einer völlig unabhängigen Sprache mit einer eigenen Spezifikation, [ECMAScript](http://en.wikipedia.org/wiki/ECMAScript), und hat darum überhaupt keinen Bezug mehr zu Java. ``` From a6e41666f11d5b396f56b9b2c04372e7a2031b45 Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 09:27:54 +0200 Subject: [PATCH 05/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index d0a9c8ff2..175e4b5a0 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -18,7 +18,7 @@ Als JavaScript entwickelt wurde, hatte es zunächst einen anderen Namen: "LiveSc In der weiteren Entwicklung wurde JavaScript zu einer völlig unabhängigen Sprache mit einer eigenen Spezifikation, [ECMAScript](http://en.wikipedia.org/wiki/ECMAScript), und hat darum überhaupt keinen Bezug mehr zu Java. ``` -Heute kann JavaScript nicht nur im Browser ausgeführt werden. Es ist möglich JavaScript auch auf Servern oder einem anderen beliebigen Geräte auszuführen, welches über eine sogenannte [JavaScript engine](https://en.wikipedia.org/wiki/JavaScript_engine) verfügt. +Heute kann JavaScript nicht nur im Browser ausgeführt werden, sondern auch auf dem Server oder auf jedem Gerät, das über ein spezielles Programm namens [JavaScript engine](https://en.wikipedia.org/wiki/JavaScript_engine) verfügt. Der Browser verfügt über eine eingebettete Engine, die manchmal auch als "JavaScript Virtual Machine" bezeichnet wird. From cb8cc15eea7d5d4ada69541fb169571447fc29ec Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 09:28:50 +0200 Subject: [PATCH 06/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index 175e4b5a0..ec693bc5b 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -22,7 +22,7 @@ Heute kann JavaScript nicht nur im Browser ausgeführt werden, sondern auch auf Der Browser verfügt über eine eingebettete Engine, die manchmal auch als "JavaScript Virtual Machine" bezeichnet wird. -Verschiedene Engines haben unterschiedliche Spitznamen (*codenames*). Zum Beispiel: +Verschiedene Engines haben unterschiedliche "Codenamen". Zum Beispiel: - [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- in Chrome und Opera. - [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- in Firefox. From a64f292e50943aecc2a424de12f7ba46b3118eb6 Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 09:32:43 +0200 Subject: [PATCH 07/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index ec693bc5b..749e562ea 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -108,7 +108,7 @@ Moderne Werkzeuge erledigen die Konvertierung sehr schnell und transparent was e Beispiele für solche Sprachen sind: - [CoffeeScript](http://coffeescript.org/): Es verfügt über eine kürzere Syntax was einen erlaubt klareren und präziseren Code zu schreiben. *Ruby devs* fungiert auf ähnliche Art und Weiße. -- [TypeScript](http://www.typescriptlang.org/) ist darauf ausgelegt strikteren Schreibregeln zu folgen. D.h. der Code ist anfälliger für Fehler, ermöglicht im Gegenzug den Entwicklungsprozess und den Support für komplexe Systeme zu vereinfachen. Die Sprache wurde von Microsoft entwickelt. +- [TypeScript](http://www.typescriptlang.org/) konzentriert sich auf das Hinzufügen einer "strengen Datentypisierung", um die Entwicklung und Unterstützung komplexer Systeme zu vereinfachen. Es wird von Microsoft entwickelt. - [Flow](http://flow.org/) ist auch auf striktere Schreibregeln ausgelegt, jedoch auf eine andere Art und Weise. Sie wurde von Facebook entwickelt. - [Dart](https://www.dartlang.org/) ist eine eigenständige Sprache die eine eigene Engine besitzt, welche in Nicht-Browser-Umgebungen (wie z. B. mobilen Anwendungen) läuft, die aber auch in JavaScript konvertiert werden kann. Sie wurde von Google entwickelt. From 4aaffe1dae2450e2086491aeaaad50234c651a2f Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 09:34:11 +0200 Subject: [PATCH 08/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index 749e562ea..ff6af4a57 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -109,7 +109,7 @@ Beispiele für solche Sprachen sind: - [CoffeeScript](http://coffeescript.org/): Es verfügt über eine kürzere Syntax was einen erlaubt klareren und präziseren Code zu schreiben. *Ruby devs* fungiert auf ähnliche Art und Weiße. - [TypeScript](http://www.typescriptlang.org/) konzentriert sich auf das Hinzufügen einer "strengen Datentypisierung", um die Entwicklung und Unterstützung komplexer Systeme zu vereinfachen. Es wird von Microsoft entwickelt. -- [Flow](http://flow.org/) ist auch auf striktere Schreibregeln ausgelegt, jedoch auf eine andere Art und Weise. Sie wurde von Facebook entwickelt. +- [Flow](http://flow.org/) fügt auch die Datentypisierung hinzu, jedoch auf andere Art und Weise. Entwickelt von Facebook. - [Dart](https://www.dartlang.org/) ist eine eigenständige Sprache die eine eigene Engine besitzt, welche in Nicht-Browser-Umgebungen (wie z. B. mobilen Anwendungen) läuft, die aber auch in JavaScript konvertiert werden kann. Sie wurde von Google entwickelt. Es gibt noch mehr. Auch wenn wir eine der kompremierten Sprachen verwenden, sollten wir auch JavaScript näher kennen um zu verstehen was im Hintergrund passiert und was wir eigentlich tun. From 6d36de271d1826207194d631430babd2a3412293 Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 09:34:23 +0200 Subject: [PATCH 09/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index ff6af4a57..2a7b854ca 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -110,7 +110,7 @@ Beispiele für solche Sprachen sind: - [CoffeeScript](http://coffeescript.org/): Es verfügt über eine kürzere Syntax was einen erlaubt klareren und präziseren Code zu schreiben. *Ruby devs* fungiert auf ähnliche Art und Weiße. - [TypeScript](http://www.typescriptlang.org/) konzentriert sich auf das Hinzufügen einer "strengen Datentypisierung", um die Entwicklung und Unterstützung komplexer Systeme zu vereinfachen. Es wird von Microsoft entwickelt. - [Flow](http://flow.org/) fügt auch die Datentypisierung hinzu, jedoch auf andere Art und Weise. Entwickelt von Facebook. -- [Dart](https://www.dartlang.org/) ist eine eigenständige Sprache die eine eigene Engine besitzt, welche in Nicht-Browser-Umgebungen (wie z. B. mobilen Anwendungen) läuft, die aber auch in JavaScript konvertiert werden kann. Sie wurde von Google entwickelt. +- [Dart](https://www.dartlang.org/) ist eine eigenständige Sprache, die eine eigene Engine besitzt, die in Nicht-Browser-Umgebungen (wie mobilen Anwendungen) läuft, aber auch in JavaScript transponiert werden kann. Entwickelt von Google. Es gibt noch mehr. Auch wenn wir eine der kompremierten Sprachen verwenden, sollten wir auch JavaScript näher kennen um zu verstehen was im Hintergrund passiert und was wir eigentlich tun. From a9cd524c88c978d2f86f2fe706b2d9dfaecd22cd Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 09:39:34 +0200 Subject: [PATCH 10/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index 2a7b854ca..b598371c9 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -112,7 +112,7 @@ Beispiele für solche Sprachen sind: - [Flow](http://flow.org/) fügt auch die Datentypisierung hinzu, jedoch auf andere Art und Weise. Entwickelt von Facebook. - [Dart](https://www.dartlang.org/) ist eine eigenständige Sprache, die eine eigene Engine besitzt, die in Nicht-Browser-Umgebungen (wie mobilen Anwendungen) läuft, aber auch in JavaScript transponiert werden kann. Entwickelt von Google. -Es gibt noch mehr. Auch wenn wir eine der kompremierten Sprachen verwenden, sollten wir auch JavaScript näher kennen um zu verstehen was im Hintergrund passiert und was wir eigentlich tun. +Es gibt noch mehr. Natürlich sollten wir, selbst wenn wir eine der transponierten Sprachen verwenden, auch JavaScript beherrschen, um zu verstehen, was wir tun. ## Zusammenfassung From 1123fc46182309f9fbf873bf7989af5b17387898 Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 09:39:56 +0200 Subject: [PATCH 11/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index b598371c9..d7142ce36 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -118,4 +118,4 @@ Es gibt noch mehr. Natürlich sollten wir, selbst wenn wir eine der transponiert - JavaScript wurde ursprünglich als reine Browser-Sprache entwickelt, wird aber mittlerweile auch in vielen anderen Umgebungen eingesetzt. - Heute hat JavaScript eine einzigartige Position als die am weitesten verbreitete Browsersprache mit voller Integration in HTML/CSS. -- Es gibt viele Sprachen die auf JavaScript "transponiert" werden und bestimmte Funktionen bieten. Es ist empfehlenswert sich diese zumindest kurz anzuschauen wenn man JavaScript beherrscht. +- Es gibt viele Sprachen, die in JavaScript "transponiert" werden und bestimmte Funktionen bieten. Es wird empfohlen, sich diese zumindest kurz anzuschauen, nachdem du JavaScript beherrscht. From 50698d9f3d1fe8642da0b83f7fae13cdddef2824 Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 09:41:57 +0200 Subject: [PATCH 12/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index d7142ce36..3ac07c587 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -24,7 +24,7 @@ Der Browser verfügt über eine eingebettete Engine, die manchmal auch als "Java Verschiedene Engines haben unterschiedliche "Codenamen". Zum Beispiel: -- [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- in Chrome und Opera. +- [V8](https://de.wikipedia.org/wiki/V8_(JavaScript-Implementierung)) -- in Chrome und Opera. - [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- in Firefox. - Es gibt noch weitere *codenames*, sprich Engines, wie "Trident" und "Chakra" für verschiedene Versionen von IE, oder "ChakraCore" für Microsoft Edge, "Nitro" und "SquirrelFish" für Safari usw. From 2d8d7bd1ef28d71d3c9b6470093ed9584f33751c Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 09:42:16 +0200 Subject: [PATCH 13/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index 3ac07c587..b79ade4eb 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -25,7 +25,7 @@ Der Browser verfügt über eine eingebettete Engine, die manchmal auch als "Java Verschiedene Engines haben unterschiedliche "Codenamen". Zum Beispiel: - [V8](https://de.wikipedia.org/wiki/V8_(JavaScript-Implementierung)) -- in Chrome und Opera. -- [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- in Firefox. +- [SpiderMonkey](https://de.wikipedia.org/wiki/SpiderMonkey) -- in Firefox. - Es gibt noch weitere *codenames*, sprich Engines, wie "Trident" und "Chakra" für verschiedene Versionen von IE, oder "ChakraCore" für Microsoft Edge, "Nitro" und "SquirrelFish" für Safari usw. Es ist gut sich ein paar der obigen Begriffe zu merken, da sie oft in Artikeln von Entwicklern (*developers*) im Internet verwendet werden. Wir werden sie auch benutzen wenn bspw. "ein *Feature* X von V8 unterstützt wird". Dieses *Feature* funktioniert dann wahrscheinlich in Chrome und Opera. From 89477d55209f0423d0db692d9a3c86785ea0fb3a Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 09:56:30 +0200 Subject: [PATCH 14/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index b79ade4eb..a48e206b2 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -28,7 +28,7 @@ Verschiedene Engines haben unterschiedliche "Codenamen". Zum Beispiel: - [SpiderMonkey](https://de.wikipedia.org/wiki/SpiderMonkey) -- in Firefox. - Es gibt noch weitere *codenames*, sprich Engines, wie "Trident" und "Chakra" für verschiedene Versionen von IE, oder "ChakraCore" für Microsoft Edge, "Nitro" und "SquirrelFish" für Safari usw. -Es ist gut sich ein paar der obigen Begriffe zu merken, da sie oft in Artikeln von Entwicklern (*developers*) im Internet verwendet werden. Wir werden sie auch benutzen wenn bspw. "ein *Feature* X von V8 unterstützt wird". Dieses *Feature* funktioniert dann wahrscheinlich in Chrome und Opera. +Die oben genannten Begriffe sollte man sich merken, weil sie in Entwicklerarikeln im Internet verwendet werden. Wir werden sie auch verwenden. Wenn, zum Beispiel, "ein Feature X von V8 unterstützt wird", dann funktioniert es wahrscheinlich in Chrome und Opera. ```smart header="Wie funktioniert eine Engine?" From ea3f1b2b7980d89881d4dd3ac8d227d10238d220 Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 09:56:50 +0200 Subject: [PATCH 15/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index a48e206b2..53c9d986a 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -30,7 +30,7 @@ Verschiedene Engines haben unterschiedliche "Codenamen". Zum Beispiel: Die oben genannten Begriffe sollte man sich merken, weil sie in Entwicklerarikeln im Internet verwendet werden. Wir werden sie auch verwenden. Wenn, zum Beispiel, "ein Feature X von V8 unterstützt wird", dann funktioniert es wahrscheinlich in Chrome und Opera. -```smart header="Wie funktioniert eine Engine?" +```smart header="Wie funktionieren Engines?" Engines sind kompliziert. Aber die Grundlagen sind einfach. From 4d7949053aedbd175df956c949048b1dbe42e87c Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 09:57:07 +0200 Subject: [PATCH 16/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index 53c9d986a..7b8b97822 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -38,7 +38,7 @@ Engines sind kompliziert. Aber die Grundlagen sind einfach. 2. Danach wird das Script in Maschinensprache konvertiert ("kompiliert"). 3. Und zum Schluss wird der Maschienencode ausgeführt, was ziemlich schnell passiert. -Die Engine wendet in jedem Schritt des Prozesses Optimierungen an. Es beobachtet sogar das kompilierte Skript während es läuft, analysiert die Daten welche sie verarbeitet, und optimiert den Maschinencode basierend auf diesem Wissen weiter. +Die Engine wendet in jedem Schritt des Prozesses Optimierungen an. Es beobachtet sogar das kompilierte Skript während es läuft, analysiert die Daten, welche sie verarbeitet, und optimiert den Maschinencode basierend auf diesem Wissen weiter. ``` ## Was kann im Browser ausgeführtes JavaScript? From 640839a450eb4414c1623371eef89d95efdc9429 Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 10:02:47 +0200 Subject: [PATCH 17/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index 7b8b97822..fdb93aeb9 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -43,7 +43,7 @@ Die Engine wendet in jedem Schritt des Prozesses Optimierungen an. Es beobachtet ## Was kann im Browser ausgeführtes JavaScript? -Modernes JavaScript ist eine "sichere" Programmiersprache. Es bietet keinen *Low-Level*-Zugriff auf Speicher oder CPU, da es ursprünglich für Browser entwickelt wurde. +Modernes JavaScript ist eine "sichere" Programmiersprache. Es bietet keinen Low-Level-Zugriff auf Speicher oder CPU, da es ursprünglich für Browser entwickelt wurde, die dies nicht benötigen. Die Funktionen von JavaScript hängen stark von der Umgebung ab in der es ausgeführt wird. Beispielsweise unterstützt [Node.js](https://wikipedia.org/wiki/Node.js) Funktionen die es JavaScript z. B. ermöglichen beliebige Dateien zu lesen oder zu schreiben, sowie Netzwerkanfragen durchzuführen. From a87391b09ee8855ba9beec51bd0c7b0a99ad064a Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 10:03:14 +0200 Subject: [PATCH 18/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index fdb93aeb9..61a0b9cd1 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -51,7 +51,7 @@ Im Browser ausgeführtes JavaScript kann alles was mit der Manipulation von Webs So ist beispielsweise im Browser laufendes JavaScript in der Lage: -- Der Seite neues HTML hinzuzufügen, den existierenden Inhalt (*content*) zu modifizieren oder *styles* anzupassen. +- Der Seite neues HTML hinzuzufügen, den existierenden Inhalt zu modifizieren oder Stile anzupassen. - Auf Benutzeraktionen zu reagieren, zum Beispiel Mausklicks, Mauszeigerbewegungen oder Tastenanschläge. - Anfragen über das Netzwerk an *remote server* zu schicken, Dateien herunter- und hochzuladen (mit Hilfe der sogenannten [AJAX](https://en.wikipedia.org/wiki/Ajax_(programming))- und [COMET](https://en.wikipedia.org/wiki/Comet_(programming))- Technologien). - Cookies auszulesen und festzulegen, Fragen an Nutzer zu senden, Nachrichten anzuzeigen. From e08207491ae9cccbe6f7754893bed4e0ddcac7b8 Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 10:03:30 +0200 Subject: [PATCH 19/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index 61a0b9cd1..e82ad157d 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -53,7 +53,7 @@ So ist beispielsweise im Browser laufendes JavaScript in der Lage: - Der Seite neues HTML hinzuzufügen, den existierenden Inhalt zu modifizieren oder Stile anzupassen. - Auf Benutzeraktionen zu reagieren, zum Beispiel Mausklicks, Mauszeigerbewegungen oder Tastenanschläge. -- Anfragen über das Netzwerk an *remote server* zu schicken, Dateien herunter- und hochzuladen (mit Hilfe der sogenannten [AJAX](https://en.wikipedia.org/wiki/Ajax_(programming))- und [COMET](https://en.wikipedia.org/wiki/Comet_(programming))- Technologien). +- Anfragen über das Netzwerk an Remote-Server senden, Herunter- und Hochladen von Dateien (sogenannte [AJAX](https://de.wikipedia.org/wiki/Ajax_(Programmierung))- und [COMET](https://en.wikipedia.org/wiki/Comet_(programming))- Technologien). - Cookies auszulesen und festzulegen, Fragen an Nutzer zu senden, Nachrichten anzuzeigen. - Daten auf der *client-side* zu speichern ("lokaler Speicher"). Also im Browser des Benutzers. From 9e0928f29d29af8ac416aef68918565d343a39df Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 10:04:05 +0200 Subject: [PATCH 20/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index e82ad157d..88e078a6f 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -54,7 +54,7 @@ So ist beispielsweise im Browser laufendes JavaScript in der Lage: - Der Seite neues HTML hinzuzufügen, den existierenden Inhalt zu modifizieren oder Stile anzupassen. - Auf Benutzeraktionen zu reagieren, zum Beispiel Mausklicks, Mauszeigerbewegungen oder Tastenanschläge. - Anfragen über das Netzwerk an Remote-Server senden, Herunter- und Hochladen von Dateien (sogenannte [AJAX](https://de.wikipedia.org/wiki/Ajax_(Programmierung))- und [COMET](https://en.wikipedia.org/wiki/Comet_(programming))- Technologien). -- Cookies auszulesen und festzulegen, Fragen an Nutzer zu senden, Nachrichten anzuzeigen. +- Cookies auslesen und setzen, Fragen an den Besucher stellen, Nachrichten anzeigen. - Daten auf der *client-side* zu speichern ("lokaler Speicher"). Also im Browser des Benutzers. ## Was kann JavaScript im Browser nicht tun? From 961196da030d9a70fdf35c0654b3f930c1050f5a Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 10:07:00 +0200 Subject: [PATCH 21/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index 88e078a6f..00bf7581d 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -63,7 +63,7 @@ Die Fähigkeiten von JavaScript im Browser sind aus Gründen der Sicherheit des Beispiele für solche Beschränkungen sind: -- JavaScript auf einer Webebsite kann keine Dateien auf dem Speichermedium lesen, schreiben oder kopieren. Zudem kann es keine Programme ausführen. Es hat keinen direkten Zugriff auf die Funktionen des Betriebssystems. +- JavaScript auf einer Webseite darf keine willkürlichen Dateien auf der Festplatte lesen, schreiben oder kopieren, oder Programme ausführen. Es hat keinen direkten Zugriff auf die Funktionen des Betriebssystems. Moderne Browsers erlauben es mit Dateien zu arbeiten. Der Zugriff ist jedoch beschränkt und nur möglich wenn der Benutzer bestimmte Aktionen ausführt, z. B. eine Datei in den Browser per "drag and drop" lädt oder sie via ein `` tag auswählt. From 08ce49c223592cdbffdb084d81f64431e1693d50 Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 10:08:19 +0200 Subject: [PATCH 22/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index 00bf7581d..af889d112 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -67,7 +67,7 @@ Beispiele für solche Beschränkungen sind: Moderne Browsers erlauben es mit Dateien zu arbeiten. Der Zugriff ist jedoch beschränkt und nur möglich wenn der Benutzer bestimmte Aktionen ausführt, z. B. eine Datei in den Browser per "drag and drop" lädt oder sie via ein `` tag auswählt. - Es gibt auch Möglichkeiten mit der Kamera oder Mikrofon sowie weiteren Geräten zu interagieren. Dies benötigt aber die explizite Zustimmung des Benutzers. Deshalb kann eine Webseite – auf der JavaScript aktiviert ist – nicht heimlich die Webcam aktivieren, die Umgebung beobachten und die Informationen and die [NSA](https://en.wikipedia.org/wiki/National_Security_Agency) übermitteln. + Es gibt Möglichkeiten, mit Kamera/Mikrofon und anderen Geräten zu interagieren, aber sie erfordern die ausdrückliche Genehmigung des Benutzers. JavaScript auf einer Webseite darf also nicht heimlich eine Webcam aktivieren, die Umgebung beobachten und die Informationen an die [NSA](https://de.wikipedia.org/wiki/National_Security_Agency) senden. - Verschiedene *Tabs*/Fenster wissen in der Regel nicht voneinander. Es gibt jedoch Ausnahmen bei welchen dies doch der Fall sein kann. Z. B. dann wenn durch JavaScript ein neues Fenster geöffnet wird. Aber selbst in einem solchen Fall kann das auf der einen Seite laufende JavaScript nicht unbedingt auf die andere Seite zugreifen, sofern diese verschiedenen Ursprungs sind (unterschiedlichen Domänen entspringen, ein anderes Protokoll oder anderen Port haben). Das nennt man "Same Origin Policy". Um so etwas zu erreichen muss auf *beiden Seiten* ein Datenaustausch akzeptiert werden. Zudem müssen beide Seiten über einen speziellen JavaScript-Code verfügen der das händeln kann. Wir werden das im Tutorial behandeln. From f8e95b2a45d6a5a522660842f008fcbf3f9cd3f2 Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 10:09:26 +0200 Subject: [PATCH 23/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index af889d112..993e60fb8 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -68,7 +68,7 @@ Beispiele für solche Beschränkungen sind: Moderne Browsers erlauben es mit Dateien zu arbeiten. Der Zugriff ist jedoch beschränkt und nur möglich wenn der Benutzer bestimmte Aktionen ausführt, z. B. eine Datei in den Browser per "drag and drop" lädt oder sie via ein `` tag auswählt. Es gibt Möglichkeiten, mit Kamera/Mikrofon und anderen Geräten zu interagieren, aber sie erfordern die ausdrückliche Genehmigung des Benutzers. JavaScript auf einer Webseite darf also nicht heimlich eine Webcam aktivieren, die Umgebung beobachten und die Informationen an die [NSA](https://de.wikipedia.org/wiki/National_Security_Agency) senden. -- Verschiedene *Tabs*/Fenster wissen in der Regel nicht voneinander. Es gibt jedoch Ausnahmen bei welchen dies doch der Fall sein kann. Z. B. dann wenn durch JavaScript ein neues Fenster geöffnet wird. Aber selbst in einem solchen Fall kann das auf der einen Seite laufende JavaScript nicht unbedingt auf die andere Seite zugreifen, sofern diese verschiedenen Ursprungs sind (unterschiedlichen Domänen entspringen, ein anderes Protokoll oder anderen Port haben). +- Verschiedene Tabs/Fenster wissen im Allgemeinen nichts voneinander. Manchmal tun sie es doch, z. B. wenn ein Fenster das andere mit JavaScript öffnet. Aber selbst in diesem Fall kann es vorkommen, dass JavaScript von einer Seite aus nicht auf die andere Seite zugreift, wenn ihr Ursprung verschieden ist (von einer anderen Domäne, einem anderen Protokoll oder Port). Das nennt man "Same Origin Policy". Um so etwas zu erreichen muss auf *beiden Seiten* ein Datenaustausch akzeptiert werden. Zudem müssen beide Seiten über einen speziellen JavaScript-Code verfügen der das händeln kann. Wir werden das im Tutorial behandeln. From d4a2f25924bf381321e8a222a1f1d4a8d7e4b0d6 Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 10:10:33 +0200 Subject: [PATCH 24/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index 993e60fb8..8da838acd 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -70,7 +70,7 @@ Beispiele für solche Beschränkungen sind: Es gibt Möglichkeiten, mit Kamera/Mikrofon und anderen Geräten zu interagieren, aber sie erfordern die ausdrückliche Genehmigung des Benutzers. JavaScript auf einer Webseite darf also nicht heimlich eine Webcam aktivieren, die Umgebung beobachten und die Informationen an die [NSA](https://de.wikipedia.org/wiki/National_Security_Agency) senden. - Verschiedene Tabs/Fenster wissen im Allgemeinen nichts voneinander. Manchmal tun sie es doch, z. B. wenn ein Fenster das andere mit JavaScript öffnet. Aber selbst in diesem Fall kann es vorkommen, dass JavaScript von einer Seite aus nicht auf die andere Seite zugreift, wenn ihr Ursprung verschieden ist (von einer anderen Domäne, einem anderen Protokoll oder Port). - Das nennt man "Same Origin Policy". Um so etwas zu erreichen muss auf *beiden Seiten* ein Datenaustausch akzeptiert werden. Zudem müssen beide Seiten über einen speziellen JavaScript-Code verfügen der das händeln kann. Wir werden das im Tutorial behandeln. + Dies wird die "Same-Origin-Policy" genannt. Um dies zu umgehen, müssen *beide Seiten* dem Datenaustausch zustimmen und einen speziellen JavaScript-Code enthalten, der dies ermöglicht. Wir werden das im Tutorial behandeln. Auch diese Einschränkung dient der Sicherheit des Benutzers. Eine Seite von `http://anysite.com`, die ein Benutzer geöffnet hat, darf nicht in der Lage sein auf ein anderes Browser-Tab mit der URL `http://gmail.com` zuzugreifen und Informationen von dort zu stehlen. - JavaScript kann mit Leichtigkeit über das Netz mit dem Server kommunizieren von dem die aktuelle Seite abgerufen wurde. Aber seine Fähigkeit Daten von anderen Seiten/Domains zu empfangen ist eingeschränkt. From aab858ad06ec73e64a76c36ea5431882adc70e1a Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 10:12:29 +0200 Subject: [PATCH 25/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index 8da838acd..adeb74ce8 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -73,7 +73,7 @@ Beispiele für solche Beschränkungen sind: Dies wird die "Same-Origin-Policy" genannt. Um dies zu umgehen, müssen *beide Seiten* dem Datenaustausch zustimmen und einen speziellen JavaScript-Code enthalten, der dies ermöglicht. Wir werden das im Tutorial behandeln. Auch diese Einschränkung dient der Sicherheit des Benutzers. Eine Seite von `http://anysite.com`, die ein Benutzer geöffnet hat, darf nicht in der Lage sein auf ein anderes Browser-Tab mit der URL `http://gmail.com` zuzugreifen und Informationen von dort zu stehlen. -- JavaScript kann mit Leichtigkeit über das Netz mit dem Server kommunizieren von dem die aktuelle Seite abgerufen wurde. Aber seine Fähigkeit Daten von anderen Seiten/Domains zu empfangen ist eingeschränkt. +- JavaScript kann leicht über das Netz mit dem Server kommunizieren, von dem die aktuelle Seite abgerufen wurde. Aber die Möglichkeit, Daten von anderen Seiten/Domains zu empfangen, ist eingeschränkt. Obwohl es möglich ist, erfordert es eine ausdrückliche Zustimmung (in HTTP-Headern angegeben) von der entfernten Seite. Noch einmal, das ist eine Sicherheitseinschränkung. Auch wenn es möglich ist erfordert es eine ausdrückliche Zustimmung (ausgedrückt in *HTTP-Headern*) von der anderen Seite. Auch dies ist eine sicherheitsbedingte Einschränkung. ![](limitations.svg) From 24ef0006d44103f6db3f470b874b9cd7e8743723 Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 10:33:16 +0200 Subject: [PATCH 26/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index adeb74ce8..b0eee075f 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -78,7 +78,7 @@ Auch wenn es möglich ist erfordert es eine ausdrückliche Zustimmung (ausgedrü ![](limitations.svg) -Solche Einschränkungen bestehen nicht wenn JavaScript außerhalb des Browsers, z. B. auf einem Server, ausgeführt wird. Moderne Browser erlauben auch Plugins/Erweiterungen, die unter Umständen nach erweiterten Rechten fragen. +Solche Einschränkungen bestehen nicht, wenn JavaScript außerhalb des Browsers, z. B. auf einem Server, ausgeführt wird. Moderne Browser erlauben auch Plugins/Erweiterungen, die unter Umständen nach erweiterten Rechten fragen. ## Was macht JavaScript einzigartig? From baed88420425c8881edc82b3f90dec8b0d5ad171 Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 10:34:05 +0200 Subject: [PATCH 27/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index b0eee075f..47510dc52 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -55,7 +55,7 @@ So ist beispielsweise im Browser laufendes JavaScript in der Lage: - Auf Benutzeraktionen zu reagieren, zum Beispiel Mausklicks, Mauszeigerbewegungen oder Tastenanschläge. - Anfragen über das Netzwerk an Remote-Server senden, Herunter- und Hochladen von Dateien (sogenannte [AJAX](https://de.wikipedia.org/wiki/Ajax_(Programmierung))- und [COMET](https://en.wikipedia.org/wiki/Comet_(programming))- Technologien). - Cookies auslesen und setzen, Fragen an den Besucher stellen, Nachrichten anzeigen. -- Daten auf der *client-side* zu speichern ("lokaler Speicher"). Also im Browser des Benutzers. +- Daten auf der Client-Seite zu speichern ("lokale Speicherung"). ## Was kann JavaScript im Browser nicht tun? From c2041f5dbf26c99f3c86c9997cf66cc677811d9c Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 10:35:52 +0200 Subject: [PATCH 28/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index 47510dc52..c80fce563 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -82,7 +82,7 @@ Solche Einschränkungen bestehen nicht, wenn JavaScript außerhalb des Browsers, ## Was macht JavaScript einzigartig? -Es gibt mindestens *drei* großartige Dinge welche JavaScript auszeichnen: +Es gibt mindestens *drei* großartige Eigenschaften, welche JavaScript auszeichnen: ```compare + Volle Integration in HTML und CSS. From ac7f436c25fc20596d217aea1b981d048a926591 Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 10:36:26 +0200 Subject: [PATCH 29/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index c80fce563..aa4da4d60 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -87,7 +87,7 @@ Es gibt mindestens *drei* großartige Eigenschaften, welche JavaScript auszeichn ```compare + Volle Integration in HTML und CSS. + Einfache Dinge werden einfach gemacht. -+ Unterstützung von allen gängigen Browsern die JavaScript standardmäßig aktiviert haben. ++ Wird von allen gängigen Browsern unterstützt und ist standardmäßig aktiviert. ``` JavaScript ist die einzige Browser-Technologie, die diese drei Dinge vereint. From b3afcb9396e6f9f63425371cb216b78bceb67bc0 Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 10:36:54 +0200 Subject: [PATCH 30/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index aa4da4d60..b7f2cb6b9 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -93,7 +93,7 @@ JavaScript ist die einzige Browser-Technologie, die diese drei Dinge vereint. Das macht JavaScript einzigartig. Deshalb ist es das am weitesten verbreitete Werkzeug zur Erstellung von Browser-Oberflächen. -Außerdem können mit JavaScript auch Server, mobile Anwendungen, usw. erstellt werden. +Davon abgesehen ermöglicht JavaScript auch die Erstellung von Servern, mobilen Anwendungen, usw. ## Sprachen "über" JavaScript From 42fa904614aa2773e150d338e2a7602b6dbdf742 Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Mon, 27 Apr 2020 10:37:36 +0200 Subject: [PATCH 31/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index b7f2cb6b9..a9aba7c97 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -101,7 +101,7 @@ Die Syntax von JavaScript entspricht nicht jedem. Verschiedene Individuen bevorz Das ist zu erwarten, denn Projekte und Anforderungen sind für jeden anders. -So haben sich vor kurzem eine Fülle neuer Sprachen entwickelt, die in JavaScript *transpiled* (konvertiert) werden, bevor sie im Browser laufen. +So sind in letzter Zeit eine Fülle neuer Sprachen erschienen, die in JavaScript *transponiert* (konvertiert) werden, bevor sie im Browser laufen. Moderne Werkzeuge erledigen die Konvertierung sehr schnell und transparent was es Entwicklern erlaubt in einer anderen Sprache zu programmieren und diese automatisch zu konvertieren – ohne unbedingt ein genaueres Verständnis davon zu haben wie JavaScript im Kern funktioniert. From 98d95abc7ca26ed11f779f7d62cee6d630034aba Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Tue, 28 Apr 2020 11:24:18 +0200 Subject: [PATCH 32/67] Update 1-js/01-getting-started/1-intro/article.md --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index a9aba7c97..03c1ced3b 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -65,7 +65,7 @@ Beispiele für solche Beschränkungen sind: - JavaScript auf einer Webseite darf keine willkürlichen Dateien auf der Festplatte lesen, schreiben oder kopieren, oder Programme ausführen. Es hat keinen direkten Zugriff auf die Funktionen des Betriebssystems. - Moderne Browsers erlauben es mit Dateien zu arbeiten. Der Zugriff ist jedoch beschränkt und nur möglich wenn der Benutzer bestimmte Aktionen ausführt, z. B. eine Datei in den Browser per "drag and drop" lädt oder sie via ein `` tag auswählt. + Moderne Browser erlauben es, mit Dateien zu arbeiten, aber der Zugriff ist begrenzt und nur möglich, wenn der Benutzer bestimmte Aktionen ausführt, wie z. B. eine Datei in ein Browserfenster "zu ziehen" oder sie über ein -Tag auszuwählen. Es gibt Möglichkeiten, mit Kamera/Mikrofon und anderen Geräten zu interagieren, aber sie erfordern die ausdrückliche Genehmigung des Benutzers. JavaScript auf einer Webseite darf also nicht heimlich eine Webcam aktivieren, die Umgebung beobachten und die Informationen an die [NSA](https://de.wikipedia.org/wiki/National_Security_Agency) senden. - Verschiedene Tabs/Fenster wissen im Allgemeinen nichts voneinander. Manchmal tun sie es doch, z. B. wenn ein Fenster das andere mit JavaScript öffnet. Aber selbst in diesem Fall kann es vorkommen, dass JavaScript von einer Seite aus nicht auf die andere Seite zugreift, wenn ihr Ursprung verschieden ist (von einer anderen Domäne, einem anderen Protokoll oder Port). From be58eb77d3684c169ea9ddd7879361d6847e4df6 Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Tue, 28 Apr 2020 11:24:32 +0200 Subject: [PATCH 33/67] Update 1-js/01-getting-started/1-intro/article.md --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index 03c1ced3b..97e7c76fd 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -72,7 +72,7 @@ Beispiele für solche Beschränkungen sind: Dies wird die "Same-Origin-Policy" genannt. Um dies zu umgehen, müssen *beide Seiten* dem Datenaustausch zustimmen und einen speziellen JavaScript-Code enthalten, der dies ermöglicht. Wir werden das im Tutorial behandeln. - Auch diese Einschränkung dient der Sicherheit des Benutzers. Eine Seite von `http://anysite.com`, die ein Benutzer geöffnet hat, darf nicht in der Lage sein auf ein anderes Browser-Tab mit der URL `http://gmail.com` zuzugreifen und Informationen von dort zu stehlen. + Diese Einschränkung dient wiederum der Sicherheit des Benutzers. Eine Seite von `http://anysite.com`, die ein Benutzer geöffnet hat, darf nicht in der Lage sein, auf einen anderen Browser-Tab mit der URL `http://gmail.com` zuzugreifen, um von dort Informationen zu stehlen. - JavaScript kann leicht über das Netz mit dem Server kommunizieren, von dem die aktuelle Seite abgerufen wurde. Aber die Möglichkeit, Daten von anderen Seiten/Domains zu empfangen, ist eingeschränkt. Obwohl es möglich ist, erfordert es eine ausdrückliche Zustimmung (in HTTP-Headern angegeben) von der entfernten Seite. Noch einmal, das ist eine Sicherheitseinschränkung. Auch wenn es möglich ist erfordert es eine ausdrückliche Zustimmung (ausgedrückt in *HTTP-Headern*) von der anderen Seite. Auch dies ist eine sicherheitsbedingte Einschränkung. From b5602322a6d2bf881d46024d27eecdf3136ad15d Mon Sep 17 00:00:00 2001 From: u-n-known <60901726+u-n-known@users.noreply.github.com> Date: Tue, 28 Apr 2020 11:26:04 +0200 Subject: [PATCH 34/67] Update 1-js/01-getting-started/1-intro/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Christian Hegedüs --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index 97e7c76fd..5e6d62537 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -107,7 +107,7 @@ Moderne Werkzeuge erledigen die Konvertierung sehr schnell und transparent was e Beispiele für solche Sprachen sind: -- [CoffeeScript](http://coffeescript.org/): Es verfügt über eine kürzere Syntax was einen erlaubt klareren und präziseren Code zu schreiben. *Ruby devs* fungiert auf ähnliche Art und Weiße. +- [CoffeeScript](http://coffeescript.org/) ist eine vereinfachte Schreibweise für JavaScript. Es führt eine kürzere Syntax ein, die es uns erlaubt, eindeutigeren und präziseren Code zu schreiben. Normalerweise mögen es Ruby-Entwickler. - [TypeScript](http://www.typescriptlang.org/) konzentriert sich auf das Hinzufügen einer "strengen Datentypisierung", um die Entwicklung und Unterstützung komplexer Systeme zu vereinfachen. Es wird von Microsoft entwickelt. - [Flow](http://flow.org/) fügt auch die Datentypisierung hinzu, jedoch auf andere Art und Weise. Entwickelt von Facebook. - [Dart](https://www.dartlang.org/) ist eine eigenständige Sprache, die eine eigene Engine besitzt, die in Nicht-Browser-Umgebungen (wie mobilen Anwendungen) läuft, aber auch in JavaScript transponiert werden kann. Entwickelt von Google. From 5dc754510b5a782782b7b85e001978c610e0615f Mon Sep 17 00:00:00 2001 From: matztom <65966996+matztom@users.noreply.github.com> Date: Wed, 10 Jun 2020 20:01:23 +0200 Subject: [PATCH 35/67] translated until line 136 --- 1-js/02-first-steps/14-switch/article.md | 80 ++++++++++++------------ 1 file changed, 40 insertions(+), 40 deletions(-) diff --git a/1-js/02-first-steps/14-switch/article.md b/1-js/02-first-steps/14-switch/article.md index 314c6cef8..0d51dc496 100644 --- a/1-js/02-first-steps/14-switch/article.md +++ b/1-js/02-first-steps/14-switch/article.md @@ -1,14 +1,14 @@ -# The "switch" statement +# Die "switch" Anweisung -A `switch` statement can replace multiple `if` checks. +Eine `switch` Anweisung kann mehrere `if` Prüfungen ersetzen. -It gives a more descriptive way to compare a value with multiple variants. +Es bietet eine anschaulichere Möglichkeit, einen Wert mit mehreren Varianten zu vergleichen. -## The syntax +## Der Syntax -The `switch` has one or more `case` blocks and an optional default. +Die `switch` Anweisung hat eine oder mehrere `case` Blöcke und einen optionalen default-Block. -It looks like this: +Es sieht wie folgt aus: ```js no-beautify switch(x) { @@ -26,71 +26,71 @@ switch(x) { } ``` -- The value of `x` is checked for a strict equality to the value from the first `case` (that is, `value1`) then to the second (`value2`) and so on. -- If the equality is found, `switch` starts to execute the code starting from the corresponding `case`, until the nearest `break` (or until the end of `switch`). -- If no case is matched then the `default` code is executed (if it exists). +- Der Wert von `x` wird auf eine strikte Gleichheit mit dem Wert aus dem ersten `case` geprüft. (das ist, `value1`) dann mit dem zweiten (`value2`) und so weiter. +- Wenn eine Übereinstimmung gefunden wurde, führt `switch` den Code, ausgehend vom entsprechenden `case`, bis zum nächsten `break` aus (oder bis zum Ende der `switch` Anweisung). +- Wenn kein `case` zutrifft, wird der Code im `default` Block ausgeführt (falls dieser existiert). -## An example +## Ein Beispiel -An example of `switch` (the executed code is highlighted): +Ein Beispiel der `switch` Anweisung (der ausgeführte Code ist hervorgehoben): ```js run let a = 2 + 2; switch (a) { case 3: - alert( 'Too small' ); + alert( 'Zu klein' ); break; *!* case 4: - alert( 'Exactly!' ); + alert( 'Exakt!' ); break; */!* case 5: - alert( 'Too large' ); + alert( 'Zu gross' ); break; default: - alert( "I don't know such values" ); + alert( "Ich kenne keine solchen Werte" ); } ``` -Here the `switch` starts to compare `a` from the first `case` variant that is `3`. The match fails. +`switch` beginnt `a` mit der ersten `case` Alternative, welche `3` ist, zu vergleichen. Der Vergleich schlägt fehl. -Then `4`. That's a match, so the execution starts from `case 4` until the nearest `break`. +Dann wird mit `4` verglichen. Übereinstimmung. Der Code zwischen `case 4` bis zum nächsten `break` wird ausgeführt. -**If there is no `break` then the execution continues with the next `case` without any checks.** +**Wenn es keinen `break` gibt, wird die Ausführung mit dem nächsten `case`, ohne jegliche Überprüfung, fortgesetzt.** -An example without `break`: +Ein Beispiel ohne `break`: ```js run let a = 2 + 2; switch (a) { case 3: - alert( 'Too small' ); + alert( 'Zu klein' ); *!* case 4: - alert( 'Exactly!' ); + alert( 'Exakt!' ); case 5: - alert( 'Too big' ); + alert( 'Zu gross' ); default: - alert( "I don't know such values" ); + alert( "Ich kenne keine solchen Werte" ); */!* } ``` -In the example above we'll see sequential execution of three `alert`s: +Im obigen Beispiel sehen wir die sequentielle Ausführung von drei `alert`s: ```js -alert( 'Exactly!' ); -alert( 'Too big' ); -alert( "I don't know such values" ); +alert( 'Exakt!' ); +alert( 'Zu gross' ); +alert( "Ich kenne keine solchen Werte" ); ``` -````smart header="Any expression can be a `switch/case` argument" -Both `switch` and `case` allow arbitrary expressions. +````smart header="Jeder Ausdruck kann ein `switch/case` Argument sein" +`switch` und `case` erlauben willkürliche Ausdrücke. -For example: +Zum Beispiel: ```js run let a = "1"; @@ -99,41 +99,41 @@ let b = 0; switch (+a) { *!* case b + 1: - alert("this runs, because +a is 1, exactly equals b+1"); + alert("Das funktioniert, weil +a entspricht 1, und darum genau gleich wie b+1 ist"); break; */!* default: - alert("this doesn't run"); + alert("Wird nicht durchlaufen"); } ``` -Here `+a` gives `1`, that's compared with `b + 1` in `case`, and the corresponding code is executed. +Hier ergibt `+a` den Wert `1`, welcher im `case` mit `b + 1` verglichen wird, und der entsprechende Code ausgeführt wird. ```` -## Grouping of "case" +## Grupieren von "case" -Several variants of `case` which share the same code can be grouped. +Mehrere Varianten von `case`, die den gleichen Code teilen, können gruppiert werden. -For example, if we want the same code to run for `case 3` and `case 5`: +Wenn wir zum Beispiel denselben Code für `case 3` und `case 5` ausführen wollen: ```js run no-beautify let a = 3; switch (a) { case 4: - alert('Right!'); + alert('Richtig!'); break; *!* case 3: // (*) grouped two cases case 5: - alert('Wrong!'); - alert("Why don't you take a math class?"); + alert('Falsch!'); + alert("Warum besuchst du nicht einen Mathekurs?"); break; */!* default: - alert('The result is strange. Really.'); + alert('Das Result ist komisch. Wirklich.'); } ``` From 925e57e513806c1ec79b1b98a6e3849450320f55 Mon Sep 17 00:00:00 2001 From: matztom <65966996+matztom@users.noreply.github.com> Date: Wed, 10 Jun 2020 21:48:44 +0200 Subject: [PATCH 36/67] all translated --- 1-js/02-first-steps/14-switch/article.md | 44 ++++++++++++------------ 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/1-js/02-first-steps/14-switch/article.md b/1-js/02-first-steps/14-switch/article.md index 0d51dc496..5211081fc 100644 --- a/1-js/02-first-steps/14-switch/article.md +++ b/1-js/02-first-steps/14-switch/article.md @@ -1,14 +1,14 @@ # Die "switch" Anweisung -Eine `switch` Anweisung kann mehrere `if` Prüfungen ersetzen. +Eine `switch` Anweisung kann mehrere `if` Anweisungen ersetzen. -Es bietet eine anschaulichere Möglichkeit, einen Wert mit mehreren Varianten zu vergleichen. +Sie bietet eine anschauliche Möglichkeit, einen Wert mit mehreren Varianten zu vergleichen. -## Der Syntax +## Die Syntax -Die `switch` Anweisung hat eine oder mehrere `case` Blöcke und einen optionalen default-Block. +Die `switch` Anweisung hat eine oder mehrere `case` Marken und eine optionale default Marke. -Es sieht wie folgt aus: +Das sieht wie folgt aus: ```js no-beautify switch(x) { @@ -26,7 +26,7 @@ switch(x) { } ``` -- Der Wert von `x` wird auf eine strikte Gleichheit mit dem Wert aus dem ersten `case` geprüft. (das ist, `value1`) dann mit dem zweiten (`value2`) und so weiter. +- Der Wert von `x` wird auf strikte Gleichheit mit dem Wert aus dem ersten `case` verglichen, (das ist `value1`) dann mit dem zweiten (`value2`) und so weiter. - Wenn eine Übereinstimmung gefunden wurde, führt `switch` den Code, ausgehend vom entsprechenden `case`, bis zum nächsten `break` aus (oder bis zum Ende der `switch` Anweisung). - Wenn kein `case` zutrifft, wird der Code im `default` Block ausgeführt (falls dieser existiert). @@ -88,7 +88,7 @@ alert( "Ich kenne keine solchen Werte" ); ``` ````smart header="Jeder Ausdruck kann ein `switch/case` Argument sein" -`switch` und `case` erlauben willkürliche Ausdrücke. +`switch` und `case` erlauben beliebige Ausdrücke. Zum Beispiel: @@ -99,7 +99,7 @@ let b = 0; switch (+a) { *!* case b + 1: - alert("Das funktioniert, weil +a entspricht 1, und darum genau gleich wie b+1 ist"); + alert("Das funktioniert, weil +a gleich 1 ist, und damit genau gleich wie b+1"); break; */!* @@ -107,7 +107,7 @@ switch (+a) { alert("Wird nicht durchlaufen"); } ``` -Hier ergibt `+a` den Wert `1`, welcher im `case` mit `b + 1` verglichen wird, und der entsprechende Code ausgeführt wird. +Hier ergibt `+a` den Wert `1`, welcher im `case` mit `b + 1` verglichen wird, worauf der entsprechende Code ausgeführt wird. ```` ## Grupieren von "case" @@ -125,7 +125,7 @@ switch (a) { break; *!* - case 3: // (*) grouped two cases + case 3: // (*) zwei Fälle gruppiert case 5: alert('Falsch!'); alert("Warum besuchst du nicht einen Mathekurs?"); @@ -137,22 +137,22 @@ switch (a) { } ``` -Now both `3` and `5` show the same message. +Nun zeigen `3` und `5` die selbe Nachricht. -The ability to "group" cases is a side-effect of how `switch/case` works without `break`. Here the execution of `case 3` starts from the line `(*)` and goes through `case 5`, because there's no `break`. +Die Fähigkeit cases zu "grupieren" ist ein Seiteneffekt davon, wie `switch/case` ohne `break` funktioniert. Hier beginnt die Ausführung von `case 3` in der Zeile `(*)` und durchläuft `case 5`, weil dosich dort kein `break` befindet. -## Type matters +## Der Typ spielt eine Rolle -Let's emphasize that the equality check is always strict. The values must be of the same type to match. +Wichtig ist, dass die Gleichheitsprüfung immer streng ist. Die Werte müssen vom gleichen Typ sein, damit sie übereinstimmen. -For example, let's consider the code: +Betrachten wir zum Beispiel folgenden Code: ```js run -let arg = prompt("Enter a value?"); +let arg = prompt("Wert eingeben?"); switch (arg) { case '0': case '1': - alert( 'One or zero' ); + alert( 'Eins oder null' ); break; case '2': @@ -160,13 +160,13 @@ switch (arg) { break; case 3: - alert( 'Never executes!' ); + alert( 'Wird niemals ausgeführt!' ); break; default: - alert( 'An unknown value' ); + alert( 'Ein unbekannter Wert' ); } ``` -1. For `0`, `1`, the first `alert` runs. -2. For `2` the second `alert` runs. -3. But for `3`, the result of the `prompt` is a string `"3"`, which is not strictly equal `===` to the number `3`. So we've got a dead code in `case 3`! The `default` variant will execute. +1. Für `0`, `1`, wird der erste `alert` ausgeführt. +2. Für `2` wird der zweite `alert` ausgeführt. +3. Aber für `3`, ist das Resultat des `prompt` ein String `"3"`, welcher nicht streng gleich `===` der Zahl `3` entspricht. Also haben wir toten Code in `case 3`! Die `default` Variante wird ausgeführt. From c46ba11b3f3a400b60cad6a05a54f0dc834f4b66 Mon Sep 17 00:00:00 2001 From: matztom <65966996+matztom@users.noreply.github.com> Date: Mon, 6 Jul 2020 14:08:21 +0200 Subject: [PATCH 37/67] Update 1-js/02-first-steps/14-switch/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Christian Hegedüs --- 1-js/02-first-steps/14-switch/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/14-switch/article.md b/1-js/02-first-steps/14-switch/article.md index 5211081fc..5c071794a 100644 --- a/1-js/02-first-steps/14-switch/article.md +++ b/1-js/02-first-steps/14-switch/article.md @@ -110,7 +110,7 @@ switch (+a) { Hier ergibt `+a` den Wert `1`, welcher im `case` mit `b + 1` verglichen wird, worauf der entsprechende Code ausgeführt wird. ```` -## Grupieren von "case" +## Gruppieren von "case" Mehrere Varianten von `case`, die den gleichen Code teilen, können gruppiert werden. From 411f09b1fb1d3c0d2801ce0b9ac92e590db04202 Mon Sep 17 00:00:00 2001 From: matztom <65966996+matztom@users.noreply.github.com> Date: Mon, 6 Jul 2020 14:09:24 +0200 Subject: [PATCH 38/67] Update 1-js/02-first-steps/14-switch/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Christian Hegedüs --- 1-js/02-first-steps/14-switch/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/14-switch/article.md b/1-js/02-first-steps/14-switch/article.md index 5c071794a..d534bc4f2 100644 --- a/1-js/02-first-steps/14-switch/article.md +++ b/1-js/02-first-steps/14-switch/article.md @@ -169,4 +169,4 @@ switch (arg) { 1. Für `0`, `1`, wird der erste `alert` ausgeführt. 2. Für `2` wird der zweite `alert` ausgeführt. -3. Aber für `3`, ist das Resultat des `prompt` ein String `"3"`, welcher nicht streng gleich `===` der Zahl `3` entspricht. Also haben wir toten Code in `case 3`! Die `default` Variante wird ausgeführt. +3. Aber für `3`, ist das Resultat des `prompt` ein String `"3"`, welcher nicht streng gleich `===` der Zahl `3` ist. Also haben wir ungenutzten Code in `case 3`! Die `default` Variante wird ausgeführt. From ee586c5060a55e51c5b32a6e0fdb496d1946d1a0 Mon Sep 17 00:00:00 2001 From: matztom <65966996+matztom@users.noreply.github.com> Date: Mon, 6 Jul 2020 14:09:51 +0200 Subject: [PATCH 39/67] Update 1-js/02-first-steps/14-switch/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Christian Hegedüs --- 1-js/02-first-steps/14-switch/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/14-switch/article.md b/1-js/02-first-steps/14-switch/article.md index d534bc4f2..5f3c1cfdb 100644 --- a/1-js/02-first-steps/14-switch/article.md +++ b/1-js/02-first-steps/14-switch/article.md @@ -133,7 +133,7 @@ switch (a) { */!* default: - alert('Das Result ist komisch. Wirklich.'); + alert('Das Resultat ist komisch. Wirklich.'); } ``` From e73afb81ac26bbca87826a6278c918209acc041d Mon Sep 17 00:00:00 2001 From: Erik Behrends Date: Wed, 20 Dec 2023 19:26:56 +0100 Subject: [PATCH 40/67] Destructuring assignment --- .../1-destruct-user/solution.md | 3 +- .../1-destruct-user/task.md | 16 +- .../6-max-salary/task.md | 12 +- .../10-destructuring-assignment/article.md | 345 +++++++++--------- .../destructuring-complex.svg | 2 +- 5 files changed, 188 insertions(+), 190 deletions(-) diff --git a/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md b/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md index cc226e7c5..1fb55c2a3 100644 --- a/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md +++ b/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md @@ -1,4 +1,3 @@ - ```js run let user = { name: "John", @@ -10,4 +9,4 @@ let {name, years: age, isAdmin = false} = user; alert( name ); // John alert( age ); // 30 alert( isAdmin ); // false -``` \ No newline at end of file +``` diff --git a/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/task.md b/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/task.md index b68db5c59..4ed055c37 100644 --- a/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/task.md +++ b/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/task.md @@ -2,9 +2,9 @@ importance: 5 --- -# Destructuring assignment +# Zuweisung mit Destrukturierung -We have an object: +Wir haben ein Objekt: ```js let user = { @@ -13,18 +13,18 @@ let user = { }; ``` -Write the destructuring assignment that reads: +Schreibe die Zuweisung mit Destrukturierung, die folgendes liest: -- `name` property into the variable `name`. -- `years` property into the variable `age`. -- `isAdmin` property into the variable `isAdmin` (false, if no such property) +- `name` Eigenschaft in die Variable `name`. +- `years` Eigenschaft in die Variable `age`. +- `isAdmin` Eigenschaft in die Variable `isAdmin` (false, falls keine solche Eigenschaft existiert) -Here's an example of the values after your assignment: +Hier ist ein Beispiel von den Werten nach deiner Zuweisung: ```js let user = { name: "John", years: 30 }; -// your code to the left side: +// dein Code auf der linken Seite: // ... = user alert( name ); // John diff --git a/1-js/05-data-types/10-destructuring-assignment/6-max-salary/task.md b/1-js/05-data-types/10-destructuring-assignment/6-max-salary/task.md index 9f33de089..86a3cb704 100644 --- a/1-js/05-data-types/10-destructuring-assignment/6-max-salary/task.md +++ b/1-js/05-data-types/10-destructuring-assignment/6-max-salary/task.md @@ -2,9 +2,9 @@ importance: 5 --- -# The maximal salary +# Das maximale Gehalt -There is a `salaries` object: +Es gibt ein `salaries` Objekt: ```js let salaries = { @@ -14,9 +14,9 @@ let salaries = { }; ``` -Create the function `topSalary(salaries)` that returns the name of the top-paid person. +Erstelle die Funktion `topSalary(salaries)`, die den Namen der Person mit dem höchsten Gehalt zurückgibt. -- If `salaries` is empty, it should return `null`. -- If there are multiple top-paid persons, return any of them. +- Wenn `salaries` leer ist, sollte es `null` zurückgeben. +- Wenn es mehrere Personen mit dem höchsten Gehalt gibt, gib eine beliebige davon zurück. -P.S. Use `Object.entries` and destructuring to iterate over key/value pairs. +P.S. Verwende `Object.entries` und Destructuring, um über Schlüssel-Wert-Paare zu iterieren. diff --git a/1-js/05-data-types/10-destructuring-assignment/article.md b/1-js/05-data-types/10-destructuring-assignment/article.md index 41e36db2c..d4a541c2f 100644 --- a/1-js/05-data-types/10-destructuring-assignment/article.md +++ b/1-js/05-data-types/10-destructuring-assignment/article.md @@ -1,28 +1,28 @@ -# Destructuring assignment +# Destrukturierende Zuweisung -The two most used data structures in JavaScript are `Object` and `Array`. +Die beiden am häufigsten verwendeten Datenstrukturen in JavaScript sind `Object` und `Array`. -- Objects allow us to create a single entity that stores data items by key. -- Arrays allow us to gather data items into an ordered list. +- Objekte ermöglichen es uns, eine einzelne Entität zu erstellen, die Datenpunkte anhand von Schlüsseln speichert. +- Arrays erlauben es uns, Datenpunkte in einer geordneten Liste zusammenzufassen. -Although, when we pass those to a function, it may need not be an object/array as a whole. It may need individual pieces. +Dennoch, wenn wir diese an eine Funktion übergeben, wird möglicherweise nicht das komplette Objekt/Array als Ganzes benötigt. Sie könnte einzelne Teile benötigen. -*Destructuring assignment* is a special syntax that allows us to "unpack" arrays or objects into a bunch of variables, as sometimes that's more convenient. +Die *destrukturierende Zuweisung* ist eine spezielle Syntax, die es uns ermöglicht, Arrays oder Objekte in eine Reihe von Variablen "auszupacken", da dies manchmal bequemer ist. -Destructuring also works great with complex functions that have a lot of parameters, default values, and so on. Soon we'll see that. +Destrukturierung funktioniert auch hervorragend bei komplexen Funktionen mit vielen Parametern, Default-Werten und so weiter. Gleich werden wir das sehen. -## Array destructuring +## Array-Destrukturierung -Here's an example of how an array is destructured into variables: +Hier ist ein Beispiel, wie ein Array in Variablen destrukturiert wird: ```js -// we have an array with the name and surname +// wir haben ein Array mit dem Namen und dem Nachnamen let arr = ["John", "Smith"] *!* -// destructuring assignment -// sets firstName = arr[0] -// and surname = arr[1] +// destrukturierende Zuweisung +// setzt firstName = arr[0] +// und surname = arr[1] let [firstName, surname] = arr; */!* @@ -30,9 +30,9 @@ alert(firstName); // John alert(surname); // Smith ``` -Now we can work with variables instead of array members. +Nun können wir mit Variablen statt mit Array-Elementen arbeiten. -It looks great when combined with `split` or other array-returning methods: +Es sieht großartig aus, wenn es mit `split` oder anderen Array-Rückgabemethoden kombiniert wird: ```js run let [firstName, surname] = "John Smith".split(' '); @@ -40,12 +40,12 @@ alert(firstName); // John alert(surname); // Smith ``` -As you can see, the syntax is simple. There are several peculiar details though. Let's see more examples, to better understand it. +Wie man sieht, ist die Syntax einfach. Es gibt jedoch einige Besonderheiten. Lass uns weitere Beispiele ansehen, um es besser zu verstehen. -````smart header="\"Destructuring\" does not mean \"destructive\"." -It's called "destructuring assignment," because it "destructurizes" by copying items into variables. But the array itself is not modified. +````smart header="\"Destrukturierung\" bedeutet nicht \"destruktiv\"." +Sie wird "destrukturierende Zuweisung" genannt, weil sie "destrukturiert", indem sie Elemente in Variablen kopiert. Aber das Array selbst wird nicht verändert. -It's just a shorter way to write: +Sie ist einfach eine kürzere Art zu schreiben: ```js // let [firstName, surname] = arr; let firstName = arr[0]; @@ -53,37 +53,36 @@ let surname = arr[1]; ``` ```` -````smart header="Ignore elements using commas" -Unwanted elements of the array can also be thrown away via an extra comma: +````smart header="Elemente ignorieren mit Kommas" +Unerwünschte Elemente des Arrays können auch über ein zusätzliches Komma verworfen werden: ```js run *!* -// second element is not needed -let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]; +// das zweite Element wird nicht benötigt +let [firstName, , title] = ["Julius", "Caesar", "Konsul", "der Römischen Republik"]; */!* -alert( title ); // Consul +alert( title ); // Konsul ``` -In the code above, the second element of the array is skipped, the third one is assigned to `title`, and the rest of the array items is also skipped (as there are no variables for them). +Im obigen Code wird das zweite Element des Arrays übersprungen, das dritte wird `title` zugewiesen und die restlichen Array-Elemente werden ebenfalls übersprungen (da es keine Variablen für sie gibt). ```` -````smart header="Works with any iterable on the right-side" +````smart header="Funktioniert mit jedem Iterierbaren auf der rechten Seite" -...Actually, we can use it with any iterable, not only arrays: +...Tatsächlich können wir sie mit jedem iterierbaren Objekt verwenden, nicht nur Arrays: ```js let [a, b, c] = "abc"; // ["a", "b", "c"] let [one, two, three] = new Set([1, 2, 3]); ``` -That works, because internally a destructuring assignment works by iterating over the right value. It's a kind of syntax sugar for calling `for..of` over the value to the right of `=` and assigning the values. +Das funktioniert, weil intern eine Zuweisung über Destrukturierung durch Iterieren über den rechten Wert arbeitet. Es ist eine Art syntaktischer Zucker für den Aufruf von `for..of` über den Wert rechts von `=` und die Zuweisung der Werte. ```` +````smart header="Zuweisen an alles auf der linken Seite" +Wir können jede "zuweisbare" Sache auf der linken Seite verwenden. -````smart header="Assign to anything at the left-side" -We can use any "assignables" on the left side. - -For instance, an object property: +Zum Beispiel, eine Objekteigenschaft: ```js run let user = {}; [user.name, user.surname] = "John Smith".split(' '); @@ -94,10 +93,10 @@ alert(user.surname); // Smith ```` -````smart header="Looping with .entries()" -In the previous chapter we saw the [Object.entries(obj)](mdn:js/Object/entries) method. +````smart header="Schleifen mit .entries()" +Im vorherigen Kapitel haben wir die Methode [Object.entries(obj)](mdn:js/Object/entries) gesehen. -We can use it with destructuring to loop over keys-and-values of an object: +Wir können sie mit Destrukturierung verwenden, um über Schlüssel-Wert-Paare eines Objekts zu iterieren: ```js run let user = { @@ -105,15 +104,15 @@ let user = { age: 30 }; -// loop over keys-and-values +// Schleife über Schlüssel-Wert-Paare *!* for (let [key, value] of Object.entries(user)) { */!* - alert(`${key}:${value}`); // name:John, then age:30 + alert(`${key}:${value}`); // name:John, dann age:30 } ``` -The similar code for a `Map` is simpler, as it's iterable: +Der ähnliche Code für eine `Map` ist einfacher, da sie iterierbar ist: ```js run let user = new Map(); @@ -121,73 +120,73 @@ user.set("name", "John"); user.set("age", "30"); *!* -// Map iterates as [key, value] pairs, very convenient for destructuring +// Map iteriert als [key, value]-Paare, sehr praktisch für Destrukturierung for (let [key, value] of user) { */!* - alert(`${key}:${value}`); // name:John, then age:30 + alert(`${key}:${value}`); // name:John, dann age:30 } ``` ```` -````smart header="Swap variables trick" -There's a well-known trick for swapping values of two variables using a destructuring assignment: +````smart header="Trick zum Tauschen von Variablen" +Es gibt einen bekannten Trick, um die Werte zweier Variablen mithilfe einer Zuweisung über Destrukturierung zu tauschen: ```js run let guest = "Jane"; let admin = "Pete"; -// Let's swap the values: make guest=Pete, admin=Jane +// Lassen Sie uns die Werte tauschen: make guest=Pete, admin=Jane *!* [guest, admin] = [admin, guest]; */!* -alert(`${guest} ${admin}`); // Pete Jane (successfully swapped!) +alert(`${guest} ${admin}`); // Pete Jane (erfolgreich getauscht!) ``` -Here we create a temporary array of two variables and immediately destructure it in swapped order. +Hier erstellen wir ein temporäres Array aus zwei Variablen und destrukturieren es sofort in vertauschter Reihenfolge. -We can swap more than two variables this way. +Wir können auf diese Weise mehr als zwei Variablen tauschen. ```` -### The rest '...' +### Der Rest '...' -Usually, if the array is longer than the list at the left, the "extra" items are omitted. +Normalerweise, wenn das Array länger ist als die Liste auf der linken Seite, werden die "zusätzlichen" Elemente weggelassen. -For example, here only two items are taken, and the rest is just ignored: +Zum Beispiel werden hier nur zwei Elemente genommen, und der Rest wird einfach ignoriert: ```js run -let [name1, name2] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]; +let [name1, name2] = ["Julius", "Caesar", "Konsul", "der Römischen Republik"]; alert(name1); // Julius alert(name2); // Caesar -// Further items aren't assigned anywhere +// Weitere Elemente werden nirgendwo zugewiesen ``` -If we'd like also to gather all that follows -- we can add one more parameter that gets "the rest" using three dots `"..."`: +Wenn wir auch alles sammeln möchten, was folgt – können wir einen weiteren Parameter hinzufügen, der "den Rest" bekommt, indem wir drei Punkte `"..."` verwenden: ```js run -let [name1, name2, *!*...rest*/!*] = ["Julius", "Caesar", *!*"Consul", "of the Roman Republic"*/!*]; +let [name1, name2, *!*...rest*/!*] = ["Julius", "Caesar", *!*"Konsul", "der Römischen Republik"*/!*]; *!* -// rest is array of items, starting from the 3rd one -alert(rest[0]); // Consul -alert(rest[1]); // of the Roman Republic +// rest ist ein Array von Elementen, beginnend mit dem dritten +alert(rest[0]); // Konsul +alert(rest[1]); // der Römischen Republik alert(rest.length); // 2 */!* ``` -The value of `rest` is the array of the remaining array elements. +Der Wert von `rest` ist das Array der verbleibenden Array-Elemente. -We can use any other variable name in place of `rest`, just make sure it has three dots before it and goes last in the destructuring assignment. +Wir können jeden anderen Variablennamen anstelle von `rest` verwenden, achte nur darauf, dass ihm drei Punkte vorangestellt sind und dass er am Ende der destrukturierenden Zuweisung steht. ```js run -let [name1, name2, *!*...titles*/!*] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]; -// now titles = ["Consul", "of the Roman Republic"] +let [name1, name2, *!*...titles*/!*] = ["Julius", "Caesar", "Konsul", "der Römischen Republik"]; +// nun ist titles = ["Konsul", "der Römischen Republik"] ``` -### Default values +### Default-Werte -If the array is shorter than the list of variables at the left, there'll be no errors. Absent values are considered undefined: +Wenn das Array kürzer ist als die Liste der Variablen auf der linken Seite, gibt es keine Fehler. Fehlende Werte werden als undefined angesehen: ```js run *!* @@ -198,49 +197,49 @@ alert(firstName); // undefined alert(surname); // undefined ``` -If we want a "default" value to replace the missing one, we can provide it using `=`: +Wenn wir einen "Default-Wert" als Ersatz für den fehlenden Wert möchten, können wir ihn mit `=` angeben: ```js run *!* -// default values -let [name = "Guest", surname = "Anonymous"] = ["Julius"]; +// Default-Werte +let [name = "Gast", surname = "Anonym"] = ["Julius"]; */!* -alert(name); // Julius (from array) -alert(surname); // Anonymous (default used) +alert(name); // Julius (aus dem Array) +alert(surname); // Anonym (Default-Wert verwendet) ``` -Default values can be more complex expressions or even function calls. They are evaluated only if the value is not provided. +Default-Werte können komplexere Ausdrücke oder sogar Funktionsaufrufe sein. Sie werden nur ausgewertet, wenn der Wert nicht bereitgestellt wird. -For instance, here we use the `prompt` function for two defaults: +Zum Beispiel verwenden wir hier die `prompt`-Funktion für zwei Defaults: ```js run -// runs only prompt for surname +// prompt wird nur für surname ausgeführt let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"]; -alert(name); // Julius (from array) -alert(surname); // whatever prompt gets +alert(name); // Julius (aus dem Array) +alert(surname); // was auch immer prompt erhält ``` -Please note: the `prompt` will run only for the missing value (`surname`). +Bitte beachte: Der `prompt` wird nur für den fehlenden Wert (`surname`) ausgeführt. -## Object destructuring +## Objekt-Destrukturierung -The destructuring assignment also works with objects. +Die destrukturierende Zuweisung funktioniert auch mit Objekten. -The basic syntax is: +Die grundlegende Syntax ist: ```js let {var1, var2} = {var1:…, var2:…} ``` -We should have an existing object on the right side, that we want to split into variables. The left side contains an object-like "pattern" for corresponding properties. In the simplest case, that's a list of variable names in `{...}`. +Wir sollten ein bestehendes Objekt auf der rechten Seite haben, das wir in Variablen aufteilen möchten. Die linke Seite enthält ein objektähnliches "Muster" für entsprechende Eigenschaften. Im einfachsten Fall ist das eine Liste von Variablennamen in `{...}`. -For instance: +Zum Beispiel: ```js run let options = { - title: "Menu", + title: "Menü", width: 100, height: 200 }; @@ -249,33 +248,33 @@ let options = { let {title, width, height} = options; */!* -alert(title); // Menu +alert(title); // Menü alert(width); // 100 alert(height); // 200 ``` -Properties `options.title`, `options.width` and `options.height` are assigned to the corresponding variables. +Die Eigenschaften `options.title`, `options.width` und `options.height` sind den entsprechenden Variablen zugewiesen. -The order does not matter. This works too: +Die Reihenfolge spielt keine Rolle. Das funktioniert auch: ```js -// changed the order in let {...} -let {height, width, title} = { title: "Menu", height: 200, width: 100 } +// geänderte Reihenfolge in let {...} +let {height, width, title} = { title: "Menü", height: 200, width: 100 } ``` -The pattern on the left side may be more complex and specify the mapping between properties and variables. +Das Muster auf der linken Seite kann komplexer sein und die Zuordnung zwischen Eigenschaften und Variablen festlegen. -If we want to assign a property to a variable with another name, for instance, make `options.width` go into the variable named `w`, then we can set the variable name using a colon: +Wenn wir beispielsweise eine Eigenschaft einem Variablennamen mit einem anderen Namen zuweisen möchten, zum Beispiel `options.width` in die Variable `w`, dann können wir den Variablennamen mit einem Doppelpunkt festlegen: ```js run let options = { - title: "Menu", + title: "Menü", width: 100, height: 200 }; *!* -// { sourceProperty: targetVariable } +// { Quelleigenschaft: Zielvariable } let {width: w, height: h, title} = options; */!* @@ -283,144 +282,144 @@ let {width: w, height: h, title} = options; // height -> h // title -> title -alert(title); // Menu +alert(title); // Menü alert(w); // 100 alert(h); // 200 ``` -The colon shows "what : goes where". In the example above the property `width` goes to `w`, property `height` goes to `h`, and `title` is assigned to the same name. +Der Doppelpunkt zeigt "was : wohin geht". Im obigen Beispiel geht die Eigenschaft `width` zu `w`, die Eigenschaft `height` zu `h` und `title` wird dem gleichen Namen zugewiesen. -For potentially missing properties we can set default values using `"="`, like this: +Für potenziell fehlende Eigenschaften können wir Default-Werte mit `"="` festlegen, wie hier: ```js run let options = { - title: "Menu" + title: "Menü" }; *!* let {width = 100, height = 200, title} = options; */!* -alert(title); // Menu +alert(title); // Menü alert(width); // 100 alert(height); // 200 ``` -Just like with arrays or function parameters, default values can be any expressions or even function calls. They will be evaluated if the value is not provided. +Genau wie bei Arrays oder Funktionsparametern können Default-Werte beliebige Ausdrücke oder sogar Funktionsaufrufe sein. Sie werden ausgewertet, wenn der Wert nicht bereitgestellt wird. -In the code below `prompt` asks for `width`, but not for `title`: +Im nachfolgenden Code fragt `prompt` nach `width`, aber nicht nach `title`: ```js run let options = { - title: "Menu" + title: "Menü" }; *!* -let {width = prompt("width?"), title = prompt("title?")} = options; +let {width = prompt("Breite?"), title = prompt("Titel?")} = options; */!* -alert(title); // Menu -alert(width); // (whatever the result of prompt is) +alert(title); // Menü +alert(width); // (was auch immer das Ergebnis von prompt ist) ``` -We also can combine both the colon and equality: +Wir können auch sowohl den Doppelpunkt als auch die Gleichheit kombinieren: ```js run let options = { - title: "Menu" + title: "Menü" }; *!* let {width: w = 100, height: h = 200, title} = options; */!* -alert(title); // Menu +alert(title); // Menü alert(w); // 100 alert(h); // 200 ``` -If we have a complex object with many properties, we can extract only what we need: +Wenn wir ein komplexes Objekt mit vielen Eigenschaften haben, können wir nur das extrahieren, was wir brauchen: ```js run let options = { - title: "Menu", + title: "Menü", width: 100, height: 200 }; -// only extract title as a variable +// Nur den Titel als Variable extrahieren let { title } = options; -alert(title); // Menu +alert(title); // Menü ``` -### The rest pattern "..." +### Das Rest-Pattern "..." -What if the object has more properties than we have variables? Can we take some and then assign the "rest" somewhere? +Was ist, wenn das Objekt mehr Eigenschaften hat, als wir Variablen? Können wir einige nehmen und dann den "Rest" irgendwo zuweisen? -We can use the rest pattern, just like we did with arrays. It's not supported by some older browsers (IE, use Babel to polyfill it), but works in modern ones. +Wir können das Rest-Pattern verwenden, genau wie bei Arrays. Es wird von einigen älteren Browsern nicht unterstützt (IE, hier kann Babel für ein Polyfill verwendet werden), aber es funktioniert in modernen Browsern. -It looks like this: +Es sieht folgendermaßen aus: ```js run let options = { - title: "Menu", + title: "Menü", height: 200, width: 100 }; *!* -// title = property named title -// rest = object with the rest of properties +// title = Eigenschaft namens title +// rest = Objekt mit dem Rest der Eigenschaften let {title, ...rest} = options; */!* -// now title="Menu", rest={height: 200, width: 100} +// jetzt ist title="Menü", rest={height: 200, width: 100} alert(rest.height); // 200 alert(rest.width); // 100 ``` -````smart header="Gotcha if there's no `let`" -In the examples above variables were declared right in the assignment: `let {…} = {…}`. Of course, we could use existing variables too, without `let`. But there's a catch. +````smart header="Aufgepasst, wenn kein `let` vorhanden ist" +In den obigen Beispielen wurden Variablen direkt in der Zuweisung deklariert: `let {…} = {…}`. Natürlich könnten wir auch vorhandene Variablen ohne `let` verwenden. Es gibt aber einen Haken. -This won't work: +Das wird nicht funktionieren: ```js run let title, width, height; -// error in this line -{title, width, height} = {title: "Menu", width: 200, height: 100}; +// Fehler in dieser Zeile +{title, width, height} = {title: "Menü", width: 200, height: 100}; ``` -The problem is that JavaScript treats `{...}` in the main code flow (not inside another expression) as a code block. Such code blocks can be used to group statements, like this: +Das Problem ist, dass JavaScript `{...}` im Hauptcodefluss (nicht innerhalb eines anderen Ausdrucks) als Codeblock behandelt. Solche Codeblöcke können verwendet werden, um Anweisungen zu gruppieren, wie hier: ```js run { - // a code block - let message = "Hello"; + // ein Codeblock + let message = "Hallo"; // ... alert( message ); } ``` -So here JavaScript assumes that we have a code block, that's why there's an error. We want destructuring instead. +Hier nimmt JavaScript also an, dass wir einen Codeblock haben, deshalb gibt es einen Fehler. Wir wollen stattdessen Destrukturierung. -To show JavaScript that it's not a code block, we can wrap the expression in parentheses `(...)`: +Um JavaScript zu zeigen, dass es kein Codeblock ist, können wir den Ausdruck in Klammern `(...)` einpacken: ```js run let title, width, height; -// okay now -*!*(*/!*{title, width, height} = {title: "Menu", width: 200, height: 100}*!*)*/!*; +// jetzt ist es okay +*!*(*/!*{title, width, height} = {title: "Menü", width: 200, height: 100}*!*)*/!*; -alert( title ); // Menu +alert( title ); // Menü ``` ```` -## Nested destructuring +## Geschachtelte Destrukturierung -If an object or an array contain other nested objects and arrays, we can use more complex left-side patterns to extract deeper portions. +Wenn ein Objekt oder ein Array andere eingebettete Objekte und Arrays enthält, können wir komplexere Muster auf der linken Seite verwenden, um tiefer liegende Teile zu extrahieren. -In the code below `options` has another object in the property `size` and an array in the property `items`. The pattern on the left side of the assignment has the same structure to extract values from them: +Im nachfolgenden Code enthält `options` ein weiteres Objekt in der Eigenschaft `size` und ein Array in der Eigenschaft `items`. Das Muster auf der linken Seite der Zuweisung hat die gleiche Struktur, um Werte daraus zu extrahieren: ```js run let options = { @@ -428,40 +427,40 @@ let options = { width: 100, height: 200 }, - items: ["Cake", "Donut"], + items: ["Kuchen", "Donut"], extra: true }; -// destructuring assignment split in multiple lines for clarity +// Zuweisung über Destrukturierung in mehreren Zeilen für bessere Übersicht aufgeteilt let { - size: { // put size here + size: { // Größe hier einfügen width, height }, - items: [item1, item2], // assign items here - title = "Menu" // not present in the object (default value is used) + items: [item1, item2], // Gegenstände hier zuweisen + title = "Menü" // nicht im Objekt vorhanden (Default-Wert verwendet) } = options; -alert(title); // Menu +alert(title); // Menü alert(width); // 100 alert(height); // 200 -alert(item1); // Cake +alert(item1); // Kuchen alert(item2); // Donut ``` -All properties of `options` object except `extra` that is absent in the left part, are assigned to corresponding variables: +Alle Eigenschaften des `options` Objekts außer `extra`, die im linken Teil nicht vorhanden sind, werden den entsprechenden Variablen zugewiesen: ![](destructuring-complex.svg) -Finally, we have `width`, `height`, `item1`, `item2` and `title` from the default value. +Letztendlich haben wir `width`, `height`, `item1`, `item2` und `title` aus dem Default-Wert. -Note that there are no variables for `size` and `items`, as we take their content instead. +Zu beachten ist, dass es keine Variablen für `size` und `items` gibt, da wir stattdessen deren Inhalt nehmen. -## Smart function parameters +## Intelligente Funktionenparameter -There are times when a function has many parameters, most of which are optional. That's especially true for user interfaces. Imagine a function that creates a menu. It may have a width, a height, a title, items list and so on. +Es gibt Zeiten, in denen eine Funktion viele Parameter hat, von denen die meisten optional sind. Das trifft besonders auf Benutzeroberflächen zu. Stelle Dir eine Funktion vor, die ein Menü erstellt. Sie könnte eine Breite, eine Höhe, einen Titel, eine Liste von Elementen und so weiter haben. -Here's a bad way to write such function: +Hier ist eine schlechte Möglichkeit, eine solche Funktion zu schreiben: ```js function showMenu(title = "Untitled", width = 200, height = 100, items = []) { @@ -469,32 +468,32 @@ function showMenu(title = "Untitled", width = 200, height = 100, items = []) { } ``` -In real-life, the problem is how to remember the order of arguments. Usually IDEs try to help us, especially if the code is well-documented, but still... Another problem is how to call a function when most parameters are ok by default. +Im wirklichen Leben ist das Problem, sich die Reihenfolge der Argumente zu merken. In der Regel versuchen IDEs uns zu helfen, besonders wenn der Code gut dokumentiert ist, aber trotzdem... Ein weiteres Problem ist, wie eine Funktion aufgerufen werden soll, wenn die meisten Parameter per Default in Ordnung sind. -Like this? +Zum Beispiel so? ```js -// undefined where default values are fine +// undefined, wo Standardwerte passen showMenu("My Menu", undefined, undefined, ["Item1", "Item2"]) ``` -That's ugly. And becomes unreadable when we deal with more parameters. +Das ist hässlich. Und es wird unlesbar, wenn wir es mit mehreren Parametern zu tun haben. -Destructuring comes to the rescue! +Destrukturierung kommt zur Rettung! -We can pass parameters as an object, and the function immediately destructurizes them into variables: +Wir können Parameter als Objekt übergeben, und die Funktion destrukturiert sie sofort in Variablen: ```js run -// we pass object to function +// wir übergeben ein Objekt an die Funktion let options = { title: "My menu", items: ["Item1", "Item2"] }; -// ...and it immediately expands it to variables +// ...und es entfaltet sich sofort in Variablen function showMenu(*!*{title = "Untitled", width = 200, height = 100, items = []}*/!*) { - // title, items – taken from options, - // width, height – defaults used + // title, items – entnommen aus options, + // width, height – Standardwerte verwendet alert( `${title} ${width} ${height}` ); // My Menu 200 100 alert( items ); // Item1, Item2 } @@ -502,7 +501,7 @@ function showMenu(*!*{title = "Untitled", width = 200, height = 100, items = []} showMenu(options); ``` -We can also use more complex destructuring with nested objects and colon mappings: +Wir können auch komplexere Destrukturierung mit verschachtelten Objekten und Zuordnungen mit Doppelpunkt verwenden: ```js run let options = { @@ -513,9 +512,9 @@ let options = { *!* function showMenu({ title = "Untitled", - width: w = 100, // width goes to w - height: h = 200, // height goes to h - items: [item1, item2] // items first element goes to item1, second to item2 + width: w = 100, // Breite geht zu w + height: h = 200, // Höhe geht zu h + items: [item1, item2] // erstes Element von items geht zu item1, zweites zu item2 }) { */!* alert( `${title} ${w} ${h}` ); // My Menu 100 200 @@ -526,7 +525,7 @@ function showMenu({ showMenu(options); ``` -The full syntax is the same as for a destructuring assignment: +Die vollständige Syntax entspricht einer destrukturierenden Zuweisung: ```js function({ incomingProperty: varName = defaultValue @@ -534,17 +533,17 @@ function({ }) ``` -Then, for an object of parameters, there will be a variable `varName` for property `incomingProperty`, with `defaultValue` by default. +Dann gibt es für ein Objekt an Parametern eine Variable `varName` für die Eigenschaft `incomingProperty`, per Default mit `defaultValue`. -Please note that such destructuring assumes that `showMenu()` does have an argument. If we want all values by default, then we should specify an empty object: +Bitte beachte, dass eine solche Destrukturierung voraussetzt, dass `showMenu()` ein Argument hat. Wenn wir alle Werte als Default möchten, dann sollten wir ein leeres Objekt übergeben: ```js -showMenu({}); // ok, all values are default +showMenu({}); // ok, alle Werte sind Default -showMenu(); // this would give an error +showMenu(); // das würde einen Fehler verursachen ``` -We can fix this by making `{}` the default value for the whole object of parameters: +Wir können dies beheben, indem wir `{}` als Default-Wert für das gesamte Objekt an Parametern machen: ```js run function showMenu({ title = "Menu", width = 100, height = 200 }*!* = {}*/!*) { @@ -554,26 +553,26 @@ function showMenu({ title = "Menu", width = 100, height = 200 }*!* = {}*/!*) { showMenu(); // Menu 100 200 ``` -In the code above, the whole arguments object is `{}` by default, so there's always something to destructurize. +Im obigen Code ist das ganze Argumentobjekt per Default `{}`, so dass es immer etwas zum Destrukturieren gibt. -## Summary +## Zusammenfassung -- Destructuring assignment allows for instantly mapping an object or array onto many variables. -- The full object syntax: +- Die destrukturierende Zuweisung ermöglicht eine sofortige Zuordnung eines Objekts oder Arrays auf viele Variablen. +- Die vollständige Objektsyntax: ```js let {prop : varName = default, ...rest} = object ``` - This means that property `prop` should go into the variable `varName` and, if no such property exists, then the `default` value should be used. + Das bedeutet, dass die Eigenschaft `prop` in die Variable `varName` gehen sollte, und wenn eine solche Eigenschaft nicht existiert, dann sollte der Wert `default` verwendet werden. - Object properties that have no mapping are copied to the `rest` object. + Eigenschaften des Objekts, die nicht zugeordnet sind, werden auf das Objekt `rest` kopiert. -- The full array syntax: +- Die vollständige Array-Syntax: ```js - let [item1 = default, item2, ...rest] = array + let [item1 = standard, item2, ...rest] = array ``` - The first item goes to `item1`; the second goes into `item2`, all the rest makes the array `rest`. + Das erste Element geht zu `item1`; das zweite zu `item2`, alle weiteren bilden das Array `rest`. -- It's possible to extract data from nested arrays/objects, for that the left side must have the same structure as the right one. +- Es ist möglich, Daten aus verschachtelten Arrays/Objekten zu extrahieren, dafür muss die linke Seite dieselbe Struktur wie die rechte haben. diff --git a/1-js/05-data-types/10-destructuring-assignment/destructuring-complex.svg b/1-js/05-data-types/10-destructuring-assignment/destructuring-complex.svg index 8f6bcc033..8a1ff1a93 100644 --- a/1-js/05-data-types/10-destructuring-assignment/destructuring-complex.svg +++ b/1-js/05-data-types/10-destructuring-assignment/destructuring-complex.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file From d1f6d4dd93b9c6e4bf875c99ac51b84259b11efa Mon Sep 17 00:00:00 2001 From: Erik Behrends Date: Mon, 15 Jan 2024 09:00:57 +0100 Subject: [PATCH 41/67] Date and time --- .../11-date/1-new-date/solution.md | 12 +- 1-js/05-data-types/11-date/1-new-date/task.md | 6 +- .../11-date/2-get-week-day/solution.md | 8 +- .../11-date/2-get-week-day/task.md | 10 +- .../11-date/3-weekday/_js.view/solution.js | 2 +- 1-js/05-data-types/11-date/3-weekday/task.md | 8 +- .../11-date/4-get-date-ago/solution.md | 12 +- .../11-date/4-get-date-ago/task.md | 16 +- .../11-date/5-last-day-of-month/solution.md | 4 +- .../11-date/5-last-day-of-month/task.md | 12 +- .../11-date/6-get-seconds-today/solution.md | 12 +- .../11-date/6-get-seconds-today/task.md | 8 +- .../7-get-seconds-to-tomorrow/solution.md | 14 +- .../11-date/7-get-seconds-to-tomorrow/task.md | 8 +- .../8-format-date-relative/solution.md | 25 +- .../11-date/8-format-date-relative/task.md | 16 +- 1-js/05-data-types/11-date/article.md | 296 +++++++++--------- 17 files changed, 235 insertions(+), 234 deletions(-) diff --git a/1-js/05-data-types/11-date/1-new-date/solution.md b/1-js/05-data-types/11-date/1-new-date/solution.md index 18286c336..817f011f9 100644 --- a/1-js/05-data-types/11-date/1-new-date/solution.md +++ b/1-js/05-data-types/11-date/1-new-date/solution.md @@ -1,18 +1,18 @@ -The `new Date` constructor uses the local time zone. So the only important thing to remember is that months start from zero. +Der `new Date` Konstruktor verwendet die lokale Zeitzone. Das Einzige, woran du dich erinnern musst, ist, dass die Zählung der Monate bei Null beginnt. -So February has number 1. +Also hat der Februar die Nummer 1. -Here's an example with numbers as date components: +Hier ist ein Beispiel mit Zahlen als Datumskomponenten: ```js run -//new Date(year, month, date, hour, minute, second, millisecond) +// new Date(Jahr, Monat, Tag, Stunde, Minute, Sekunde, Millisekunde) let d1 = new Date(2012, 1, 20, 3, 12); alert( d1 ); ``` -We could also create a date from a string, like this: +Wir könnten auch ein Datum aus einem String erstellen, so wie hier: ```js run -//new Date(datastring) +//new Date(Datenstring) let d2 = new Date("2012-02-20T03:12"); alert( d2 ); ``` diff --git a/1-js/05-data-types/11-date/1-new-date/task.md b/1-js/05-data-types/11-date/1-new-date/task.md index 1b40d5ac0..99b1dc587 100644 --- a/1-js/05-data-types/11-date/1-new-date/task.md +++ b/1-js/05-data-types/11-date/1-new-date/task.md @@ -2,8 +2,8 @@ importance: 5 --- -# Create a date +# Erstelle ein Datum -Create a `Date` object for the date: Feb 20, 2012, 3:12am. The time zone is local. +Erstelle ein `Date`-Objekt für das Datum: 20. Feb. 2012, 3:12 Uhr morgens. Die Zeitzone ist lokal. -Show it using `alert`. +Zeige es mit `alert` an. diff --git a/1-js/05-data-types/11-date/2-get-week-day/solution.md b/1-js/05-data-types/11-date/2-get-week-day/solution.md index 58d75c1c3..fe8af0dd1 100644 --- a/1-js/05-data-types/11-date/2-get-week-day/solution.md +++ b/1-js/05-data-types/11-date/2-get-week-day/solution.md @@ -1,14 +1,14 @@ -The method `date.getDay()` returns the number of the weekday, starting from sunday. +Die Methode `date.getDay()` gibt die Zahl des Wochentags zurück, beginnend mit Sonntag. -Let's make an array of weekdays, so that we can get the proper day name by its number: +Lass uns ein Array von Wochentagen erstellen, damit wir den richtigen Namen des Tages anhand seiner Nummer erhalten können: ```js run demo function getWeekDay(date) { - let days = ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA']; + let days = ['SO', 'MO', 'DI', 'MI', 'DO', 'FR', 'SA']; return days[date.getDay()]; } -let date = new Date(2014, 0, 3); // 3 Jan 2014 +let date = new Date(2014, 0, 3); // 3. Jan 2014 alert( getWeekDay(date) ); // FR ``` diff --git a/1-js/05-data-types/11-date/2-get-week-day/task.md b/1-js/05-data-types/11-date/2-get-week-day/task.md index 5cf31565d..48b6ece8d 100644 --- a/1-js/05-data-types/11-date/2-get-week-day/task.md +++ b/1-js/05-data-types/11-date/2-get-week-day/task.md @@ -2,13 +2,13 @@ importance: 5 --- -# Show a weekday +# Zeige einen Wochentag -Write a function `getWeekDay(date)` to show the weekday in short format: 'MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU'. +Schreibe eine Funktion `getWeekDay(date)`, um den Wochentag in Kurzform anzuzeigen: 'MO', 'DI', 'MI', 'DO', 'FR', 'SA', 'SO'. -For instance: +Zum Beispiel: ```js no-beautify -let date = new Date(2012, 0, 3); // 3 Jan 2012 -alert( getWeekDay(date) ); // should output "TU" +let date = new Date(2012, 0, 3); // 3. Jan 2012 +alert( getWeekDay(date) ); // sollte "DI" ausgeben ``` diff --git a/1-js/05-data-types/11-date/3-weekday/_js.view/solution.js b/1-js/05-data-types/11-date/3-weekday/_js.view/solution.js index fb9e3d2a4..79ae6250b 100644 --- a/1-js/05-data-types/11-date/3-weekday/_js.view/solution.js +++ b/1-js/05-data-types/11-date/3-weekday/_js.view/solution.js @@ -2,7 +2,7 @@ function getLocalDay(date) { let day = date.getDay(); - if (day == 0) { // weekday 0 (sunday) is 7 in european + if (day == 0) { // Wochentag 0 (Sonntag) ist 7 im europäischen Format day = 7; } diff --git a/1-js/05-data-types/11-date/3-weekday/task.md b/1-js/05-data-types/11-date/3-weekday/task.md index ba62790cf..87a0421b8 100644 --- a/1-js/05-data-types/11-date/3-weekday/task.md +++ b/1-js/05-data-types/11-date/3-weekday/task.md @@ -2,11 +2,11 @@ importance: 5 --- -# European weekday +# Europäischer Wochentag -European countries have days of week starting with Monday (number 1), then Tuesday (number 2) and till Sunday (number 7). Write a function `getLocalDay(date)` that returns the "European" day of week for `date`. +Europäische Länder beginnen die Woche mit Montag (Nummer 1), gefolgt von Dienstag (Nummer 2) bis hin zum Sonntag (Nummer 7). Schreibe eine Funktion `getLocalDay(date)`, die den "europäischen" Wochentag für `date` zurückgibt. ```js no-beautify -let date = new Date(2012, 0, 3); // 3 Jan 2012 -alert( getLocalDay(date) ); // tuesday, should show 2 +let date = new Date(2012, 0, 3); // 3. Jan 2012 +alert( getLocalDay(date) ); // Dienstag, sollte 2 anzeigen ``` diff --git a/1-js/05-data-types/11-date/4-get-date-ago/solution.md b/1-js/05-data-types/11-date/4-get-date-ago/solution.md index 5c394c100..e63427843 100644 --- a/1-js/05-data-types/11-date/4-get-date-ago/solution.md +++ b/1-js/05-data-types/11-date/4-get-date-ago/solution.md @@ -1,4 +1,4 @@ -The idea is simple: to substract given number of days from `date`: +Die Idee ist einfach: eine gegebene Anzahl von Tagen von `date` abzuziehen: ```js function getDateAgo(date, days) { @@ -7,9 +7,9 @@ function getDateAgo(date, days) { } ``` -...But the function should not change `date`. That's an important thing, because the outer code which gives us the date does not expect it to change. +...Aber die Funktion sollte `date` nicht ändern. Das ist eine wichtige Sache, denn der äußere Code, der uns das Datum bereitstellt, erwartet nicht, dass es sich ändert. -To implement it let's clone the date, like this: +Um das zu implementieren, sollten wir das Datum klonen, so wie hier: ```js run demo function getDateAgo(date, days) { @@ -21,7 +21,7 @@ function getDateAgo(date, days) { let date = new Date(2015, 0, 2); -alert( getDateAgo(date, 1) ); // 1, (1 Jan 2015) -alert( getDateAgo(date, 2) ); // 31, (31 Dec 2014) -alert( getDateAgo(date, 365) ); // 2, (2 Jan 2014) +alert( getDateAgo(date, 1) ); // 1, (1. Jan 2015) +alert( getDateAgo(date, 2) ); // 31, (31. Dez 2014) +alert( getDateAgo(date, 365) ); // 2, (2. Jan 2014) ``` diff --git a/1-js/05-data-types/11-date/4-get-date-ago/task.md b/1-js/05-data-types/11-date/4-get-date-ago/task.md index 058d39c7e..6a190c8b4 100644 --- a/1-js/05-data-types/11-date/4-get-date-ago/task.md +++ b/1-js/05-data-types/11-date/4-get-date-ago/task.md @@ -2,20 +2,20 @@ importance: 4 --- -# Which day of month was many days ago? +# Welcher Tag des Monats war vor vielen Tagen? -Create a function `getDateAgo(date, days)` to return the day of month `days` ago from the `date`. +Erstelle eine Funktion `getDateAgo(date, days)`, um den Tag des Monats vor `days` Tagen ab dem Datum `date` zu ermitteln. -For instance, if today is 20th, then `getDateAgo(new Date(), 1)` should be 19th and `getDateAgo(new Date(), 2)` should be 18th. +Beispiel: Wenn heute der 20. ist, dann sollte `getDateAgo(new Date(), 1)` den 19. zurückgeben und `getDateAgo(new Date(), 2)` den 18. -Should work reliably for `days=365` or more: +Die Funktion sollte auch zuverlässig für `days=365` oder mehr funktionieren: ```js let date = new Date(2015, 0, 2); -alert( getDateAgo(date, 1) ); // 1, (1 Jan 2015) -alert( getDateAgo(date, 2) ); // 31, (31 Dec 2014) -alert( getDateAgo(date, 365) ); // 2, (2 Jan 2014) +alert( getDateAgo(date, 1) ); // 1, (1. Jan 2015) +alert( getDateAgo(date, 2) ); // 31, (31. Dez 2014) +alert( getDateAgo(date, 365) ); // 2, (2. Jan 2014) ``` -P.S. The function should not modify the given `date`. +P.S. Die Funktion sollte das übergebene `date` nicht verändern. diff --git a/1-js/05-data-types/11-date/5-last-day-of-month/solution.md b/1-js/05-data-types/11-date/5-last-day-of-month/solution.md index 4f642536e..463fd6b3e 100644 --- a/1-js/05-data-types/11-date/5-last-day-of-month/solution.md +++ b/1-js/05-data-types/11-date/5-last-day-of-month/solution.md @@ -1,4 +1,4 @@ -Let's create a date using the next month, but pass zero as the day: +Lass uns ein Datum erstellen, indem wir den nächsten Monat nehmen, aber als Tag eine Null übergeben: ```js run demo function getLastDayOfMonth(year, month) { let date = new Date(year, month + 1, 0); @@ -10,4 +10,4 @@ alert( getLastDayOfMonth(2012, 1) ); // 29 alert( getLastDayOfMonth(2013, 1) ); // 28 ``` -Normally, dates start from 1, but technically we can pass any number, the date will autoadjust itself. So when we pass 0, then it means "one day before 1st day of the month", in other words: "the last day of the previous month". +Normalerweise beginnen Daten ab der Zahl 1, technisch gesehen können wir aber jede Zahl übergeben, das Datum wird sich selbst automatisch anpassen. Also, wenn wir 0 übergeben, dann bedeutet das "ein Tag vor dem ersten Tag des Monats", anders ausgedrückt: "der letzte Tag des vorherigen Monats". diff --git a/1-js/05-data-types/11-date/5-last-day-of-month/task.md b/1-js/05-data-types/11-date/5-last-day-of-month/task.md index 10dfb7a7a..c2d148510 100644 --- a/1-js/05-data-types/11-date/5-last-day-of-month/task.md +++ b/1-js/05-data-types/11-date/5-last-day-of-month/task.md @@ -2,13 +2,13 @@ importance: 5 --- -# Last day of month? +# Letzter Tag des Monats? -Write a function `getLastDayOfMonth(year, month)` that returns the last day of month. Sometimes it is 30th, 31st or even 28/29th for Feb. +Schreibe eine Funktion `getLastDayOfMonth(year, month)`, die den letzten Tag des Monats zurückgibt. Manchmal ist es der 30., der 31. oder sogar der 28./29. für Februar. -Parameters: +Parameter: -- `year` -- four-digits year, for instance 2012. -- `month` -- month, from 0 to 11. +- `year` -- vierstelliges Jahr, zum Beispiel 2012. +- `month` -- Monat, von 0 bis 11. -For instance, `getLastDayOfMonth(2012, 1) = 29` (leap year, Feb). +Zum Beispiel `getLastDayOfMonth(2012, 1) = 29` (Schaltjahr, Feb). diff --git a/1-js/05-data-types/11-date/6-get-seconds-today/solution.md b/1-js/05-data-types/11-date/6-get-seconds-today/solution.md index 8f8e52b68..4a1f9ac00 100644 --- a/1-js/05-data-types/11-date/6-get-seconds-today/solution.md +++ b/1-js/05-data-types/11-date/6-get-seconds-today/solution.md @@ -1,22 +1,22 @@ -To get the number of seconds, we can generate a date using the current day and time 00:00:00, then substract it from "now". +Um die Anzahl der Sekunden zu ermitteln, können wir ein Datum unter Verwendung des aktuellen Tages und der Uhrzeit 00:00:00 generieren und dieses von "jetzt" subtrahieren. -The difference is the number of milliseconds from the beginning of the day, that we should divide by 1000 to get seconds: +Die Differenz ist die Anzahl der Millisekunden seit Beginn des Tages, die wir durch 1000 teilen sollten, um Sekunden zu erhalten: ```js run function getSecondsToday() { let now = new Date(); - // create an object using the current day/month/year + // erstelle ein Objekt mit dem aktuellen Tag/Monat/Jahr let today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); - let diff = now - today; // ms difference - return Math.round(diff / 1000); // make seconds + let diff = now - today; // ms Differenz + return Math.round(diff / 1000); // mache Sekunden } alert( getSecondsToday() ); ``` -An alternative solution would be to get hours/minutes/seconds and convert them to seconds: +Eine alternative Lösung wäre, Stunden/Minuten/Sekunden zu ermitteln und diese in Sekunden umzurechnen: ```js run function getSecondsToday() { diff --git a/1-js/05-data-types/11-date/6-get-seconds-today/task.md b/1-js/05-data-types/11-date/6-get-seconds-today/task.md index 456790928..beee601d6 100644 --- a/1-js/05-data-types/11-date/6-get-seconds-today/task.md +++ b/1-js/05-data-types/11-date/6-get-seconds-today/task.md @@ -2,14 +2,14 @@ importance: 5 --- -# How many seconds have passed today? +# Wie viele Sekunden sind heute bereits vergangen? -Write a function `getSecondsToday()` that returns the number of seconds from the beginning of today. +Schreibe eine Funktion `getSecondsToday()`, die die Anzahl der Sekunden seit Beginn des heutigen Tages zurückgibt. -For instance, if now were `10:00 am`, and there was no daylight savings shift, then: +Wenn es zum Beispiel jetzt `10:00 Uhr vormittags` wäre und es keine Umstellung auf Sommerzeit gäbe, dann: ```js getSecondsToday() == 36000 // (3600 * 10) ``` -The function should work in any day. That is, it should not have a hard-coded value of "today". +Die Funktion sollte an jedem Tag funktionieren. Das heißt, sie sollte keinen fest einprogrammierten Wert von "heute" haben. diff --git a/1-js/05-data-types/11-date/7-get-seconds-to-tomorrow/solution.md b/1-js/05-data-types/11-date/7-get-seconds-to-tomorrow/solution.md index c337d1199..cf1270cae 100644 --- a/1-js/05-data-types/11-date/7-get-seconds-to-tomorrow/solution.md +++ b/1-js/05-data-types/11-date/7-get-seconds-to-tomorrow/solution.md @@ -1,20 +1,20 @@ -To get the number of milliseconds till tomorrow, we can from "tomorrow 00:00:00" substract the current date. +Um die Anzahl der Millisekunden bis zum morgigen Tag zu berechnen, können wir vom "morgigen Tag, 00:00:00" das aktuelle Datum subtrahieren. -First, we generate that "tomorrow", and then do it: +Zuerst erzeugen wir das "morgige" Datum, und dann tun wir Folgendes: ```js run function getSecondsToTomorrow() { let now = new Date(); - // tomorrow date + // morgiges Datum let tomorrow = new Date(now.getFullYear(), now.getMonth(), *!*now.getDate()+1*/!*); - let diff = tomorrow - now; // difference in ms - return Math.round(diff / 1000); // convert to seconds + let diff = tomorrow - now; // Differenz in ms + return Math.round(diff / 1000); // umrechnen in Sekunden } ``` -Alternative solution: +Alternative Lösung: ```js run function getSecondsToTomorrow() { @@ -29,4 +29,4 @@ function getSecondsToTomorrow() { } ``` -Please note that many countries have Daylight Savings Time (DST), so there may be days with 23 or 25 hours. We may want to treat such days separately. +Bitte beachte, dass viele Länder die Sommerzeit (DST) einführen, daher kann es Tage mit 23 oder 25 Stunden geben. Wir möchten solche Tage möglicherweise gesondert behandeln. diff --git a/1-js/05-data-types/11-date/7-get-seconds-to-tomorrow/task.md b/1-js/05-data-types/11-date/7-get-seconds-to-tomorrow/task.md index e05903026..af94a3384 100644 --- a/1-js/05-data-types/11-date/7-get-seconds-to-tomorrow/task.md +++ b/1-js/05-data-types/11-date/7-get-seconds-to-tomorrow/task.md @@ -2,14 +2,14 @@ importance: 5 --- -# How many seconds till tomorrow? +# Wie viele Sekunden bis morgen? -Create a function `getSecondsToTomorrow()` that returns the number of seconds till tomorrow. +Erstelle eine Funktion `getSecondsToTomorrow()`, die die Anzahl der Sekunden bis morgen zurückgibt. -For instance, if now is `23:00`, then: +Zum Beispiel, wenn es jetzt `23:00` ist, dann: ```js getSecondsToTomorrow() == 3600 ``` -P.S. The function should work at any day, the "today" is not hardcoded. +P.S. Die Funktion sollte an jedem Tag funktionieren, das "heute" ist nicht fest einprogrammiert. diff --git a/1-js/05-data-types/11-date/8-format-date-relative/solution.md b/1-js/05-data-types/11-date/8-format-date-relative/solution.md index 372485685..1a1d150e9 100644 --- a/1-js/05-data-types/11-date/8-format-date-relative/solution.md +++ b/1-js/05-data-types/11-date/8-format-date-relative/solution.md @@ -1,26 +1,26 @@ -To get the time from `date` till now -- let's substract the dates. +Um die Zeit von `date` bis jetzt zu bekommen -- lass uns die Daten subtrahieren. ```js run demo function formatDate(date) { - let diff = new Date() - date; // the difference in milliseconds + let diff = new Date() - date; // der Unterschied in Millisekunden - if (diff < 1000) { // less than 1 second + if (diff < 1000) { // weniger als 1 Sekunde return 'right now'; } - let sec = Math.floor(diff / 1000); // convert diff to seconds + let sec = Math.floor(diff / 1000); // diff in Sekunden umwandeln if (sec < 60) { return sec + ' sec. ago'; } - let min = Math.floor(diff / 60000); // convert diff to minutes + let min = Math.floor(diff / 60000); // diff in Minuten umwandeln if (min < 60) { return min + ' min. ago'; } - // format the date - // add leading zeroes to single-digit day/month/hours/minutes + // das Datum formatieren + // führende Nullen zu einstelligen Tagen/Monaten/Stunden/Minuten hinzufügen let d = date; d = [ '0' + d.getDate(), @@ -28,9 +28,9 @@ function formatDate(date) { '' + d.getFullYear(), '0' + d.getHours(), '0' + d.getMinutes() - ].map(component => component.slice(-2)); // take last 2 digits of every component + ].map(component => component.slice(-2)); // die letzten 2 Ziffern jeder Komponente nehmen - // join the components into date + // die Komponenten zu einem Datum zusammenfügen return d.slice(0, 3).join('.') + ' ' + d.slice(3).join(':'); } @@ -40,11 +40,11 @@ alert( formatDate(new Date(new Date - 30 * 1000)) ); // "30 sec. ago" alert( formatDate(new Date(new Date - 5 * 60 * 1000)) ); // "5 min. ago" -// yesterday's date like 31.12.2016 20:00 +// das gestrige Datum wie 31.12.2016 20:00 alert( formatDate(new Date(new Date - 86400 * 1000)) ); ``` -Alternative solution: +Alternative Lösung: ```js run function formatDate(date) { @@ -58,7 +58,7 @@ function formatDate(date) { let diffMin = diffSec / 60; let diffHour = diffMin / 60; - // formatting + // Formatierung year = year.toString().slice(-2); month = month < 10 ? '0' + month : month; dayOfMonth = dayOfMonth < 10 ? '0' + dayOfMonth : dayOfMonth; @@ -76,3 +76,4 @@ function formatDate(date) { } } ``` + diff --git a/1-js/05-data-types/11-date/8-format-date-relative/task.md b/1-js/05-data-types/11-date/8-format-date-relative/task.md index 9651b305f..ee9290f1a 100644 --- a/1-js/05-data-types/11-date/8-format-date-relative/task.md +++ b/1-js/05-data-types/11-date/8-format-date-relative/task.md @@ -2,16 +2,16 @@ importance: 4 --- -# Format the relative date +# Das relative Datum formatieren -Write a function `formatDate(date)` that should format `date` as follows: +Schreibe eine Funktion `formatDate(date)`, die das Datum `date` wie folgt formatieren soll: -- If since `date` passed less than 1 second, then `"right now"`. -- Otherwise, if since `date` passed less than 1 minute, then `"n sec. ago"`. -- Otherwise, if less than an hour, then `"m min. ago"`. -- Otherwise, the full date in the format `"DD.MM.YY HH:mm"`. That is: `"day.month.year hours:minutes"`, all in 2-digit format, e.g. `31.12.16 10:00`. +- Wenn seit `date` weniger als 1 Sekunde vergangen ist, dann `"right now"`. +- Ansonsten, wenn seit `date` weniger als 1 Minute vergangen ist, dann `"n sec. ago"`. +- Ansonsten, wenn weniger als eine Stunde vergangen ist, dann `"m min. ago"`. +- Andernfalls das vollständige Datum im Format `"TT.MM.JJ HH:mm"`. Das heißt: `"Tag.Monat.Jahr Stunden:Minuten"`, alles im 2-Ziffern-Format, z.B. `31.12.16 10:00`. -For instance: +Zum Beispiel: ```js alert( formatDate(new Date(new Date - 1)) ); // "right now" @@ -20,6 +20,6 @@ alert( formatDate(new Date(new Date - 30 * 1000)) ); // "30 sec. ago" alert( formatDate(new Date(new Date - 5 * 60 * 1000)) ); // "5 min. ago" -// yesterday's date like 31.12.16 20:00 +// Das Datum von gestern wie 31.12.16 20:00 alert( formatDate(new Date(new Date - 86400 * 1000)) ); ``` diff --git a/1-js/05-data-types/11-date/article.md b/1-js/05-data-types/11-date/article.md index 6958a3a97..2e5ac559c 100644 --- a/1-js/05-data-types/11-date/article.md +++ b/1-js/05-data-types/11-date/article.md @@ -1,141 +1,141 @@ -# Date and time +# Datum und Uhrzeit -Let's meet a new built-in object: [Date](mdn:js/Date). It stores the date, time and provides methods for date/time management. +Lass uns ein neues eingebautes Objekt kennenlernen: [Date](mdn:js/Date). Es speichert das Datum, die Uhrzeit und bietet Methoden zur Verwaltung von Datum/Uhrzeit. -For instance, we can use it to store creation/modification times, to measure time, or just to print out the current date. +Zum Beispiel können wir es verwenden, um Erstellungs-/Änderungszeiten zu speichern, die Zeit zu messen oder einfach nur das aktuelle Datum auszugeben. -## Creation +## Erstellung -To create a new `Date` object call `new Date()` with one of the following arguments: +Um ein neues `Date`-Objekt zu erstellen, rufe `new Date()` mit einem der folgenden Argumente auf: `new Date()` -: Without arguments -- create a `Date` object for the current date and time: +: Ohne Argumente – erstellt ein `Date`-Objekt für das aktuelle Datum und die aktuelle Uhrzeit: ```js run let now = new Date(); - alert( now ); // shows current date/time + alert( now ); // zeigt aktuelles Datum/Uhrzeit ``` `new Date(milliseconds)` -: Create a `Date` object with the time equal to number of milliseconds (1/1000 of a second) passed after the Jan 1st of 1970 UTC+0. +: Erstelle ein `Date`-Objekt mit der Zeit gleich der Anzahl von Millisekunden (1/1000 einer Sekunde), die seit dem 1. Januar 1970 UTC+0 vergangen sind. ```js run - // 0 means 01.01.1970 UTC+0 + // 0 bedeutet 01.01.1970 UTC+0 let Jan01_1970 = new Date(0); alert( Jan01_1970 ); - // now add 24 hours, get 02.01.1970 UTC+0 + // nun 24 Stunden hinzufügen, ergibt 02.01.1970 UTC+0 let Jan02_1970 = new Date(24 * 3600 * 1000); alert( Jan02_1970 ); ``` - An integer number representing the number of milliseconds that has passed since the beginning of 1970 is called a *timestamp*. + Eine ganze Zahl, die die Anzahl der Millisekunden darstellt, die seit Beginn des Jahres 1970 vergangen sind, wird als *Zeitstempel* bezeichnet. - It's a lightweight numeric representation of a date. We can always create a date from a timestamp using `new Date(timestamp)` and convert the existing `Date` object to a timestamp using the `date.getTime()` method (see below). + Es ist eine leichtgewichtige numerische Darstellung eines Datums. Wir können immer ein Datum aus einem Zeitstempel erstellen mit `new Date(timestamp)` und das bestehende `Date`-Objekt in einen Zeitstempel umwandeln mit der Methode `date.getTime()` (siehe unten). - Dates before 01.01.1970 have negative timestamps, e.g.: + Daten vor dem 01.01.1970 haben negative Zeitstempel, zum Beispiel: ```js run - // 31 Dec 1969 + // 31. Dez 1969 let Dec31_1969 = new Date(-24 * 3600 * 1000); alert( Dec31_1969 ); ``` `new Date(datestring)` -: If there is a single argument, and it's a string, then it is parsed automatically. The algorithm is the same as `Date.parse` uses, we'll cover it later. +: Wenn es ein einzelnes Argument gibt und es ist ein String, dann wird es automatisch geparst. Der Algorithmus ist derselbe, den `Date.parse` verwendet, was wir später behandeln werden. ```js run let date = new Date("2017-01-26"); alert(date); - // The time is not set, so it's assumed to be midnight GMT and - // is adjusted according to the timezone the code is run in - // So the result could be - // Thu Jan 26 2017 11:00:00 GMT+1100 (Australian Eastern Daylight Time) - // or - // Wed Jan 25 2017 16:00:00 GMT-0800 (Pacific Standard Time) + // Die Zeit ist nicht gesetzt, daher wird angenommen, dass es Mitternacht GMT ist + // und sie wird entsprechend der Zeitzone angepasst, in der der Code ausgeführt wird + // Das Ergebnis könnte also sein + // Do., 26. Jan. 2017 11:00:00 GMT+1100 (Australian Eastern Daylight Time) + // oder + // Mi., 25. Jan. 2017 16:00:00 GMT-0800 (Pacific Standard Time) ``` `new Date(year, month, date, hours, minutes, seconds, ms)` -: Create the date with the given components in the local time zone. Only the first two arguments are obligatory. +: Erstelle das Datum mit den gegebenen Komponenten in der lokalen Zeitzone. Nur die ersten beiden Argumente sind obligatorisch. - - The `year` should have 4 digits. For compatibility, 2 digits are also accepted and considered `19xx`, e.g. `98` is the same as `1998` here, but always using 4 digits is strongly encouraged. - - The `month` count starts with `0` (Jan), up to `11` (Dec). - - The `date` parameter is actually the day of month, if absent then `1` is assumed. - - If `hours/minutes/seconds/ms` is absent, they are assumed to be equal `0`. + - `year` sollte 4 Ziffern haben. Aus Kompatibilitätsgründen werden auch 2 Ziffern akzeptiert und als `19xx` betrachtet, zum Beispiel entspricht `98` dem Wert `1998`, aber die Verwendung von 4 Ziffern wird dringend empfohlen. + - `month` zählt ab `0` (Januar), bis `11` (Dezember). + - Der `date`-Parameter ist tatsächlich der Tag des Monats, wenn weggelassen, dann wird `1` angenommen. + - Wenn `hours/minutes/seconds/ms` weggelassen werden, wird angenommen, dass diese `0` sind. - For instance: + Beispiel: ```js - new Date(2011, 0, 1, 0, 0, 0, 0); // 1 Jan 2011, 00:00:00 - new Date(2011, 0, 1); // the same, hours etc are 0 by default + new Date(2011, 0, 1, 0, 0, 0, 0); // 1. Jan 2011, 00:00:00 + new Date(2011, 0, 1); // das Gleiche, Stunden usw. sind standardmäßig 0 ``` - The maximal precision is 1 ms (1/1000 sec): + Die größtmögliche Genauigkeit ist 1 ms (1/1000 Sekunde): ```js run let date = new Date(2011, 0, 1, 2, 3, 4, 567); alert( date ); // 1.01.2011, 02:03:04.567 ``` -## Access date components +## Zugriff auf Datumskomponenten -There are methods to access the year, month and so on from the `Date` object: +Es gibt Methoden, um auf das Jahr, den Monat usw. des `Date`-Objekts zuzugreifen: [getFullYear()](mdn:js/Date/getFullYear) -: Get the year (4 digits) +: Zugriff auf das Jahr (4 Ziffern) [getMonth()](mdn:js/Date/getMonth) -: Get the month, **from 0 to 11**. +: Zugriff auf den Monat, **von 0 bis 11**. [getDate()](mdn:js/Date/getDate) -: Get the day of month, from 1 to 31, the name of the method does look a little bit strange. +: Zugriff auf den Tag des Monats, von 1 bis 31, der Name der Methode wirkt etwas seltsam. [getHours()](mdn:js/Date/getHours), [getMinutes()](mdn:js/Date/getMinutes), [getSeconds()](mdn:js/Date/getSeconds), [getMilliseconds()](mdn:js/Date/getMilliseconds) -: Get the corresponding time components. +: Zugriff auf die entsprechenden Zeitkomponenten. -```warn header="Not `getYear()`, but `getFullYear()`" -Many JavaScript engines implement a non-standard method `getYear()`. This method is deprecated. It returns 2-digit year sometimes. Please never use it. There is `getFullYear()` for the year. +```warn header="Nicht `getYear()`, sondern `getFullYear()`" +Viele JavaScript-Engines implementieren eine nicht-standardisierte Methode `getYear()`. Diese Methode ist veraltet. Sie gibt manchmal ein 2-stelliges Jahr zurück. Bitte verwende sie niemals. Es gibt `getFullYear()` für das Jahr. ``` -Additionally, we can get a day of week: +Zusätzlich können wir den Wochentag bekommen: [getDay()](mdn:js/Date/getDay) -: Get the day of week, from `0` (Sunday) to `6` (Saturday). The first day is always Sunday, in some countries that's not so, but can't be changed. +: Zugriff auf den Wochentag, von `0` (Sonntag) bis `6` (Samstag). Der erste Tag ist immer Sonntag, in einigen Ländern ist das nicht so, aber das kann nicht geändert werden. -**All the methods above return the components relative to the local time zone.** +**Alle oben genannten Methoden geben die Komponenten relativ zur lokalen Zeitzone zurück.** -There are also their UTC-counterparts, that return day, month, year and so on for the time zone UTC+0: [getUTCFullYear()](mdn:js/Date/getUTCFullYear), [getUTCMonth()](mdn:js/Date/getUTCMonth), [getUTCDay()](mdn:js/Date/getUTCDay). Just insert the `"UTC"` right after `"get"`. +Es gibt auch ihre UTC-Gegenstücke, die Tag, Monat, Jahr usw. für die Zeitzone UTC+0 zurückgeben: [getUTCFullYear()](mdn:js/Date/getUTCFullYear), [getUTCMonth()](mdn:js/Date/getUTCMonth), [getUTCDay()](mdn:js/Date/getUTCDay). Füge einfach nach `"get"` das `"UTC"` ein. -If your local time zone is shifted relative to UTC, then the code below shows different hours: +Wenn deine lokale Zeitzone relativ zu UTC verschoben ist, dann zeigt der untenstehende Code unterschiedliche Stunden an: ```js run -// current date +// aktuelles Datum let date = new Date(); -// the hour in your current time zone +// die Stunde in Ihrer aktuellen Zeitzone alert( date.getHours() ); -// the hour in UTC+0 time zone (London time without daylight savings) +// die Stunde in der Zeitzone UTC+0 (Londoner Zeit ohne Sommerzeit) alert( date.getUTCHours() ); ``` -Besides the given methods, there are two special ones that do not have a UTC-variant: +Neben den gegebenen Methoden gibt es zwei spezielle, die keine UTC-Variante haben: [getTime()](mdn:js/Date/getTime) -: Returns the timestamp for the date -- a number of milliseconds passed from the January 1st of 1970 UTC+0. +: Gibt den Zeitstempel für das Datum zurück -- eine Anzahl von Millisekunden seit dem 1. Januar 1970 UTC+0. [getTimezoneOffset()](mdn:js/Date/getTimezoneOffset) -: Returns the difference between UTC and the local time zone, in minutes: +: Gibt den Unterschied zwischen UTC und der lokalen Zeitzone in Minuten zurück: ```js run - // if you are in timezone UTC-1, outputs 60 - // if you are in timezone UTC+3, outputs -180 + // Wenn du dich in der Zeitzone UTC-1 befindest, gibt es 60 aus + // Wenn du dich in der Zeitzone UTC+3 befindest, gibt es -180 aus alert( new Date().getTimezoneOffset() ); ``` -## Setting date components +## Datumskomponenten einstellen -The following methods allow to set date/time components: +Die folgenden Methoden erlauben es, Datum/Zeit-Komponenten festzulegen: - [`setFullYear(year, [month], [date])`](mdn:js/Date/setFullYear) - [`setMonth(month, [date])`](mdn:js/Date/setMonth) @@ -144,38 +144,38 @@ The following methods allow to set date/time components: - [`setMinutes(min, [sec], [ms])`](mdn:js/Date/setMinutes) - [`setSeconds(sec, [ms])`](mdn:js/Date/setSeconds) - [`setMilliseconds(ms)`](mdn:js/Date/setMilliseconds) -- [`setTime(milliseconds)`](mdn:js/Date/setTime) (sets the whole date by milliseconds since 01.01.1970 UTC) +- [`setTime(milliseconds)`](mdn:js/Date/setTime) (setzt das ganze Datum auf Millisekunden seit dem 01.01.1970 UTC) -Every one of them except `setTime()` has a UTC-variant, for instance: `setUTCHours()`. +Jede dieser Methoden außer `setTime()` hat ein UTC-Gegenstück, wie zum Beispiel: `setUTCHours()`. -As we can see, some methods can set multiple components at once, for example `setHours`. The components that are not mentioned are not modified. +Wie wir sehen können, können einige Methoden gleichzeitig mehrere Komponenten anpassen, zum Beispiel `setHours`. Die Komponenten, die nicht erwähnt werden, werden nicht geändert. -For instance: +Beispiel: ```js run -let today = new Date(); +let heute = new Date(); -today.setHours(0); -alert(today); // still today, but the hour is changed to 0 +heute.setHours(0); +alert(heute); // immer noch heute, aber die Stunde ist auf 0 geändert -today.setHours(0, 0, 0, 0); -alert(today); // still today, now 00:00:00 sharp. +heute.setHours(0, 0, 0, 0); +alert(heute); // immer noch heute, jetzt 00:00:00 genau. ``` -## Autocorrection +## Autokorrektur -The *autocorrection* is a very handy feature of `Date` objects. We can set out-of-range values, and it will auto-adjust itself. +Die *Autokorrektur* ist eine sehr praktische Funktion von `Date`-Objekten. Wir können Werte außerhalb des Bereichs verwenden, und sie wird diese automatisch anpassen. -For instance: +Beispiel: ```js run -let date = new Date(2013, 0, *!*32*/!*); // 32 Jan 2013 ?!? -alert(date); // ...is 1st Feb 2013! +let date = new Date(2013, 0, *!*32*/!*); // 32. Jan 2013 ?!? +alert(date); // ...ist der 1. Feb 2013! ``` -Out-of-range date components are distributed automatically. +Datumskomponenten außerhalb des Bereichs werden automatisch verteilt. -Let's say we need to increase the date "28 Feb 2016" by 2 days. It may be "2 Mar" or "1 Mar" in case of a leap-year. We don't need to think about it. Just add 2 days. The `Date` object will do the rest: +Angenommen, wir müssen das Datum "28. Feb 2016" um 2 Tage erhöhen. Es könnte der "2. März" oder der "1. März" im Falle eines Schaltjahres sein. Wir müssen nicht darüber nachdenken. Einfach 2 Tage hinzufügen. Das `Date`-Objekt erledigt den Rest: ```js run let date = new Date(2016, 1, 28); @@ -183,112 +183,112 @@ let date = new Date(2016, 1, 28); date.setDate(date.getDate() + 2); */!* -alert( date ); // 1 Mar 2016 +alert( date ); // 1. Mär 2016 ``` -That feature is often used to get the date after the given period of time. For instance, let's get the date for "70 seconds after now": +Diese Funktion wird oft verwendet, um das Datum nach einer bestimmten Zeitperiode zu erhalten. Zum Beispiel, lass uns das Datum für "70 Sekunden ab jetzt" erhalten: ```js run let date = new Date(); date.setSeconds(date.getSeconds() + 70); -alert( date ); // shows the correct date +alert( date ); // zeigt das korrekte Datum ``` -We can also set zero or even negative values. For example: +Wir können auch null oder sogar negative Werte verwenden. Zum Beispiel: ```js run -let date = new Date(2016, 0, 2); // 2 Jan 2016 +let date = new Date(2016, 0, 2); // 2. Jan 2016 -date.setDate(1); // set day 1 of month +date.setDate(1); // lege Tag 1 des Monats fest alert( date ); -date.setDate(0); // min day is 1, so the last day of the previous month is assumed -alert( date ); // 31 Dec 2015 +date.setDate(0); // minimaler Tag ist 1, also wird der letzte Tag des Vormonats angenommen +alert( date ); // 31. Dez 2015 ``` -## Date to number, date diff +## Datum in Zahl, Datumsunterschied -When a `Date` object is converted to number, it becomes the timestamp same as `date.getTime()`: +Wenn ein `Date`-Objekt in eine Zahl umgewandelt wird, wird es zum Zeitstempel genauso wie `date.getTime()`: ```js run let date = new Date(); -alert(+date); // the number of milliseconds, same as date.getTime() +alert(+date); // die Anzahl der Millisekunden, genau wie date.getTime() ``` -The important side effect: dates can be subtracted, the result is their difference in ms. +Die wichtige Seiteneffekt: Daten können subtrahiert werden, das Ergebnis ist ihr Unterschied in Millisekunden. -That can be used for time measurements: +Das kann für Zeitmessungen verwendet werden: ```js run -let start = new Date(); // start measuring time +let start = new Date(); // beginnen mit der Zeitmessung -// do the job +// verrichte Arbeit for (let i = 0; i < 100000; i++) { let doSomething = i * i * i; } -let end = new Date(); // end measuring time +let end = new Date(); // beenden der Zeitmessung -alert( `The loop took ${end - start} ms` ); +alert( `Die Schleife dauerte ${end - start} ms` ); ``` ## Date.now() -If we only want to measure time, we don't need the `Date` object. +Wenn wir nur die Zeit messen wollen, benötigen wir kein `Date`-Objekt. -There's a special method `Date.now()` that returns the current timestamp. +Es gibt eine spezielle Methode `Date.now()`, die den aktuellen Zeitstempel zurückgibt. -It is semantically equivalent to `new Date().getTime()`, but it doesn't create an intermediate `Date` object. So it's faster and doesn't put pressure on garbage collection. +Sie ist semantisch gleichbedeutend mit `new Date().getTime()`, aber sie erstellt kein Zwischen-`Date`-Objekt. Daher ist sie schneller und belastet die Garbage-Kollektion nicht. -It is used mostly for convenience or when performance matters, like in games in JavaScript or other specialized applications. +Sie wird meistens aus Bequemlichkeit oder wenn Performance wichtig ist verwendet, wie in JavaScript-Spielen oder anderen spezialisierten Anwendungen. -So this is probably better: +Also ist das vermutlich besser: ```js run *!* -let start = Date.now(); // milliseconds count from 1 Jan 1970 +let start = Date.now(); // Millisekunden seit 1. Jan 1970 */!* -// do the job +// verrichte Arbeit for (let i = 0; i < 100000; i++) { let doSomething = i * i * i; } *!* -let end = Date.now(); // done +let end = Date.now(); // fertig */!* -alert( `The loop took ${end - start} ms` ); // subtract numbers, not dates +alert( `Die Schleife dauerte ${end - start} ms` ); // subtrahiere Zahlen, nicht Daten ``` ## Benchmarking -If we want a reliable benchmark of CPU-hungry function, we should be careful. +Wenn wir einen verlässlichen Benchmark für eine CPU-intensive Funktion haben wollen, sollten wir vorsichtig sein. -For instance, let's measure two functions that calculate the difference between two dates: which one is faster? +Zum Beispiel, lass uns zwei Funktionen messen, die den Unterschied zwischen zwei Daten berechnen: welche ist schneller? -Such performance measurements are often called "benchmarks". +Solche Leistungsmessungen werden oft "Benchmarks" genannt. ```js -// we have date1 and date2, which function faster returns their difference in ms? +// wir haben date1 und date2, welche Funktion gibt schneller deren Unterschied in ms zurück? function diffSubtract(date1, date2) { return date2 - date1; } -// or +// oder function diffGetTime(date1, date2) { return date2.getTime() - date1.getTime(); } ``` -These two do exactly the same thing, but one of them uses an explicit `date.getTime()` to get the date in ms, and the other one relies on a date-to-number transform. Their result is always the same. +Diese beiden machen genau dasselbe, aber eine benutzt ein explizites `date.getTime()`, um das Datum in Millisekunden zu erhalten, und die andere verlässt sich auf eine Datum-zu-Zahl-Umwandlung. Das Ergebnis ist immer das Gleiche. -So, which one is faster? +Also, welche ist schneller? -The first idea may be to run them many times in a row and measure the time difference. For our case, functions are very simple, so we have to do it at least 100000 times. +Die erste Idee könnte sein, sie viele Male hintereinander auszuführen und den Zeitunterschied zu messen. In unserem Fall sind die Funktionen sehr einfach, also müssen wir das mindestens 100000 Mal machen. -Let's measure: +Lass uns messen: ```js run function diffSubtract(date1, date2) { @@ -308,23 +308,23 @@ function bench(f) { return Date.now() - start; } -alert( 'Time of diffSubtract: ' + bench(diffSubtract) + 'ms' ); -alert( 'Time of diffGetTime: ' + bench(diffGetTime) + 'ms' ); +alert( 'Zeit für diffSubtract: ' + bench(diffSubtract) + 'ms' ); +alert( 'Zeit für diffGetTime: ' + bench(diffGetTime) + 'ms' ); ``` -Wow! Using `getTime()` is so much faster! That's because there's no type conversion, it is much easier for engines to optimize. +Wow! Die Verwendung von `getTime()` ist so viel schneller! Das liegt daran, dass keine Typumwandlung stattfindet und es für die Engines viel einfacher ist, zu optimieren. -Okay, we have something. But that's not a good benchmark yet. +Okay, wir haben etwas. Aber das ist noch kein guter Benchmark. -Imagine that at the time of running `bench(diffSubtract)` CPU was doing something in parallel, and it was taking resources. And by the time of running `bench(diffGetTime)` that work has finished. +Stell dir vor, dass zur Zeit der Ausführung von `bench(diffSubtract)` die CPU parallel etwas anderes gemacht hat und Ressourcen verbraucht wurden. Und zum Zeitpunkt der Ausführung von `bench(diffGetTime)` war diese Arbeit beendet. -A pretty real scenario for a modern multi-process OS. +Ein ziemlich reales Szenario für ein modernes Multi-Prozess-Betriebssystem. -As a result, the first benchmark will have less CPU resources than the second. That may lead to wrong results. +Als Ergebnis könnte der erste Benchmark weniger CPU-Ressourcen als der zweite haben. Das könnte zu falschen Ergebnissen führen. -**For more reliable benchmarking, the whole pack of benchmarks should be rerun multiple times.** +**Für zuverlässigeres Benchmarking sollte das gesamte Paket an Benchmarks mehrmals wiederholt werden.** -For example, like this: +Zum Beispiel so: ```js run function diffSubtract(date1, date2) { @@ -348,61 +348,61 @@ let time1 = 0; let time2 = 0; *!* -// run bench(diffSubtract) and bench(diffGetTime) each 10 times alternating +// führe bench(diffSubtract) und bench(diffGetTime) jeweils 10-mal abwechselnd aus for (let i = 0; i < 10; i++) { time1 += bench(diffSubtract); time2 += bench(diffGetTime); } */!* -alert( 'Total time for diffSubtract: ' + time1 ); -alert( 'Total time for diffGetTime: ' + time2 ); +alert( 'Gesamtzeit für diffSubtract: ' + time1 ); +alert( 'Gesamtzeit für diffGetTime: ' + time2 ); ``` -Modern JavaScript engines start applying advanced optimizations only to "hot code" that executes many times (no need to optimize rarely executed things). So, in the example above, first executions are not well-optimized. We may want to add a heat-up run: +Moderne JavaScript-Engines beginnen damit, fortgeschrittene Optimierungen nur auf "heißen Code" anzuwenden, der viele Male ausgeführt wird (keine Notwendigkeit, selten ausgeführte Dinge zu optimieren). Deshalb sind in dem oben genannten Beispiel die ersten Ausführungen nicht gut optimiert. Wir möchten vielleicht einen Aufwärm-Durchlauf hinzufügen: ```js -// added for "heating up" prior to the main loop +// Hinzugefügt zum "Aufwärmen" vor der Hauptschleife bench(diffSubtract); bench(diffGetTime); -// now benchmark +// jetzt Benchmarking for (let i = 0; i < 10; i++) { time1 += bench(diffSubtract); time2 += bench(diffGetTime); } ``` -```warn header="Be careful doing microbenchmarking" -Modern JavaScript engines perform many optimizations. They may tweak results of "artificial tests" compared to "normal usage", especially when we benchmark something very small, such as how an operator works, or a built-in function. So if you seriously want to understand performance, then please study how the JavaScript engine works. And then you probably won't need microbenchmarks at all. +```warn header="Sei vorsichtig bei Mikrobenchmarking" +Moderne JavaScript-Engines führen viele Optimierungen durch. Du kannst die Ergebnisse von "künstlichen Tests" im Vergleich zur "normalen Nutzung" verändern, insbesondere wenn wir etwas sehr Kleines benchmarken, wie die Funktionsweise eines Operators oder einer eingebauten Funktion. Wenn du also die Performance ernsthaft verstehen möchtest, dann studiere bitte, wie die JavaScript-Engine funktioniert. Und dann wirst du wahrscheinlich überhaupt keine Mikrobenchmarks brauchen. -The great pack of articles about V8 can be found at . +Eine großartige Sammlung von Artikeln über V8 findest Du unter . ``` -## Date.parse from a string +## Date.parse aus einem String -The method [Date.parse(str)](mdn:js/Date/parse) can read a date from a string. +Die Methode [Date.parse(str)](mdn:js/Date/parse) kann ein Datum aus einem String auslesen. -The string format should be: `YYYY-MM-DDTHH:mm:ss.sssZ`, where: +Das String-Format sollte sein: `YYYY-MM-DDTHH:mm:ss.sssZ`, wobei: -- `YYYY-MM-DD` -- is the date: year-month-day. -- The character `"T"` is used as the delimiter. -- `HH:mm:ss.sss` -- is the time: hours, minutes, seconds and milliseconds. -- The optional `'Z'` part denotes the time zone in the format `+-hh:mm`. A single letter `Z` would mean UTC+0. +- `YYYY-MM-DD` -- das Datum ist: Jahr-Monat-Tag. +- Das Zeichen `"T"` wird als Trennzeichen verwendet. +- `HH:mm:ss.sss` -- ist die Zeit: Stunden, Minuten, Sekunden und Millisekunden. +- Der optionale Teil `'Z'` kennzeichnet die Zeitzone im Format `+-hh:mm`. Ein einzelner Buchstabe `Z` würde UTC+0 bedeuten. -Shorter variants are also possible, like `YYYY-MM-DD` or `YYYY-MM` or even `YYYY`. +Auch kürzere Varianten sind möglich, wie `YYYY-MM-DD` oder `YYYY-MM` oder sogar `YYYY`. -The call to `Date.parse(str)` parses the string in the given format and returns the timestamp (number of milliseconds from 1 Jan 1970 UTC+0). If the format is invalid, returns `NaN`. +Der Aufruf von `Date.parse(str)` parst den String im gegebenen Format und gibt den Zeitstempel zurück (Anzahl der Millisekunden ab dem 1. Januar 1970 UTC+0). Wenn das Format ungültig ist, gibt er `NaN` zurück. -For instance: +Zum Beispiel: ```js run let ms = Date.parse('2012-01-26T13:51:50.417-07:00'); -alert(ms); // 1327611110417 (timestamp) +alert(ms); // 1327611110417 (Zeitstempel) ``` -We can instantly create a `new Date` object from the timestamp: +Wir können sofort ein `new Date` Objekt aus dem Zeitstempel erstellen: ```js run let date = new Date( Date.parse('2012-01-26T13:51:50.417-07:00') ); @@ -410,24 +410,24 @@ let date = new Date( Date.parse('2012-01-26T13:51:50.417-07:00') ); alert(date); ``` -## Summary +## Zusammenfassung -- Date and time in JavaScript are represented with the [Date](mdn:js/Date) object. We can't create "only date" or "only time": `Date` objects always carry both. -- Months are counted from zero (yes, January is a zero month). -- Days of week in `getDay()` are also counted from zero (that's Sunday). -- `Date` auto-corrects itself when out-of-range components are set. Good for adding/subtracting days/months/hours. -- Dates can be subtracted, giving their difference in milliseconds. That's because a `Date` becomes the timestamp when converted to a number. -- Use `Date.now()` to get the current timestamp fast. +- Datum und Uhrzeit in JavaScript werden mit dem [Date](mdn:js/Date)-Objekt dargestellt. Wir können nicht "nur Datum" oder "nur Zeit" erstellen: `Date`-Objekte tragen immer beides. +- Monate werden von Null gezählt (ja, Januar ist der Null-Monat). +- Wochentage in `getDay()` werden auch ab Null gezählt (das ist Sonntag). +- `Date` korrigiert sich selbst, wenn Komponenten außerhalb des gültigen Bereichs gesetzt werden. Gut für das Hinzufügen/Subtrahieren von Tagen/Monaten/Stunden. +- Daten können subtrahiert werden, was ihre Differenz in Millisekunden ergibt. Das liegt daran, dass ein `Date`, wenn es in eine Zahl umgewandelt wird, zum Zeitstempel wird. +- Verwende `Date.now()`, um schnell den aktuellen Zeitstempel zu erhalten. -Note that unlike many other systems, timestamps in JavaScript are in milliseconds, not in seconds. +Beachte, dass anders als in vielen anderen Systemen, Zeitstempel in JavaScript in Millisekunden und nicht in Sekunden sind. -Sometimes we need more precise time measurements. JavaScript itself does not have a way to measure time in microseconds (1 millionth of a second), but most environments provide it. For instance, browser has [performance.now()](mdn:api/Performance/now) that gives the number of milliseconds from the start of page loading with microsecond precision (3 digits after the point): +Manchmal benötigen wir genauere Zeitmessungen. JavaScript selbst hat keine Möglichkeit, Zeit in Mikrosekunden zu messen (1 Millionstel einer Sekunde), aber die meisten Umgebungen bieten dies an. Zum Beispiel hat der Browser [performance.now()](mdn:api/Performance/now), was die Anzahl der Millisekunden seit dem Start des Seitenladens mit Mikrosekunden-Präzision ergibt (3 Ziffern nach dem Punkt): ```js run -alert(`Loading started ${performance.now()}ms ago`); -// Something like: "Loading started 34731.26000000001ms ago" -// .26 is microseconds (260 microseconds) -// more than 3 digits after the decimal point are precision errors, only the first 3 are correct +alert(`Das Laden hat vor ${performance.now()}ms begonnen`); +// Etwas wie: "Das Laden hat vor 34731.26000000001ms begonnen" +// .26 sind Mikrosekunden (260 Mikrosekunden) +// mehr als 3 Ziffern nach dem Dezimalpunkt sind Präzisionsfehler, nur die ersten 3 sind korrekt ``` -Node.js has `microtime` module and other ways. Technically, almost any device and environment allows to get more precision, it's just not in `Date`. +Node.js hat das `microtime` Modul und andere Weisen. Technisch gesehen, ermöglicht fast jedes Gerät und jede Umgebung eine genauere Präzision, sie ist nur nicht in `Date`. From 74a74c51f0a20eb0532f8fea99f4275ca26fe23e Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Sat, 10 Aug 2024 12:20:00 +0000 Subject: [PATCH 42/67] readme --- README.md | 46 ++++++---------------------------------------- 1 file changed, 6 insertions(+), 40 deletions(-) diff --git a/README.md b/README.md index c620da999..7bd59276f 100755 --- a/README.md +++ b/README.md @@ -1,14 +1,6 @@ # The Modern JavaScript Tutorial in German -<<<<<<< HEAD -<<<<<<< HEAD This repository hosts the translation of in German. -======= -This repository hosts the English content of the Modern JavaScript Tutorial, published in [https://javascript.info](https://javascript.info). ->>>>>>> a82915575863d33db6b892087975f84dea6cb425 -======= -This repository hosts the English content of the Modern JavaScript Tutorial, published at [https://javascript.info](https://javascript.info). ->>>>>>> d694e895efe89922a109702085b6ca1efeffea10 **That's how you can contribute:** @@ -29,33 +21,15 @@ If maintainers do not respond, or if you'd like to become a maintainer, write us 🎉 Thank you! -<<<<<<< HEAD Your name and the contribution size will appear in the "About project" page when the translation gets published. -<<<<<<< HEAD P.S. The full list of languages can be found at . -======= -**You can edit the text in any editor.** The tutorial uses enhanced "markdown" format, easy to grasp. And if you want to see how it looks on-site, there's a server to run the tutorial locally at . -======= -Something's wrong? A topic is missing? Explain it to people, add it as PR 👏 - -**You can edit the text in any editor.** The tutorial uses an enhanced "markdown" format, easy to grasp. And if you want to see how it looks on-site, there's a server to run the tutorial locally at . ->>>>>>> d694e895efe89922a109702085b6ca1efeffea10 - -The list of contributors is available at . ->>>>>>> a82915575863d33db6b892087975f84dea6cb425 ## Structure -<<<<<<< HEAD Every chapter, an article or a task resides in its own folder. The folder is named `N-url`, where `N` – is the number for sorting (articles are ordered), and `url` is the URL-slug on the site. -======= -Every chapter, article, or task has its folder. - -The folder is named like `N-url`, where `N` is a number for the sorting purposes and `URL` is the URL part with the title of the material. ->>>>>>> d694e895efe89922a109702085b6ca1efeffea10 The folder has one of files: @@ -86,11 +60,15 @@ In English many terms have an obvious meaning. For a person who doesn't understa Please keep that in mind, sometimes explanations or additional translations are needed, e.g. ```md -`ReadableStream` objects allows to read data chunk-by-chunk. +`ReadableStream` allows to read data chunk-by-chunk. ``` +The class name `ReadableStream` has an obvious meaning for those who understand English. + +Some people who read translations may not know English so well. So we can add a translation of `ReadableStream` in parentheses, like this (Spanish below): + ```md -`ReadableStream` ("flujo legible") objeto ... +`ReadableStream` ("flujo legible") permite leer datos fragmento por fragmento. ``` ### Text in Code Blocks @@ -128,13 +106,7 @@ document.querySelector('.hola').innerHTML = text; Please note, that sometimes code is followed by pictures, and if you translate text `Hello` -> `Hola` in the code, you need to translate text in picturess as well. -<<<<<<< HEAD In that case it's probably easier not to translate such text. See more about translating images later. -======= - - `index.md` stands for a chapter - - `article.md` stands for an article - - `task.md` stands for a task (solution must be provided in `solution.md` file as well) ->>>>>>> a82915575863d33db6b892087975f84dea6cb425 ### External Links @@ -164,7 +136,6 @@ Some files, usually tasks, have YAML metadata at the top, delimited by `---`: ```md importance: 5 -<<<<<<< HEAD --- ... ``` @@ -201,8 +172,3 @@ image.svg: # image file You can run the tutorial server locally to see how the translation looks. The server and install instructions are at . -======= ---- -♥ -Ilya Kantor @iliakan ->>>>>>> a82915575863d33db6b892087975f84dea6cb425 From 04d23efae01445ee73dafdec2a715d6bd7084905 Mon Sep 17 00:00:00 2001 From: Constantin <131041909+engag1ng@users.noreply.github.com> Date: Wed, 14 Aug 2024 02:38:49 +0000 Subject: [PATCH 43/67] Update 1-js/02-first-steps/14-switch/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Christian Hegedüs --- 1-js/02-first-steps/14-switch/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/14-switch/article.md b/1-js/02-first-steps/14-switch/article.md index 13a9c63f5..9888e092d 100644 --- a/1-js/02-first-steps/14-switch/article.md +++ b/1-js/02-first-steps/14-switch/article.md @@ -141,7 +141,7 @@ switch (a) { Nun zeigen `3` und `5` die selbe Nachricht. -Die Fähigkeit cases zu "grupieren" ist ein Seiteneffekt davon, wie `switch/case` ohne `break` funktioniert. Hier beginnt die Ausführung von `case 3` in der Zeile `(*)` und durchläuft `case 5`, weil dosich dort kein `break` befindet. +Die Fähigkeit, Fälle "gruppieren" zu können, ist ein Nebeneffekt davon, wie `switch/case` ohne `break` funktioniert. Hier beginnt die Ausführung von `case 3` in der Zeile `(*)` und durchläuft `case 5`, weil es kein `break` gibt. ## Der Typ spielt eine Rolle From 4ca9b9ed9567e73ad9931d82bb7bd469413edc92 Mon Sep 17 00:00:00 2001 From: Constantin <131041909+engag1ng@users.noreply.github.com> Date: Wed, 14 Aug 2024 02:41:23 +0000 Subject: [PATCH 44/67] Update article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The original text is blocks. The more intuitive translation would be Blöcke. --- 1-js/02-first-steps/14-switch/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/14-switch/article.md b/1-js/02-first-steps/14-switch/article.md index 9888e092d..1b1568103 100644 --- a/1-js/02-first-steps/14-switch/article.md +++ b/1-js/02-first-steps/14-switch/article.md @@ -6,7 +6,7 @@ Sie bietet eine anschauliche Möglichkeit, einen Wert mit mehreren Varianten zu ## Die Syntax -Die `switch` Anweisung hat eine oder mehrere `case` Marken und eine optionale default Marke. +Die `switch` Anweisung hat eine oder mehrere `case` Blöcke und einen optionale default Block. Das sieht wie folgt aus: From 6e2e229eea68880870df37aa540f0ad4c5518643 Mon Sep 17 00:00:00 2001 From: Constantin <131041909+engag1ng@users.noreply.github.com> Date: Wed, 14 Aug 2024 02:42:26 +0000 Subject: [PATCH 45/67] fixed minor typo --- 1-js/02-first-steps/14-switch/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/14-switch/article.md b/1-js/02-first-steps/14-switch/article.md index 1b1568103..15d94c6d8 100644 --- a/1-js/02-first-steps/14-switch/article.md +++ b/1-js/02-first-steps/14-switch/article.md @@ -6,7 +6,7 @@ Sie bietet eine anschauliche Möglichkeit, einen Wert mit mehreren Varianten zu ## Die Syntax -Die `switch` Anweisung hat eine oder mehrere `case` Blöcke und einen optionale default Block. +Die `switch` Anweisung hat eine oder mehrere `case` Blöcke und einen optionalen default Block. Das sieht wie folgt aus: From e93791323ed6673c0847847538fe35cbe0ce182a Mon Sep 17 00:00:00 2001 From: Constantin <131041909+engag1ng@users.noreply.github.com> Date: Wed, 14 Aug 2024 02:43:56 +0000 Subject: [PATCH 46/67] fixed minor typo --- 1-js/02-first-steps/14-switch/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/14-switch/article.md b/1-js/02-first-steps/14-switch/article.md index 15d94c6d8..28304b11e 100644 --- a/1-js/02-first-steps/14-switch/article.md +++ b/1-js/02-first-steps/14-switch/article.md @@ -52,7 +52,7 @@ switch (a) { break; default: - alert( "Ich kenne keine solchen Werte" ); + alert( "Ich kenne keinen solchen Werte" ); } ``` From f4567668c58edeefdbbccdbe6843237f8ee4f950 Mon Sep 17 00:00:00 2001 From: Constantin <131041909+engag1ng@users.noreply.github.com> Date: Wed, 14 Aug 2024 02:45:35 +0000 Subject: [PATCH 47/67] fixed minor typo --- 1-js/02-first-steps/14-switch/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/14-switch/article.md b/1-js/02-first-steps/14-switch/article.md index 28304b11e..18f0591a1 100644 --- a/1-js/02-first-steps/14-switch/article.md +++ b/1-js/02-first-steps/14-switch/article.md @@ -76,7 +76,7 @@ switch (a) { case 5: alert( 'Zu gross' ); default: - alert( "Ich kenne keine solchen Werte" ); + alert( "Ich kenne keinen solchen Werte" ); */!* } ``` From 3cb9cc37e82d57dd30a05c9bd4bb0765312e9f8e Mon Sep 17 00:00:00 2001 From: Constantin <131041909+engag1ng@users.noreply.github.com> Date: Wed, 14 Aug 2024 02:47:05 +0000 Subject: [PATCH 48/67] fixed minor typo --- 1-js/02-first-steps/14-switch/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/14-switch/article.md b/1-js/02-first-steps/14-switch/article.md index 18f0591a1..da6647c46 100644 --- a/1-js/02-first-steps/14-switch/article.md +++ b/1-js/02-first-steps/14-switch/article.md @@ -86,7 +86,7 @@ Im obigen Beispiel sehen wir die sequentielle Ausführung von drei `alert`s: ```js alert( 'Exakt!' ); alert( 'Zu gross' ); -alert( "Ich kenne keine solchen Werte" ); +alert( "Ich kenne keinen solchen Werte" ); ``` ````smart header="Jeder Ausdruck kann ein `switch/case` Argument sein" From bcff00c84f45bde1495a5bf359cf628fd4f44b91 Mon Sep 17 00:00:00 2001 From: Constantin <131041909+engag1ng@users.noreply.github.com> Date: Wed, 14 Aug 2024 04:06:59 +0000 Subject: [PATCH 49/67] Apply suggestions from code review MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Christian Hegedüs Co-authored-by: u-n-known <60901726+u-n-known@users.noreply.github.com> --- 1-js/01-getting-started/1-intro/article.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index 5e6d62537..ddfa62f38 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -26,7 +26,7 @@ Verschiedene Engines haben unterschiedliche "Codenamen". Zum Beispiel: - [V8](https://de.wikipedia.org/wiki/V8_(JavaScript-Implementierung)) -- in Chrome und Opera. - [SpiderMonkey](https://de.wikipedia.org/wiki/SpiderMonkey) -- in Firefox. -- Es gibt noch weitere *codenames*, sprich Engines, wie "Trident" und "Chakra" für verschiedene Versionen von IE, oder "ChakraCore" für Microsoft Edge, "Nitro" und "SquirrelFish" für Safari usw. +- ...Es gibt noch weitere Codenamen wie "Trident" und "Chakra" für verschiedene IE-Versionen, "ChakraCore" für Microsoft Edge, "Nitro" und "SquirrelFish" für Safari, usw. Die oben genannten Begriffe sollte man sich merken, weil sie in Entwicklerarikeln im Internet verwendet werden. Wir werden sie auch verwenden. Wenn, zum Beispiel, "ein Feature X von V8 unterstützt wird", dann funktioniert es wahrscheinlich in Chrome und Opera. @@ -45,7 +45,7 @@ Die Engine wendet in jedem Schritt des Prozesses Optimierungen an. Es beobachtet Modernes JavaScript ist eine "sichere" Programmiersprache. Es bietet keinen Low-Level-Zugriff auf Speicher oder CPU, da es ursprünglich für Browser entwickelt wurde, die dies nicht benötigen. -Die Funktionen von JavaScript hängen stark von der Umgebung ab in der es ausgeführt wird. Beispielsweise unterstützt [Node.js](https://wikipedia.org/wiki/Node.js) Funktionen die es JavaScript z. B. ermöglichen beliebige Dateien zu lesen oder zu schreiben, sowie Netzwerkanfragen durchzuführen. +Die Möglichkeiten von JavaScript hängen stark von der Umgebung ab, in der es ausgeführt wird. Beispielsweise unterstützt [Node.js](https://de.wikipedia.org/wiki/Node.js) Funktionen, die es JavaScript erlauben, beliebige Dateien zu lesen/schreiben, Netzwerkanfragen durchzuführen usw. Im Browser ausgeführtes JavaScript kann alles was mit der Manipulation von Webseiten, der Interaktion mit dem Benutzer und dem Webserver zu tun hat. @@ -59,7 +59,7 @@ So ist beispielsweise im Browser laufendes JavaScript in der Lage: ## Was kann JavaScript im Browser nicht tun? -Die Fähigkeiten von JavaScript im Browser sind aus Gründen der Sicherheit des Benutzers eingeschränkt. Ziel ist es zu verhindern, dass eine bösartige Webseite auf private Informationen zugreifen oder die Daten des Benutzers schädigen kann. +Die Möglichkeiten von JavaScript im Browser sind aus Sicherheitsgründen für den Benutzer eingeschränkt. Damit soll verhindert werden, dass eine bösartige Webseite Zugang zu privaten Informationen erhält oder die Daten des Benutzers schädigt. Beispiele für solche Beschränkungen sind: @@ -103,7 +103,7 @@ Das ist zu erwarten, denn Projekte und Anforderungen sind für jeden anders. So sind in letzter Zeit eine Fülle neuer Sprachen erschienen, die in JavaScript *transponiert* (konvertiert) werden, bevor sie im Browser laufen. -Moderne Werkzeuge erledigen die Konvertierung sehr schnell und transparent was es Entwicklern erlaubt in einer anderen Sprache zu programmieren und diese automatisch zu konvertieren – ohne unbedingt ein genaueres Verständnis davon zu haben wie JavaScript im Kern funktioniert. +Moderne Werkzeuge ermöglichen eine sehr schnelle und transparente Konvertierung, die es den Entwicklern tatsächlich erlauben in einer anderen Sprache zu programmieren, die diese dann, für die Entwickler nicht ersichtlich, automatisch konvertieren. Beispiele für solche Sprachen sind: From 6f08958b99c6e63417d5c480fc5f0384c502b79d Mon Sep 17 00:00:00 2001 From: tonybishnoi <53338071+tonybishnoi@users.noreply.github.com> Date: Thu, 10 Oct 2024 01:55:56 +0530 Subject: [PATCH 50/67] minor fix to function name written in explanation The code uses the function named 'askPassword' but the text above it explaining the error reason says 'ask' instead of 'askPassword' --- .../10-bind/5-question-use-bind/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/10-bind/5-question-use-bind/solution.md b/1-js/06-advanced-functions/10-bind/5-question-use-bind/solution.md index 403107ca6..4a381c0b4 100644 --- a/1-js/06-advanced-functions/10-bind/5-question-use-bind/solution.md +++ b/1-js/06-advanced-functions/10-bind/5-question-use-bind/solution.md @@ -1,5 +1,5 @@ -The error occurs because `ask` gets functions `loginOk/loginFail` without the object. +The error occurs because `askPassword` gets functions `loginOk/loginFail` without the object. When it calls them, they naturally assume `this=undefined`. From eedc262cea1ba991c067e4bc794592121b5aa9e2 Mon Sep 17 00:00:00 2001 From: Nick Roma <54879724+nikoandpiko@users.noreply.github.com> Date: Wed, 23 Oct 2024 00:45:18 +0900 Subject: [PATCH 51/67] Grammatical fix --- 1-js/03-code-quality/06-polyfills/article.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/1-js/03-code-quality/06-polyfills/article.md b/1-js/03-code-quality/06-polyfills/article.md index 19404b7b5..b6ea60820 100644 --- a/1-js/03-code-quality/06-polyfills/article.md +++ b/1-js/03-code-quality/06-polyfills/article.md @@ -71,9 +71,7 @@ if (!Math.trunc) { // if no such function JavaScript is a highly dynamic language. Scripts may add/modify any function, even built-in ones. -Two interesting polyfill libraries are: -- [core js](https://github.com/zloirock/core-js) that supports a lot, allows to include only needed features. - +One interesting polyfill library is [core-js](https://github.com/zloirock/core-js), which supports a wide range of features and allows you to include only the specific ones you need. ## Summary From 67833c9ccf241d5d7bbe4f678da1f6541cf163c1 Mon Sep 17 00:00:00 2001 From: zakingslayerv22 <11926638+zakingslayerv22@users.noreply.github.com> Date: Wed, 11 Dec 2024 02:05:05 -0800 Subject: [PATCH 52/67] Update article.md Suggested edit - to make the phrase clearer. --- 1-js/11-async/02-promise-basics/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/11-async/02-promise-basics/article.md b/1-js/11-async/02-promise-basics/article.md index b15643f0a..66d9538fc 100644 --- a/1-js/11-async/02-promise-basics/article.md +++ b/1-js/11-async/02-promise-basics/article.md @@ -222,7 +222,7 @@ The idea of `finally` is to set up a handler for performing cleanup/finalizing a E.g. stopping loading indicators, closing no longer needed connections, etc. -Think of it as a party finisher. No matter was a party good or bad, how many friends were in it, we still need (or at least should) do a cleanup after it. +Think of it as a party finisher. Irresepective of whether a party was good or bad, how many friends were in it, we still need (or at least should) do a cleanup after it. The code may look like this: From b36823a929a10675eebc2f62d2a680a1cbcc8d63 Mon Sep 17 00:00:00 2001 From: pj-szdm <50366990+pj-szdm@users.noreply.github.com> Date: Wed, 18 Dec 2024 10:34:02 +0100 Subject: [PATCH 53/67] better wording --- 1-js/05-data-types/02-number/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/02-number/article.md b/1-js/05-data-types/02-number/article.md index 96a7b622a..8e41f673d 100644 --- a/1-js/05-data-types/02-number/article.md +++ b/1-js/05-data-types/02-number/article.md @@ -118,7 +118,7 @@ Common use cases for this are: ```warn header="Two dots to call a method" Please note that two dots in `123456..toString(36)` is not a typo. If we want to call a method directly on a number, like `toString` in the example above, then we need to place two dots `..` after it. -If we placed a single dot: `123456.toString(36)`, then there would be an error, because JavaScript syntax implies the decimal part after the first dot. And if we place one more dot, then JavaScript knows that the decimal part is empty and now goes the method. +If we placed a single dot: `123456.toString(36)`, then there would be an error, because JavaScript syntax implies the decimal part after the first dot. And if we place one more dot, then JavaScript knows that the decimal part is empty and now uses the method. Also could write `(123456).toString(36)`. From dc1437872bc789e3ad3ba6a36bf3a845a0f43041 Mon Sep 17 00:00:00 2001 From: mhi1627 <168352351+mhi1627@users.noreply.github.com> Date: Wed, 22 Jan 2025 16:37:56 +0530 Subject: [PATCH 54/67] Update article.md the comment number is missing when the we mention line 2 --- 1-js/02-first-steps/16-function-expressions/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/16-function-expressions/article.md b/1-js/02-first-steps/16-function-expressions/article.md index b952d5943..c6dd891bd 100644 --- a/1-js/02-first-steps/16-function-expressions/article.md +++ b/1-js/02-first-steps/16-function-expressions/article.md @@ -82,7 +82,7 @@ let sayHi = function() { // (1) create alert( "Hello" ); }; -let func = sayHi; +let func = sayHi; //(2) // ... ``` From 8b2a2f2c1c6d888f811cb0a2aa7b47eb2797b2d6 Mon Sep 17 00:00:00 2001 From: Aditya Girdhar <92713380+AdityaGirdhar@users.noreply.github.com> Date: Thu, 30 Jan 2025 20:39:38 +0530 Subject: [PATCH 55/67] Improve readability --- 1-js/03-code-quality/06-polyfills/article.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/1-js/03-code-quality/06-polyfills/article.md b/1-js/03-code-quality/06-polyfills/article.md index 19404b7b5..aa849d407 100644 --- a/1-js/03-code-quality/06-polyfills/article.md +++ b/1-js/03-code-quality/06-polyfills/article.md @@ -71,8 +71,7 @@ if (!Math.trunc) { // if no such function JavaScript is a highly dynamic language. Scripts may add/modify any function, even built-in ones. -Two interesting polyfill libraries are: -- [core js](https://github.com/zloirock/core-js) that supports a lot, allows to include only needed features. +An interesting polyfill library is [core js](https://github.com/zloirock/core-js) that supports a lot and allows to include only needed features. ## Summary From 011dd4f4b46eb1a1bb4475465a261595bfacf20a Mon Sep 17 00:00:00 2001 From: Gleb Date: Mon, 10 Feb 2025 20:59:08 +0200 Subject: [PATCH 56/67] Update article.md Correction of grammatical error --- 1-js/08-prototypes/04-prototype-methods/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/08-prototypes/04-prototype-methods/article.md b/1-js/08-prototypes/04-prototype-methods/article.md index 34b977e9f..9c5f1eb3d 100644 --- a/1-js/08-prototypes/04-prototype-methods/article.md +++ b/1-js/08-prototypes/04-prototype-methods/article.md @@ -116,7 +116,7 @@ alert(obj[key]); // [object Object], not "some value"! Here, if the user types in `__proto__`, the assignment in line 4 is ignored! -That could surely be surprising for a non-developer, but pretty understandable for us. The `__proto__` property is special: it must be either an object or `null`. A string can not become a prototype. That's why an assignment a string to `__proto__` is ignored. +That could surely be surprising for a non-developer, but pretty understandable for us. The `__proto__` property is special: it must be either an object or `null`. A string can not become a prototype. That's why assigning a string to `__proto__` is ignored. But we didn't *intend* to implement such behavior, right? We want to store key/value pairs, and the key named `"__proto__"` was not properly saved. So that's a bug! From 4b3474bc41202750875bab325371c6e4c01003c7 Mon Sep 17 00:00:00 2001 From: Vincent Clipet Date: Mon, 10 Mar 2025 16:49:42 +0100 Subject: [PATCH 57/67] Fixed missing closing parenthesis in 2-ui/4-forms-control/1-form-elements/article.md --- 2-ui/4-forms-controls/1-form-elements/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/4-forms-controls/1-form-elements/article.md b/2-ui/4-forms-controls/1-form-elements/article.md index f22518d9d..7bc87a0f0 100644 --- a/2-ui/4-forms-controls/1-form-elements/article.md +++ b/2-ui/4-forms-controls/1-form-elements/article.md @@ -244,7 +244,7 @@ This syntax is optional. We can use `document.createElement('option')` and set a - `defaultSelected` -- if `true`, then `selected` HTML-attribute is created, - `selected` -- if `true`, then the option is selected. -The difference between `defaultSelected` and `selected` is that `defaultSelected` sets the HTML-attribute (that we can get using `option.getAttribute('selected')`, while `selected` sets whether the option is selected or not. +The difference between `defaultSelected` and `selected` is that `defaultSelected` sets the HTML-attribute (that we can get using `option.getAttribute('selected')`), while `selected` sets whether the option is selected or not. In practice, one should usually set _both_ values to `true` or `false`. (Or, simply omit them; both default to `false`.) From 3de63df651b3b796da5b2f2d3c21f9bd20cfaf28 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Mon, 24 Mar 2025 23:30:16 +0100 Subject: [PATCH 58/67] promise.all task --- .../04-promise-all-failure/solution.md | 85 +++++++++++++++++++ .../04-promise-all-failure/task.md | 76 +++++++++++++++++ 2 files changed, 161 insertions(+) create mode 100644 1-js/11-async/08-async-await/04-promise-all-failure/solution.md create mode 100644 1-js/11-async/08-async-await/04-promise-all-failure/task.md diff --git a/1-js/11-async/08-async-await/04-promise-all-failure/solution.md b/1-js/11-async/08-async-await/04-promise-all-failure/solution.md new file mode 100644 index 000000000..ed6a6c922 --- /dev/null +++ b/1-js/11-async/08-async-await/04-promise-all-failure/solution.md @@ -0,0 +1,85 @@ + +The problem is that `Promise.all` immediately rejects when one of its promises rejects. In our case, the second query fails, so `Promise.all` rejects, and the `try...catch` block catches this error. + +Meanwhile, even if one of the queries fails, other promises are *not affected* - they independently continue their execution. In our case, the third query throws an error of its own after a bit of time. And that error is never caught. We can see it in the console. + +The problem is especially dangerous in server-side environments, such as Node.js, when an uncaught error may cause the process to crash. + +How to fix it? + +A natural solution would be to cancel all unfinished queries when one of them fails. This way we avoid any potential errors. + +However, the bad news is that service calls (such as `database.query`) are often implemented by a 3rd-party library which doesn't support cancellation. So there's usually no way to cancel a call. + +Instead we can write our own wrapper function around `Promise.all` which adds a custom `then/catch` handler to each promise to track them: results are gathered and, if an error occurs, all subsequent promises are ignored. + +```js +function customPromiseAll(promises) { + return new Promise((resolve, reject) => { + const results = []; + let resultsCount = 0; + let hasError = false; // we'll set it to true upon first error + + promises.forEach((promise, index) => { + promise + .then(result => { + if (hasError) return; // ignore the promise if already errored + results[index] = result; + resultsCount++; + if (resultsCount === promises.length) { + resolve(results); // when all results are ready - successs + } + }) + .catch(error => { + if (hasError) return; // ignore the promise if already errored + hasError = true; // wops, error! + reject(error); // fail with rejection + }); + }); + }); +} +``` + +This approach has an issue of its own - it's often undesirable to `disconnect()` when queries are still in the process. + +It may be important that all queries complete, especially if some of them make important updates. + +So we should wait until all promises are settled before going further with the execution and eventually disconnecting. + +Here's one more implementation. It also resolves with the first error, but waits until all promises are settled. + +```js +function customPromiseAllWait(promises) { + return new Promise((resolve, reject) => { + const results = new Array(promises.length); + let settledCount = 0; + let firstError = null; + + promises.forEach((promise, index) => { + Promise.resolve(promise) + .then(result => { + results[index] = result; + }) + .catch(error => { + if (firstError === null) { + firstError = error; + } + }) + .finally(() => { + settledCount++; + if (settledCount === promises.length) { + if (firstError !== null) { + reject(firstError); + } else { + resolve(results); + } + } + }); + }); + }); +} +``` + +Now `await customPromiseAllWait(...)` will stall the execution until all queries are processed. + +This is the most reliable approach. diff --git a/1-js/11-async/08-async-await/04-promise-all-failure/task.md b/1-js/11-async/08-async-await/04-promise-all-failure/task.md new file mode 100644 index 000000000..2b8dc4aa5 --- /dev/null +++ b/1-js/11-async/08-async-await/04-promise-all-failure/task.md @@ -0,0 +1,76 @@ + +# Dangerous Promise.all + +`Promise.all` is a great way to parallelize multiple operations. It's especially useful when we need to make parallel requests to multiple services. + +However, there's a hidden danger. Hopefully we'll be able to identify its cause. + +Let's say we have a connection to a remote service, such as a database. + +There're two functions: `connect()` and `disconnect()`. + +When connected, we can send requests using `database.query(...)` - an async function which usually returns the result but also may throw an error. + +Here's a simple implementation: + +```js +let database; + +function connect() { + database = { + async query(isOk) { + if (!isOk) throw new Error('Query failed'); + } + }; +} + +function disconnect() { + database = null; +} + +// intended usage: +// connect() +// ... +// database.query(true) to emulate a successful call +// database.query(false) to emulate a failed call +// ... +// disconnect() +``` + +Now here's the problem. + +We write a simple code to connect and send 3 queries in parallel (all of them take different time, e.g. 100, 200 and 300ms), then disconnect: + +```js +// Helper function to call async function fn after ms milliseconds +function delay(fn, ms) { + return new Promise((resolve, reject) => { + setTimeout(() => fn().then(resolve, reject), ms); + }); +} + +async function run() { + connect(); + + try { + await Promise.all([ + // these 3 parallel jobs take different time: 100, 200 and 300 ms + delay(() => database.query(true), 100), + delay(() => database.query(false), 200), + delay(() => database.query(false), 300) + ]); + } catch(error) { + console.log('Error handled (or was it?)'); + } + + disconnect(); +} + +run(); +``` + +Two of these queries are (by chance) unsuccessful, but we're smart enough to wrap the `Promise.all` call into a `try...catch` block. + +However, this script actually leads to an uncaught error in console! + +Why? How to avoid it? \ No newline at end of file From ef31066fc570fc4528c55275c951342ba1fda7d8 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Mon, 24 Mar 2025 23:50:06 +0100 Subject: [PATCH 59/67] minor fixes --- .../08-async-await/04-promise-all-failure/task.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/1-js/11-async/08-async-await/04-promise-all-failure/task.md b/1-js/11-async/08-async-await/04-promise-all-failure/task.md index 2b8dc4aa5..5e64f96fa 100644 --- a/1-js/11-async/08-async-await/04-promise-all-failure/task.md +++ b/1-js/11-async/08-async-await/04-promise-all-failure/task.md @@ -3,7 +3,7 @@ `Promise.all` is a great way to parallelize multiple operations. It's especially useful when we need to make parallel requests to multiple services. -However, there's a hidden danger. Hopefully we'll be able to identify its cause. +However, there's a hidden danger. We'll see an example in this task and explore how to avoid it. Let's say we have a connection to a remote service, such as a database. @@ -39,7 +39,7 @@ function disconnect() { Now here's the problem. -We write a simple code to connect and send 3 queries in parallel (all of them take different time, e.g. 100, 200 and 300ms), then disconnect: +We wrote the code to connect and send 3 queries in parallel (all of them take different time, e.g. 100, 200 and 300ms), then disconnect: ```js // Helper function to call async function fn after ms milliseconds @@ -69,8 +69,8 @@ async function run() { run(); ``` -Two of these queries are (by chance) unsuccessful, but we're smart enough to wrap the `Promise.all` call into a `try...catch` block. +Two of these queries are (by chance) unsuccessful, but we handle it by wrapping the `Promise.all` call into a `try..catch` block. -However, this script actually leads to an uncaught error in console! +However, this doesn't help! This script actually leads to an uncaught error in console! Why? How to avoid it? \ No newline at end of file From de4247b8ba964f497875aab256f8d9d797b5d91d Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Mon, 24 Mar 2025 23:51:08 +0100 Subject: [PATCH 60/67] minor fixes --- 1-js/11-async/08-async-await/04-promise-all-failure/task.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/1-js/11-async/08-async-await/04-promise-all-failure/task.md b/1-js/11-async/08-async-await/04-promise-all-failure/task.md index 5e64f96fa..a90160d78 100644 --- a/1-js/11-async/08-async-await/04-promise-all-failure/task.md +++ b/1-js/11-async/08-async-await/04-promise-all-failure/task.md @@ -55,9 +55,12 @@ async function run() { try { await Promise.all([ // these 3 parallel jobs take different time: 100, 200 and 300 ms + // we use delay helper for this effect +*!* delay(() => database.query(true), 100), delay(() => database.query(false), 200), delay(() => database.query(false), 300) +*/!* ]); } catch(error) { console.log('Error handled (or was it?)'); From 0af25bca8a7b2ff5e4f97ef76afc6d7ae4c5567b Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Mon, 24 Mar 2025 23:52:07 +0100 Subject: [PATCH 61/67] minor fixes --- 1-js/11-async/08-async-await/04-promise-all-failure/task.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/11-async/08-async-await/04-promise-all-failure/task.md b/1-js/11-async/08-async-await/04-promise-all-failure/task.md index a90160d78..d6fc30e50 100644 --- a/1-js/11-async/08-async-await/04-promise-all-failure/task.md +++ b/1-js/11-async/08-async-await/04-promise-all-failure/task.md @@ -55,7 +55,7 @@ async function run() { try { await Promise.all([ // these 3 parallel jobs take different time: 100, 200 and 300 ms - // we use delay helper for this effect + // we use delay helper to achieve this effect *!* delay(() => database.query(true), 100), delay(() => database.query(false), 200), @@ -72,7 +72,7 @@ async function run() { run(); ``` -Two of these queries are (by chance) unsuccessful, but we handle it by wrapping the `Promise.all` call into a `try..catch` block. +Two of these queries happen to be unsuccessful, but we're smart enough to wrap the `Promise.all` call into a `try..catch` block. However, this doesn't help! This script actually leads to an uncaught error in console! From d932e522d6e483d1bd639bca6796f215dd34d9dd Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Mon, 24 Mar 2025 23:52:42 +0100 Subject: [PATCH 62/67] minor fixes --- 1-js/11-async/08-async-await/04-promise-all-failure/task.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/11-async/08-async-await/04-promise-all-failure/task.md b/1-js/11-async/08-async-await/04-promise-all-failure/task.md index d6fc30e50..74571c43e 100644 --- a/1-js/11-async/08-async-await/04-promise-all-failure/task.md +++ b/1-js/11-async/08-async-await/04-promise-all-failure/task.md @@ -42,7 +42,7 @@ Now here's the problem. We wrote the code to connect and send 3 queries in parallel (all of them take different time, e.g. 100, 200 and 300ms), then disconnect: ```js -// Helper function to call async function fn after ms milliseconds +// Helper function to call async function `fn` after `ms` milliseconds function delay(fn, ms) { return new Promise((resolve, reject) => { setTimeout(() => fn().then(resolve, reject), ms); @@ -55,7 +55,7 @@ async function run() { try { await Promise.all([ // these 3 parallel jobs take different time: 100, 200 and 300 ms - // we use delay helper to achieve this effect + // we use the `delay` helper to achieve this effect *!* delay(() => database.query(true), 100), delay(() => database.query(false), 200), From f0d8abbc136dcad9f9424d6b69e75dc87a393586 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Mon, 24 Mar 2025 23:54:09 +0100 Subject: [PATCH 63/67] minor fixes --- .../08-async-await/04-promise-all-failure/solution.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/11-async/08-async-await/04-promise-all-failure/solution.md b/1-js/11-async/08-async-await/04-promise-all-failure/solution.md index ed6a6c922..21e469c18 100644 --- a/1-js/11-async/08-async-await/04-promise-all-failure/solution.md +++ b/1-js/11-async/08-async-await/04-promise-all-failure/solution.md @@ -1,7 +1,7 @@ -The problem is that `Promise.all` immediately rejects when one of its promises rejects. In our case, the second query fails, so `Promise.all` rejects, and the `try...catch` block catches this error. +The root of the problem is that `Promise.all` immediately rejects when one of its promises rejects, but it do nothing to cancel the other promises. -Meanwhile, even if one of the queries fails, other promises are *not affected* - they independently continue their execution. In our case, the third query throws an error of its own after a bit of time. And that error is never caught. We can see it in the console. +In our case, the second query fails, so `Promise.all` rejects, and the `try...catch` block catches this error.Meanwhile, other promises are *not affected* - they independently continue their execution. In our case, the third query throws an error of its own after a bit of time. And that error is never caught, we can see it in the console. The problem is especially dangerous in server-side environments, such as Node.js, when an uncaught error may cause the process to crash. From f7758353711601d5a17d50ef1676720beff6eaf4 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Mon, 24 Mar 2025 23:55:01 +0100 Subject: [PATCH 64/67] minor fixes --- .../08-async-await/04-promise-all-failure/solution.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/11-async/08-async-await/04-promise-all-failure/solution.md b/1-js/11-async/08-async-await/04-promise-all-failure/solution.md index 21e469c18..b340b0996 100644 --- a/1-js/11-async/08-async-await/04-promise-all-failure/solution.md +++ b/1-js/11-async/08-async-await/04-promise-all-failure/solution.md @@ -7,9 +7,9 @@ The problem is especially dangerous in server-side environments, such as Node.js How to fix it? -A natural solution would be to cancel all unfinished queries when one of them fails. This way we avoid any potential errors. +An ideal solution would be to cancel all unfinished queries when one of them fails. This way we avoid any potential errors. -However, the bad news is that service calls (such as `database.query`) are often implemented by a 3rd-party library which doesn't support cancellation. So there's usually no way to cancel a call. +However, the bad news is that service calls (such as `database.query`) are often implemented by a 3rd-party library which doesn't support cancellation. Then there's no way to cancel a call. Instead we can write our own wrapper function around `Promise.all` which adds a custom `then/catch` handler to each promise to track them: results are gathered and, if an error occurs, all subsequent promises are ignored. From 0760c909d345738de0a6bf322d36337746253c27 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Mon, 24 Mar 2025 23:55:35 +0100 Subject: [PATCH 65/67] minor fixes --- .../08-async-await/04-promise-all-failure/solution.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/11-async/08-async-await/04-promise-all-failure/solution.md b/1-js/11-async/08-async-await/04-promise-all-failure/solution.md index b340b0996..8a114c96c 100644 --- a/1-js/11-async/08-async-await/04-promise-all-failure/solution.md +++ b/1-js/11-async/08-async-await/04-promise-all-failure/solution.md @@ -11,7 +11,7 @@ An ideal solution would be to cancel all unfinished queries when one of them fai However, the bad news is that service calls (such as `database.query`) are often implemented by a 3rd-party library which doesn't support cancellation. Then there's no way to cancel a call. -Instead we can write our own wrapper function around `Promise.all` which adds a custom `then/catch` handler to each promise to track them: results are gathered and, if an error occurs, all subsequent promises are ignored. +As an alternative, we can write our own wrapper function around `Promise.all` which adds a custom `then/catch` handler to each promise to track them: results are gathered and, if an error occurs, all subsequent promises are ignored. ```js function customPromiseAll(promises) { @@ -46,7 +46,7 @@ It may be important that all queries complete, especially if some of them make i So we should wait until all promises are settled before going further with the execution and eventually disconnecting. -Here's one more implementation. It also resolves with the first error, but waits until all promises are settled. +Here's another implementation. It also resolves with the first error, but waits until all promises are settled. ```js function customPromiseAllWait(promises) { From 5dea44151bdd7791380b65d8b8bb60779f2576ca Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Mon, 24 Mar 2025 23:58:32 +0100 Subject: [PATCH 66/67] minor fixes --- .../08-async-await/04-promise-all-failure/solution.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/1-js/11-async/08-async-await/04-promise-all-failure/solution.md b/1-js/11-async/08-async-await/04-promise-all-failure/solution.md index 8a114c96c..5689432d2 100644 --- a/1-js/11-async/08-async-await/04-promise-all-failure/solution.md +++ b/1-js/11-async/08-async-await/04-promise-all-failure/solution.md @@ -46,7 +46,7 @@ It may be important that all queries complete, especially if some of them make i So we should wait until all promises are settled before going further with the execution and eventually disconnecting. -Here's another implementation. It also resolves with the first error, but waits until all promises are settled. +Here's another implementation. It behaves similar to `Promise.all` - also resolves with the first error, but waits until all promises are settled. ```js function customPromiseAllWait(promises) { @@ -82,4 +82,7 @@ function customPromiseAllWait(promises) { Now `await customPromiseAllWait(...)` will stall the execution until all queries are processed. -This is the most reliable approach. +This is a more reliable approach. + +Lastly, if we'd like to know about all the errors, e.g. for logging purposes, we can use `Promise.allSettled`. + From 035c5267ba80fa7b55878f7213cbde449b4092d9 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Tue, 25 Mar 2025 00:02:18 +0100 Subject: [PATCH 67/67] minor fixes --- .../04-promise-all-failure/solution.md | 29 +++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/1-js/11-async/08-async-await/04-promise-all-failure/solution.md b/1-js/11-async/08-async-await/04-promise-all-failure/solution.md index 5689432d2..9fda8e000 100644 --- a/1-js/11-async/08-async-await/04-promise-all-failure/solution.md +++ b/1-js/11-async/08-async-await/04-promise-all-failure/solution.md @@ -82,7 +82,32 @@ function customPromiseAllWait(promises) { Now `await customPromiseAllWait(...)` will stall the execution until all queries are processed. -This is a more reliable approach. +This is a more reliable approach, as it guarantees a predictable execution flow. -Lastly, if we'd like to know about all the errors, e.g. for logging purposes, we can use `Promise.allSettled`. +Lastly, if we'd like to process all errors, we can use either use `Promise.allSettled` or write a wrapper around it to gathers all errors in a single [AggregateError](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AggregateError) object and rejects with it. +```js +// wait for all promises to settle +// return results if no errors +// throw AggregateError with all errors if any +function allOrAggregateError(promises) { + return Promise.allSettled(promises).then(results => { + const errors = []; + const values = []; + + results.forEach((res, i) => { + if (res.status === 'fulfilled') { + values[i] = res.value; + } else { + errors.push(res.reason); + } + }); + + if (errors.length > 0) { + throw new AggregateError(errors, 'One or more promises failed'); + } + + return values; + }); +} +``` pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy